stub board on game page

packages/server/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(
         <Point 
           key={`${posX}-${posY}`} 
-          posX
+          posX={posX}
-          posY
+          posY={posY}
+          // point={board[posX][posY]}
           {...props}
         />
       ); i++;
@@ -23,7 +25,7 @@ const Board = (props) => {
   }
 
   return (  
-    <div className="Game__board">
+    <div className={`Game__board ${sizeFlag}`}>
       { game.id ? renderPoints(game.boardSize) : <></> }
     </div>
   );

packages/server/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;
-  }
-}

packages/server/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 (
-    <></>
+    <div className={`board__point ${xFlag()} ${yFlag()}`}>
+
+    </div>
   );
 }
 

packages/server/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%);
+}

packages/server/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 {

packages/server/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;
-  }
 }