diff --git a/assets/images/roles-small/DreamWolf.png b/assets/images/roles-small/DreamWolf.png new file mode 100644 index 0000000..67b7a20 Binary files /dev/null and b/assets/images/roles-small/DreamWolf.png differ diff --git a/assets/images/roles/DreamWolf.png b/assets/images/roles/DreamWolf.png new file mode 100644 index 0000000..bf5b085 Binary files /dev/null and b/assets/images/roles/DreamWolf.png differ 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 @@