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

10
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 (
<>
<div
className="nav__section"
>
<p
className="nav__section__label"
>
Library
</>
</p>
</div>
);
}

10
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 (
<>
<div
className="nav__section"
>
<p
className="nav__section__label"
>
New Game
</>
</p>
</div>
);
}

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

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

10
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 (
<>
<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 {

18
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')}}
>
<p
className="nav__section__label"
>Login</p>
{
showForm === 'login'
? <Login dispatch={dispatch} state={state}/>
: <></>
}
</div>
<p
className="auth-label"
<div
className="nav__section nav__section--auth"
onClick={()=>{setShowForm('signup')}}
>
<p
className="nav__section__label"
>Signup</p>
{
showForm === 'signup'
? <Signup dispatch={dispatch} state={state}/>
: <></>
}
</div>
</>
);
}

10
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 (
<>
<div
className="nav__section"
>
<p
className="nav__section__label"
>
Find Game
</>
</p>
</div>
);
}

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

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

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 />