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

minimally-working app?

Browse Source
This commit is contained in:
Alec
2021-12-22 21:44:26 -05:00
parent 31f5d01092
commit 00bdf000e9
16 changed files with 96 additions and 4021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/config/customCards.js
View File

@@ -5,8 +5,8 @@ export const customCards = [
description: "hohoho",
},
{
role: "Mason",
role: "The Thing",
team: "good",
description: "you are a mason",
description: "you go bump in the night",
},
];

3
client/model/Game.js
View File

@@ -1,8 +1,7 @@
export class Game {
constructor(deck, hasTimer, hasDedicatedModerator, moderatorName, timerParams=null) {
constructor(deck, hasTimer, hasDedicatedModerator, timerParams=null) {
this.deck = deck;
this.hasTimer = hasTimer;
this.moderatorName = moderatorName;
this.timerParams = timerParams;
this.hasDedicatedModerator = hasDedicatedModerator;
this.accessCode = null;

54
client/modules/GameCreationStepManager.js
View File

@@ -85,13 +85,13 @@ export class GameCreationStepManager {
4: {
title: "Review and submit:",
backHandler: this.defaultBackHandler,
forwardHandler: (deck, hasTimer, hasDedicatedModerator, modName, timerParams) => {
forwardHandler: (deck, hasTimer, hasDedicatedModerator, timerParams) => {
XHRUtility.xhr(
'/api/games/create',
'POST',
null,
JSON.stringify(
new Game(deck, hasTimer, hasDedicatedModerator, modName, timerParams)
new Game(deck, hasTimer, hasDedicatedModerator, timerParams)
)
)
.then((res) => {
@@ -154,7 +154,7 @@ export class GameCreationStepManager {
function renderModerationTypeStep(game, containerId, stepNumber) {
const stepContainer = document.createElement("div");
setAttributes(stepContainer, {'id': 'step-' + stepNumber, 'class': 'flex-row-container'});
setAttributes(stepContainer, {'id': 'step-' + stepNumber, 'class': 'flex-row-container step'});
stepContainer.innerHTML =
"<div id='moderation-dedicated'>I will be the <strong>dedicated mod.</strong> Don't deal me a card.</div>" +
@@ -186,7 +186,7 @@ function renderModerationTypeStep(game, containerId, stepNumber) {
function renderRoleSelectionStep(game, containerId, step, deckManager) {
const stepContainer = document.createElement("div");
setAttributes(stepContainer, {'id': 'step-' + step, 'class': 'flex-row-container-left-align'});
setAttributes(stepContainer, {'id': 'step-' + step, 'class': 'flex-row-container-left-align step'});
let div = document.createElement("div");
div.setAttribute("id", "deck-container");
@@ -208,35 +208,37 @@ function renderRoleSelectionStep(game, containerId, step, deckManager) {
document.getElementById(containerId).appendChild(stepContainer);
$('.ui.dropdown')
.dropdown();
initializeRemainingEventListeners(deckManager);
}
function renderTimerStep(containerId, stepNumber, game) {
let div = document.createElement("div");
div.setAttribute("id", "step-" + stepNumber);
div.classList.add('step');
let timeContainer = document.createElement("div");
timeContainer.setAttribute("id", "game-time");
let hoursDiv = document.createElement("div");
let hoursLabel = document.createElement("label");
hoursLabel.setAttribute("for", "game-hours");
hoursLabel.innerText = "Hours (max 5)"
let hours = document.createElement("input");
setAttributes(hours, {type: "number", id: "game-hours", name: "game-hours", min: "0", max: "5", value: game.timerParams?.hours})
let minutesDiv = document.createElement("div");
let minsLabel = document.createElement("label");
minsLabel.setAttribute("for", "game-minutes");
minsLabel.innerText = "Minutes"
let minutes = document.createElement("input");
setAttributes(minutes, {type: "number", id: "game-minutes", name: "game-minutes", min: "1", max: "60", value: game.timerParams?.minutes})
timeContainer.appendChild(hoursLabel);
timeContainer.appendChild(hours);
timeContainer.appendChild(minsLabel);
timeContainer.appendChild(minutes);
hoursDiv.appendChild(hoursLabel);
hoursDiv.appendChild(hours);
minutesDiv.appendChild(minsLabel);
minutesDiv.appendChild(minutes);
timeContainer.appendChild(hoursDiv);
timeContainer.appendChild(minutesDiv);
div.appendChild(timeContainer);
document.getElementById(containerId).appendChild(div);
@@ -245,6 +247,7 @@ function renderTimerStep(containerId, stepNumber, game) {
function renderReviewAndCreateStep(containerId, stepNumber, game) {
let div = document.createElement("div");
div.setAttribute("id", "step-" + stepNumber);
div.classList.add('step');
div.innerHTML =
"<div>" +
@@ -285,12 +288,6 @@ 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);
}
@@ -333,17 +330,12 @@ function showButtons(back, forward, forwardHandler, backHandler, builtGame=null)
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);
}
forwardHandler(
builtGame.deck.filter((card) => card.quantity > 0),
builtGame.hasTimer,
builtGame.hasDedicatedModerator,
builtGame.timerParams
);
});
document.getElementById("tracker-container").appendChild(createButton);
}
@@ -373,15 +365,13 @@ function loadCustomRoles(deckManager) {
let createRoleButton = document.createElement("button");
createRoleButton.setAttribute("id", "custom-role-btn");
createRoleButton.innerText = 'Create Custom Role';
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");
selectEl.setAttribute("class", "ui search dropdown");
addOptionsToList(deckManager.getCurrentCustomRoleOptions(), selectEl);
form.appendChild(selectEl);
@@ -394,9 +384,9 @@ function loadCustomRoles(deckManager) {
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);
document.querySelector("#add-card-to-deck-form .text").innerText = "";
}
})
form.appendChild(submitBtn);

2
client/modules/third_party/jQuery/jquery-3.6.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
client/modules/third_party/semantic-ui/dropdown.min.js vendored
View File

File diff suppressed because one or more lines are too long

3956
client/modules/third_party/semantic-ui/index.js vendored
View File

File diff suppressed because it is too large Load Diff

1
client/modules/third_party/semantic-ui/search.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
client/modules/third_party/semantic-ui/transition.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
client/scripts/game.js
View File

@@ -131,7 +131,12 @@ function processGameState (currentGameState, userId, socket, gameStateRenderer)
default:
break;
}
socket.emit(globals.COMMANDS.GET_TIME_REMAINING, currentGameState.accessCode);
if (currentGameState.timerParams) {
socket.emit(globals.COMMANDS.GET_TIME_REMAINING, currentGameState.accessCode);
} else {
document.querySelector('#game-timer')?.remove();
document.querySelector('label[for="game-timer"]')?.remove();
}
break;
case globals.STATUS.ENDED:
let container = document.getElementById("game-state-container")

7
client/styles/GLOBAL.css
View File

@@ -65,6 +65,7 @@ h3 {
color: #d7d7d7;
font-size: 14px;
margin-top: 3em;
margin-bottom: 0.5em;
}
#footer a img {
width: 32px;
@@ -125,13 +126,14 @@ button {
button, input[type="submit"] {
font-family: 'signika-negative', sans-serif !important;
padding: 10px;
background-color: #722c2c;
background-color: #13762b;
border-radius: 3px;
color: whitesmoke;
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 {
@@ -150,7 +152,8 @@ button:active, input[type=submit]:active {
}
button:hover, input[type="submit"]:hover, #game-link:hover {
background-color: #333243;
background-color: #326243;
border: 2px solid #1c8a36;
}
input {

45
client/styles/create.css
View File

@@ -36,10 +36,6 @@
border: 2px solid #c5c5c5;
}
.search {
color: black;
}
.card-role {
font-weight: bold;
pointer-events: none;
@@ -104,6 +100,11 @@
margin: 0 auto;
}
option {
background-color: #1f1f1f;
cursor: pointer;
}
#step-4 > div {
display: flex;
flex-direction: column;
@@ -139,6 +140,11 @@ select {
padding: 10px;
font-size: 18px;
font-family: 'signika-negative', sans-serif;
background-color: transparent;
color: #d7d7d7;
border-radius: 3px;
min-width: 10em;
cursor: pointer;
}
#game-form > div {
@@ -155,11 +161,26 @@ select {
display: flex;
}
#game-time {
display: flex;
flex-wrap: wrap;
background-color: #1f1f1f;
border-radius: 3px;
}
.step {
margin-bottom: 2em;
}
#game-time label, #game-time input {
margin-right: 10px;
font-size: 25px;
}
#game-time div {
margin: 0.5em;
}
label[for="game-time"], label[for="add-card-to-deck-form"], label[for="deck"] {
color: whitesmoke;
font-size: 20px;
@@ -189,6 +210,10 @@ input[type="number"] {
border: 2px solid #1c8a36;
}
#deck-select {
margin: 0.5em 1em 1.5em 0;
}
.dropdown {
margin: 0.5em;
}
@@ -260,6 +285,7 @@ input[type="number"] {
#step-back-button {
left: 15%;
background-color: #762323;
}
#step-1 div {
@@ -291,6 +317,7 @@ input[type="number"] {
background-color: #1f1f1f;
color: whitesmoke;
padding: 10px;
font-size: 18px;
width: fit-content;
border-radius: 3px;
margin: 0.5em 0;
@@ -313,6 +340,16 @@ input[type="number"] {
#step-1 div {
font-size: 20px;
}
.creation-step {
width: 13px;
height: 13px;
}
#step-forward-button, #step-back-button, #create-game {
padding: 10px 15px;
font-size: 16px;
}
}
@media(min-width: 551px) {

5
client/styles/game.css
View File

@@ -531,6 +531,11 @@ label[for='moderator'] {
width: 103px;
}
#game-link:hover {
background-color: #26282a;
border: 1px solid #d7d7d7;
}
.reveal-role-button {
background-color: #3f5256;
}

2
client/styles/home.css
View File

@@ -46,7 +46,7 @@ a button {
h3 {
font-size: 20px;
margin-bottom: 2em;
margin-bottom: 1em;
padding: 1em;
max-width: 23em;
font-family: 'diavlo', sans-serif;

9
client/styles/modal.css
View File

@@ -11,7 +11,6 @@
align-items: center;
justify-content: center;
max-width: 25em;
max-height: 80%;
height: fit-content;
font-family: sans-serif;
flex-direction: column;
@@ -40,13 +39,13 @@
font-size: 16px;
}
#close-modal-button {
background-color: #762323;
}
#modal-button-container {
display: flex;
width: 100%;
justify-content: space-between;
flex-direction: row;
}
#modal-button-container input {
color: #21ba45;
}

7
client/views/create.html
View File

@@ -16,13 +16,6 @@
<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/third_party/dropdown.min.css">
<link rel="stylesheet" href="./styles/third_party/transition.min.css">
<link rel="stylesheet" href="./styles/third_party/search.min.css">
<script src="./modules/third_party/jQuery/jquery-3.6.0.min.js"></script>
<script src="./modules/third_party/semantic-ui/transition.min.js"></script>
<script src="./modules/third_party/semantic-ui/dropdown.min.js"></script>
<script src="./modules/third_party/semantic-ui/search.min.js"></script>
</head>
<body>
<div id="navbar">