navbar

client/src/modules/Navbar.js

@@ -0,0 +1,54 @@
+export const injectNavbar = (page=null) => {
+    if (document.getElementById('navbar') !== null) {
+        document.getElementById('navbar').innerHTML =
+            "<button name='Mobile Navbar' aria-label='Mobile Navbar' id=\"navbar-hamburger\" class=\"hamburger hamburger--collapse\" type=\"button\">"
+            + '<span class="hamburger-box">'
+            + '<span class="hamburger-inner"></span>'
+            + '</span>'
+            + '</button>'
+            + '<div id="mobile-menu" class="hidden">'
+            + '<div id="mobile-links">'
+            + getNavbarLinks(page, 'mobile')
+            + '</div>'
+            + '</div>'
+            + '</a>'
+            + '<div id="desktop-menu">'
+            + '<div id="desktop-links">'
+            + getNavbarLinks(page, 'desktop')
+            + '</div>'
+            + '</div>'
+            + '<div id="navbar-profile"></div>';
+    }
+    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 '<a href="/" class="logo ' + linkClass + '">' +
+    '<img alt="logo" src="../images/Werewolf_Small.png"/>' +
+    '</a>' +
+    '<a class="' + linkClass + '" href="/">Home</a>' +
+    '<a class="' + linkClass + '" href="/create">Create</a>' +
+    '<a class="' + linkClass + '" href="/">How to Use</a>' +
+    '<a class="' + linkClass + ' "href="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top">Contact</a>' +
+    '<a class="' + linkClass + '" href="https://www.buymeacoffee.com/alecm33">Support the App</a>'
+}
+
+function attachHamburgerListener () {
+    if (document.getElementById('navbar') !== null && document.getElementById('navbar').style.display !== 'none') {
+        document.getElementById('navbar-hamburger').addEventListener('click', flipHamburger);
+    }
+}

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);

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', () => {

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;

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 {
+#desktop-links > a:nth-child(1), #mobile-links a:nth-child(1) {
-    margin: 0 1em;
+    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;

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 {

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;
 }
 

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); }

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;
     }
 }

client/src/styles/modal.css

@@ -39,7 +39,7 @@
 }
 
 #close-modal-button {
-    background-color: #762323;
+    background-color: #762323 !important;
 }
 
 #modal-button-container {

client/src/views/404.html

@@ -16,12 +16,11 @@
     <link rel="stylesheet" href="/styles/GLOBAL.css">
     <link rel="stylesheet" href="/styles/create.css">
     <link rel="stylesheet" href="/styles/modal.css">
+    <link rel="stylesheet" href="/styles/hamburgers.css">
 </head>
 <body>
-<div id="navbar">
+<div id="mobile-menu-background-overlay"></div>
-    <img src="/images/Werewolf_Small.png"/>
+<div id="navbar"></div>
-    <a href="/">Home</a>
-</div>
 <span>
     <h1>404</h1>
     <h3>The game or other resource that you are looking for could not be found, or you don't have permission to access it.

client/src/views/create.html

@@ -16,12 +16,11 @@
     <link rel="stylesheet" href="./styles/GLOBAL.css">
     <link rel="stylesheet" href="./styles/create.css">
     <link rel="stylesheet" href="./styles/modal.css">
+    <link rel="stylesheet" href="/styles/hamburgers.css">
 </head>
 <body>
-<div id="navbar">
+<div id="mobile-menu-background-overlay"></div>
-    <img src="../images/Werewolf_Small.png"/>
+<div id="navbar"></div>
-    <a href="/">Home</a>
-</div>
 <div id="game-creation-container" class="container">
     <div id="add-role-modal-background" class="modal-background" style="display: none"></div>
     <div id="add-role-modal" class="modal" style="display: none">

client/src/views/game.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="/styles/GLOBAL.css">
     <link rel="stylesheet" href="/styles/game.css">
     <link rel="stylesheet" href="/styles/modal.css">
+    <link rel="stylesheet" href="/styles/hamburgers.css">
     <link rel="preload" as="font" href="/webfonts/SignikaNegative-Light.woff2" crossorigin/>
     <link rel="preload" as="font" href="/webfonts/Diavlo_LIGHT_II_37.woff2" crossorigin/>
 </head>
@@ -38,10 +39,8 @@
     </div>
     <p>Connecting to game...</p>
 </div>
-<div id="navbar">
+<div id="mobile-menu-background-overlay"></div>
-    <img src="/images/Werewolf_Small.png"/>
+<div id="navbar"></div>
-    <a href="/">Home</a>
-</div>
 <div id="game-content" class="container">
     <div class="placeholder-row">
         <div class="animated-placeholder animated-placeholder-short"></div>

client/src/views/home.html

@@ -18,12 +18,15 @@
 
         <link rel="stylesheet" href="./styles/GLOBAL.css">
         <link rel="stylesheet" href="./styles/home.css">
+        <link rel="stylesheet" href="/styles/hamburgers.css">
     </head>
     <body>
+    <div id="mobile-menu-background-overlay"></div>
+    <div id="navbar"></div>
     <img src="../images/logo_cropped.gif"/>
     <h3>A tool to run werewolf when not in-person, or in any setting without a deck of cards.</h3>
     <a href="/create">
-        <button>Create A Game</button>
+        <button id="home-create-button">Create A Game</button>
     </a>
     <div id="join-container">
         <label for="join-form">Join A Game</label>

spec/support/jasmine.json

@@ -0,0 +1,11 @@
+{
+  "spec_dir": "spec/unit",
+  "spec_files": [
+    "**/*[sS]pec.js"
+  ],
+  "helpers": [
+    "helpers/**/*.js"
+  ],
+  "stopSpecOnExpectationFailure": false,
+  "random": true
+}