stub Game components

This commit is contained in:
Sorrel Bri 2020-01-30 00:30:56 -08:00 committed by sorrelbri
parent f37def2688
commit e0830bed5c
17 changed files with 200 additions and 15 deletions

View file

@ -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;

View file

@ -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;
}
}

View file

@ -0,0 +1,12 @@
import React from 'react';
import './GameTree.scss';
const GameTree = () => {
return (
<div className="GameTree">
</div>
);
}
export default GameTree;

View file

@ -0,0 +1,11 @@
import React from 'react';
import './MessageContainer.scss';
const MessageContainer = () => {
return (
<>
</>
);
}
export default MessageContainer;

View file

@ -0,0 +1,11 @@
import React from 'react';
import './PlayerArea.scss';
const PlayerArea = () => {
return (
<>
</>
);
}
export default PlayerArea;

View file

@ -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;

View file

@ -0,0 +1,11 @@
import React from 'react';
import './Timer.scss';
const Timer = () => {
return (
<>
</>
);
}
export default Timer;

View file

@ -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>
); );
} }

View file

@ -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;
}

View file

@ -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) => {