style player area on game screen
This commit is contained in:
Sorrel Bri
sorrelbri
parent
72a533a285
commit
72fb0ae243
4 changed files with 142 additions and 9 deletions
|
|
@ -2,8 +2,7 @@
|
|||
@import '../../../../public/stylesheets/partials/variables';
|
||||
|
||||
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-size: cover;
|
||||
box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,44 @@
|
|||
import React from 'react';
|
||||
import './PlayerArea.scss';
|
||||
|
||||
const PlayerArea = () => {
|
||||
const PlayerArea = (props) => {
|
||||
// const { user } = props
|
||||
const user = {
|
||||
stones: 'black',
|
||||
username: 'Name',
|
||||
captures: 0
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import gamesServices from '../../services/api/gamesServices';
|
|||
import './Game.scss';
|
||||
import Logo from '../../components/Display/Logo/Logo';
|
||||
import Board from '../../components/GameUI/Board/Board';
|
||||
import PlayerArea from '../../components/GameUI/PlayerArea/PlayerArea';
|
||||
|
||||
const Game = (props) => {
|
||||
const { state, dispatch } = props;
|
||||
|
|
@ -56,8 +57,7 @@ const Game = (props) => {
|
|||
</div>
|
||||
|
||||
<div className="Game__board-container">
|
||||
<p>Player Area</p>
|
||||
<ul><li>Bowl</li><li>? Kifu</li><li>Captures</li></ul>
|
||||
<PlayerArea />
|
||||
<Board
|
||||
dispatch={dispatch}
|
||||
game={state.active.game}
|
||||
|
|
@ -65,8 +65,7 @@ const Game = (props) => {
|
|||
user={state.user}
|
||||
board={state.board}
|
||||
/>
|
||||
<p>Player Area</p>
|
||||
<ul><li>Captures</li><li>? Kifu</li><li>Bowl</li></ul>
|
||||
<PlayerArea />
|
||||
</div>
|
||||
|
||||
<div className="Game__message-container">
|
||||
|
|
|
|||
Loading…
Reference in a new issue