From f3c04a39f37325a72cd63c880fe8dfbc875a2b5c Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Tue, 28 Dec 2021 17:01:53 -0500 Subject: [PATCH] navbar --- client/src/modules/Navbar.js | 54 +++++++++++++++ client/src/scripts/create.js | 2 + client/src/scripts/game.js | 2 + client/src/scripts/home.js | 2 + client/src/styles/GLOBAL.css | 114 +++++++++++++++++++++++++++---- client/src/styles/create.css | 2 +- client/src/styles/game.css | 2 +- client/src/styles/hamburgers.css | 85 +++++++++++++++++++++++ client/src/styles/home.css | 9 +-- client/src/styles/modal.css | 2 +- client/src/views/404.html | 7 +- client/src/views/create.html | 7 +- client/src/views/game.html | 7 +- client/src/views/home.html | 5 +- spec/support/jasmine.json | 11 +++ 15 files changed, 279 insertions(+), 32 deletions(-) create mode 100644 client/src/modules/Navbar.js create mode 100644 client/src/styles/hamburgers.css create mode 100644 spec/support/jasmine.json diff --git a/client/src/modules/Navbar.js b/client/src/modules/Navbar.js new file mode 100644 index 0000000..2d3472e --- /dev/null +++ b/client/src/modules/Navbar.js @@ -0,0 +1,54 @@ +export const injectNavbar = (page=null) => { + if (document.getElementById('navbar') !== null) { + document.getElementById('navbar').innerHTML = + "' + + '' + + '' + + '
' + + '' + + '
' + + ''; + } + attachHamburgerListener(); +}; + +function flipHamburger () { + const hamburger = document.getElementById('navbar-hamburger'); + if (hamburger.classList.contains('is-active')) { + hamburger.classList.remove('is-active'); + document.getElementById('mobile-menu').classList.add('hidden'); + document.getElementById('mobile-menu-background-overlay').classList.remove('overlay'); + } else { + hamburger.classList.add('is-active'); + document.getElementById('mobile-menu-background-overlay').classList.add('overlay'); + document.getElementById('mobile-menu').classList.remove('hidden'); + } +} + +function getNavbarLinks (page=null, device) { + const linkClass = device === 'mobile' ? 'mobile-link' : 'desktop-link'; + return '' + + 'Home' + + 'Create' + + 'How to Use' + + 'Contact' + + 'Support the App' +} + +function attachHamburgerListener () { + if (document.getElementById('navbar') !== null && document.getElementById('navbar').style.display !== 'none') { + document.getElementById('navbar-hamburger').addEventListener('click', flipHamburger); + } +} diff --git a/client/src/scripts/create.js b/client/src/scripts/create.js index dd9dcaa..cdb8bf2 100644 --- a/client/src/scripts/create.js +++ b/client/src/scripts/create.js @@ -2,8 +2,10 @@ import { defaultCards } from "../config/defaultCards.js"; import { customCards } from "../config/customCards.js"; import { DeckStateManager } from "../modules/DeckStateManager.js"; import { GameCreationStepManager } from "../modules/GameCreationStepManager.js"; +import { injectNavbar } from "../modules/Navbar.js"; const create = () => { + injectNavbar(); let deckManager = new DeckStateManager(); let gameCreationStepManager = new GameCreationStepManager(deckManager); loadDefaultCards(deckManager); diff --git a/client/src/scripts/game.js b/client/src/scripts/game.js index 5e77c73..0c9d578 100644 --- a/client/src/scripts/game.js +++ b/client/src/scripts/game.js @@ -7,8 +7,10 @@ import {GameTimerManager} from "../modules/GameTimerManager.js"; import {ModalManager} from "../modules/ModalManager.js"; import {stateBucket} from "../modules/StateBucket.js"; import { io } from 'socket.io-client'; +import { injectNavbar } from "../modules/Navbar.js"; const game = () => { + injectNavbar(); let timerWorker; const socket = io('/in-game'); socket.on('disconnect', () => { diff --git a/client/src/scripts/home.js b/client/src/scripts/home.js index 65664a7..b7372a0 100644 --- a/client/src/scripts/home.js +++ b/client/src/scripts/home.js @@ -1,7 +1,9 @@ import { XHRUtility } from "../modules/XHRUtility.js"; import { toast } from "../modules/Toast.js"; +import { injectNavbar } from "../modules/Navbar.js"; const home = () => { + injectNavbar(); document.getElementById("join-form").onsubmit = (e) => { e.preventDefault(); let userCode = document.getElementById("room-code").value; diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css index 7afcd54..4fc7402 100644 --- a/client/src/styles/GLOBAL.css +++ b/client/src/styles/GLOBAL.css @@ -24,7 +24,6 @@ th, thead, tr, tt, u, ul, var { html { font-family: 'signika-negative', sans-serif !important; background-color: #0f0f10; - height: 100%; } body { @@ -78,7 +77,7 @@ h3 { flex-wrap: wrap; color: #d7d7d7; font-size: 14px; - margin-top: 3em; + margin-top: 4em; margin-bottom: 0.5em; } #footer a img { @@ -138,7 +137,7 @@ button { justify-content: center; } -button, input[type="submit"] { +button:not(#navbar-hamburger), input[type="submit"] { font-family: 'signika-negative', sans-serif !important; padding: 10px; background-color: #13762b; @@ -147,17 +146,16 @@ button, input[type="submit"] { font-size: 18px; cursor: pointer; border: 2px solid transparent; - transition: background-color 0.3s ease-out; text-shadow: 0 3px 4px rgb(0 0 0 / 55%); } -button:active, input[type=submit]:active { +button:not(#navbar-hamburger):active, input[type=submit]:active { border: 2px solid #21ba45; } .cancel:hover { background-color: #623232 !important; - border: 2px solid #8a1c1c; + border: 2px solid #8a1c1c !important; } .container { @@ -171,7 +169,7 @@ button:active, input[type=submit]:active { align-items: center; } -button:hover, input[type="submit"]:hover, #game-link:hover { +button:not(#navbar-hamburger):hover, input[type="submit"]:hover, #game-link:hover { background-color: #326243; border: 2px solid #1c8a36; } @@ -212,26 +210,118 @@ input { padding: 5px 0; width: 100%; background-color: #333243; - border-bottom: 2px solid #57566a + border-bottom: 2px solid #57566a; + height: 51px; } -#navbar img { - margin: 0 1em; +#desktop-links > a:nth-child(1), #mobile-links a:nth-child(1) { + margin: 0 0.5em; width: 50px; } -#navbar a { +.logo { + display: flex; + align-items: center; +} + +#navbar img { + width: 100%; +} + +#navbar a:not(.logo) { color: #f7f7f7; text-decoration: none; cursor: pointer; - font-size: 25px; font-family: 'diavlo', sans-serif; + border-radius: 5px; + padding: 2px 5px; + font-size: 18px; + margin: 0 0.5em; + width: fit-content; } #navbar a:hover { color: gray; } +.overlay { + position: fixed; + background-size: cover; + height: 100%; + opacity: 50%; + background-color: black; + width: 100%; + z-index: 50000; +} + +.hidden { + display: none !important; +} + +.hamburger-light { + min-width: auto; + color: whitesmoke; +} + +.hamburger-dark { + min-width: auto; + color: black; +} + +#mobile-links { + display: flex; + flex-direction: column; + margin-top: 3em; +} + +.mobile-link { + margin-top: 0.5em !important; + margin-left: 1em !important; +} + +@media(max-width: 1000px) { + #navbar { + display: flex; + padding: 0; + } + + #navbar-hamburger { + z-index: 52000; + position: relative; + } + + #desktop-menu { + display: none; + } + + #mobile-menu { + position: absolute; + top: 0; + left: 0; + height: auto; + padding-bottom: 2em; + width: 100%; + z-index: 51000; + background-color: #191920; + } +} + +@media(min-width: 1001px) { + + #navbar-hamburger, #mobile-menu, #mobile-menu-background-overlay { + display: none; + } + + .desktop-link { + display: flex; + } + + #desktop-links { + display: flex; + align-items: center; + } +} + .flex-row-container { display: flex; flex-direction: row; diff --git a/client/src/styles/create.css b/client/src/styles/create.css index 83626d3..3fb57f8 100644 --- a/client/src/styles/create.css +++ b/client/src/styles/create.css @@ -288,7 +288,7 @@ input[type="number"] { #step-back-button { left: 15%; - background-color: #762323; + background-color: #762323 !important; } #step-1 div { diff --git a/client/src/styles/game.css b/client/src/styles/game.css index 5577605..1983805 100644 --- a/client/src/styles/game.css +++ b/client/src/styles/game.css @@ -660,7 +660,7 @@ label[for='moderator'] { padding: 10px 10px 0 10px; border-radius: 3px; min-height: 25em; - min-width: 15em; + min-width: 18em; max-width: 30em; } diff --git a/client/src/styles/hamburgers.css b/client/src/styles/hamburgers.css new file mode 100644 index 0000000..be217df --- /dev/null +++ b/client/src/styles/hamburgers.css @@ -0,0 +1,85 @@ +/*! + * Hamburgers + * @description Tasty CSS-animated hamburgers + * @author Jonathan Suh @jonsuh + * @site https://jonsuh.com/hamburgers + * @link https://github.com/jonsuh/hamburgers + */ +.hamburger { + padding: 10px 10px; + display: inline-block; + cursor: pointer; + transition-property: opacity, filter; + transition-duration: 0.15s; + transition-timing-function: linear; + font: inherit; + color: inherit; + text-transform: none; + background-color: transparent; + border: 0; + margin: 0; + overflow: visible; +} +.hamburger:hover { + opacity: 0.7; } +.hamburger.is-active:hover { + opacity: 0.7; } +.hamburger.is-active .hamburger-inner, +.hamburger.is-active .hamburger-inner::before, +.hamburger.is-active .hamburger-inner::after { + background-color: #b1afcd; } + +.hamburger-box { + width: 40px; + height: 24px; + display: inline-block; + position: relative; } + +.hamburger-inner { + display: block; + top: 50%; + margin-top: -2px; } +.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { + width: 40px; + height: 4px; + background-color: #b1afcd; + border-radius: 4px; + position: absolute; + transition-property: transform; + transition-duration: 0.15s; + transition-timing-function: ease; } +.hamburger-inner::before, .hamburger-inner::after { + content: ""; + display: block; } +.hamburger-inner::before { + top: -10px; } +.hamburger-inner::after { + bottom: -10px; } + +/* + * Collapse + */ +.hamburger--collapse .hamburger-inner { + top: auto; + bottom: 0; + transition-duration: 0.13s; + transition-delay: 0.13s; + transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } +.hamburger--collapse .hamburger-inner::after { + top: -20px; + transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } +.hamburger--collapse .hamburger-inner::before { + transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + +.hamburger--collapse.is-active .hamburger-inner { + transform: translate3d(0, -10px, 0) rotate(-45deg); + transition-delay: 0.22s; + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } +.hamburger--collapse.is-active .hamburger-inner::after { + top: 0; + opacity: 0; + transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } +.hamburger--collapse.is-active .hamburger-inner::before { + top: 0; + transform: rotate(-90deg); + transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } diff --git a/client/src/styles/home.css b/client/src/styles/home.css index a2b3e5f..81c1ff7 100644 --- a/client/src/styles/home.css +++ b/client/src/styles/home.css @@ -1,14 +1,15 @@ html { background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgb(17 18 18) 35%, rgba(27,31,31,1) 100%); + height: 100%; } body { align-items: center; - justify-content: center; + height: 100%; } -button { +button#home-create-button { padding: 20px; margin-bottom: 1em; } @@ -80,13 +81,13 @@ label[for="room-code"], label[for="player-name"] { } @media (min-width: 700px) { - button { + button#home-create-button { font-size: 35px; } } @media (max-width: 701px) { - button { + button#home-create-button { font-size: 5vw; } } diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css index 20b41e8..4854377 100644 --- a/client/src/styles/modal.css +++ b/client/src/styles/modal.css @@ -39,7 +39,7 @@ } #close-modal-button { - background-color: #762323; + background-color: #762323 !important; } #modal-button-container { diff --git a/client/src/views/404.html b/client/src/views/404.html index 3624117..f67af9e 100644 --- a/client/src/views/404.html +++ b/client/src/views/404.html @@ -16,12 +16,11 @@ + - +
+

404

The game or other resource that you are looking for could not be found, or you don't have permission to access it. diff --git a/client/src/views/create.html b/client/src/views/create.html index 0db4447..6f35d31 100644 --- a/client/src/views/create.html +++ b/client/src/views/create.html @@ -16,12 +16,11 @@ + - +
+

Connecting to game...

- +
+
diff --git a/client/src/views/home.html b/client/src/views/home.html index 9ebb3ff..00cea22 100644 --- a/client/src/views/home.html +++ b/client/src/views/home.html @@ -18,12 +18,15 @@ + +
+

A tool to run werewolf when not in-person, or in any setting without a deck of cards.

- +
diff --git a/spec/support/jasmine.json b/spec/support/jasmine.json new file mode 100644 index 0000000..1f935fe --- /dev/null +++ b/spec/support/jasmine.json @@ -0,0 +1,11 @@ +{ + "spec_dir": "spec/unit", + "spec_files": [ + "**/*[sS]pec.js" + ], + "helpers": [ + "helpers/**/*.js" + ], + "stopSpecOnExpectationFailure": false, + "random": true +}