diff --git a/packages/server/play-node-go/src/components/Button/Library/Library.js b/packages/server/play-node-go/src/components/Button/Library/Library.js index d5eba68..67ba4c4 100644 --- a/packages/server/play-node-go/src/components/Button/Library/Library.js +++ b/packages/server/play-node-go/src/components/Button/Library/Library.js @@ -3,9 +3,15 @@ import './Library.scss'; const LibraryButton = () => { return ( - <> - Library - +
+

+ Library +

+
); } diff --git a/packages/server/play-node-go/src/components/Button/NewGame/NewGame.js b/packages/server/play-node-go/src/components/Button/NewGame/NewGame.js index de0d1eb..f2006be 100644 --- a/packages/server/play-node-go/src/components/Button/NewGame/NewGame.js +++ b/packages/server/play-node-go/src/components/Button/NewGame/NewGame.js @@ -3,9 +3,15 @@ import './NewGame.scss'; const NewGameButton = () => { return ( - <> - New Game - +
+

+ New Game +

+
); } diff --git a/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.js b/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.js index e16239a..72b367c 100644 --- a/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.js +++ b/packages/server/play-node-go/src/components/Button/NewRoom/NewRoom.js @@ -2,10 +2,16 @@ import React from 'react'; import './NewRoom.scss'; const NewRoomButton = () => { - return ( - <> - New Room - + return ( +
+

+ New Room +

+
); } diff --git a/packages/server/play-node-go/src/components/Button/RoomArchive/RoomArchive.js b/packages/server/play-node-go/src/components/Button/RoomArchive/RoomArchive.js index 4450094..15898aa 100644 --- a/packages/server/play-node-go/src/components/Button/RoomArchive/RoomArchive.js +++ b/packages/server/play-node-go/src/components/Button/RoomArchive/RoomArchive.js @@ -3,9 +3,15 @@ import './RoomArchive.scss'; const RoomArchiveButton = () => { return ( - <> - Room Archive - +
+

+ Room Archive +

+
); } diff --git a/packages/server/play-node-go/src/components/Display/Loading/Loading.scss b/packages/server/play-node-go/src/components/Display/Loading/Loading.scss index 67589c7..9a66864 100644 --- a/packages/server/play-node-go/src/components/Display/Loading/Loading.scss +++ b/packages/server/play-node-go/src/components/Display/Loading/Loading.scss @@ -3,6 +3,9 @@ div.Loading { display: flex; flex-flow: row wrap; height: 6vw; + left: 47vw; + position: absolute; + top: 45vh; width: 6vw; div.point { diff --git a/packages/server/play-node-go/src/components/Form/Auth/Auth.js b/packages/server/play-node-go/src/components/Form/Auth/Auth.js index 46cacc1..87d0234 100644 --- a/packages/server/play-node-go/src/components/Form/Auth/Auth.js +++ b/packages/server/play-node-go/src/components/Form/Auth/Auth.js @@ -9,25 +9,35 @@ const Auth = (props) => { return ( <> -

{setShowForm('login')}} - >Login

- { - showForm === 'login' - ? - : <> - } + > +

Login

-

+ : <> + } + + +

{setShowForm('signup')}} - >Signup

+ > +

Signup

+ { showForm === 'signup' ? : <> } +
); } diff --git a/packages/server/play-node-go/src/components/Form/FindGame/FindGame.js b/packages/server/play-node-go/src/components/Form/FindGame/FindGame.js index 31f1a5e..08d49b0 100644 --- a/packages/server/play-node-go/src/components/Form/FindGame/FindGame.js +++ b/packages/server/play-node-go/src/components/Form/FindGame/FindGame.js @@ -3,9 +3,15 @@ import './FindGame.scss'; const FindGameForm = () => { return ( - <> - Find Game - +
+

+ Find Game +

+
); } diff --git a/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.js b/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.js index 17aca22..b7e32d5 100644 --- a/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.js +++ b/packages/server/play-node-go/src/components/Form/FindRoom/FindRoom.js @@ -3,10 +3,16 @@ import './FindRoom.scss'; const FindRoomForm = () => { return ( - <> - Find Room - - ); +
+

+ Find Room +

+
+ ); } - + export default FindRoomForm; \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/GameUI/Board/Board.scss b/packages/server/play-node-go/src/components/GameUI/Board/Board.scss index d50828d..5dbb3d5 100644 --- a/packages/server/play-node-go/src/components/GameUI/Board/Board.scss +++ b/packages/server/play-node-go/src/components/GameUI/Board/Board.scss @@ -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; } } } diff --git a/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss b/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss index 3f01ddf..04362e1 100644 --- a/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss +++ b/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss @@ -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; diff --git a/packages/server/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss b/packages/server/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss index 371649a..1a9f51e 100644 --- a/packages/server/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss +++ b/packages/server/play-node-go/src/pages/Layout/Sidebar/Sidebar.scss @@ -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; + } + } } \ No newline at end of file diff --git a/packages/server/play-node-go/src/pages/Room/Room.js b/packages/server/play-node-go/src/pages/Room/Room.js index ddfec39..b3253f2 100644 --- a/packages/server/play-node-go/src/pages/Room/Room.js +++ b/packages/server/play-node-go/src/pages/Room/Room.js @@ -81,8 +81,6 @@ const Room = (props) => {
-

{state.currentRoom ? state.currentRoom.name : 'Loading'}

- {/* {socket ? '✓' : ' ⃠'} */} {state.errors.joinGame ? : <>}
diff --git a/packages/server/play-node-go/src/pages/Room/Room.scss b/packages/server/play-node-go/src/pages/Room/Room.scss index 1b73bac..6e62837 100644 --- a/packages/server/play-node-go/src/pages/Room/Room.scss +++ b/packages/server/play-node-go/src/pages/Room/Room.scss @@ -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 { diff --git a/packages/server/play-node-go/src/pages/Room/RoomSidebar.js b/packages/server/play-node-go/src/pages/Room/RoomSidebar.js index 2d74804..4bd6f4f 100644 --- a/packages/server/play-node-go/src/pages/Room/RoomSidebar.js +++ b/packages/server/play-node-go/src/pages/Room/RoomSidebar.js @@ -19,6 +19,7 @@ const RoomSidebar = props => { return (