stub nav form styles and fix board span bug
This commit is contained in:
parent
08e76b33d0
commit
3943d08ab6
14 changed files with 163 additions and 70 deletions
|
@ -3,9 +3,15 @@ import './Library.scss';
|
||||||
|
|
||||||
const LibraryButton = () => {
|
const LibraryButton = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
|
className="nav__section"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="nav__section__label"
|
||||||
|
>
|
||||||
Library
|
Library
|
||||||
</>
|
</p>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,15 @@ import './NewGame.scss';
|
||||||
|
|
||||||
const NewGameButton = () => {
|
const NewGameButton = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
|
className="nav__section"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="nav__section__label"
|
||||||
|
>
|
||||||
New Game
|
New Game
|
||||||
</>
|
</p>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,15 @@ import './NewRoom.scss';
|
||||||
|
|
||||||
const NewRoomButton = () => {
|
const NewRoomButton = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
|
className="nav__section"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="nav__section__label"
|
||||||
|
>
|
||||||
New Room
|
New Room
|
||||||
</>
|
</p>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,15 @@ import './RoomArchive.scss';
|
||||||
|
|
||||||
const RoomArchiveButton = () => {
|
const RoomArchiveButton = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
|
className="nav__section"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="nav__section__label"
|
||||||
|
>
|
||||||
Room Archive
|
Room Archive
|
||||||
</>
|
</p>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,9 @@ div.Loading {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
height: 6vw;
|
height: 6vw;
|
||||||
|
left: 47vw;
|
||||||
|
position: absolute;
|
||||||
|
top: 45vh;
|
||||||
width: 6vw;
|
width: 6vw;
|
||||||
|
|
||||||
div.point {
|
div.point {
|
||||||
|
|
|
@ -9,25 +9,35 @@ const Auth = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<p
|
<div
|
||||||
className="auth-label"
|
className="nav__section nav__section--auth"
|
||||||
onClick={()=>{setShowForm('login')}}
|
onClick={()=>{setShowForm('login')}}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="nav__section__label"
|
||||||
>Login</p>
|
>Login</p>
|
||||||
|
|
||||||
{
|
{
|
||||||
showForm === 'login'
|
showForm === 'login'
|
||||||
? <Login dispatch={dispatch} state={state}/>
|
? <Login dispatch={dispatch} state={state}/>
|
||||||
: <></>
|
: <></>
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
<p
|
<div
|
||||||
className="auth-label"
|
className="nav__section nav__section--auth"
|
||||||
onClick={()=>{setShowForm('signup')}}
|
onClick={()=>{setShowForm('signup')}}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="nav__section__label"
|
||||||
>Signup</p>
|
>Signup</p>
|
||||||
|
|
||||||
{
|
{
|
||||||
showForm === 'signup'
|
showForm === 'signup'
|
||||||
? <Signup dispatch={dispatch} state={state}/>
|
? <Signup dispatch={dispatch} state={state}/>
|
||||||
: <></>
|
: <></>
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,9 +3,15 @@ import './FindGame.scss';
|
||||||
|
|
||||||
const FindGameForm = () => {
|
const FindGameForm = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
|
className="nav__section"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="nav__section__label"
|
||||||
|
>
|
||||||
Find Game
|
Find Game
|
||||||
</>
|
</p>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,15 @@ import './FindRoom.scss';
|
||||||
|
|
||||||
const FindRoomForm = () => {
|
const FindRoomForm = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
|
className="nav__section"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="nav__section__label"
|
||||||
|
>
|
||||||
Find Room
|
Find Room
|
||||||
</>
|
</p>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -50,8 +50,10 @@ div.Game__board {
|
||||||
height: 5vmin;
|
height: 5vmin;
|
||||||
|
|
||||||
@media #{map-get($break-points, "590")} {
|
@media #{map-get($break-points, "590")} {
|
||||||
height: 3.5vh;
|
height: 2.6vw;
|
||||||
width: 3.5vh;
|
width: 2.6vw;
|
||||||
|
max-width: 3.5vh;
|
||||||
|
max-height: 3.5vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,11 +2,12 @@
|
||||||
@import '../../../../public/stylesheets/partials/mixins';
|
@import '../../../../public/stylesheets/partials/mixins';
|
||||||
|
|
||||||
div.player-container {
|
div.player-container {
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: space-around;
|
display: flex;
|
||||||
flex: 5;
|
flex: 5;
|
||||||
height: 9vmin;
|
height: 9vmin;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 1em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
@ -20,40 +21,40 @@ div.player-container {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.player-container__bowl {
|
div.player-container__bowl {
|
||||||
order: -1;
|
align-items: center;
|
||||||
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%);
|
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%);
|
||||||
|
background-color: rgb(116, 48, 17);
|
||||||
|
border-radius: 50%;
|
||||||
box-shadow: -1vmin 2vmin 1.5vmin rgba(83, 53, 35, 0.61);
|
box-shadow: -1vmin 2vmin 1.5vmin rgba(83, 53, 35, 0.61);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
height: 15vh;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin: 4vh;
|
||||||
|
order: -1;
|
||||||
|
width: 15vh;
|
||||||
|
|
||||||
@media #{map-get($break-points, "570")} {
|
@media #{map-get($break-points, "570")} {
|
||||||
margin: 3vh;
|
|
||||||
height: 10vh;
|
height: 10vh;
|
||||||
|
margin: 3vh;
|
||||||
width: 10vh;
|
width: 10vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-turn]:hover p {
|
&[data-turn]:hover p {
|
||||||
display: block;
|
|
||||||
color: #FFF;
|
|
||||||
background-color: rgba(0,0,0,0.3);
|
background-color: rgba(0,0,0,0.3);
|
||||||
padding: .5em;
|
color: #FFF;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
|
display: block;
|
||||||
|
padding: .5em;
|
||||||
}
|
}
|
||||||
&[data-turn] {
|
&[data-turn] {
|
||||||
box-shadow: 0 0 3vh 3vh rgb(255, 175, 2);
|
box-shadow: 0 0 3vh 3vh rgb(255, 175, 2);
|
||||||
|
|
||||||
& + .player-container__name-space .player-container__caps-space:hover :first-child {
|
& + .player-container__name-space .player-container__caps-space:hover :first-child {
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
background-color: rgba(0,0,0,0.7);
|
background-color: rgba(0,0,0,0.7);
|
||||||
padding: .5em;
|
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
|
display: block;
|
||||||
|
padding: .5em;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,20 +65,20 @@ div.player-container {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.player-container__caps-space {
|
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;
|
align-items: center;
|
||||||
|
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%);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: -0.5vmin 1vmin 1vmin rgba(83, 53, 35, 0.61);
|
||||||
|
color: #FFF;
|
||||||
|
display: flex;
|
||||||
|
height: 10vh;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin: 1vh;
|
||||||
|
width: 10vh;
|
||||||
|
|
||||||
@media #{map-get($break-points, "570")} {
|
@media #{map-get($break-points, "570")} {
|
||||||
margin: 2vh;
|
|
||||||
height: 7vh;
|
height: 7vh;
|
||||||
|
margin: 2vh;
|
||||||
width: 7vh;
|
width: 7vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -87,10 +88,10 @@ div.player-container__caps-space {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.player-container__name-space {
|
div.player-container__name-space {
|
||||||
order: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
display: flex;
|
||||||
|
order: 1;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
@include gameViewLabel;
|
@include gameViewLabel;
|
||||||
|
|
|
@ -1,5 +1,41 @@
|
||||||
@import '../../../../public/stylesheets/partials/variables';
|
@import '../../../../public/stylesheets/partials/variables';
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
color: map-get($colors, "sidebar_link")
|
color: map-get($colors, "sidebar_link");
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
align-items: stretch;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 130%;
|
||||||
|
margin: .2em auto;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: block;
|
||||||
|
margin: .2em 0 .2em auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.nav__section {
|
||||||
|
border: rgba(100,100,100,0.5) solid .25em;
|
||||||
|
margin: .5em;
|
||||||
|
padding: .75em .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.nav__section__label {
|
||||||
|
font-size: 110%;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -81,8 +81,6 @@ const Room = (props) => {
|
||||||
<div className="Room" data-testid="Room">
|
<div className="Room" data-testid="Room">
|
||||||
|
|
||||||
<div className="Room__heading">
|
<div className="Room__heading">
|
||||||
<h2 className="heading--two">{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
|
|
||||||
{/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
|
|
||||||
{state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
|
{state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -11,12 +11,18 @@ div.Room {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
h2 {
|
div.Room__heading {
|
||||||
justify-self:stretch;
|
align-self: center;
|
||||||
align-self: flex-start;
|
height: 100%;
|
||||||
width: 100%;
|
position: sticky;
|
||||||
max-height: 5vh;
|
top: 1em;
|
||||||
|
z-index: 3;
|
||||||
|
|
||||||
|
span.error--action {
|
||||||
|
padding: 1em;
|
||||||
|
background-color: map-get($colors, "error");
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div.Room__game-container {
|
div.Room__game-container {
|
||||||
|
|
|
@ -19,6 +19,7 @@ const RoomSidebar = props => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav>
|
<nav>
|
||||||
|
<h3>{ state.currentRoom.name }</h3>
|
||||||
{showAuth()}
|
{showAuth()}
|
||||||
<FindGameForm />
|
<FindGameForm />
|
||||||
<NewGameButton />
|
<NewGameButton />
|
||||||
|
|
Loading…
Reference in a new issue