diff --git a/packages/play-node-go/play-node-go/src/components/GameUI/Board/Board.js b/packages/play-node-go/play-node-go/src/components/GameUI/Board/Board.js
index f9036e1..014316b 100644
--- a/packages/play-node-go/play-node-go/src/components/GameUI/Board/Board.js
+++ b/packages/play-node-go/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/packages/play-node-go/play-node-go/src/components/GameUI/Board/Board.scss b/packages/play-node-go/play-node-go/src/components/GameUI/Board/Board.scss
index af43cd6..0bd1033 100644
--- a/packages/play-node-go/play-node-go/src/components/GameUI/Board/Board.scss
+++ b/packages/play-node-go/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/packages/play-node-go/play-node-go/src/components/GameUI/Point/Point.js b/packages/play-node-go/play-node-go/src/components/GameUI/Point/Point.js
index 4120132..b07359b 100644
--- a/packages/play-node-go/play-node-go/src/components/GameUI/Point/Point.js
+++ b/packages/play-node-go/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/packages/play-node-go/play-node-go/src/components/GameUI/Point/Point.scss b/packages/play-node-go/play-node-go/src/components/GameUI/Point/Point.scss
index e69de29..02ba919 100644
--- a/packages/play-node-go/play-node-go/src/components/GameUI/Point/Point.scss
+++ b/packages/play-node-go/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/packages/play-node-go/play-node-go/src/pages/Game/Game.scss b/packages/play-node-go/play-node-go/src/pages/Game/Game.scss
index d90cac6..612ad61 100644
--- a/packages/play-node-go/play-node-go/src/pages/Game/Game.scss
+++ b/packages/play-node-go/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/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss b/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss
index 807f518..6dbe9e0 100644
--- a/packages/play-node-go/play-node-go/src/pages/Layout/MainWrapper/MainWrapper.scss
+++ b/packages/play-node-go/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