gcloud, crude killing players functionality

.gcloudignore

@@ -0,0 +1,17 @@
+# This file specifies files that are *not* uploaded to Google Cloud
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+# Node.js dependencies:
+node_modules/

app.yaml

@@ -0,0 +1 @@
+runtime: nodejs14

client/config/globals.js

@@ -11,7 +11,8 @@ export const globals = {
         START_GAME: 'startGame',
         PAUSE_TIMER: 'pauseTimer',
         RESUME_TIMER: 'resumeTimer',
-        GET_TIME_REMAINING: 'getTimeRemaining'
+        GET_TIME_REMAINING: 'getTimeRemaining',
+        KILL_PLAYER: 'killPlayer'
     },
     STATUS: {
         LOBBY: "lobby",

client/modules/GameStateRenderer.js

@@ -3,8 +3,10 @@ import { toast } from "./Toast.js";
 import {templates} from "./Templates.js";
 
 export class GameStateRenderer {
-    constructor(gameState) {
+    constructor(gameState, socket) {
         this.gameState = gameState;
+        this.socket = socket;
+        this.killPlayerHandlers = {};
         this.cardFlipped = false;
     }
 
@@ -61,38 +63,26 @@ export class GameStateRenderer {
         // document.getElementById("game-title").appendChild(title);
     }
 
-    renderPlayerRole() {
-        let name = document.querySelector('#role-name');
-        name.innerText = this.gameState.client.gameRole;
-        if (this.gameState.client.alignment === globals.ALIGNMENT.GOOD) {
-            name.classList.add('good');
-        } else {
-            name.classList.add('evil');
-        }
-        name.setAttribute("title", this.gameState.client.gameRole);
-        document.querySelector('#role-description').innerText = this.gameState.client.gameRoleDescription;
-        document.getElementById("role-image").setAttribute(
-            'src',
-            '../images/roles/' + this.gameState.client.gameRole.replaceAll(' ', '') + '.png'
-        );
-
-        document.getElementById("game-role-back").addEventListener('click', () => {
-            document.getElementById("game-role").style.display = 'flex';
-            document.getElementById("game-role-back").style.display = 'none';
-        });
-
-        document.getElementById("game-role").addEventListener('click', () => {
-            document.getElementById("game-role-back").style.display = 'flex';
-            document.getElementById("game-role").style.display = 'none';
-        });
-    }
-
     renderModeratorView() {
         let div = document.createElement("div");
         div.innerHTML = templates.END_GAME_PROMPT;
         document.body.appendChild(div);
-        renderModeratorPlayers(this.gameState.people);
+        renderPlayersWithRoleAndAlignmentInfo(this.gameState.people, this.socket, this.gameState.accessCode, this.killPlayerHandlers);
     }
+
+    renderPlayerView() {
+        renderPlayerRole(this.gameState);
+        renderPlayersWithNoRoleInformation(this.gameState.people, this.killPlayerHandlers);
+    }
+
+    refreshPlayerList(isModerator) {
+        if (isModerator) {
+            renderPlayersWithRoleAndAlignmentInfo(this.gameState.people, this.socket, this.gameState.accessCode, this.killPlayerHandlers)
+        } else {
+            renderPlayersWithNoRoleInformation(this.gameState.people, this.killPlayerHandlers);
+        }
+    }
+
 }
 
 function renderLobbyPerson(name, userType) {
@@ -125,27 +115,95 @@ function removeExistingTitle() {
     }
 }
 
-function renderModeratorPlayers(people) {
+function renderPlayersWithRoleAndAlignmentInfo(people, socket, accessCode, handlers) {
-    people.sort();
+    document.querySelectorAll('.game-player').forEach((el) => {
+        let pointer = el.dataset.pointer;
+        if (pointer && handlers[pointer]) {
+            el.removeEventListener('click', handlers[pointer])
+        }
+        el.remove();
+    });
+    people.sort((a, b) => {
+        return a.name >= b.name ? 1 : -1;
+    });
     let teamGood = people.filter((person) => person.alignment === globals.ALIGNMENT.GOOD);
     let teamEvil = people.filter((person) => person.alignment === globals.ALIGNMENT.EVIL);
-    renderGroupOfPlayersFromTeam(teamEvil, globals.ALIGNMENT.EVIL);
+    renderGroupOfPlayers(teamEvil, handlers, accessCode, globals.ALIGNMENT.EVIL, true, socket);
-    renderGroupOfPlayersFromTeam(teamGood, globals.ALIGNMENT.GOOD);
+    renderGroupOfPlayers(teamGood, handlers, accessCode, globals.ALIGNMENT.GOOD, true, socket);
     document.getElementById("players-alive-label").innerText =
         'Players: ' + people.filter((person) => !person.out).length + ' / ' + people.length + ' Alive';
 
 }
 
-function renderGroupOfPlayersFromTeam(players, alignment) {
+function renderPlayersWithNoRoleInformation(people, handlers) {
+    document.querySelectorAll('.game-player').forEach((el) => el.remove());
+    people.sort((a, b) => {
+        return a.name >= b.name ? 1 : -1;
+    });
+    renderGroupOfPlayers(people, handlers);
+    document.getElementById("players-alive-label").innerText =
+        'Players: ' + people.filter((person) => !person.out).length + ' / ' + people.length + ' Alive';
+
+}
+
+function renderGroupOfPlayers(players, handlers, accessCode=null, alignment=null, moderator=false, socket=null) {
     for (let player of players) {
         let container = document.createElement("div");
-        container.classList.add('moderator-player');
+        container.classList.add('game-player');
-        container.innerHTML = templates.MODERATOR_PLAYER;
+        container.dataset.pointer = player.id;
-        container.querySelector('.moderator-player-name').innerText = player.name;
+        if (alignment) {
-        let roleElement = container.querySelector('.moderator-player-role')
+            container.innerHTML = templates.MODERATOR_PLAYER;
-        roleElement.innerText = player.gameRole;
+        } else {
-        roleElement.classList.add(alignment);
+            container.innerHTML = templates.GAME_PLAYER;
+        }
+        container.querySelector('.game-player-name').innerText = player.name;
+        let roleElement = container.querySelector('.game-player-role')
 
-        document.getElementById("player-list-moderator-team-" + alignment).appendChild(container);
+        if (alignment) {
+            roleElement.classList.add(alignment);
+            roleElement.innerText = player.gameRole;
+            document.getElementById("player-list-moderator-team-" + alignment).appendChild(container);
+        } else {
+            roleElement.innerText = "Unknown"
+            document.getElementById("game-player-list").appendChild(container);
+        }
+
+        if (moderator) {
+            handlers[player.id] = () => {
+                socket.emit(globals.COMMANDS.KILL_PLAYER, accessCode, player.id);
+            }
+            if (player.out) {
+                container.classList.add('killed');
+                container.querySelector('.kill-player-button').remove();
+            } else {
+                container.querySelector('.kill-player-button').addEventListener('click', handlers[player.id]);
+            }
+        }
     }
 }
+
+function renderPlayerRole(gameState) {
+    let name = document.querySelector('#role-name');
+    name.innerText = gameState.client.gameRole;
+    if (gameState.client.alignment === globals.ALIGNMENT.GOOD) {
+        name.classList.add('good');
+    } else {
+        name.classList.add('evil');
+    }
+    name.setAttribute("title", gameState.client.gameRole);
+    document.querySelector('#role-description').innerText = gameState.client.gameRoleDescription;
+    document.getElementById("role-image").setAttribute(
+        'src',
+        '../images/roles/' + gameState.client.gameRole.replaceAll(' ', '') + '.png'
+    );
+
+    document.getElementById("game-role-back").addEventListener('click', () => {
+        document.getElementById("game-role").style.display = 'flex';
+        document.getElementById("game-role-back").style.display = 'none';
+    });
+
+    document.getElementById("game-role").addEventListener('click', () => {
+        document.getElementById("game-role-back").style.display = 'flex';
+        document.getElementById("game-role").style.display = 'none';
+    });
+}

client/modules/Templates.js

@@ -25,16 +25,12 @@ export const templates = {
     "<div id='end-game-prompt'>" +
         "<button id='end-game-button'>End Game</button>" +
     "</div>",
-    GAME:
+    PLAYER_GAME_VIEW:
     "<div id='game-header'>" +
         "<div>" +
             "<label for='game-timer'>Time Remaining</label>" +
             "<div id='game-timer'></div>" +
         "</div>" +
-        "<div>" +
-            "<label for='alive-count'>Players Left</label>" +
-            "<div id='alive-count'></div>" +
-        "</div>" +
     "</div>" +
     "<div id='game-role' style='display:none'>" +
         "<h4 id='role-name'></h4>" +
@@ -44,6 +40,10 @@ export const templates = {
     "<div id='game-role-back'>" +
         "<h4>Click to reveal your role</h4>" +
         "<p>(click again to hide)</p>" +
+    "</div>" +
+    "<div>" +
+        "<label id='players-alive-label'></label>" +
+        "<div id='game-player-list'></div>" +
     "</div>",
     MODERATOR_GAME_VIEW:
     "<div id='game-header'>" +
@@ -58,7 +58,7 @@ export const templates = {
     "</div>" +
     "<div>" +
         "<label id='players-alive-label'></label>" +
-        "<div id='player-list-moderator'>" +
+        "<div id='game-player-list'>" +
             "<div class='evil-players'>" +
                 "<label class='evil'>Team Evil</label>" +
                 "<div id='player-list-moderator-team-evil'></div>" +
@@ -71,10 +71,15 @@ export const templates = {
     "</div>",
     MODERATOR_PLAYER:
         "<div>" +
-            "<div class='moderator-player-name'></div>" +
+            "<div class='game-player-name'></div>" +
-            "<div class='moderator-player-role'></div>" +
+            "<div class='game-player-role'></div>" +
         "</div>" +
         "<div>" +
             "<button class='moderator-player-button kill-player-button'>Kill \u2694</button>" +
+        "</div>",
+    GAME_PLAYER:
+        "<div>" +
+            "<div class='game-player-name'></div>" +
+            "<div class='game-player-role'></div>" +
         "</div>"
 }

client/scripts/game.js

@@ -33,9 +33,9 @@ function prepareGamePage(environment, socket, timerWorker) {
             } else {
                 toast('You are connected.', 'success', true, true, 3);
                 console.log(gameState);
-                userId = gameState.client.id;
+                userId = gameState.client.cookie;
                 UserUtility.setAnonymousUserId(userId, environment);
-                let gameStateRenderer = new GameStateRenderer(gameState);
+                let gameStateRenderer = new GameStateRenderer(gameState, socket);
                 let gameTimerManager;
                 if (gameState.timerParams) {
                     gameTimerManager = new GameTimerManager(gameState, socket);
@@ -71,8 +71,8 @@ function processGameState (gameState, userId, socket, gameStateRenderer) {
             gameStateRenderer.renderGameHeader();
             switch (gameState.client.userType) {
                 case globals.USER_TYPES.PLAYER:
-                    document.getElementById("game-state-container").innerHTML = templates.GAME;
+                    document.getElementById("game-state-container").innerHTML = templates.PLAYER_GAME_VIEW;
-                    gameStateRenderer.renderPlayerRole();
+                    gameStateRenderer.renderPlayerView();
                     break;
                 case globals.USER_TYPES.MODERATOR:
                     document.querySelector("#start-game-prompt")?.remove();
@@ -121,9 +121,9 @@ function setClientSocketHandlers(gameStateRenderer, socket, timerWorker, gameTim
             socket.emit(
                 globals.COMMANDS.FETCH_GAME_STATE,
                 gameStateRenderer.gameState.accessCode,
-                gameStateRenderer.gameState.client.id,
+                gameStateRenderer.gameState.client.cookie,
                 function (gameState) {
-                    processGameState(gameState, gameState.client.id, socket, gameStateRenderer);
+                    processGameState(gameState, gameState.client.cookie, socket, gameStateRenderer);
                 }
             );
         });
@@ -142,7 +142,7 @@ function displayStartGamePromptForModerators(gameStateRenderer, socket) {
     document.getElementById("start-game-button").addEventListener('click', (e) => {
         e.preventDefault();
         if (confirm("Start the game and deal roles?")) {
-            socket.emit(globals.COMMANDS.START_GAME, gameStateRenderer.gameState.accessCode, gameStateRenderer.gameState.client.id);
+            socket.emit(globals.COMMANDS.START_GAME, gameStateRenderer.gameState.accessCode, gameStateRenderer.gameState.client.cookie);
         }
 
     });

client/styles/game.css

@@ -314,7 +314,6 @@ label[for='moderator'] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: space-evenly;
     flex-direction: column;
 }
 
@@ -326,7 +325,7 @@ label[for='moderator'] {
     margin-bottom: 1em;
 }
 
-.moderator-player {
+.game-player {
     border-left: 2px solid gray;
     display: flex;
     color: #d7d7d7;
@@ -335,9 +334,10 @@ label[for='moderator'] {
     padding: 0 5px;
     justify-content: space-between;
     margin: 0.5em 0;
+    position: relative;
 }
 
-.moderator-player-name {
+.game-player-name {
     width: 10em;
     overflow: hidden;
     white-space: nowrap;
@@ -360,6 +360,21 @@ label[for='moderator'] {
     min-width: 6em;
 }
 
+.killed::after {
+    content: '\01F480';
+    position: absolute;
+    right: -44px;
+    font-size: 24px;
+}
+
+.killed {
+    filter: grayscale(1);
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+}
+
 .make-mod-button {
     background-color: #3f5256;
     font-size: 18px;
@@ -378,7 +393,7 @@ label[for='moderator'] {
     background-color: #3f5256;
 }
 
-#player-list-moderator > div {
+#game-player-list > div {
     padding: 2px 10px;
     border-radius: 3px;
     margin-bottom: 1em;

server/api/GamesAPI.js

@@ -1,7 +1,7 @@
 const express = require('express');
 const router = express.Router();
 const debugMode = Array.from(process.argv.map((arg) => arg.trim().toLowerCase())).includes('debug');
-const logger = require('../modules/logger')(debugMode);
+const logger = require('../modules/Logger')(debugMode);
 const GameManager = require('../modules/GameManager.js');
 
 const gameManager = new GameManager().getInstance();

server/config/globals.js

@@ -8,7 +8,8 @@ const globals = {
         START_GAME: 'startGame',
         PAUSE_TIMER: 'pauseTimer',
         RESUME_TIMER: 'resumeTimer',
-        GET_TIME_REMAINING: 'getTimeRemaining'
+        GET_TIME_REMAINING: 'getTimeRemaining',
+        KILL_PLAYER: 'killPlayer'
     },
     STATUS: {
         LOBBY: "lobby",

server/model/Person.js

@@ -1,7 +1,8 @@
 // noinspection DuplicatedCode
 class Person {
-    constructor(id, name, userType, gameRole=null, gameRoleDescription=null, alignment=null, assigned=false) {
+    constructor(id, cookie, name, userType, gameRole=null, gameRoleDescription=null, alignment=null, assigned=false) {
         this.id = id;
+        this.cookie = cookie
         this.socketId = null;
         this.name = name;
         this.userType = userType;

server/modules/GameManager.js

@@ -91,6 +91,18 @@ class GameManager {
                 }
             }
         });
+
+        socket.on(globals.CLIENT_COMMANDS.KILL_PLAYER, (accessCode, personId) => {
+            let game = this.activeGameRunner.activeGames[accessCode];
+            if (game) {
+                let person = game.people.find((person) => person.id === personId)
+                if (person) {
+                    this.logger.debug('game ' + accessCode + ': killing player ' + person.name);
+                    person.out = true;
+                    namespace.in(accessCode).emit(globals.CLIENT_COMMANDS.KILL_PLAYER, )
+                }
+            }
+        })
     }
 
 
@@ -154,7 +166,7 @@ function initializeModerator(name, hasDedicatedModerator) {
     const userType = hasDedicatedModerator
         ? globals.USER_TYPES.MODERATOR
         : globals.USER_TYPES.TEMPORARY_MODERATOR;
-    return new Person(createRandomUserId(), name, userType)
+    return new Person(createRandomId(), createRandomId(), name, userType)
 }
 
 function initializePeopleForGame(uniqueCards, moderator) {
@@ -180,7 +192,7 @@ function initializePeopleForGame(uniqueCards, moderator) {
     }
 
     while (j < numberOfRoles) {
-        people.push(new Person(createRandomUserId(), UsernameGenerator.generate(), globals.USER_TYPES.PLAYER, cards[j].role, cards[j].description, cards[j].team))
+        people.push(new Person(createRandomId(), createRandomId(), UsernameGenerator.generate(), globals.USER_TYPES.PLAYER, cards[j].role, cards[j].description, cards[j].team))
         j ++;
     }
 
@@ -197,7 +209,7 @@ function shuffleArray (array) {
     return array;
 }
 
-function createRandomUserId () {
+function createRandomId () {
     let id = '';
     for (let i = 0; i < globals.USER_SIGNATURE_LENGTH; i++) {
         id += globals.ACCESS_CODE_CHAR_POOL[Math.floor(Math.random() * globals.ACCESS_CODE_CHAR_POOL.length)];
@@ -226,11 +238,11 @@ class Singleton {
     cookie. Though if a client wants to clear their cookie and reset their connection, there's not much we can do.
     The best thing in my opinion is to make it hard for clients to _accidentally_ break their experience.
  */
-function handleRequestForGameState(namespace, logger, gameRunner, accessCode, personId, ackFn, socket) {
+function handleRequestForGameState(namespace, logger, gameRunner, accessCode, personCookie, ackFn, socket) {
     const game = gameRunner.activeGames[accessCode];
     if (game) {
-        let matchingPerson = game.people.find((person) => person.id === personId);
+        let matchingPerson = game.people.find((person) => person.cookie === personCookie);
-        if (!matchingPerson && game.moderator.id === personId)  {
+        if (!matchingPerson && game.moderator.cookie === personCookie)  {
             matchingPerson = game.moderator;
         }
         if (matchingPerson) {

server/modules/GameStateCurator.js

@@ -8,10 +8,10 @@ const GameStateCurator = {
 
 function getGameStateBasedOnPermissions(game, person, gameRunner) {
     let client = game.status === globals.STATUS.LOBBY // people won't be able to know their role until past the lobby stage.
-        ? { name: person.name, id: person.id, userType: person.userType }
+        ? { name: person.name, cookie: person.cookie, userType: person.userType }
         : {
             name: person.name,
-            id: person.id,
+            cookie: person.cookie,
             userType: person.userType,
             gameRole: person.gameRole,
             gameRoleDescription: person.gameRoleDescription,
@@ -27,7 +27,7 @@ function getGameStateBasedOnPermissions(game, person, gameRunner) {
                 deck: game.deck,
                 people: game.people
                     .filter((person) => {
-                        return person.assigned === true && person.id !== client.id
+                        return person.assigned === true && person.cookie !== client.cookie
                             && (person.userType !== globals.USER_TYPES.MODERATOR && person.userType !== globals.USER_TYPES.TEMPORARY_MODERATOR)
                     })
                     .map((filteredPerson) => ({ name: filteredPerson.name, userType: filteredPerson.userType })),
@@ -64,10 +64,11 @@ function getGameStateBasedOnPermissions(game, person, gameRunner) {
 function mapPeopleForModerator(people, client) {
     return people
         .filter((person) => {
-            return person.assigned === true && person.id !== client.id
+            return person.assigned === true && person.cookie !== client.cookie
         })
         .map((person) => ({
         name: person.name,
+        id: person.id,
         userType: person.userType,
         gameRole: person.gameRole,
         gameRoleDescription: person.gameRoleDescription,
@@ -79,10 +80,11 @@ function mapPeopleForModerator(people, client) {
 function mapPeopleForTempModerator(people, client) {
     return people
         .filter((person) => {
-            return person.assigned === true && person.id !== client.id
+            return person.assigned === true && person.cookie !== client.cookie
         })
         .map((person) => ({
             name: person.name,
+            id: person.id,
             userType: person.userType,
             out: person.out
         }));