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