styling tweaks

client/src/config/defaultCards.js

@@ -12,31 +12,36 @@ export const defaultCards = [
     {
         role: "Dream Wolf",
         team: "evil",
-        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.",
+        description: "You are a Werewolf, but you don't wake up with the other Werewolves until one of them dies.",
     },
     {
-        role: "Knowing Minion",
+        role: "Sorceress",
         team: "evil",
-        description: "You are an evil villager - you know who the wolves are, and you want them to win.",
+        description: "Each night, learn if a chosen person is the Seer.",
     },
     {
-        role: "Double-Blind Minion",
+        role: "Minion",
         team: "evil",
-        description: "You are an evil villager. You don't know who the wolves are, but you want them to win.",
+        description: "You are an evil Villager, and you know who the Werewolves are.",
+    },
+    {
+        role: "Blind Minion",
+        team: "evil",
+        description: "You are an evil villager, but you don't know who the Werewolves are.",
     },
     {
         role: "Seer",
         team: "good",
-        description: "During each night, choose one person. The moderator will tell you whether that player is a wolf.",
+        description: "Each night, learn if a chosen person is a Werewolf.",
+    },
+    {
+        role: "Parity Hunter",
+        team: "good",
+        description: "You beat a werewolf in a 1v1 situation, winning the game for the village.",
     },
     {
         role: "Hunter",
         team: "good",
-        description: "If you are alive with a wolf at the end of the game, you best the wolf, and the village wins.",
-    },
-    {
-        role: "Mason",
-        team: "good",
-        description: "Masons know who the other masons are.",
+        description: "When you are eliminated, choose another player to go with you.",
     }
 ];

client/src/modules/DeckStateManager.js

@@ -6,8 +6,7 @@ export class DeckStateManager {
 
     addToDeck(role) {
         let option = this.customRoleOptions.find((option) => option.role === role);
-        let existingCard = this.deck.find((card) => card.role === role);
-        if (option && !existingCard) {
+        if (option) {
             option.quantity = 0;
             this.deck.push(option);
             this.customRoleOptions.splice(this.customRoleOptions.indexOf(option), 1);

client/src/modules/GameCreationStepManager.js

@@ -4,6 +4,7 @@ import { customCards } from "../config/customCards.js";
 import { ModalManager } from "./ModalManager.js";
 import {XHRUtility} from "./XHRUtility.js";
 import {globals} from "../config/globals.js";
+import {templates} from "./Templates.js";
 
 export class GameCreationStepManager {
     constructor(deckManager) {
@@ -33,14 +34,14 @@ export class GameCreationStepManager {
             2: {
                 title: "Create your deck of cards:",
                 forwardHandler: () => {
-                    if (this.deckManager.getDeckSize() >= 5) {
+                    if (this.deckManager.getDeckSize() >= 5 && this.deckManager.getDeckSize() <= 50) {
                         this.currentGame.deck = deckManager.getCurrentDeck().filter((card) => card.quantity > 0)
                         cancelCurrentToast();
                         this.removeStepElementsFromDOM(this.step);
                         this.incrementStep();
                         this.renderStep("creation-step-container", this.step);
                     } else {
-                        toast("You must include enough cards for 5 players.", "error", true);
+                        toast("You must have a deck for between 5 and 50 players", "error", true);
                     }
                 },
                 backHandler: this.defaultBackHandler
@@ -191,26 +192,28 @@ function renderRoleSelectionStep(game, containerId, step, deckManager) {
     const stepContainer = document.createElement("div");
     setAttributes(stepContainer, {'id': 'step-' + step, 'class': 'flex-row-container-left-align step'});
 
-    let div = document.createElement("div");
-    div.setAttribute("id", "deck-container");
-    let deckContainer = document.createElement("div");
-    deckContainer.setAttribute("id", "deck");
-
-    deckContainer = loadIncludedCards(deckManager, deckContainer);
-
-    let deckLabel = document.createElement("label");
-    deckLabel.setAttribute("for", "deck");
-    deckLabel.innerText = 'Game Deck: ' + deckManager.getDeckSize() + ' Players';
-    div.prepend(deckLabel);
-    div.appendChild(deckContainer);
-    stepContainer.appendChild(div);
-
-    let customForm = loadCustomRoles(deckManager);
-
-    stepContainer.prepend(customForm);
+    stepContainer.innerHTML =templates.CREATE_GAME_CUSTOM_ROLES;
+    stepContainer.innerHTML += templates.CREATE_GAME_DECK;
 
     document.getElementById(containerId).appendChild(stepContainer);
 
+    let clickHandler = () => {
+        console.log("fired");
+        let actions = document.getElementById("custom-role-actions");
+        if (actions.style.display !== 'none') {
+            actions.style.display = 'none';
+        } else {
+            actions.style.display = 'block';
+        }
+    };
+
+    //document.getElementById("custom-role-hamburger").addEventListener("click", clickHandler);
+
+    loadIncludedCards(deckManager);
+
+    loadCustomRoles(deckManager);
+
+
     initializeRemainingEventListeners(deckManager);
 }
 
@@ -349,61 +352,41 @@ function showButtons(back, forward, forwardHandler, backHandler, builtGame=null)
 }
 
 // Display a widget for each default card that allows copies of it to be added/removed. Set initial deck state.
-function loadIncludedCards(deckManager, deckContainer) {
-
+function loadIncludedCards(deckManager) {
     for (let i = 0; i < deckManager.getCurrentDeck().length; i ++) { // each dropdown should include every
         let card = deckManager.getCurrentDeck()[i];
         let cardEl = constructCompactDeckBuilderElement(card, deckManager);
-        deckContainer.appendChild(cardEl);
+        if (card.team === globals.ALIGNMENT.GOOD) {
+            document.getElementById("deck-good").appendChild(cardEl);
+        } else {
+            document.getElementById("deck-evil").appendChild(cardEl);
+        }
     }
-
-    return deckContainer;
 }
 
 /* Display a dropdown containing all the custom roles. Adding one will add it to the game deck and
 create a widget for it */
 function loadCustomRoles(deckManager) {
-    let customContainer = document.createElement("div");
-    customContainer.setAttribute("id", "custom-roles-container");
-
-    let formLabel = document.createElement("label");
-    formLabel.innerText = 'Custom Roles';
-    formLabel.setAttribute("for", "add-card-to-deck-form");
-
-    let createRoleButton = document.createElement("button");
-    createRoleButton.setAttribute("id", "custom-role-btn");
-    createRoleButton.classList.add('app-button');
-    createRoleButton.innerText = '+ Create Custom Role';
-
-    let form = document.createElement("form");
-    form.setAttribute("id", "add-card-to-deck-form");
-
-    let selectEl = document.createElement("select");
-    selectEl.setAttribute("id", "deck-select");
-    addOptionsToList(deckManager.getCurrentCustomRoleOptions(), selectEl);
-
-    form.appendChild(selectEl);
-
-    let submitBtn = document.createElement("input");
-    submitBtn.setAttribute("type", "submit");
-    submitBtn.setAttribute("value", "Include Role");
-    submitBtn.addEventListener('click', (e) => {
+    let select = document.getElementById("deck-select");
+    addOptionsToList(deckManager.getCurrentCustomRoleOptions(), document.getElementById("deck-select"));
+    document.getElementById("include-role").addEventListener('click', (e) => {
         e.preventDefault();
-        if (selectEl.value && selectEl.value.length > 0) {
-            deckManager.addToDeck(selectEl.value);
-            let cardEl = constructCompactDeckBuilderElement(deckManager.getCard(selectEl.value), deckManager);
-            toast('"' + selectEl.value + '" included.', 'success', true, true, 3);
-            updateCustomRoleOptionsList(deckManager, selectEl);
-            document.getElementById("deck").appendChild(cardEl);
+        if (select.value && select.value.length > 0) {
+            if (!deckManager.getCard(select.value)) {
+                deckManager.addToDeck(select.value);
+                let cardEl = constructCompactDeckBuilderElement(deckManager.getCard(select.value), deckManager);
+                toast('"' + select.value + '" included.', 'success', true, true, 3);
+                if (deckManager.getCard(select.value).team === globals.ALIGNMENT.GOOD) {
+                    document.getElementById("deck-good").appendChild(cardEl);
+                } else {
+                    document.getElementById("deck-evil").appendChild(cardEl);
+                }
+                updateCustomRoleOptionsList(deckManager, select);
+            } else {
+                toast('"' + select.value + '" already included.', 'error', true, true, 3);
+            }
         }
     })
-    form.appendChild(submitBtn);
-
-    customContainer.appendChild(formLabel);
-    customContainer.appendChild(form);
-    customContainer.appendChild(createRoleButton);
-
-    return customContainer;
 }
 
 function constructCompactDeckBuilderElement(card, deckManager) {
@@ -437,7 +420,6 @@ function constructCompactDeckBuilderElement(card, deckManager) {
     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';
         if (deckManager.getCard(card.role).quantity > 0) {
             document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.add('selected-card')
         }
@@ -445,7 +427,6 @@ function constructCompactDeckBuilderElement(card, deckManager) {
     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';
         if (deckManager.getCard(card.role).quantity === 0) {
             document.getElementById('card-' + card.role.replaceAll(' ', '-')).classList.remove('selected-card')
         }
@@ -459,7 +440,7 @@ function initializeRemainingEventListeners(deckManager) {
         let name = document.getElementById("role-name").value.trim();
         let description = document.getElementById("role-description").value.trim();
         let team = document.getElementById("role-alignment").value.toLowerCase().trim();
-        if (!deckManager.getCustomRoleOption(name)) { // confirm there is no existing custom role with the same name
+        if (!deckManager.getCustomRoleOption(name) && !deckManager.getCard(name)) { // confirm there is no existing custom role with the same name
             if (name.length > 40) {
                 toast('Your name is too long (max 40 characters).', "error", true);
                 return;
@@ -473,7 +454,7 @@ function initializeRemainingEventListeners(deckManager) {
             ModalManager.dispelModal("add-role-modal", "add-role-modal-background");
             toast("Role Created", "success", true);
         } else {
-            toast("There is already a custom role with this name.", "error", true);
+            toast("There is already a role with this name", "error", true, true, 3);
         }
     }
     document.getElementById("custom-role-btn").addEventListener(
@@ -494,6 +475,9 @@ function updateCustomRoleOptionsList(deckManager, selectEl) {
 
 function addOptionsToList(options, selectEl) {
     options.sort((a, b) => {
+        if (a.team !== b.team) {
+            return a.team === globals.ALIGNMENT.GOOD ? 1 : -1;
+        }
         return a.role.localeCompare(b.role);
     });
     for (let i = 0; i < options.length; i ++) {

client/src/modules/GameStateRenderer.js

@@ -389,8 +389,10 @@ function renderPlayerRole(gameState) {
     let name = document.querySelector('#role-name');
     name.innerText = gameState.client.gameRole;
     if (gameState.client.alignment === globals.ALIGNMENT.GOOD) {
+        document.getElementById("game-role").classList.add('game-role-good');
         name.classList.add('good');
     } else {
+        document.getElementById("game-role").classList.add('game-role-evil');
         name.classList.add('evil');
     }
     name.setAttribute("title", gameState.client.gameRole);
@@ -401,10 +403,17 @@ function renderPlayerRole(gameState) {
             '../images/tombstone.png'
         );
     } else {
-        document.getElementById("role-image").setAttribute(
-            'src',
-            '../images/roles/' + gameState.client.gameRole.replaceAll(' ', '') + '.png'
-        );
+        if (gameState.client.gameRole.toLowerCase() === 'villager') {
+            document.getElementById("role-image").setAttribute(
+                'src',
+                '../images/roles/Villager' + Math.ceil(Math.random() * 2) + '.png'
+            );
+        } else {
+            document.getElementById("role-image").setAttribute(
+                'src',
+                '../images/roles/' + gameState.client.gameRole.replaceAll(' ', '') + '.png'
+            );
+        }
     }
 
     document.querySelector('#role-description').innerText = gameState.client.gameRoleDescription;

client/src/modules/Templates.js

@@ -78,7 +78,7 @@ export const templates = {
     "<div id='transfer-mod-modal' class='modal' style='display: none'>" +
         "<h3>Transfer Mod Powers &#128081;</h3>" +
         "<div id='transfer-mod-modal-content'></div>" +
-        "<div id='modal-button-container'>" +
+        "<div class='modal-button-container'>" +
             "<button id='close-mod-transfer-modal-button' class='app-button cancel'>Cancel</button>" +
         "</div>" +
     "</div>" +
@@ -115,7 +115,7 @@ export const templates = {
                 "<div id='transfer-mod-form-content'>" +
                     "<h3>Transfer Mod Powers &#128081;</h3>" +
                 "</div>" +
-                "<div id='modal-button-container'>" +
+                "<div class='modal-button-container'>" +
                     "<button id='close-modal-button' class='cancel app-button'>Cancel</button>" +
                 "</div>" +
             "</form>" +
@@ -194,7 +194,7 @@ export const templates = {
                     "<label for='player-new-name'>Your name:</label>" +
                     "<input id='player-new-name' type='text'/>" +
                 "</div>" +
-                "<div id='modal-button-container'>" +
+                "<div class='modal-button-container'>" +
                     "<input type='submit' id='submit-new-name' value='Set Name'/>" +
                 "</div>" +
             "</form>" +
@@ -204,7 +204,7 @@ export const templates = {
         "<div id='role-info-modal' class='modal'>" +
             "<h2>Roles in this game:</h2>" +
             "<div id='game-role-info-container'></div>" +
-            "<div id='modal-button-container'>" +
+            "<div class='modal-button-container'>" +
                 "<button id='close-role-info-modal-button' class='app-button'>Close</button>" +
             "</div>" +
         "</div>",
@@ -223,6 +223,36 @@ export const templates = {
         "<div id='game-people-container'>" +
             "<label id='players-alive-label'></label>" +
             "<div id='game-player-list'></div>" +
-        "</div>"
+        "</div>",
+    CREATE_GAME_DECK:
+        "<div id='deck-container'>" +
+            "<div>" +
+                "<label for='deck-good'>Good Roles</label>" +
+                "<div id='deck-good'></div>" +
+            "</div>" +
+            "<div>" +
+                "<label for='deck-evil'>Evil Roles</label>" +
+                "<div id='deck-evil'></div>" +
+            "</div>" +
+        "</div>",
+    CREATE_GAME_CUSTOM_ROLES:
+        '<div id=\"custom-roles-container\">' +
+            // '<button id="custom-role-hamburger" class="hamburger hamburger--collapse" type="button">' +
+            //     '<span class="hamburger-box">' +
+            //         '<span class="hamburger-inner"></span>' +
+            //     '</span>' +
+            // '</button>' +
+            // '<div id="custom-role-actions" style="display:none">' +
+            //     '<div class="custom-role-action">Export</div>' +
+            //     '<div class="custom-role-action">Import</div>' +
+            //     '<div class="custom-role-action">Edit</div>' +
+            // '</div>' +
+            '<label for=\"add-card-to-deck-form\">Custom Roles</label>' +
+            '<form id=\"add-card-to-deck-form\">' +
+                '<select id=\"deck-select\"></select>' +
+                '<input id="include-role" type=\"submit\" value=\"Include Role\">' +
+            '</form>' +
+            '<button id=\"custom-role-btn\" class=\"app-button\">+ Create Custom Role</button>' +
+        '</div>'
 
 }

client/src/scripts/create.js

@@ -3,18 +3,21 @@ import { customCards } from "../config/customCards.js";
 import { DeckStateManager } from "../modules/DeckStateManager.js";
 import { GameCreationStepManager } from "../modules/GameCreationStepManager.js";
 import { injectNavbar } from "../modules/Navbar.js";
+import {globals} from "../config/globals";
 
 const create = () => {
     injectNavbar();
     let deckManager = new DeckStateManager();
     let gameCreationStepManager = new GameCreationStepManager(deckManager);
     loadDefaultCards(deckManager);
-    //loadCustomRoles(deckManager);
     gameCreationStepManager.renderStep("creation-step-container", 1);
 }
 
 function loadDefaultCards(deckManager) {
     defaultCards.sort((a, b) => {
+        if (a.team !== b.team) {
+            return a.team === globals.ALIGNMENT.GOOD ? 1 : -1;
+        }
         return a.role.localeCompare(b.role);
     });
     let deck = [];

client/src/styles/GLOBAL.css

@@ -394,6 +394,14 @@ input {
     color: #4b6bfa;
 }
 
+.good-players, #deck-good {
+    background-color: #1c1a36;
+}
+
+.evil-players, #deck-evil {
+    background-color: #361a1a;
+}
+
 .evil, .compact-card.evil .card-role {
     color: #e73333;
 }

client/src/styles/create.css

@@ -12,7 +12,7 @@
     max-width: 15em;
     min-width: 9em;
     display: flex;
-    height: max-content;
+    height: 55px;
 }
 
 .compact-card h1 {
@@ -28,7 +28,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    max-width: 8em;
+    max-width: 9em;
     font-size: 16px;
 }
 
@@ -62,7 +62,7 @@
 .compact-card .card-quantity {
     text-align: center;
     margin: 0;
-    font-size: 20px;
+    font-size: 25px;
 }
 
 .compact-card-header {
@@ -83,12 +83,87 @@
     width: fit-content;
 }
 
-#deck-container, #custom-roles-container {
+#custom-roles-container {
     margin: 1em 0;
     background-color: #191920;
     padding: 10px;
     border-radius: 3px;
     border: 2px solid #333243;
+    position: relative;
+}
+
+#custom-role-hamburger .hamburger-inner, #custom-role-hamburger .hamburger-inner::before, #custom-role-hamburger .hamburger-inner::after {
+    background-color: whitesmoke;
+    width: 28px;
+    height: 3px;
+}
+
+#custom-roles-container .hamburger-box {
+    width: 28px;
+    height: 20px;
+}
+
+#custom-role-hamburger {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+#custom-role-hamburger .hamburger-inner::before {
+    top: -8px;
+}
+
+#custom-role-hamburger .hamburger-inner::after {
+    top: -16px;
+}
+
+#custom-role-actions {
+    color: whitesmoke;
+    position: absolute;
+    top: 38px;
+    right: 29px;
+    background-color: #333243;
+    border-radius: 3px;
+    box-shadow: -3px -3px 6px rgb(0 0 0 / 60%);
+}
+
+.custom-role-action {
+    display: flex;
+    width: 100%;
+    padding: 10px;
+    background-color: #333243;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+}
+
+.custom-role-action:hover {
+    background-color: #57566a;
+    cursor: pointer;
+}
+
+#deck-good, #deck-evil {
+    padding: 10px;
+    border-radius: 3px;
+    margin: 0.5em;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    max-height: 20em;
+}
+
+#deck-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    justify-content: center;
+    flex-direction: column;
+}
+
+#deck-container label {
+    margin: 0.5em;
+    display: block;
 }
 
 #step-3 {
@@ -121,13 +196,6 @@ option {
     width: 100%;
 }
 
-#deck {
-    display: flex;
-    flex-wrap: wrap;
-    overflow: auto;
-    max-height: 20em;
-}
-
 #moderation-self span {
     color: gray;
     font-size: 18px;
@@ -174,6 +242,12 @@ select {
     margin-bottom: 2em;
 }
 
+#step-2 {
+    max-width: 70em;
+    margin: 0 auto;
+    justify-content: center;
+}
+
 #game-time label, #game-time input {
     margin-right: 10px;
     font-size: 25px;
@@ -183,6 +257,10 @@ select {
     margin: 0.5em;
 }
 
+#role-alignment {
+    max-width: 10em;
+}
+
 label[for="game-time"], label[for="add-card-to-deck-form"], label[for="deck"] {
     color: whitesmoke;
     font-size: 20px;
@@ -197,7 +275,7 @@ input[type="number"] {
 }
 
 #add-card-to-deck-form {
-    margin-bottom: 1em;
+    margin: 1em 0;
 }
 
 #create-game {
@@ -258,8 +336,8 @@ input[type="number"] {
 
 #game-creation-container {
     width: 95%;
-    max-width: 60em;
     position: relative;
+    margin-bottom: 2em;
 }
 
 #tracker-container {

client/src/styles/game.css

@@ -172,7 +172,7 @@ h1 {
     width: 90%;
 }
 
-#role-info-modal #modal-button-container {
+#role-info-modal .modal-button-container {
     margin-top: 1em;
     justify-content: center;
 }
@@ -226,6 +226,14 @@ h1 {
     /*transform-style: preserve-3d;*/
 }
 
+.game-role-good {
+    border: 5px solid #5469c5 !important;
+}
+
+.game-role-evil {
+    border: 5px solid #c55454 !important;
+}
+
 #game-role-back {
     user-select: none;
     -ms-user-select: none;
@@ -589,14 +597,6 @@ label[for='moderator'] {
     cursor: pointer;
 }
 
-.good-players {
-    background-color: #1c1a36;
-}
-
-.evil-players {
-    background-color: #361a1a;
-}
-
 .kill-player-button {
     background-color: #9f4747;
 }
@@ -649,11 +649,11 @@ label[for='moderator'] {
     width: 100%;
 }
 
-#transfer-mod-form #modal-button-container {
+#transfer-mod-form .modal-button-container {
     justify-content: center;
 }
 
-#transfer-mod-modal #modal-button-container {
+#transfer-mod-modal .modal-button-container {
     justify-content: center;
 }
 

client/src/styles/modal.css

@@ -27,7 +27,7 @@
     cursor: pointer;
 }
 
-.modal > form > div {
+.modal > form > div:not(.modal-button-container) {
     display: flex;
     flex-direction: column;
     margin-bottom: 1em;
@@ -42,7 +42,7 @@
     background-color: #762323 !important;
 }
 
-#modal-button-container {
+.modal-button-container {
     display: flex;
     width: 100%;
     justify-content: space-between;

client/src/views/create.html

@@ -40,12 +40,21 @@
                 <label for="role-description">Description</label>
                 <textarea style="resize:none" id="role-description" rows="10" cols="30" placeholder="Describe your role..." required></textarea>
             </div>
-            <div id="modal-button-container">
+            <div class="modal-button-container">
                 <button id="close-modal-button" class="cancel app-button">Close</button>
                 <input type="submit" id="create-role-button" value="Create Role"/>
             </div>
         </form>
     </div>
+<!--    <div id="upload-custom-roles-modal">-->
+<!--        <form id="upload-custom-roles-form">-->
+<!--            <input type="file" id="upload-custom-roles" name="Upload Custom Roles" accept="application/json"/>-->
+<!--        </form>-->
+<!--        <div class="modal-button-container">-->
+<!--            <button id="close-upload-custom-roles-modal-button" class="cancel app-button">Close</button>-->
+<!--            <input type="submit" id="upload-custom-roles-button" value="Upload"/>-->
+<!--        </div>-->
+<!--    </div>-->
     <h1>Create A Game</h1>
     <div id="tracker-container">
         <div id="creation-step-tracker">
@@ -64,28 +73,6 @@
         <div class="animated-placeholder animated-placeholder-long"></div>
         <div class="animated-placeholder animated-placeholder-long"></div>
     </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" />-->
-<!--                <label for="game-hours">Minutes</label>-->
-<!--                <input type="number" id="game-minutes" name="game-minutes"-->
-<!--                       min="1" max="60" />-->
-<!--            </div>-->
-<!--        </div>-->
-<!--        <div>-->
-<!--            <label for="mod-name">Your Name</label>-->
-<!--            <input id="mod-name" type="text" maxlength="30" required/>-->
-<!--        </div>-->
-<!--        <input id="create-game" type="submit" value="Create"/>-->
-<!--    </form>-->
 </div>
 <script src="/dist/create-bundle.js"></script>
 </body>