new create page logic

client/config/customCards.js

@@ -0,0 +1,12 @@
+export const customCards = [
+    {
+        role: "Santa",
+        team: "evil",
+        description: "hohoho",
+    },
+    {
+        role: "Mason",
+        team: "good",
+        description: "you are a mason",
+    },
+];

client/config/defaultCards.js

@@ -1,4 +1,4 @@
-export const cards = [
+export const defaultCards = [
     {
         role: "Villager",
         team: "good",
@@ -15,10 +15,15 @@ export const cards = [
         description: "If a Werewolf dies, you become a Werewolf. You do not wake up with the Werewolves until this happens. You count for parity only after converting to a wolf.",
     },
     {
-        role: "Minion",
+        role: "Knowing Minion",
         team: "evil",
         description: "You are an evil villager - you know who the wolves are, and you want them to win.",
     },
+    {
+        role: "Double-Blind Minion",
+        team: "evil",
+        description: "You are an evil villager. You don't know who the wolves are, but you want them to win.",
+    },
     {
         role: "Seer",
         team: "good",

client/modules/DeckStateManager.js

@@ -0,0 +1,48 @@
+export class DeckStateManager {
+    constructor() {
+        this.deck = null;
+        this.customRoleOptions = null;
+    }
+
+    addToDeck(role) {
+        let option = this.customRoleOptions.find((option) => option.role === role)
+        let existingCard = this.deck.find((card) => card.role === role)
+        if (option && !existingCard) {
+            option.quantity = 0;
+            this.deck.push(option);
+            this.customRoleOptions.splice(this.customRoleOptions.indexOf(option), 1);
+        }
+    }
+
+    addToCustomRoleOptions(role) {
+        this.customRoleOptions.push(role);
+    }
+
+    addCopyOfCard(role) {
+        let existingCard = this.deck.find((card) => card.role === role)
+        if (existingCard) {
+            existingCard.quantity += 1;
+        }
+    }
+
+    removeCopyOfCard(role) {
+        let existingCard = this.deck.find((card) => card.role === role)
+        if (existingCard && existingCard.quantity > 0) {
+            existingCard.quantity -= 1;
+        }
+    }
+
+    getCurrentDeck() { return this.deck }
+
+    getCard(role) { return this.deck.find((card) => card.role === role) }
+
+    getCurrentCustomRoleOptions() { return this.customRoleOptions }
+
+    getDeckSize() {
+        let total = 0;
+        for (let role of this.deck) {
+            total += role.quantity;
+        }
+        return total;
+    }
+}

client/modules/ModalManager.js

@@ -0,0 +1,30 @@
+export const ModalManager = {
+        displayModal: displayModal
+}
+
+function displayModal(modalId, backgroundId, closeButtonId) {
+    const modal = document.getElementById(modalId);
+    const modalOverlay = document.getElementById(backgroundId);
+    const closeBtn = document.getElementById(closeButtonId);
+    let closeModalHandler;
+    if (modal && modalOverlay && closeBtn) {
+        modal.style.display = 'flex';
+        modalOverlay.style.display = 'flex';
+        modalOverlay.removeEventListener("click", closeModalHandler);
+        modalOverlay.addEventListener("click", closeModalHandler = function(e) {
+            e.preventDefault();
+            dispelModal(modalId, backgroundId);
+        });
+        closeBtn.removeEventListener("click", closeModalHandler);
+        closeBtn.addEventListener("click", closeModalHandler);
+    }
+}
+
+function dispelModal(modalId, backgroundId) {
+    const modal = document.getElementById(modalId);
+    const modalOverlay = document.getElementById(backgroundId);
+    if (modal && modalOverlay) {
+        modal.style.display = 'none';
+        modalOverlay.style.display = 'none';
+    }
+}

client/modules/Toast.js

@@ -0,0 +1,35 @@
+export const toast = (message, type, positionAtTop = true) => {
+    if (message && type) {
+        buildAndInsertMessageElement(message, type, positionAtTop);
+    }
+};
+
+function buildAndInsertMessageElement (message, type, positionAtTop) {
+    cancelCurrentMessage();
+    let backgroundColor;
+    const position = positionAtTop ? 'top:4rem;' : 'bottom: 15px;';
+    switch (type) {
+        case 'warning':
+            backgroundColor = '#fff5b1';
+            break;
+        case 'error':
+            backgroundColor = '#fdaeb7';
+            break;
+        case 'success':
+            backgroundColor = '#bef5cb';
+            break;
+    }
+    const messageEl = document.createElement("div");
+    messageEl.setAttribute("id", "current-info-message");
+    messageEl.setAttribute("style", 'background-color:' + backgroundColor + ';' + position)
+    messageEl.setAttribute("class", 'info-message');
+    messageEl.innerText = message;
+    document.body.prepend(messageEl);
+}
+
+function cancelCurrentMessage () {
+    const currentMessage = document.getElementById('current-info-message');
+    if (currentMessage !== null) {
+        currentMessage.remove();
+    }
+}

client/scripts/create.js

@@ -1,3 +1,120 @@
-export const create = () => {
+import { toast } from "../modules/Toast.js";
+import { ModalManager } from "../modules/ModalManager.js";
+import { defaultCards } from "../config/defaultCards.js";
+import { customCards } from "../config/customCards.js";
+import { DeckStateManager } from "../modules/DeckStateManager.js";
 
+export const create = () => {
+    let deckManager = new DeckStateManager();
+    loadDefaultCards(deckManager);
+    loadCustomCards(deckManager);
+    document.getElementById("game-form").onsubmit = (e) => {
+        e.preventDefault();
+    }
+    document.getElementById("custom-role-btn").addEventListener(
+        "click", () => {
+            ModalManager.displayModal(
+                "add-role-modal",
+                "add-role-modal-background",
+                "close-modal-button"
+            )
+        }
+    )
+}
+
+// Display a widget for each default card that allows copies of it to be added/removed. Set initial deck state.
+function loadDefaultCards(deckManager) {
+    defaultCards.sort((a, b) => {
+        return a.role.localeCompare(b.role);
+    });
+    let deck = [];
+    for (let i = 0; i < defaultCards.length; i ++) { // each dropdown should include every
+        let card = defaultCards[i];
+        card.quantity = 0;
+        let cardEl = constructCompactDeckBuilderElement(defaultCards[i], deckManager);
+        document.getElementById("deck").appendChild(cardEl);
+        deck.push(card);
+    }
+    deckManager.deck = deck;
+}
+
+/* Display a dropdown containing all the custom roles. Adding one will add it to the game deck and
+create a widget for it */
+function loadCustomCards(deckManager) {
+    let form = document.getElementById("add-card-to-deck-form");
+    customCards.sort((a, b) => {
+        return a.role.localeCompare(b.role);
+    });
+    let selectEl = document.createElement("select");
+    selectEl.setAttribute("id", "deck-select");
+    addOptionsToList(customCards, selectEl);
+    form.appendChild(selectEl);
+    let submitBtn = document.createElement("input");
+    submitBtn.setAttribute("type", "submit");
+    submitBtn.setAttribute("value", "Add Role to Deck");
+    submitBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (selectEl.selectedIndex > 0) {
+            deckManager.addToDeck(selectEl.value);
+            let cardEl = constructCompactDeckBuilderElement(deckManager.getCard(selectEl.value), deckManager);
+            updateCustomRoleOptionsList(deckManager, selectEl);
+            document.getElementById("deck").appendChild(cardEl);
+        }
+    })
+    form.appendChild(submitBtn);
+
+
+    deckManager.customRoleOptions = customCards;
+}
+
+function updateCustomRoleOptionsList(deckManager, selectEl) {
+    document.querySelectorAll('#deck-select option').forEach(e => e.remove());
+    addOptionsToList(deckManager.customRoleOptions, selectEl);
+}
+
+function addOptionsToList(options, selectEl) {
+    let noneSelected = document.createElement("option");
+    noneSelected.innerText = "None selected"
+    noneSelected.disabled = true;
+    noneSelected.selected = true;
+    selectEl.appendChild(noneSelected);
+    for (let i = 0; i < options.length; i ++) { // each dropdown should include every
+        let optionEl = document.createElement("option");
+        optionEl.setAttribute("value", customCards[i].role);
+        optionEl.innerText = customCards[i].role;
+        selectEl.appendChild(optionEl);
+    }
+}
+
+function constructCompactDeckBuilderElement(card, deckManager) {
+    const cardContainer = document.createElement("div");
+
+    cardContainer.setAttribute("class", "compact-card");
+
+    cardContainer.setAttribute("id", "card-" + card.role);
+    cardContainer.setAttribute("id", "card-" + card.role);
+
+    cardContainer.innerHTML =
+        "<div class='compact-card-left'>" +
+        "<p>-</p>" +
+        "</div>" +
+        "<div class='compact-card-header'>" +
+        "<p class='card-role'>" + card.role + "</p>" +
+        "<div class='card-quantity'>0</div>" +
+        "</div>" +
+        "<div class='compact-card-right'>" +
+        "<p>+</p>" +
+        "</div>";
+
+    cardContainer.querySelector('.compact-card-right').addEventListener('click', () => {
+        deckManager.addCopyOfCard(card.role);
+        cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
+        document.querySelector('label[for="deck"]').innerText = 'Game Deck: ' + deckManager.getDeckSize() + ' Players';
+    });
+    cardContainer.querySelector('.compact-card-left').addEventListener('click', () => {
+        deckManager.removeCopyOfCard(card.role);
+        cardContainer.querySelector('.card-quantity').innerText = deckManager.getCard(card.role).quantity;
+        document.querySelector('label[for="deck"]').innerText = 'Game Deck: ' + deckManager.getDeckSize() + ' Players';
+    });
+    return cardContainer;
 }

client/styles/GLOBAL.css

@@ -11,7 +11,68 @@ th, thead, tr, tt, u, ul, var {
     border: 0;
     background: transparent;
 }
+@font-face {
+    font-family: 'diavlo';
+    src: url("../webfonts/Diavlo_LIGHT_II_37.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: 'signika-negative';
+    src: url("../webfonts/SignikaNegative-Light.woff2") format("woff2");
+}
 
 html {
-    font-family: sans-serif;
+    font-family: 'signika-negative', sans-serif !important;
+    background-color: #23282b !important;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 95%;
+    margin: 0 auto;
+    max-width: 75em;
+}
+
+h1 {
+    font-family: 'diavlo', sans-serif;
+    color: #ab2626;
+    filter: drop-shadow(2px 2px 4px black);
+    font-size: 40px;
+    margin: 0.5em 0;
+}
+
+h3 {
+    color: #d7d7d7;
+    font-family: 'signika-negative', sans-serif;
+    font-weight: normal;
+    font-size: 18px;
+    margin: 0.5em 0;
+}
+
+label {
+    color: #d7d7d7;
+    font-family: 'signika-negative', sans-serif;
+    font-size: 18px;
+    font-weight: normal;
+}
+
+button, input[type="submit"] {
+    font-family: 'signika-negative', sans-serif !important;
+    padding: 10px;
+    background-color: #1f1f1f;
+    border: none;
+    border-radius: 3px;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+button:hover, input[type="submit"]:hover {
+    background-color: #4f4f4f;
+}
+
+input {
+    padding: 10px;
 }

client/styles/create.css

@@ -0,0 +1,128 @@
+.compact-card {
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    margin: 0.3em;
+    background-color: #393a40;
+    color: gray;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+    user-select: none;
+    max-width: 15em;
+    min-width: 12em;
+    display: flex;
+    height: max-content;
+}
+
+.compact-card h1 {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin: 0 10px 0 10px;
+}
+
+.compact-card .card-role {
+    color: #bfb8b8;
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 8em;
+}
+
+.compact-card-right p {
+    font-size: 40px;
+    margin: 0 10px 0 0;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.compact-card-left p {
+    font-size: 40px;
+    margin: 0 0 0 10px;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.compact-card-left, .compact-card-right {
+    width: 50%;
+}
+
+.compact-card .card-quantity {
+    text-align: center;
+    margin: 0;
+}
+
+.compact-card-header {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    top: 0;
+    pointer-events: none;
+    text-align: center;
+}
+
+#deck-container, #deck, #custom-roles-container {
+    width: fit-content;
+}
+
+#deck-container, #custom-roles-container {
+    margin: 0.5em 0;
+}
+
+#deck {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+form {
+    width: 100%;
+    margin: 1em 0;
+}
+
+select {
+    padding: 10px;
+    font-size: 18px;
+    font-family: 'signika-negative', sans-serif;
+}
+
+#deck-container, #custom-roles-container {
+    border: 1px solid #3d4448;
+    padding: 10px;
+    border-radius: 3px;
+}
+
+#game-form > div {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #3d4448;
+    padding: 10px;
+    border-radius: 3px;
+    width: fit-content;
+}
+
+#game-form > div > label {
+    display: flex;
+}
+
+#game-time label, #game-time input {
+    margin-right: 10px;
+}
+
+label[for="game-time"], label[for="add-card-to-deck-form"], label[for="deck"] {
+    color: #0075F2;
+    font-size: 30px;
+    border-radius: 3px;
+    margin-bottom: 10px;
+}
+
+#create-game{
+    color: #45a445;
+    font-size: 30px;
+    margin-top: 2em;
+}

client/styles/modal.css

@@ -0,0 +1,42 @@
+.modal {
+    border-radius: 2px;
+    text-align: center;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #f7f7f7;
+    align-items: center;
+    justify-content: center;
+    max-width: 17em;
+    max-height: 20em;
+    font-family: sans-serif;
+    font-size: 22px;
+    flex-direction: column;
+    padding: 1em;
+}
+
+.modal-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100% + 100px);
+    background-color: rgba(0, 0, 0, 0.55);
+    z-index: 50;
+    cursor: pointer;
+}
+
+.modal > form > div {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1em;
+}
+
+.modal > form > div > label {
+    display: flex;
+    font-size: 16px;
+}

client/views/create.html

@@ -15,16 +15,49 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="stylesheet" href="../styles/GLOBAL.css">
     <link rel="stylesheet" href="../styles/create.css">
+    <link rel="stylesheet" href="../styles/modal.css">
 </head>
 <body>
+<div id="add-role-modal-background" class="modal-background" style="display: none"></div>
+<div id="add-role-modal" class="modal" style="display: none">
+    <form id="add-role-form">
+        <div>
+            <label for="role-name">Role Name</label>
+            <input id="role-name" type="text" placeholder="Name your role..."/>
+        </div>
+        <div>
+            <label for="role-description">Description</label>
+            <textarea style="resize:none" id="role-description" rows="10" cols="30" placeholder="Describe your role..."></textarea>
+        </div>
+    </form>
+    <button id="close-modal-button">Close</button>
+</div>
 <h1>Create A Game</h1>
 <h3>
-    Creating a game gives you the moderator role. You will not be dealt a card. You will know everyone's role and can
-    remove any player from the game. You can also play/pause the optional timer and, if desired, delegate your moderator
-    role to any other player.
+    Creating a game gives you the moderator role with certain special permissions. You will not be dealt a card.
 </h3>
+<div id="custom-roles-container">
+    <label for="add-card-to-deck-form">Custom Roles</label>
+    <form id="add-card-to-deck-form"></form>
+    <button id="custom-role-btn">Create Custom Role</button>
+</div>
+<div id="deck-container">
+    <label for="deck">Game Deck: 0 Players</label>
+    <div id="deck"></div>
+</div>
 <form id="game-form">
-
+    <div>
+        <label for="game-time">Timer (Optional)</label>
+        <div id="game-time">
+            <label for="game-hours">Hours (max 5)</label>
+            <input type="number" id="game-hours" name="game-hours"
+                   min="0" max="5" placeholder="e.g. 1"/>
+            <label for="game-hours">Minutes</label>
+            <input type="number" id="game-minutes" name="game-minutes"
+                   min="0" max="60" placeholder="e.g. 30"/>
+        </div>
+    </div>
+    <input id="create-game" type="submit" value="Create"/>
 </form>
 <script type="module">
     import { create } from "../scripts/create.js";

client/views/home.html

@@ -5,11 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <title>Werewolf Utility</title>
-        <meta name="description" content="A utility to deal Werewolf cards and run games in any setting, on any device.">
+        <meta name="description" content="A utility to deal Werewolf defaultCards and run games in any setting, on any device.">
         <meta property="og:title" content="Werewolf Utility">
         <meta property="og:type" content="website">
         <meta property="og:url" content="https://play-werewolf.herokuapp.com/">
-        <meta property="og:description" content="A utility to deal Werewolf cards and run games in any setting, on any device.">
+        <meta property="og:description" content="A utility to deal Werewolf defaultCards and run games in any setting, on any device.">
         <meta property="og:image" content="image.png">
 
         <link rel="icon" href="/favicon.ico">
@@ -20,7 +20,9 @@
         <link rel="stylesheet" href="../styles/home.css">
     </head>
     <body>
-    <a href="/create">Create A Game</a>
+    <a href="/create">
+        <button>Create A Game</button>
+    </a>
     <script type="module">
         import { home } from "../scripts/home.js";
         home();

client/webfonts/OFL.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2011 by Anna Giedryś (http://ancymonic.com),
+with Reserved Font Names "Signika".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.