Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 07:47:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

navbar

Browse Source
This commit is contained in:
AlecM33
2021-12-28 17:01:53 -05:00
parent 3e2b503ad2
commit f3c04a39f3
15 changed files with 279 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/modules/Navbar.js Normal file
View File

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

2
client/src/scripts/create.js
View File

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

2
client/src/scripts/game.js
View File

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

2
client/src/scripts/home.js
View File

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

114
client/src/styles/GLOBAL.css
View File

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

2
client/src/styles/create.css
View File

@@ -288,7 +288,7 @@ input[type="number"] {
#step-back-button {
left: 15%;
background-color: #762323;
background-color: #762323 !important;
}
#step-1 div {

2
client/src/styles/game.css
View File

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

85
client/src/styles/hamburgers.css Normal file
View File

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

9
client/src/styles/home.css
View File

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

2
client/src/styles/modal.css
View File

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

7
client/src/views/404.html
View File

@@ -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">
<img src="/images/Werewolf_Small.png"/>
<a href="/">Home</a>
</div>
<div id="mobile-menu-background-overlay"></div>
<div id="navbar"></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.

7
client/src/views/create.html
View File

@@ -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">
<img src="../images/Werewolf_Small.png"/>
<a href="/">Home</a>
</div>
<div id="mobile-menu-background-overlay"></div>
<div id="navbar"></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">

7
client/src/views/game.html
View File

@@ -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">
<img src="/images/Werewolf_Small.png"/>
<a href="/">Home</a>
</div>
<div id="mobile-menu-background-overlay"></div>
<div id="navbar"></div>
<div id="game-content" class="container">
<div class="placeholder-row">
<div class="animated-placeholder animated-placeholder-short"></div>

5
client/src/views/home.html
View File

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

11
spec/support/jasmine.json Normal file
View File

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