win line added and css adjustments

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 (
       <div className="container">
         <div className="grid">
-          {!this.state.isWinLineHidden && <WinLine position={this.state.winLinePos} isHidden={this.state.isWinLineHidden}/>}
+          {!this.state.isWinLineHidden && <WinLine position={this.state.winLinePos}/>}
           {this.state.gameboard.map((i, index) => {
             return this.tileBlock(index);
           })}

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;
 }

src/GameGrid/Tiles/Tiles.jsx

@@ -14,7 +14,7 @@ class Tiles extends Component {
   render() {
     return (
       <button className="tiles-bts" onClick={this.handleClick}>
-        {this.props.value}
+        <div className="tile-value">{this.props.value}</div>
       </button>
     );
   }

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);
+    }
 }

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 (
-        <div className={"modal " + this.props.isHidden}>Hello, World!</div>
+        <div className={"line " + this.props.position}></div>
     );
   }
 }

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)
+    }
+}