- 
- 
-
+An application to run games of Werewolf (Mafia)
+smoothly when you don't have a deck, or when you and your friends are together virtually. Inspired by my time playing
+Ultimate Werewolf and by
+2020's quarantine. The app is free to use and anonymous.
-This app is still in active development. The latest deployment can be found here
+After a long hiatus from maintaining the application, I have come back and undertaken a large-scale redesign, rewriting
+most of the code and producing a result that I believe is more stable and has much more sensible client-server interaction.
-A Werewolf utility that provides the tools to run games smoothly in the absence of a deck, or in any context in which traditional moderation is hindered.
+
-This is a Javascript application running on a node express server. I am using the socket.io package as a wrapper for Javascript Websocket. This was built from scratch as a learning project; I do not claim it as a shining example of socket programming or web app design in general. I welcome collaboration and suggestions for improvements.
+## Features
-All pixel art is my own (for better or for worse).
+This is meant to facilitate a game through a shared game state and various utilities - not to control
+every aspect of the game flow. The app provides a host the ability to construct a deck with a custom distribution
+of roles. Players can join a game with one click and are then dealt a role to their device. The app features a concealable
+role card, an optional shared timer (which the moderator can play/pause), a reference for roles in the game, and status
+information for players including who is alive/dead and who has had their role revealed. The app also provides the
+option for a "dedicated moderator" or a "temporary moderator." Dedicated moderators will never be dealt in, and will
+have all controls and information from the beginning of the game. Temporary moderators _will_ be dealt a role and will
+have some moderator powers, but will only exist until the first player is out, at which point that player will be made
+the game's dedicated moderator. A dedicated moderator can transfer their powers to another player that is out of the
+game at any time.
-This is meant to facilitate the game in a face-to-face social setting and provide utility/convenience - not control all aspects of the game flow. The app allows players to create or join a game lobby where state is synchronized. The creator of the game can build a deck from either the standard set of provided cards, or from any number of custom cards the user creates. Once the game begins, this deck will be randomly dealt to all participants.
+The application prioritizes responsiveness. A key scenario would be when a group is hanging out with only their phones.
-Players will see their card (which can be flipped up and down), an optional timer, and a button to say that they have been killed off. If a player presses the button, they will be removed from the game, and their role revealed to other players. The game will continue until the end of the game is detected, or the timer expires.
+## Tech Stack
-To learn more about this type of game, see the Wikipedia entry on the game's ancestor, Mafia.
+This is a Node.js application. It is written purely using JavaScript/HTML/CSS. The main dependencies are
+Express.js and Socket.io. It is fully open-source
+and under the MIT license. This was (and still is) fundamentally a learning project, and thus I welcome collaboration
+and feedback of any kind.
-
-
-
-
- 
- 
--
' + + '+
' + + '
' +
+ '' +
+ 'Home' +
+ 'Create' +
+ 'How to Use' +
+ 'Contact' +
+ 'Support the App';
+}
+
+function attachHamburgerListener () {
+ if (document.getElementById('navbar') !== null && document.getElementById('navbar').style.display !== 'none') {
+ document.getElementById('navbar-hamburger').addEventListener('click', flipHamburger);
+ }
+}
diff --git a/client/src/modules/StateBucket.js b/client/src/modules/StateBucket.js
new file mode 100644
index 0000000..af46c84
--- /dev/null
+++ b/client/src/modules/StateBucket.js
@@ -0,0 +1,8 @@
+/* It started getting confusing where I am reading/writing to the game state, and thus the state started to get inconsistent.
+ Creating a bucket to hold it so I can overwrite the gameState object whilst still preserving a reference to the containing bucket.
+ Now several components can read a shared game state.
+ */
+export const stateBucket = {
+ currentGameState: null,
+ timerWorker: null
+};
diff --git a/client/src/modules/Templates.js b/client/src/modules/Templates.js
new file mode 100644
index 0000000..6d23494
--- /dev/null
+++ b/client/src/modules/Templates.js
@@ -0,0 +1,266 @@
+export const templates = {
+ LOBBY:
+ "
" +
+ "" +
+ '
" +
+ "" +
+ '(click again to hide)
' + + '(click again to hide)
' + + '
' +
+ '
' +
+ '
' +
+ '
' +
+ 'Connecting to game...
+
+ 
+ 
+ More content coming soon.
+Village
wins!Wolves
win!![](/assets/images/roles-small/" + player.card.role.replace(/\s/g, )
"
- : "
";
- rosterContent += player.name + ": " + player.card.role + "
"
- : "
";
- document.getElementById("play-pause").addEventListener("click", pauseOrResumeGame)
- }
-
- // add the "I'm dead" button
- let killedBtn = document.createElement("button");
- killedBtn.setAttribute("id", "dead-btn");
-
- if (player.dead) {
- killedBtn.setAttribute("class", "app-btn killed-btn disabled");
- killedBtn.innerText = "Killed"
- } else {
- killedBtn.setAttribute("class", "app-btn killed-btn");
- killedBtn.innerText = "I'm dead";
- }
- if (document.getElementById("dead-btn")) {
- document.getElementById("card-container").removeChild(document.getElementById("dead-btn"));
- }
- document.getElementById("card-container").appendChild(killedBtn);
- document.getElementById("dead-btn").addEventListener("click", killPlayer);
-
- // add the list of dead/alive players
- renderDeadAndAliveInformation();
-}
-
-function renderDeadAndAliveInformation() {
- // TODO: Refactor this function.
- currentGame.players = currentGame.players.sort((a, b) =>
- {
- return a.card.role > b.card.role ? 1 : -1;
- });
- let infoContainer = document.getElementById("info-container");
- let alivePlayers = currentGame.players.filter((player) => !player.dead);
- let deadPlayers = currentGame.players.filter((player) => player.dead);
- deadPlayers.sort((a, b) => { // sort players by the time they died
- return new Date(a.deadAt) > new Date(b.deadAt) ? -1 : 1;
- });
-
- let killedContainer = document.createElement("div");
- killedContainer.setAttribute("id", "killed-container");
- let killedHeader = document.createElement("h2");
- killedHeader.innerText = "Killed Players";
- killedContainer.appendChild(killedHeader);
-
- addDeadPlayers(deadPlayers, killedContainer);
-
- let aliveContainer = document.createElement("div");
- aliveContainer.setAttribute("id", "alive-container");
- let aliveHeader = document.createElement("h2");
- aliveContainer.appendChild(aliveHeader);
- aliveHeader.innerText = currentGame.reveals
- ? "Roles Still Alive"
- : "Roles in the Game";
- var rollCounter = {}; // RTM
-
- if (currentGame.reveals) {
- addAlivePlayers(alivePlayers, aliveContainer, rollCounter);
- } else {
- addAlivePlayers(currentGame.players, aliveContainer, rollCounter);
- }
-
- if (infoContainer === null) {
- infoContainer = document.createElement("div");
- infoContainer.setAttribute("id", "info-container");
- infoContainer.appendChild(killedContainer);
- infoContainer.appendChild(aliveContainer);
- document.getElementById("game-container").appendChild(infoContainer);
- // Has to be done AFTER the infoContainer is rendered in the DOM to insert the updated counts
- for (let x of document.getElementsByClassName("alive-player")) {
- x.getElementsByClassName("rolecount")[0].innerText = rollCounter[x.getElementsByTagName("p")[0].innerText];
- }
- } else {
- document.getElementById("killed-container").remove();
- document.getElementById("alive-container").remove();
- document.getElementById("info-container").append(killedContainer);
- document.getElementById("info-container").append(aliveContainer);
- // Has to be done AFTER the infoContainer is rendered in the DOM to insert the updated counts
- for (let x of document.getElementsByClassName("alive-player")) {
- x.getElementsByClassName("rolecount")[0].innerText = rollCounter[x.getElementsByTagName("p")[0].innerText];
- }
- }
-}
-
-function addDeadPlayers(deadPlayers, killedContainer) {
- deadPlayers.forEach((player) => {
- let deadPlayerClass = player.card.team === "good" ? "dead-player-village" : "dead-player-evil";
- if (player.card.isTypeOfWerewolf) {
- deadPlayerClass += " dead-player-wolf";
- }
- const killedPlayer = document.createElement("div");
- if (currentGame.reveals) {
- killedPlayer.setAttribute("class", "killed-player " + deadPlayerClass);
- } else {
- killedPlayer.setAttribute("class", "killed-player dead-player-no-reveals");
- }
- killedPlayer.innerText = currentGame.reveals
- ? player.name + ": " + player.card.role
- : player.name;
- killedContainer.appendChild(killedPlayer);
- });
-}
-
-function addAlivePlayers(alivePlayers, aliveContainer, rollCounter) {
- alivePlayers.forEach((player) => {
- let alivePlayerClass = player.card.team === "good" ? "alive-player-village" : "alive-player-evil";
- if (player.card.isTypeOfWerewolf) {
- alivePlayerClass += " alive-player-wolf";
- }
- //RTM
- if (rollCounter.hasOwnProperty(player.card.role)) {
- rollCounter[player.card.role] += 1;
- } else {
- rollCounter[player.card.role] = 1;
- //RTM
- const alivePlayer = document.createElement("div");
- alivePlayer.setAttribute("class", "alive-player " + alivePlayerClass);
- alivePlayer.innerHTML = "" + player.card.role + "
";
- let roleCount = document.createElement("span"); // RTM
- roleCount.setAttribute("class", "rolecount");
- //Add hidden description span - RTM 4/18/2020
- let playerCardInfo=document.createElement("span");
- playerCardInfo.setAttribute("class","tooltiptext");
- playerCardInfo.innerText=player.card.description;
- alivePlayer.prepend(roleCount);
- alivePlayer.appendChild(playerCardInfo);
- aliveContainer.appendChild(alivePlayer);
- }
- });
-}
-
-function renderPlayerCard(player) {
- const card = player.card;
- const cardArt = standardRoles.includes(card.role) ?
- "![" + card.role + "](../assets/images/roles/" + card.role.replace(/\s/g, )
"
- : "" + card.description + "
" + - "Click to flip
" + - "" + player.name + "
"; - document.getElementById("lobby-container").appendChild(playerContainer); - document.getElementById("join-count").innerText = currentGame.players.length.toString(); - } - i ++; - } - // display the launch button if the player is the host - if (sessionStorage.getItem("host")) { - if (currentGame.players.length === currentGame.size) { - document.getElementById("launch").innerHTML = ""; - document.getElementById("launch").addEventListener("click", launchGame); - } else { - document.getElementById("launch").innerHTML = ""; - } - } else { - document.getElementById("launch").innerHTML = "The host will start the game.
" - } -} - -// request game state from server periodically -setInterval(function () { - socket.emit('requestState', {code: sessionStorage.getItem("code")}); -}, 200); diff --git a/javascript/index.js b/javascript/index.js deleted file mode 100644 index 419cfa1..0000000 --- a/javascript/index.js +++ /dev/null @@ -1,27 +0,0 @@ -let gameModeSelect = false; - -window.onload = function() { - document.getElementById("create-game").addEventListener("click", toggleGameModeSelect); - document.getElementById("game-mode-back").addEventListener("click", toggleGameModeSelect) -}; - -function toggleGameModeSelect() { - gameModeSelect = !gameModeSelect; - let mainButtons = document.getElementById("main-buttons"); - let gameModes = document.getElementById("game-mode-select"); - if (gameModeSelect) { - mainButtons.classList.remove("slide-in"); - mainButtons.offsetWidth; - mainButtons.classList.add("slide-out"); - mainButtons.addEventListener("animationend", function() { mainButtons.style.display = "none" }, {capture: true, once: true}); - - gameModes.style.display = "flex"; - } else { - gameModes.style.display = "none"; - - mainButtons.style.display = "flex"; - mainButtons.classList.remove("slide-out"); - mainButtons.offsetWidth; - mainButtons.classList.add("slide-in"); - } -} diff --git a/javascript/join.js b/javascript/join.js deleted file mode 100644 index 512e2e0..0000000 --- a/javascript/join.js +++ /dev/null @@ -1,45 +0,0 @@ -const socket = io(); -import { utility } from './util.js' - -// respond to the game state received from the server -socket.on('joinError', function(message) { - document.getElementById("join-btn").classList.remove('disabled'); - document.getElementById("code").classList.add("error"); - document.getElementById("join-error").innerText = message; -}); - -// respond to the game state received from the server -socket.on('success', function() { - document.getElementById("join-btn").classList.remove('disabled'); - if (document.getElementById("code").classList.contains("error")) { - document.getElementById("code").classList.remove("error"); - document.getElementById("join-error").innerText = ""; - } - // If a player was a host of a previous game, don't make them the host of this one - if (sessionStorage.getItem("host")) { - sessionStorage.removeItem("host"); - } - window.location.replace('/' + document.getElementById("code").value.toString().trim().toLowerCase()); -}); - -document.getElementById("join-btn").addEventListener("click", function() { - document.getElementById("join-btn").classList.add('disabled'); - if (document.getElementById("name").value.length > 0) { - const code = document.getElementById("code").value.toString().trim().toLowerCase(); - if (document.getElementById("name").classList.contains("error")) { - document.getElementById("name").classList.remove("error"); - document.getElementById("name-error").innerText = ""; - } - sessionStorage.setItem("code", code); - let playerId = utility.generateID(); - sessionStorage.setItem("id", playerId); - const playerInfo = {name: document.getElementById("name").value, id: playerId, code: code}; - socket.emit('joinGame', playerInfo); - } else { - document.getElementById("join-btn").classList.remove('disabled'); - document.getElementById("name").classList.add("error"); - document.getElementById("name-error").innerText = "Name is required."; - } - -}); - diff --git a/javascript/modules/card-manager.js b/javascript/modules/card-manager.js deleted file mode 100644 index 1b852a7..0000000 --- a/javascript/modules/card-manager.js +++ /dev/null @@ -1,133 +0,0 @@ -const finishedArtArray = ["Villager", "Werewolf", "Seer", "Shadow", "Hunter", "Mason", "Minion", "Sorcerer", "Dream Wolf"]; - -export class CardManager { - constructor() {} - - static createCard(card) { - return new Card(card.role, card.team, card.description, card.quantity, card.isTypeOfWerewolf, card.custom, card.saved); - } - - // builds element for the informational role modal on the setup page - static constructModalRoleElement(card) { - const modalRole = document.createElement("div"); - modalRole.setAttribute("class", "modal-role"); - const roleClass = card.team === "good" ? "role-village" : "role-wolf"; - let roleImage; - if (card.custom === true) { - roleImage = "";
- } else {
- roleImage = finishedArtArray.includes(card.role) ?
- "![No art](/assets/images/roles-small/" + card.role.replace(/\s/g, )
"
- : "Art soon.";
- }
- modalRole.innerHTML =
- "" + card.team + "
" + - "" + card.description + "
"; - return modalRole; - } - - static constructDeckBuilderElement(card, index) { - const cardContainer = document.createElement("div"); - - const quantityClass = card.team === "good" ? "card-quantity quantity-village" : "card-quantity quantity-wolf"; - - let cardClass = card.isTypeOfWerewolf ? "card card-werewolf" : "card"; - cardContainer.setAttribute("class", cardClass); - if (card.team === "good") { - cardContainer.setAttribute("id", "card-" + index); - } else { - cardContainer.setAttribute("id", "card-" + index); - } - cardContainer.innerHTML = - "" + card.role + "
" + - "+
" + - ""
- : cardContainer.innerHTML +="";
- cardContainer.innerHTML +=
- "-
" + - "-
" + - "" + card.role + "
" + - "+
" + - "
+