diff --git a/play-node-go/src/components/GameUI/Board/Board.js b/play-node-go/src/components/GameUI/Board/Board.js index f9036e1..014316b 100644 --- a/play-node-go/src/components/GameUI/Board/Board.js +++ b/play-node-go/src/components/GameUI/Board/Board.js @@ -3,7 +3,8 @@ import './Board.scss'; import Point from '../Point/Point'; const Board = (props) => { - const { game, record, user, dispatch } = props; + const { game, record, user, dispatch, board } = props; + const sizeFlag = `Game__board--size-${ game.boardSize }` const renderPoints = boardSize => { let i = 0, boardPoints = []; @@ -13,8 +14,9 @@ const Board = (props) => { boardPoints.push( ); i++; @@ -23,7 +25,7 @@ const Board = (props) => { } return ( -
+
{ game.id ? renderPoints(game.boardSize) : <> }
); diff --git a/play-node-go/src/components/GameUI/Board/Board.scss b/play-node-go/src/components/GameUI/Board/Board.scss index af43cd6..0bd1033 100644 --- a/play-node-go/src/components/GameUI/Board/Board.scss +++ b/play-node-go/src/components/GameUI/Board/Board.scss @@ -2,19 +2,17 @@ @import '../../../../public/stylesheets/partials/variables'; div.Game__board { - display: grid; @include fullspan; - - background: radial-gradient(farthest-corner at 55% 40%, rgba(244, 230, 120, 0.75) 0%, rgba(234, 178, 78, 0.5) 65%, rgba(200, 160, 90, 0.45) 90%, rgba(200, 140, 90, 0.45) 100%); + + background: radial-gradient(farthest-corner at 55% 40%, rgb(244, 230, 120) 0%, rgb(234, 178, 78) 65%, rgb(200, 160, 90) 90%, rgb(200, 140, 90) 100%); background-size: cover; - - margin: 0 auto; - // background-image: url(../images/board.png); - z-index: 1; box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5); - flex: 1; + display: grid; + // flex: 1; + margin: 0 auto; + z-index: 1; - &__size__9 { + &--size-9 { grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); @@ -29,7 +27,7 @@ div.Game__board { } } - &__size__13 { + &--size-13 { grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(13, 1fr); @@ -44,7 +42,7 @@ div.Game__board { } } - &__size__19 { + &--size-19 { grid-template-columns: repeat(19, 1fr); grid-template-rows: repeat(19, 1fr); @@ -59,12 +57,4 @@ div.Game__board { } } - div.board__point { - background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); - border-radius: 50% solid black; - color: black; - margin: auto; - padding: 0; - vertical-align: middle; - } -} +} \ No newline at end of file diff --git a/play-node-go/src/components/GameUI/Point/Point.js b/play-node-go/src/components/GameUI/Point/Point.js index 4120132..b07359b 100644 --- a/play-node-go/src/components/GameUI/Point/Point.js +++ b/play-node-go/src/components/GameUI/Point/Point.js @@ -3,9 +3,21 @@ import './Point.scss'; const Point = (props) => { const { posX, posY, user, game, record } = props; + const xFlag = () => { + if ( posX === 1 ) return `board__point--top` + if ( posX === game.boardSize ) return `board__point--bottom` + return ''; + } + const yFlag = () => { + if ( posY === 1 ) return `board__point--left` + if ( posY === game.boardSize ) return `board__point--right` + return ''; + } return ( - <> +
+ +
); } diff --git a/play-node-go/src/components/GameUI/Point/Point.scss b/play-node-go/src/components/GameUI/Point/Point.scss index e69de29..02ba919 100644 --- a/play-node-go/src/components/GameUI/Point/Point.scss +++ b/play-node-go/src/components/GameUI/Point/Point.scss @@ -0,0 +1,40 @@ +div.board__point { + background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); + border-radius: 50% solid black; + color: black; + margin: auto; + padding: 0; + vertical-align: middle; +} + +div.board__point--top { + background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%); +} + +div.board__point--bottom { + background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); +} + +div.board__point--left { + background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 99%, #000 100%); +} + +div.board__point--right { + background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); +} + +div.board__point--top.board__point--left { + background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%); +} + +div.board__point--top.board__point--right { + background: conic-gradient( rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76% ); +} + +div.board__point--bottom.board__point--left { + background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 99%, #000 100%); +} + +div.board__point--bottom.board__point--right { + background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); +} \ No newline at end of file diff --git a/play-node-go/src/pages/Game/Game.scss b/play-node-go/src/pages/Game/Game.scss index d90cac6..612ad61 100644 --- a/play-node-go/src/pages/Game/Game.scss +++ b/play-node-go/src/pages/Game/Game.scss @@ -1,6 +1,12 @@ div.Game { display: grid; grid-template-columns: 1fr 2fr 1fr; + height: 100%; + width: 100%; + background: radial-gradient( + farthest-corner at 55% 40%, + rgb(150, 200, 220) 0%, rgb(97, 166, 194) 65%, rgb(70,100,120) 90%, rgb(40, 80, 90) 100% + ); } div.Game__board-container { diff --git a/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss b/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss index 807f518..6dbe9e0 100644 --- a/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss +++ b/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss @@ -33,19 +33,4 @@ div.main-wrapper { height: 100%; } } -} - -div.Game { - display: flex; - justify-content: space-between; - @include fullspan; - aside { - @include flexAround(column); - flex-grow: 1; - } - - div.game-area { - @include flexAround(column); - flex-grow: 2; - } } \ No newline at end of file