stub board on game page
This commit is contained in:
parent
5ef4d390ff
commit
3f283b47d8
6 changed files with 75 additions and 40 deletions
|
@ -3,7 +3,8 @@ import './Board.scss';
|
||||||
import Point from '../Point/Point';
|
import Point from '../Point/Point';
|
||||||
|
|
||||||
const Board = (props) => {
|
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 => {
|
const renderPoints = boardSize => {
|
||||||
let i = 0, boardPoints = [];
|
let i = 0, boardPoints = [];
|
||||||
|
@ -13,8 +14,9 @@ const Board = (props) => {
|
||||||
boardPoints.push(
|
boardPoints.push(
|
||||||
<Point
|
<Point
|
||||||
key={`${posX}-${posY}`}
|
key={`${posX}-${posY}`}
|
||||||
posX
|
posX={posX}
|
||||||
posY
|
posY={posY}
|
||||||
|
// point={board[posX][posY]}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
); i++;
|
); i++;
|
||||||
|
@ -23,7 +25,7 @@ const Board = (props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Game__board">
|
<div className={`Game__board ${sizeFlag}`}>
|
||||||
{ game.id ? renderPoints(game.boardSize) : <></> }
|
{ game.id ? renderPoints(game.boardSize) : <></> }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -2,19 +2,17 @@
|
||||||
@import '../../../../public/stylesheets/partials/variables';
|
@import '../../../../public/stylesheets/partials/variables';
|
||||||
|
|
||||||
div.Game__board {
|
div.Game__board {
|
||||||
display: grid;
|
|
||||||
@include fullspan;
|
@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;
|
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);
|
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-columns: repeat(9, 1fr);
|
||||||
grid-template-rows: 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-columns: repeat(13, 1fr);
|
||||||
grid-template-rows: 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-columns: repeat(19, 1fr);
|
||||||
grid-template-rows: 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;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -3,9 +3,21 @@ import './Point.scss';
|
||||||
|
|
||||||
const Point = (props) => {
|
const Point = (props) => {
|
||||||
const { posX, posY, user, game, record } = 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 (
|
return (
|
||||||
<></>
|
<div className={`board__point ${xFlag()} ${yFlag()}`}>
|
||||||
|
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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%);
|
||||||
|
}
|
|
@ -1,6 +1,12 @@
|
||||||
div.Game {
|
div.Game {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 2fr 1fr;
|
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 {
|
div.Game__board-container {
|
||||||
|
|
|
@ -33,19 +33,4 @@ div.main-wrapper {
|
||||||
height: 100%;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
Loading…
Reference in a new issue