style player area on game screen

This commit is contained in:
Sorrel Bri 2020-02-01 20:48:26 -08:00 committed by sorrelbri
parent ca98733365
commit eb5df6069c
4 changed files with 142 additions and 9 deletions

View file

@ -2,8 +2,7 @@
@import '../../../../public/stylesheets/partials/variables'; @import '../../../../public/stylesheets/partials/variables';
div.Game__board { div.Game__board {
@include fullspan; // @include fullspan;
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: 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;
box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5); box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);

View file

@ -1,10 +1,44 @@
import React from 'react'; import React from 'react';
import './PlayerArea.scss'; import './PlayerArea.scss';
const PlayerArea = () => { const PlayerArea = (props) => {
// const { user } = props
const user = {
stones: 'black',
username: 'Name',
captures: 0
}
return ( return (
<> <div
</> className={`player-container player-container--${user.stones}`}
>
<div
className={`player-container__bowl player-container__bowl--${user.stones}`}
>
<p>Pass?</p>
</div>
<div
className={`player-container__name-space player-container__name-space--${user.stones}`}
>
<h4>{user ? user.username : 'Waiting for player' }</h4>
<div
className={`player-container__caps-space player-container__caps-space__${user.stones}`}
>
<p
className={`player-container__resign-message player-container__resign-message--${user.stones}`}
>Resign?</p>
<p
className={`player-container__caps-counter player-container__caps-counter--${user.stones}`}
>{user ? user.captures : 'Captures go here'}</p>
</div>
</div>
</div>
); );
} }

View file

@ -0,0 +1,101 @@
@import '../../../../public/stylesheets/partials/variables';
div.player-container {
display: flex;
align-items: flex-end;
justify-content: space-around;
flex: 5;
height: 9vmin;
width: 100%;
&:last-child {
align-items: flex-start;
flex-direction: row-reverse;
justify-self: flex-end;
}
@media #{map-get($break-points, "500")} {
height: 14vh;
}
div.player-container__bowl {
order: -1;
margin: 4vh;
height: 15vh;
width: 15vh;
border-radius: 50%;
background-color: rgb(116, 48, 17);
background: radial-gradient(farthest-corner at 48% 54%, rgba(30, 5, 0, 0.25) 0%, rgba(30, 5, 0, 0.45) 2%, rgba(30, 5, 0, 0.75) 32%, rgba(0,0,0,0.85)35%, rgb(116,48,17) 48%, rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%, rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%);
box-shadow: -1vmin 2vmin 1.5vmin rgba(83, 53, 35, 0.61);
display: flex;
align-items: center;
justify-content: center;
@media #{map-get($break-points, "570")} {
margin: 3vh;
height: 10vh;
width: 10vh;
}
&[data-turn]:hover p {
display: block;
color: #FFF;
background-color: rgba(0,0,0,0.3);
padding: .5em;
cursor: grab;
}
&[data-turn] {
box-shadow: 0 0 3vh 3vh rgb(255, 175, 2);
& + .player-container__name-space .player-container__caps-space:hover :first-child {
display: block;
position: absolute;
background-color: rgba(0,0,0,0.7);
padding: .5em;
cursor: grab;
}
}
p {
display: none;
}
}
}
div.player-container__caps-space {
color: #FFF;
margin: 1vh;
height: 10vh;
width: 10vh;
border-radius: 50%;
background: radial-gradient(farthest-side at 49% 52%, rgb(150, 75, 50) 0%, rgb(116,48,17) 35%, rgb(116,48,17) 64%, rgb(80, 20, 0) 65%, rgb(175, 140, 95) 70%, rgb(120, 50, 40) 80%, rgb(80, 20, 0) 95%, rgb(175, 140, 95) 100%);
box-shadow: -0.5vmin 1vmin 1vmin rgba(83, 53, 35, 0.61);
display: flex;
align-items: center;
justify-content: center;
@media #{map-get($break-points, "570")} {
margin: 2vh;
height: 7vh;
width: 7vh;
}
& :first-child {
display: none;
}
}
div.player-container__name-space {
order: 1;
display: flex;
flex-direction: column;
align-items: center;
h4 {
font-size: 120%;
color: rgb(255,240,230);
background-color: rgba(0,0,0,0.7);
padding: 0.25em;
z-index: 1;
}
}

View file

@ -6,6 +6,7 @@ import gamesServices from '../../services/api/gamesServices';
import './Game.scss'; import './Game.scss';
import Logo from '../../components/Display/Logo/Logo'; import Logo from '../../components/Display/Logo/Logo';
import Board from '../../components/GameUI/Board/Board'; import Board from '../../components/GameUI/Board/Board';
import PlayerArea from '../../components/GameUI/PlayerArea/PlayerArea';
const Game = (props) => { const Game = (props) => {
const { state, dispatch } = props; const { state, dispatch } = props;
@ -56,8 +57,7 @@ const Game = (props) => {
</div> </div>
<div className="Game__board-container"> <div className="Game__board-container">
<p>Player Area</p> <PlayerArea />
<ul><li>Bowl</li><li>? Kifu</li><li>Captures</li></ul>
<Board <Board
dispatch={dispatch} dispatch={dispatch}
game={state.active.game} game={state.active.game}
@ -65,8 +65,7 @@ const Game = (props) => {
user={state.user} user={state.user}
board={state.board} board={state.board}
/> />
<p>Player Area</p> <PlayerArea />
<ul><li>Captures</li><li>? Kifu</li><li>Bowl</li></ul>
</div> </div>
<div className="Game__message-container"> <div className="Game__message-container">