From 2241eb0b003d63a8a5ac4a559a9fde1bade718ee Mon Sep 17 00:00:00 2001 From: Maier Date: Fri, 10 Apr 2020 15:53:57 -0400 Subject: [PATCH] New standard role, allow custom werewolf roles to be added --- assets/images/roles-small/DreamWolf.png | Bin 0 -> 2286 bytes assets/images/roles/DreamWolf.png | Bin 0 -> 8886 bytes server.js | 4 +- static/cards.js | 25 +++++++----- static/game.js | 33 +++++++++------ static/setup.js | 17 ++++---- static/styles.css | 51 ++++++++++++++++++++++-- views/create_game.html | 5 +-- 8 files changed, 96 insertions(+), 39 deletions(-) create mode 100644 assets/images/roles-small/DreamWolf.png create mode 100644 assets/images/roles/DreamWolf.png diff --git a/assets/images/roles-small/DreamWolf.png b/assets/images/roles-small/DreamWolf.png new file mode 100644 index 0000000000000000000000000000000000000000..67b7a20976a5369f96de952e9efa910ae5fbb82f GIT binary patch literal 2286 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 literal 0 HcmV?d00001 diff --git a/server.js b/server.js index fab4c59..b4c76f5 100644 --- a/server.js +++ b/server.js @@ -64,10 +64,10 @@ function teamWon(game) { let totalAlive = 0; let hunterAlive = false; for (const player of game.players) { - if (player.card.role !== "Werewolf" && !player.dead) { + if (!player.card.isTypeOfWerewolf && !player.dead) { villagersAlive ++; } - if (player.card.role === "Werewolf" && !player.dead) { + if (player.card.isTypeOfWerewolf && !player.dead) { wolvesAlive ++; } if (player.card.role === "Hunter" && !player.dead) { diff --git a/static/cards.js b/static/cards.js index ed38014..8a3fa4d 100644 --- a/static/cards.js +++ b/static/cards.js @@ -3,50 +3,55 @@ export const cards = [ role: "Villager", team: "good", description: "During the day, find the wolves and kill them.", - powerRole: false + isTypeOfWerewolf: false }, { role: "Werewolf", team: "evil", description: "During the night, choose a villager to kill. Don't get killed.", - powerRole: false + isTypeOfWerewolf: true + }, + { + 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.", + isTypeOfWerewolf: true }, { role: "Minion", team: "evil", description: "You are an evil villager - you know who the wolves are, and you want them to win.", - powerRole: true + isTypeOfWerewolf: false }, { role: "Seer", team: "good", description: "During each night, choose one person. The moderator will tell you whether that player is a wolf.", - powerRole: true + isTypeOfWerewolf: false }, { role: "Shadow", team: "evil", description: "If the Seer checks you, the Seer dies that night instead of whoever the wolves chose to kill. Reveal" + " yourself to the moderator.", - powerRole: true + isTypeOfWerewolf: false }, { 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.", - powerRole: true + isTypeOfWerewolf: false }, { role: "Sorcerer", team: "good", - description: "Once a game, change who the wolves are going to kill to someone else, including yourself. You will" + - " see who is going to die each night until you use this power.", - powerRole: true + description: "Once a game, change who the wolves are going to kill to someone else, including yourself.", + isTypeOfWerewolf: false }, { role: "Mason", team: "good", description: "Masons know who other Masons are. Wake them up to see each other on the first night.", - powerRole: true + isTypeOfWerewolf: false } ]; diff --git a/static/game.js b/static/game.js index e5a0cf7..62d6ab1 100644 --- a/static/game.js +++ b/static/game.js @@ -2,7 +2,7 @@ import {utility} from './util.js' const socket = io(); -const standardRoles = ["Villager", "Werewolf", "Seer", "Shadow", "Hunter", "Mason", "Minion", "Sorcerer"]; +const standardRoles = ["Villager", "Werewolf", "Seer", "Shadow", "Hunter", "Mason", "Minion", "Sorcerer", "Dream Wolf"]; let clock; let currentGame = null; let lastGameState = null; @@ -83,7 +83,13 @@ function triggerEntranceAnimation(selector, entranceClass, exitClass, image) { transitionEl.exitClass = exitClass; transitionEl.offsetWidth; if (image && standardRoles.includes(currentGame.killedRole)) { - transitionEl.setAttribute("src", "../assets/images/roles/" + currentGame.killedRole + ".png"); + transitionEl.classList.remove("killed-role-custom"); + transitionEl.setAttribute("src", "../assets/images/roles/" + currentGame.killedRole.replace(/\s/g, '') + ".png"); + } else { + if (image) { + transitionEl.setAttribute("src", "../assets/images/custom.svg"); + transitionEl.setAttribute("class", "killed-role-custom"); + } } transitionEl.classList.add(entranceClass); } @@ -125,17 +131,20 @@ function renderEndSplash() { currentGame.winningTeam === "village" ? document.getElementById("end-container").innerHTML ="

Village

wins!
" : document.getElementById("end-container").innerHTML ="

Wolves

win!
"; - const wolfContainer = document.createElement("div"); - wolfContainer.setAttribute("id", "wolves"); - let wolfContent = "
The

evil

players were:
"; + const rosterContainer = document.createElement("div"); + rosterContainer.setAttribute("id", "roster"); + document.getElementById("end-container").innerHTML += "
Here's what everyone was:
"; + let rosterContent = ""; for (const player of currentGame.players) { - if (player.card.team === "evil") { - wolfContent += "
" + player.name + ": " + player.card.role + "
" - } + rosterContent += "
"; + rosterContent += standardRoles.includes(player.card.role) + ? "" + : ""; + rosterContent += player.name + ": " + player.card.role + "
" } - wolfContent += ""; - wolfContainer.innerHTML = wolfContent; - document.getElementById("end-container").appendChild(wolfContainer); + rosterContainer.innerHTML = rosterContent; + document.getElementById("end-container").appendChild(rosterContainer); + document.getElementById("end-container").innerHTML += ""; } @@ -200,7 +209,7 @@ function renderGame() { function renderPlayerCard(player) { const card = player.card; const cardArt = standardRoles.includes(card.role) ? - "" + card.role + "" + "" + card.role + "" : "
Custom Role
"; const cardClass = player.card.team === "good" ? "game-card-inner village" : "game-card-inner wolf"; const playerCard = document.createElement("div"); diff --git a/static/setup.js b/static/setup.js index 31d60ad..d7c2ba6 100644 --- a/static/setup.js +++ b/static/setup.js @@ -2,17 +2,17 @@ import {cards} from './cards.js' import {utility} from './util.js' const socket = io(); -const finishedArtArray = ["Villager", "Werewolf", "Seer", "Shadow", "Hunter", "Mason", "Minion", "Sorcerer"]; +const finishedArtArray = ["Villager", "Werewolf", "Seer", "Shadow", "Hunter", "Mason", "Minion", "Sorcerer", "Dream Wolf"]; // important declarations class Card { - constructor(role, team, description, powerRole) { + constructor(role, team, description, isTypeOfWerewolf) { this.id = null; this.role = role; + this.isTypeOfWerewolf = isTypeOfWerewolf; this.team = team; this.description = description; this.quantity = 0; - this.powerRole = powerRole; } } @@ -51,7 +51,7 @@ window.onload = function() { function renderAvailableCards() { for (let i = 0; i < cards.length; i ++) { - const newCard = new Card(cards[i].role, cards[i].team, cards[i].description, cards[i].powerRole); + const newCard = new Card(cards[i].role, cards[i].team, cards[i].description, cards[i].isTypeOfWerewolf); // put card info in the informational role description modal const modalRole = document.createElement("div"); modalRole.setAttribute("class", "modal-role"); @@ -61,7 +61,7 @@ function renderAvailableCards() { roleImage = "No art"; } else { roleImage = finishedArtArray.includes(cards[i].role) ? - "No art" + "No art" : "Art soon."; } modalRole.innerHTML = @@ -96,7 +96,7 @@ function renderAvailableCards() { ""; cardContainer.innerHTML = cards[i].custom ? cardContainer.innerHTML += "" + newCard.role + "" - : cardContainer.innerHTML +="" + newCard.role + ""; + : cardContainer.innerHTML +="" + newCard.role + ""; cardContainer.innerHTML += "
" + "

-

" + @@ -113,6 +113,7 @@ function renderAvailableCards() { cardBottom.quantityEl = cardQuantity; } renderCustomCard(); + resetCardQuantities(); } function renderCustomCard() { @@ -141,7 +142,7 @@ function addCustomCardToRoles(e) { role: document.getElementById("custom-role-name").value, team: document.getElementById("custom-role-team").value, description: document.getElementById("custom-role-desc").value, - powerRole: document.getElementById("custom-role-power").checked, + isTypeOfWerewolf: document.getElementById("custom-role-wolf").checked, custom: true }; cards.push(newCard); @@ -203,7 +204,7 @@ function buildDeckFromQuantities() { let playerDeck = []; for (const card of fullDeck) { for (let i = 0; i < card.quantity; i++) { - let newCard = new Card(card.role, card.team, card.description, card.powerRole); + let newCard = new Card(card.role, card.team, card.description, card.isTypeOfWerewolf); newCard.id = utility.generateID(); playerDeck.push(newCard); } diff --git a/static/styles.css b/static/styles.css index 2612e5c..f4c98a6 100644 --- a/static/styles.css +++ b/static/styles.css @@ -911,10 +911,16 @@ label { } #game-card img { - width: 230px; - top: 15px; + width: 215px; + top: 35px; position: absolute; z-index: 4; + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } .placeholder { @@ -957,6 +963,8 @@ label { padding: 0.5em; font-size: 0.8em; color: #464552; + max-height: 68px; + overflow: auto; } .game-container { @@ -1058,6 +1066,13 @@ label { margin: 0 auto; display: inline-block; text-align: left; + width: 100%; +} + +#end-container #roster { + width: 100%; + flex-wrap: wrap; + display: flex; } #end-container .winner-header { @@ -1065,6 +1080,7 @@ label { align-items: center; margin: 0; font-size: 30px; + margin: 10px 0 30px 0; } #end-container .evil-subheader { @@ -1074,6 +1090,28 @@ label { font-size: 1.5em; } +#end-container .roster-list-item { + background-color: #40464a; + padding: 10px; + border-radius: 5px; + display: flex; + align-items: center; + font-size: 20px; + width: 33%; + min-width: 13em; + margin: 0.3em; +} + +#end-container .roster-header { + font-size: 25px; + margin-bottom: 1em; + +} + +#end-container .roster-list-item img { + margin-right: 0.5em; +} + #end-container .evil-header { display: flex; align-items: center; @@ -1084,8 +1122,8 @@ label { #end-container p { font-weight: bold; - margin-right: 0.3em; - font-size: 50px; + margin: 0 0.3em 0 0; + font-size: 70px; } #end-container button { @@ -1233,6 +1271,11 @@ label { margin: 0 auto; } +.killed-role-custom { + width: 190px; + padding: 95px; +} + @keyframes slide-fade-in-top { 0% { opacity: 0; diff --git a/views/create_game.html b/views/create_game.html index 529a45f..f32d7c7 100644 --- a/views/create_game.html +++ b/views/create_game.html @@ -26,7 +26,6 @@