stub Game components
This commit is contained in:
parent
f37def2688
commit
e0830bed5c
17 changed files with 200 additions and 15 deletions
|
@ -0,0 +1,32 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Board.scss';
|
||||||
|
import Point from '../Point/Point';
|
||||||
|
|
||||||
|
const Board = (props) => {
|
||||||
|
const { game, record, user, dispatch } = props;
|
||||||
|
|
||||||
|
const renderPoints = boardSize => {
|
||||||
|
let i = 0, boardPoints = [];
|
||||||
|
while (i < boardSize * boardSize) {
|
||||||
|
const posX = Math.floor(i/boardSize) + 1;
|
||||||
|
const posY = i % boardSize + 1;
|
||||||
|
boardPoints.push(
|
||||||
|
<Point
|
||||||
|
key={`${posX}-${posY}`}
|
||||||
|
posX
|
||||||
|
posY
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
); i++;
|
||||||
|
}
|
||||||
|
return boardPoints;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="Game__board">
|
||||||
|
{ game.id ? renderPoints(game.boardSize) : <></> }
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Board;
|
|
@ -0,0 +1,70 @@
|
||||||
|
@import '../../../../public/stylesheets/partials/mixins';
|
||||||
|
@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-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;
|
||||||
|
|
||||||
|
&__size__9 {
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
|
grid-template-rows: repeat(9, 1fr);
|
||||||
|
|
||||||
|
div.board__point {
|
||||||
|
width: 9vmin;
|
||||||
|
height: 9vmin;
|
||||||
|
|
||||||
|
@media #{map-get($break-points, "570")} {
|
||||||
|
height: 7.5vh;
|
||||||
|
width: 7.5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__size__13 {
|
||||||
|
grid-template-columns: repeat(13, 1fr);
|
||||||
|
grid-template-rows: repeat(13, 1fr);
|
||||||
|
|
||||||
|
div.board__point {
|
||||||
|
width: 7vmin;
|
||||||
|
height: 7vmin;
|
||||||
|
|
||||||
|
@media #{map-get($break-points, "570")} {
|
||||||
|
height: 5vh;
|
||||||
|
width: 5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__size__19 {
|
||||||
|
grid-template-columns: repeat(19, 1fr);
|
||||||
|
grid-template-rows: repeat(19, 1fr);
|
||||||
|
|
||||||
|
div.board__point {
|
||||||
|
width: 5vmin;
|
||||||
|
height: 5vmin;
|
||||||
|
|
||||||
|
@media #{map-get($break-points, "590")} {
|
||||||
|
height: 3.5vh;
|
||||||
|
width: 3.5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './GameTree.scss';
|
||||||
|
|
||||||
|
const GameTree = () => {
|
||||||
|
return (
|
||||||
|
<div className="GameTree">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GameTree;
|
|
@ -0,0 +1,11 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './MessageContainer.scss';
|
||||||
|
|
||||||
|
const MessageContainer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MessageContainer;
|
|
@ -0,0 +1,11 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './PlayerArea.scss';
|
||||||
|
|
||||||
|
const PlayerArea = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PlayerArea;
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Point.scss';
|
||||||
|
|
||||||
|
const Point = (props) => {
|
||||||
|
const { posX, posY, user, game, record } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<></>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Point;
|
|
@ -0,0 +1,11 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Timer.scss';
|
||||||
|
|
||||||
|
const Timer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Timer;
|
|
@ -4,8 +4,8 @@ import socketIOClient from 'socket.io-client';
|
||||||
import config from '../../config';
|
import config from '../../config';
|
||||||
import gamesServices from '../../services/api/gamesServices';
|
import gamesServices from '../../services/api/gamesServices';
|
||||||
import './Game.scss';
|
import './Game.scss';
|
||||||
|
import Logo from '../../components/Display/Logo/Logo';
|
||||||
import Development from '../../components/Display/Development/Development';
|
import Board from '../../components/GameUI/Board/Board';
|
||||||
|
|
||||||
const Game = (props) => {
|
const Game = (props) => {
|
||||||
const { state, dispatch } = props;
|
const { state, dispatch } = props;
|
||||||
|
@ -27,8 +27,6 @@ const Game = (props) => {
|
||||||
fetchGameAPI();
|
fetchGameAPI();
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// ! [start] gameSocket
|
|
||||||
|
|
||||||
const roomSocketConnect = () => {
|
const roomSocketConnect = () => {
|
||||||
const game = state.active.game;
|
const game = state.active.game;
|
||||||
const user = state.user;
|
const user = state.user;
|
||||||
|
@ -44,21 +42,37 @@ const Game = (props) => {
|
||||||
roomSocketConnect();
|
roomSocketConnect();
|
||||||
}, [state.active] )
|
}, [state.active] )
|
||||||
|
|
||||||
// ! [end]
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="Game"
|
className="Game"
|
||||||
data-testid="Game"
|
data-testid="Game"
|
||||||
>
|
>
|
||||||
<p>Game</p>
|
<div className="Game__meta-container">
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className="Game__socket-flag"
|
className="Game__socket-flag"
|
||||||
>{state.socket ? '✓' : ' ⃠'}</span>
|
>{state.socket ? '✓' : ' ⃠'}</span>
|
||||||
|
<Logo />
|
||||||
|
<p>Timer</p>
|
||||||
|
<p>? Game Tree</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Development />
|
<div className="Game__board-container">
|
||||||
|
<p>Player Area</p>
|
||||||
|
<ul><li>Bowl</li><li>? Kifu</li><li>Captures</li></ul>
|
||||||
|
<Board
|
||||||
|
dispatch
|
||||||
|
game={state.active.game}
|
||||||
|
record={state.active.record}
|
||||||
|
user={state.user}
|
||||||
|
/>
|
||||||
|
<p>Player Area</p>
|
||||||
|
<ul><li>Captures</li><li>? Kifu</li><li>Bowl</li></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="Game__message-container">
|
||||||
|
<p>Messages</p>
|
||||||
|
<p>Message Form</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
div.Game {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.Game__board-container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
max-width: 50vw;
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import './NavBar.scss';
|
import './NavBar.scss';
|
||||||
import Logo from '../../../components/Button/Logo/Logo';
|
import Logo from '../../../components/Display/Logo/Logo';
|
||||||
|
|
||||||
const NavBar = (props) => {
|
const NavBar = (props) => {
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue