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

game creation

Browse Source
This commit is contained in:
Alec
2021-11-14 01:50:48 -05:00
parent c1cb58bb05
commit 909546c84e
4 changed files with 64 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
client/modules/GameCreationStepManager.js
View File

@@ -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 =
"<div id='moderation-dedicated'>I will be the <strong>dedicated mod.</strong> Don't deal me a card.</div>" +
"<div id='moderation-self'>The <strong>first person out</strong> will mod. Deal me into the game.</div>";
"<div id='moderation-self'>The <strong>first person out</strong> will mod. Deal me into the game <span>(mod will be assigned automatically).</span></div>";
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 =
"<label for='mod-name'>Your Name</label>" +
"<input id='mod-name' type='text' maxLength='30' required/>"
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();

15
client/styles/create.css
View File

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

2
client/views/home.html
View File

@@ -21,7 +21,7 @@
</head>
<body>
<img src="../images/logo.gif"/>
<h3>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.</h3>
<h3>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.</h3>
<a href="/create">
<button>Create A Game</button>
</a>