stub Game components
This commit is contained in:
parent
3ecb5889c1
commit
9a20746b78
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 gamesServices from '../../services/api/gamesServices';
|
||||
import './Game.scss';
|
||||
|
||||
import Development from '../../components/Display/Development/Development';
|
||||
import Logo from '../../components/Display/Logo/Logo';
|
||||
import Board from '../../components/GameUI/Board/Board';
|
||||
|
||||
const Game = (props) => {
|
||||
const { state, dispatch } = props;
|
||||
|
@ -27,8 +27,6 @@ const Game = (props) => {
|
|||
fetchGameAPI();
|
||||
}, [])
|
||||
|
||||
// ! [start] gameSocket
|
||||
|
||||
const roomSocketConnect = () => {
|
||||
const game = state.active.game;
|
||||
const user = state.user;
|
||||
|
@ -44,21 +42,37 @@ const Game = (props) => {
|
|||
roomSocketConnect();
|
||||
}, [state.active] )
|
||||
|
||||
// ! [end]
|
||||
|
||||
return (
|
||||
<div
|
||||
className="Game"
|
||||
data-testid="Game"
|
||||
>
|
||||
<p>Game</p>
|
||||
|
||||
<span
|
||||
className="Game__socket-flag"
|
||||
>{state.socket ? '✓' : ' ⃠'}</span>
|
||||
|
||||
<Development />
|
||||
|
||||
<div className="Game__meta-container">
|
||||
<span
|
||||
className="Game__socket-flag"
|
||||
>{state.socket ? '✓' : ' ⃠'}</span>
|
||||
<Logo />
|
||||
<p>Timer</p>
|
||||
<p>? Game Tree</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 { Link } from 'react-router-dom';
|
||||
import './NavBar.scss';
|
||||
import Logo from '../../../components/Button/Logo/Logo';
|
||||
import Logo from '../../../components/Display/Logo/Logo';
|
||||
|
||||
const NavBar = (props) => {
|
||||
|
||||
|
|
Loading…
Reference in a new issue