From 909546c84e913d1de0ab3f907d00b02d5e42adcf Mon Sep 17 00:00:00 2001 From: Alec Date: Sun, 14 Nov 2021 01:50:48 -0500 Subject: [PATCH] game creation --- client/modules/GameCreationStepManager.js | 78 +++++++++++++++-------- client/styles/create.css | 15 +++-- client/views/home.html | 2 +- server/api/GamesAPI.js | 1 + 4 files changed, 64 insertions(+), 32 deletions(-) diff --git a/client/modules/GameCreationStepManager.js b/client/modules/GameCreationStepManager.js index 3bd2943..6af6bb2 100644 --- a/client/modules/GameCreationStepManager.js +++ b/client/modules/GameCreationStepManager.js @@ -2,6 +2,7 @@ import { Game } from "../model/Game.js"; import { cancelCurrentToast, toast } from "./Toast.js"; import { customCards } from "../config/customCards.js"; import { ModalManager } from "./ModalManager.js"; +import {XHRUtility} from "./XHRUtility.js"; export class GameCreationStepManager { constructor(deckManager) { @@ -82,7 +83,26 @@ export class GameCreationStepManager { }, 4: { title: "Review and submit:", - backHandler: this.defaultBackHandler + backHandler: this.defaultBackHandler, + forwardHandler: (deck, hasTimer, hasDedicatedModerator, modName, timerParams) => { + XHRUtility.xhr( + '/api/games/create', + 'POST', + null, + JSON.stringify( + new Game(deck, hasTimer, hasDedicatedModerator, modName, timerParams) + ) + ) + .then((res) => { + if (res + && typeof res === 'object' + && Object.prototype.hasOwnProperty.call(res, 'content') + && typeof res.content === 'string' + ) { + window.location = ('/game/' + res.content); + } + }); + } } } } @@ -118,7 +138,7 @@ export class GameCreationStepManager { break; case 4: renderReviewAndCreateStep(containerId, step, this.currentGame); - showButtons(true, false, null, this.steps[step].backHandler); + showButtons(true, true, this.steps[step].forwardHandler, this.steps[step].backHandler, this.currentGame); break; default: break; @@ -137,7 +157,7 @@ function renderModerationTypeStep(game, containerId, stepNumber) { stepContainer.innerHTML = "
I will be the dedicated mod. Don't deal me a card.
" + - "
The first person out will mod. Deal me into the game.
"; + "
The first person out will mod. Deal me into the game (mod will be assigned automatically).
"; let dedicatedOption = stepContainer.querySelector('#moderation-dedicated'); if (game.hasDedicatedModerator) { @@ -257,6 +277,12 @@ function renderReviewAndCreateStep(containerId, stepNumber, game) { div.querySelector('#roles-option').appendChild(roleEl); } + let nameDiv = document.createElement("div"); + nameDiv.innerHTML = + "" + + "" + + div.appendChild(nameDiv); document.getElementById(containerId).appendChild(div); } @@ -276,23 +302,41 @@ function updateTracker(step) { }) } -function showButtons(back, forward, forwardHandler, backHandler) { +function showButtons(back, forward, forwardHandler, backHandler, builtGame=null) { document.querySelector("#step-back-button")?.remove(); document.querySelector("#step-forward-button")?.remove(); if (back) { let backButton = document.createElement("button"); - backButton.innerText = "Back"; + backButton.innerText = "\u2bc7 Back"; backButton.addEventListener('click', backHandler); backButton.setAttribute("id", "step-back-button"); document.getElementById("creation-step-buttons").appendChild(backButton); } - if (forward) { + if (forward && builtGame === null) { let fwdButton = document.createElement("button"); - fwdButton.innerText = "Next"; + fwdButton.innerHTML = "Next \u25b6"; fwdButton.addEventListener('click', forwardHandler); fwdButton.setAttribute("id", "step-forward-button"); document.getElementById("creation-step-buttons").appendChild(fwdButton); + } else if (forward && builtGame !== null) { + let createButton = document.createElement("button"); + createButton.innerText = "Create"; + createButton.setAttribute("id", "create-game"); + createButton.addEventListener("click", () => { + if (document.getElementById("mod-name").value.length > 0) { + forwardHandler( + builtGame.deck.filter((card) => card.quantity > 0), + builtGame.hasTimer, + builtGame.hasDedicatedModerator, + document.getElementById("mod-name").value, + builtGame.timerParams + ); + } else { + toast("You must provide your name.", "error", true); + } + }); + document.getElementById("creation-step-buttons").appendChild(createButton); } } @@ -401,26 +445,6 @@ function constructCompactDeckBuilderElement(card, deckManager) { } function initializeRemainingEventListeners(deckManager) { - // document.getElementById("game-form").onsubmit = (e) => { - // e.preventDefault(); - // let timerBool = hasTimer(); - // let timerParams = timerBool - // ? { - // hours: document.getElementById("game-hours").value, - // minutes: document.getElementById("game-minutes").value - // } - // : null; - // if (deckManager.getDeckSize() >= 5) { - // createGameForHosting( - // deckManager.getCurrentDeck().filter((card) => card.quantity > 0), - // timerBool, - // document.getElementById("mod-name").value, - // timerParams - // ); - // } else { - // toast("You must include enough cards for 5 players.", "error", true); - // } - // } document.getElementById("add-role-form").onsubmit = (e) => { e.preventDefault(); let name = document.getElementById("role-name").value.trim(); diff --git a/client/styles/create.css b/client/styles/create.css index 92d1766..ff9dc42 100644 --- a/client/styles/create.css +++ b/client/styles/create.css @@ -102,6 +102,11 @@ max-height: 20em; } +#moderation-self span { + color: gray; + font-size: 18px; +} + form { width: 100%; } @@ -150,8 +155,6 @@ input[type="number"] { color: #45a445; font-size: 30px; padding: 10px 50px; - margin: 1em auto 3em auto; - display: flex; } .dropdown { @@ -191,6 +194,7 @@ input[type="number"] { justify-content: space-between; margin-top: 2em; position: relative; + margin-bottom: 8em; } #creation-step-tracker { @@ -199,11 +203,14 @@ input[type="number"] { margin-top: 2em; } -#step-forward-button, #step-back-button { +#step-forward-button, #step-back-button, #create-game { position: absolute; + font-family: sans-serif; + font-size: 20px; + padding: 10px 20px; } -#step-forward-button { +#step-forward-button, #create-game { right: 15%; } diff --git a/client/views/home.html b/client/views/home.html index b6a810c..8ee1a23 100644 --- a/client/views/home.html +++ b/client/views/home.html @@ -21,7 +21,7 @@ -

This is a tool to run games of Werewolf when not in-person, or when you don't possess a deck of cards. Create a game and moderate, or join one and have a role dealt to your device.

+

This is a tool to run games of Werewolf when not in-person, or when you don't possess a deck of cards. Players join a shared room and will have roles dealt to their device.

diff --git a/server/api/GamesAPI.js b/server/api/GamesAPI.js index f41cfd4..444a179 100644 --- a/server/api/GamesAPI.js +++ b/server/api/GamesAPI.js @@ -7,6 +7,7 @@ const GameManager = require('../modules/GameManager.js'); const gameManager = new GameManager().getInstance(); router.post('/create', function (req, res) { + logger.debug('Received request to create new game: ' + JSON.stringify(req.body, null, 4)); const gameCreationPromise = gameManager.createGame(req.body, false); gameCreationPromise.then((result) => { if (result instanceof Error) {