diff --git a/src/GameGrid/GameGrid.jsx b/src/GameGrid/GameGrid.jsx
index bfa8f0d..16a3587 100644
--- a/src/GameGrid/GameGrid.jsx
+++ b/src/GameGrid/GameGrid.jsx
@@ -28,6 +28,7 @@ class GameGrid extends Component {
board[i + 1] == board[i + 2]
) {
this.setState({
+ isWinLineHidden: false,
winLinePos: "r" + i
}, () => {
console.log(board[i] + " " + this.state.winLinePos + " -won horizontaly");
@@ -43,6 +44,7 @@ class GameGrid extends Component {
board[i + 3] == board[i + 6]
) {
this.setState({
+ isWinLineHidden: false,
winLinePos: "c" + i
}, () => {
console.log(board[i] + " " + this.state.winLinePos + " -won vertically");
@@ -58,6 +60,7 @@ class GameGrid extends Component {
board[i + j] === board[i + 2 * j]
) {
this.setState({
+ isWinLineHidden: false,
winLinePos: "d" + i
}, () => {
console.log(board[i] + " " + this.state.winLinePos + "-won diagonaly");
@@ -135,7 +138,7 @@ class GameGrid extends Component {
return (
- {!this.state.isWinLineHidden &&
}
+ {!this.state.isWinLineHidden && }
{this.state.gameboard.map((i, index) => {
return this.tileBlock(index);
})}
diff --git a/src/GameGrid/GameGrid.scss b/src/GameGrid/GameGrid.scss
index 76e349a..99deab3 100644
--- a/src/GameGrid/GameGrid.scss
+++ b/src/GameGrid/GameGrid.scss
@@ -1,5 +1,17 @@
.container {
- width: 70%;
+
+ @media (min-width: 1000px) {
+ width: 800px;
+ }
+
+ @media (max-width: 999px) and (min-width: 550px) {
+ width: 500px;
+ }
+
+ @media (max-width: 549px) {
+ width: 90%;
+ }
+
margin: 0 auto;
min-height: 200px;
}
@@ -8,4 +20,5 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ position: relative;
}
\ No newline at end of file
diff --git a/src/GameGrid/Tiles/Tiles.jsx b/src/GameGrid/Tiles/Tiles.jsx
index a75ce61..3716c56 100644
--- a/src/GameGrid/Tiles/Tiles.jsx
+++ b/src/GameGrid/Tiles/Tiles.jsx
@@ -14,7 +14,7 @@ class Tiles extends Component {
render() {
return (
);
}
diff --git a/src/GameGrid/Tiles/Tiles.scss b/src/GameGrid/Tiles/Tiles.scss
index 2f316a6..ca6cbb1 100644
--- a/src/GameGrid/Tiles/Tiles.scss
+++ b/src/GameGrid/Tiles/Tiles.scss
@@ -1,10 +1,18 @@
.tiles-bts {
display: block;
+ position: relative;
width: calc(33.3% - 12px);
- height: 25vh;
+ height: 0;
border: solid 1px #000000;
padding: 4px;
+ padding-bottom: 28%;
margin: 6px;
background: #ffffffd9;
font-size: 5rem;
+
+ .tile-value {
+ position: absolute;
+ left: calc(50% - 25px);
+ top: calc(50% - 46px);
+ }
}
\ No newline at end of file
diff --git a/src/GameGrid/WinLine/WinLine.jsx b/src/GameGrid/WinLine/WinLine.jsx
index 1d816db..fcf76b6 100644
--- a/src/GameGrid/WinLine/WinLine.jsx
+++ b/src/GameGrid/WinLine/WinLine.jsx
@@ -1,4 +1,5 @@
import React, { Component } from "react";
+import "./WinLine.scss";
class WinLine extends Component {
constructor(props) {
@@ -7,7 +8,7 @@ class WinLine extends Component {
render() {
return (
- Hello, World!
+
);
}
}
diff --git a/src/GameGrid/WinLine/WinLine.scss b/src/GameGrid/WinLine/WinLine.scss
new file mode 100644
index 0000000..d3c5315
--- /dev/null
+++ b/src/GameGrid/WinLine/WinLine.scss
@@ -0,0 +1,49 @@
+.line {
+ position: absolute;
+ width: 4px;
+ height: 100%;
+ background: rgb(45, 171, 102);
+ z-index: 999;
+ box-shadow: 0px 0px 10px 1px #000;
+
+ &.c0 {
+ left: 17.4%;
+ }
+
+ &.c1 {
+ left: 50%;
+ }
+
+ &.c2 {
+ left: 84%;
+ }
+
+ &[class*="r"] {
+ transform: rotate(90deg);
+ left: 50%;
+ }
+
+ &.r0 {
+ top: -34%;
+ }
+
+ &.r3 {
+ top: 0%;
+ }
+
+ &.r6 {
+ top: 33%;
+ }
+
+ &[class*="d"] {
+ left: 50%;
+ }
+
+ &.d0 {
+ transform: rotate(-46deg);
+ }
+
+ &.d2 {
+ transform: rotate(46deg)
+ }
+}
\ No newline at end of file