From 4fa8b70a906db48c2ae927c1f6c3bc4c47874624 Mon Sep 17 00:00:00 2001
From: Julian Vianna <julianvianna@Julians-MacBook-Pro.local>
Date: Tue, 22 Jan 2019 22:03:34 -0200
Subject: [PATCH] win line added and css adjustments

---
 src/GameGrid/GameGrid.jsx         |  5 +++-
 src/GameGrid/GameGrid.scss        | 15 +++++++++-
 src/GameGrid/Tiles/Tiles.jsx      |  2 +-
 src/GameGrid/Tiles/Tiles.scss     | 10 ++++++-
 src/GameGrid/WinLine/WinLine.jsx  |  3 +-
 src/GameGrid/WinLine/WinLine.scss | 49 +++++++++++++++++++++++++++++++
 6 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 src/GameGrid/WinLine/WinLine.scss

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