oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

stub nav form styles and fix board span bug

Browse source
This commit is contained in:
Sorrel Bri 2020-02-04 22:52:07 -08:00 committed by sorrelbri
parent 08e76b33d0
commit 3943d08ab6
14 changed files with 163 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/play-node-go/play-node-go/src/components/Button/Library/Library.js
View file

@ -3,9 +3,15 @@ import './Library.scss';
const LibraryButton = () => {
return (
<>
Library
</>
<div
className="nav__section"
>
<p
className="nav__section__label"
>
Library
</p>
</div>
);
}

12
packages/play-node-go/play-node-go/src/components/Button/NewGame/NewGame.js
View file

@ -3,9 +3,15 @@ import './NewGame.scss';
const NewGameButton = () => {
return (
<>
New Game
</>
<div
className="nav__section"
>
<p
className="nav__section__label"
>
New Game
</p>
</div>
);
}

14
packages/play-node-go/play-node-go/src/components/Button/NewRoom/NewRoom.js
View file

@ -2,10 +2,16 @@ import React from 'react';
import './NewRoom.scss';
const NewRoomButton = () => {
return (
<>
New Room
</>
return (
<div
className="nav__section"
>
<p
className="nav__section__label"
>
New Room
</p>
</div>
);
}

12
packages/play-node-go/play-node-go/src/components/Button/RoomArchive/RoomArchive.js
View file

@ -3,9 +3,15 @@ import './RoomArchive.scss';
const RoomArchiveButton = () => {
return (
<>
Room Archive
</>
<div
className="nav__section"
>
<p
className="nav__section__label"
>
Room Archive
</p>
</div>
);
}

3
packages/play-node-go/play-node-go/src/components/Display/Loading/Loading.scss
View file

@ -3,6 +3,9 @@ div.Loading {
display: flex;
flex-flow: row wrap;
height: 6vw;
left: 47vw;
position: absolute;
top: 45vh;
width: 6vw;
div.point {

32
packages/play-node-go/play-node-go/src/components/Form/Auth/Auth.js
View file

@ -9,25 +9,35 @@ const Auth = (props) => {
return (
<>
<p
className="auth-label"
<div
className="nav__section nav__section--auth"
onClick={()=>{setShowForm('login')}}
>Login</p>
{
showForm === 'login'
? <Login dispatch={dispatch} state={state}/>
: <></>
}
>
<p
className="nav__section__label"
>Login</p>
<p
className="auth-label"
{
showForm === 'login'
? <Login dispatch={dispatch} state={state}/>
: <></>
}
</div>
<div
className="nav__section nav__section--auth"
onClick={()=>{setShowForm('signup')}}
>Signup</p>
>
<p
className="nav__section__label"
>Signup</p>
{
showForm === 'signup'
? <Signup dispatch={dispatch} state={state}/>
: <></>
}
</div>
</>
);
}

12
packages/play-node-go/play-node-go/src/components/Form/FindGame/FindGame.js
View file

@ -3,9 +3,15 @@ import './FindGame.scss';
const FindGameForm = () => {
return (
<>
Find Game
</>
<div
className="nav__section"
>
<p
className="nav__section__label"
>
Find Game
</p>
</div>
);
}

16
packages/play-node-go/play-node-go/src/components/Form/FindRoom/FindRoom.js
View file

@ -3,10 +3,16 @@ import './FindRoom.scss';
const FindRoomForm = () => {
return (
<>
Find Room
</>
);
<div
className="nav__section"
>
<p
className="nav__section__label"
>
Find Room
</p>
</div>
);
}
export default FindRoomForm;

6
packages/play-node-go/play-node-go/src/components/GameUI/Board/Board.scss
View file

@ -50,8 +50,10 @@ div.Game__board {
height: 5vmin;
@media #{map-get($break-points, "590")} {
height: 3.5vh;
width: 3.5vh;
height: 2.6vw;
width: 2.6vw;
max-width: 3.5vh;
max-height: 3.5vh;
}
}
}

57
packages/play-node-go/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss
View file

@ -2,11 +2,12 @@
@import '../../../../public/stylesheets/partials/mixins';
div.player-container {
display: flex;
align-items: flex-end;
justify-content: space-around;
display: flex;
flex: 5;
height: 9vmin;
justify-content: space-around;
margin: 1em;
width: 100%;
&:last-child {
@ -20,40 +21,40 @@ div.player-container {
}
div.player-container__bowl {
order: -1;
margin: 4vh;
height: 15vh;
width: 15vh;
border-radius: 50%;
background-color: rgb(116, 48, 17);
align-items: center;
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);
display: flex;
align-items: center;
height: 15vh;
justify-content: center;
margin: 4vh;
order: -1;
width: 15vh;
@media #{map-get($break-points, "570")} {
margin: 3vh;
height: 10vh;
margin: 3vh;
width: 10vh;
}
&[data-turn]:hover p {
display: block;
color: #FFF;
background-color: rgba(0,0,0,0.3);
padding: .5em;
color: #FFF;
cursor: grab;
display: block;
padding: .5em;
}
&[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;
display: block;
padding: .5em;
position: absolute;
}
}
@ -64,20 +65,20 @@ div.player-container {
}
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;
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;
margin: 1vh;
width: 10vh;
@media #{map-get($break-points, "570")} {
margin: 2vh;
height: 7vh;
margin: 2vh;
width: 7vh;
}
@ -87,10 +88,10 @@ div.player-container__caps-space {
}
div.player-container__name-space {
order: 1;
display: flex;
flex-direction: column;
align-items: center;
flex-direction: column;
display: flex;
order: 1;
h4 {
@include gameViewLabel;

38
packages/play-node-go/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss
View file

@ -1,5 +1,41 @@
@import '../../../../public/stylesheets/partials/variables';
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;
}
}
}

2
packages/play-node-go/play-node-go/src/pages/Room/Room.js
View file

@ -81,8 +81,6 @@ const Room = (props) => {
<div className="Room" data-testid="Room">
<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}/> : <></>}
</div>

16
packages/play-node-go/play-node-go/src/pages/Room/Room.scss
View file

@ -11,12 +11,18 @@ div.Room {
width: 100%;
height: 100%;
h2 {
justify-self:stretch;
align-self: flex-start;
width: 100%;
max-height: 5vh;
div.Room__heading {
align-self: center;
height: 100%;
position: sticky;
top: 1em;
z-index: 3;
span.error--action {
padding: 1em;
background-color: map-get($colors, "error");
color: white;
}
}
div.Room__game-container {

1
packages/play-node-go/play-node-go/src/pages/Room/RoomSidebar.js
View file

@ -19,6 +19,7 @@ const RoomSidebar = props => {
return (
<nav>
<h3>{ state.currentRoom.name }</h3>
{showAuth()}
<FindGameForm />
<NewGameButton />