Add independent alignment for custom roles (#217)

* Initial plan * Add independent alignment: constants, validation, UI, and CSS Co-authored-by: AlecM33 <24642328+AlecM33@users.noreply.github.com> * Add unit tests for independent alignment validation Co-authored-by: AlecM33 <24642328+AlecM33@users.noreply.github.com> * Fix remaining binary alignment checks in role display Co-authored-by: AlecM33 <24642328+AlecM33@users.noreply.github.com> * Add independent player container and game-role-independent CSS Co-authored-by: AlecM33 <24642328+AlecM33@users.noreply.github.com> * fix a couple bugs, tweak colors * remove import * remove duplicate tag --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: AlecM33 <24642328+AlecM33@users.noreply.github.com> Co-authored-by: AlecM33 <leohfx@gmail.com>
2026-02-09 19:53:30 +01:00 · 2026-01-24 23:55:11 -05:00
parent b328bfffe5
commit 0449e33b40
13 changed files with 203 additions and 54 deletions
--- a/client/src/config/globals.js
+++ b/client/src/config/globals.js
@@ -21,7 +21,8 @@ export const STATUS = {

 export const ALIGNMENT = {
    GOOD: 'good',
-    EVIL: 'evil'
+    EVIL: 'evil',
+    INDEPENDENT: 'independent'
 };

 export const MESSAGES = {
--- a/client/src/modules/front_end_components/HTMLFragments.js
+++ b/client/src/modules/front_end_components/HTMLFragments.js
@@ -194,11 +194,15 @@ export const HTMLFragments = {
        <label id='players-alive-label'></label>
        <div id="spectator-count" tabindex="0"></div>
        <div id='game-player-list'>
-            <div class='evil-players'>
+            <div id="independent-players" class='independent-players' style="display: none;">
+                <label class='independent'>Team Independent</label>
+                <div id='player-list-moderator-team-independent'></div>
+            </div>
+            <div id="evil-players" class='evil-players' style="display: none;">
                <label class='evil'>Team Evil</label>
                <div id='player-list-moderator-team-evil'></div>
            </div>
-            <div class='good-players'>
+            <div id="good-players" class='good-players' style="display: none;">
                <label class='good'>Team Good</label>
                <div id='player-list-moderator-team-good'></div>
            </div>
--- a/client/src/modules/game_creation/DeckStateManager.js
+++ b/client/src/modules/game_creation/DeckStateManager.js
@@ -147,7 +147,8 @@ export class DeckStateManager {
            }
            const sortedDeck = this.deck.sort((a, b) => {
                if (a.team !== b.team) {
-                    return a.team === ALIGNMENT.GOOD ? -1 : 1;
+                    const order = { good: 0, evil: 1, independent: 2 };
+                    return order[a.team] - order[b.team];
                }
                return a.role.localeCompare(b.role);
            });
@@ -187,11 +188,7 @@ export class DeckStateManager {
        roleEl.dataset.roleId = sortedDeck[i].id;
        roleEl.classList.add('added-role');
        roleEl.innerHTML = HTMLFragments.DECK_SELECT_ROLE_ADDED_TO_DECK;
-        if (sortedDeck[i].team === ALIGNMENT.GOOD) {
-            roleEl.classList.add(ALIGNMENT.GOOD);
-        } else {
-            roleEl.classList.add(ALIGNMENT.EVIL);
-        }
+        roleEl.classList.add(sortedDeck[i].team);
        populateRoleElementInfo(roleEl, sortedDeck, i);
        document.getElementById('deck-list').appendChild(roleEl);
        const minusOneHandler = (e) => {
@@ -237,8 +234,10 @@ export class DeckStateManager {
                const nameEl = document.getElementById('custom-role-info-modal-name');
                alignmentEl.classList.remove(ALIGNMENT.GOOD);
                alignmentEl.classList.remove(ALIGNMENT.EVIL);
+                alignmentEl.classList.remove(ALIGNMENT.INDEPENDENT);
                nameEl.classList.remove(ALIGNMENT.GOOD);
                nameEl.classList.remove(ALIGNMENT.EVIL);
+                nameEl.classList.remove(ALIGNMENT.INDEPENDENT);
                e.preventDefault();
                nameEl.innerText = sortedDeck[i].role;
                nameEl.classList.add(sortedDeck[i].team);
@@ -256,6 +255,7 @@ export class DeckStateManager {
 function populateRoleElementInfo (roleEl, sortedDeck, i) {
    roleEl.classList.remove(ALIGNMENT.GOOD);
    roleEl.classList.remove(ALIGNMENT.EVIL);
+    roleEl.classList.remove(ALIGNMENT.INDEPENDENT);
    roleEl.classList.add(sortedDeck[i].team);
    roleEl.querySelector('.role-name').innerHTML =
        `<span class="role-quantity"></span>
--- a/client/src/modules/game_creation/GameCreationStepManager.js
+++ b/client/src/modules/game_creation/GameCreationStepManager.js
@@ -463,11 +463,7 @@ function renderReviewAndCreateStep (containerId, stepNumber, game, deckManager)
    for (const card of game.deck) {
        const roleEl = document.createElement('div');
        roleEl.innerText = card.quantity + 'x ' + card.role;
-        if (card.team === ALIGNMENT.GOOD) {
-            roleEl.classList.add(ALIGNMENT.GOOD);
-        } else {
-            roleEl.classList.add(ALIGNMENT.EVIL);
-        }
+        roleEl.classList.add(card.team);
        div.querySelector('#roles-option').appendChild(roleEl);
    }

--- a/client/src/modules/game_creation/RoleBox.js
+++ b/client/src/modules/game_creation/RoleBox.js
@@ -31,7 +31,8 @@ export class RoleBox {
    loadDefaultRoles = () => {
        this.defaultRoles = defaultRoles.sort((a, b) => {
            if (a.team !== b.team) {
-                return a.team === ALIGNMENT.GOOD ? -1 : 1;
+                const order = { good: 0, evil: 1, independent: 2 };
+                return order[a.team] - order[b.team];
            }
            return a.role.localeCompare(b.role);
        }).map((role) => {
@@ -174,10 +175,7 @@ export class RoleBox {
            defaultRole.innerHTML = HTMLFragments.DECK_SELECT_ROLE_DEFAULT;
            defaultRole.classList.add('default-role');
            defaultRole.dataset.roleId = this.defaultRoles[i].id;
-            const alignmentClass = this.defaultRoles[i].team === ALIGNMENT.GOOD
-                ? ALIGNMENT.GOOD
-                : ALIGNMENT.EVIL;
-            defaultRole.classList.add(alignmentClass);
+            defaultRole.classList.add(this.defaultRoles[i].team);
            defaultRole.querySelector('.role-name').innerText = this.defaultRoles[i].role;
            selectEl.appendChild(defaultRole);
        }
@@ -202,7 +200,8 @@ export class RoleBox {
        }
        this.customRoles.sort((a, b) => {
            if (a.team !== b.team) {
-                return a.team === ALIGNMENT.GOOD ? -1 : 1;
+                const order = { good: 0, evil: 1, independent: 2 };
+                return order[a.team] - order[b.team];
            }
            return a.role.localeCompare(b.role);
        });
@@ -212,8 +211,7 @@ export class RoleBox {
            customRole.innerHTML = HTMLFragments.DECK_SELECT_ROLE;
            customRole.classList.add('custom-role');
            customRole.dataset.roleId = this.customRoles[i].id;
-            const alignmentClass = this.customRoles[i].team === ALIGNMENT.GOOD ? ALIGNMENT.GOOD : ALIGNMENT.EVIL;
-            customRole.classList.add(alignmentClass);
+            customRole.classList.add(this.customRoles[i].team);
            customRole.querySelector('.role-name').innerText = this.customRoles[i].role;
            selectEl.appendChild(customRole);
        }
@@ -282,8 +280,10 @@ export class RoleBox {
                        const nameEl = document.getElementById('custom-role-info-modal-name');
                        alignmentEl.classList.remove(ALIGNMENT.GOOD);
                        alignmentEl.classList.remove(ALIGNMENT.EVIL);
+                        alignmentEl.classList.remove(ALIGNMENT.INDEPENDENT);
                        nameEl.classList.remove(ALIGNMENT.GOOD);
                        nameEl.classList.remove(ALIGNMENT.EVIL);
+                        nameEl.classList.remove(ALIGNMENT.INDEPENDENT);
                        e.preventDefault();
                        let role;
                        if (isCustom) {
@@ -391,7 +391,7 @@ function validateCustomRoleCookie (cookie) {
                for (const entry of cookieJSON) {
                    if (entry !== null && typeof entry === 'object') {
                        if (typeof entry.role !== 'string' || entry.role.length > PRIMITIVES.MAX_CUSTOM_ROLE_NAME_LENGTH
-                            || typeof entry.team !== 'string' || (entry.team !== ALIGNMENT.GOOD && entry.team !== ALIGNMENT.EVIL)
+                            || typeof entry.team !== 'string' || (entry.team !== ALIGNMENT.GOOD && entry.team !== ALIGNMENT.EVIL && entry.team !== ALIGNMENT.INDEPENDENT)
                            || typeof entry.description !== 'string' || entry.description.length > PRIMITIVES.MAX_CUSTOM_ROLE_DESCRIPTION_LENGTH
                        ) {
                            return false;
--- a/client/src/modules/game_state/states/InProgress.js
+++ b/client/src/modules/game_state/states/InProgress.js
@@ -295,26 +295,49 @@ export class InProgress {
            && ((p.userType !== USER_TYPES.MODERATOR && p.userType !== USER_TYPES.SPECTATOR)
                || p.killed)
        );
-        this.renderGroupOfPlayers(
-            teamEvil,
-            this.killPlayerHandlers,
-            this.revealRoleHandlers,
-            this.stateBucket.currentGameState.accessCode,
-            ALIGNMENT.EVIL,
-            this.stateBucket.currentGameState.people.find(person =>
-                person.id === this.stateBucket.currentGameState.currentModeratorId).userType,
-            this.socket
-        );
-        this.renderGroupOfPlayers(
-            teamGood,
-            this.killPlayerHandlers,
-            this.revealRoleHandlers,
-            this.stateBucket.currentGameState.accessCode,
-            ALIGNMENT.GOOD,
-            this.stateBucket.currentGameState.people.find(person =>
-                person.id === this.stateBucket.currentGameState.currentModeratorId).userType,
-            this.socket
+        const teamIndependent = this.stateBucket.currentGameState.people.filter((p) => p.alignment === ALIGNMENT.INDEPENDENT
+            && ((p.userType !== USER_TYPES.MODERATOR && p.userType !== USER_TYPES.SPECTATOR)
+                || p.killed)
        );
+        if (teamEvil.length > 0) {
+            document.getElementById(`${ALIGNMENT.EVIL}-players`).style.display = 'block';
+            this.renderGroupOfPlayers(
+                teamEvil,
+                this.killPlayerHandlers,
+                this.revealRoleHandlers,
+                this.stateBucket.currentGameState.accessCode,
+                ALIGNMENT.EVIL,
+                this.stateBucket.currentGameState.people.find(person =>
+                    person.id === this.stateBucket.currentGameState.currentModeratorId).userType,
+                this.socket
+            );
+        }
+        if (teamGood.length > 0) {
+            document.getElementById(`${ALIGNMENT.GOOD}-players`).style.display = 'block';
+            this.renderGroupOfPlayers(
+                teamGood,
+                this.killPlayerHandlers,
+                this.revealRoleHandlers,
+                this.stateBucket.currentGameState.accessCode,
+                ALIGNMENT.GOOD,
+                this.stateBucket.currentGameState.people.find(person =>
+                    person.id === this.stateBucket.currentGameState.currentModeratorId).userType,
+                this.socket
+            );
+        }
+        if (teamIndependent.length > 0) {
+            document.getElementById(`${ALIGNMENT.INDEPENDENT}-players`).style.display = 'block';
+            this.renderGroupOfPlayers(
+                teamIndependent,
+                this.killPlayerHandlers,
+                this.revealRoleHandlers,
+                this.stateBucket.currentGameState.accessCode,
+                ALIGNMENT.INDEPENDENT,
+                this.stateBucket.currentGameState.people.find(person =>
+                    person.id === this.stateBucket.currentGameState.currentModeratorId).userType,
+                this.socket
+            );
+        }
        document.getElementById('players-alive-label').innerText =
            'Players: ' + this.stateBucket.currentGameState.people.filter((person) => !person.out).length + ' / ' +
            this.stateBucket.currentGameState.gameSize + ' Alive';
@@ -460,9 +483,12 @@ function renderPlayerRole (gameState) {
    if (gameState.client.alignment === ALIGNMENT.GOOD) {
        document.getElementById('game-role').classList.add('game-role-good');
        name.classList.add('good');
-    } else {
+    } else if (gameState.client.alignment === ALIGNMENT.EVIL) {
        document.getElementById('game-role').classList.add('game-role-evil');
        name.classList.add('evil');
+    } else if (gameState.client.alignment === ALIGNMENT.INDEPENDENT) {
+        document.getElementById('game-role').classList.add('game-role-independent');
+        name.classList.add('independent');
    }
    name.setAttribute('title', gameState.client.gameRole);
    if (gameState.client.out) {
--- a/client/src/modules/game_state/states/shared/SharedStateUtil.js
+++ b/client/src/modules/game_state/states/shared/SharedStateUtil.js
@@ -5,8 +5,7 @@ import {
    ENVIRONMENTS,
    SOCKET_EVENTS,
    USER_TYPE_ICONS,
-    USER_TYPES,
-    ALIGNMENT
+    USER_TYPES
 } from '../../../../config/globals.js';
 import { toast } from '../../../front_end_components/Toast.js';
 import { Confirmation } from '../../../front_end_components/Confirmation.js';
@@ -149,7 +148,11 @@ export const SharedStateUtil = {
        document.getElementById('role-info-button').addEventListener('click', (e) => {
            const deck = stateBucket.currentGameState.deck;
            deck.sort((a, b) => {
-                return a.team === ALIGNMENT.GOOD ? -1 : 1;
+                if (a.team !== b.team) {
+                    const order = { good: 0, evil: 1, independent: 2 };
+                    return order[a.team] - order[b.team];
+                }
+                return a.role.localeCompare(b.role);
            });
            e.preventDefault();
            document.getElementById('role-info-prompt').innerHTML = HTMLFragments.ROLE_INFO_MODAL;
@@ -168,11 +171,7 @@ export const SharedStateUtil = {
                roleName.innerText = card.role;
                roleQuantity.innerText = card.quantity + 'x';

-                if (card.team === ALIGNMENT.GOOD) {
-                    roleName.classList.add(ALIGNMENT.GOOD);
-                } else {
-                    roleName.classList.add(ALIGNMENT.EVIL);
-                }
+                roleName.classList.add(card.team);

                roleNameDiv.appendChild(roleQuantity);
                roleNameDiv.appendChild(roleName);
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -608,6 +608,15 @@ input {
    font-weight: bold;
 }

+.independent, .compact-card.independent .card-role {
+    color: #af8523 !important;
+    font-weight: bold;
+}
+
+.independent-players, #deck-independent {
+    border: 2px solid rgba(212, 160, 39, 0.39);
+}
+
@keyframes placeholder {
    0%{
        background-position: 50% 0
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -424,7 +424,7 @@ h1 {
    display: none;
    position: relative;
    border: 5px solid transparent;
-    background-color: #e3e3e3;
+    background-color: #efefef;
    flex-direction: column;
    cursor: pointer;
    justify-content: space-between;
@@ -462,6 +462,10 @@ h1 {
    border: 4px solid #c55454 !important;
 }

+.game-role-independent {
+    border: 4px solid #af8523 !important;
+}
+
 #game-role-back {
    display: flex;
    align-items: center;
@@ -547,6 +551,10 @@ h1 {
    color: #e15656 !important;
 }

+#game-role #role-name.independent {
+    color: #af8523 !important;
+}
+
 #role-image {
    user-select: none;
    -ms-user-select: none;
--- a/client/src/view_templates/CreateTemplate.js
+++ b/client/src/view_templates/CreateTemplate.js
@@ -11,6 +11,7 @@ export const hiddenMenus =
                <select id="role-alignment" required>
                    <option value="good">good</option>
                    <option value="evil">evil</option>
+                    <option value="independent">independent</option>
                </select>
            </div>
            <div>
--- a/server/config/globals.js
+++ b/server/config/globals.js
@@ -24,7 +24,8 @@ const LOG_LEVEL = {

 const ALIGNMENT = {
    GOOD: 'good',
-    EVIL: 'evil'
+    EVIL: 'evil',
+    INDEPENDENT: 'independent'
 };

 const REDIS_CHANNELS = {
--- a/server/model/GameCreationRequest.js
+++ b/server/model/GameCreationRequest.js
@@ -39,7 +39,7 @@ class GameCreationRequest {
                    && entry.role.length > 0
                    && entry.role.length <= PRIMITIVES.MAX_CUSTOM_ROLE_NAME_LENGTH
                    && typeof entry.team === 'string'
-                    && (entry.team === ALIGNMENT.GOOD || entry.team === ALIGNMENT.EVIL)
+                    && (entry.team === ALIGNMENT.GOOD || entry.team === ALIGNMENT.EVIL || entry.team === ALIGNMENT.INDEPENDENT)
                    && typeof entry.description === 'string'
                    && entry.description.length > 0
                    && entry.description.length <= PRIMITIVES.MAX_CUSTOM_ROLE_DESCRIPTION_LENGTH
--- a/spec/unit/server/model/GameCreationRequest_Spec.js
+++ b/spec/unit/server/model/GameCreationRequest_Spec.js
@@ -0,0 +1,104 @@
+const GameCreationRequest = require('../../../../server/model/GameCreationRequest');
+const { ALIGNMENT } = require('../../../../server/config/globals');
+
+describe('GameCreationRequest', () => {
+    describe('#deckIsValid', () => {
+        it('should accept a deck with good, evil, and independent roles', () => {
+            const deck = [
+                {
+                    role: 'Villager',
+                    team: ALIGNMENT.GOOD,
+                    description: 'A simple villager',
+                    custom: false,
+                    quantity: 2
+                },
+                {
+                    role: 'Werewolf',
+                    team: ALIGNMENT.EVIL,
+                    description: 'A werewolf',
+                    custom: false,
+                    quantity: 1
+                },
+                {
+                    role: 'Tanner',
+                    team: ALIGNMENT.INDEPENDENT,
+                    description: 'An independent role',
+                    custom: true,
+                    quantity: 1
+                }
+            ];
+
+            expect(GameCreationRequest.deckIsValid(deck)).toBe(true);
+        });
+
+        it('should accept a deck with only good roles', () => {
+            const deck = [
+                {
+                    role: 'Villager',
+                    team: ALIGNMENT.GOOD,
+                    description: 'A simple villager',
+                    custom: false,
+                    quantity: 3
+                }
+            ];
+
+            expect(GameCreationRequest.deckIsValid(deck)).toBe(true);
+        });
+
+        it('should accept a deck with only evil roles', () => {
+            const deck = [
+                {
+                    role: 'Werewolf',
+                    team: ALIGNMENT.EVIL,
+                    description: 'A werewolf',
+                    custom: false,
+                    quantity: 2
+                }
+            ];
+
+            expect(GameCreationRequest.deckIsValid(deck)).toBe(true);
+        });
+
+        it('should accept a deck with only independent roles', () => {
+            const deck = [
+                {
+                    role: 'Tanner',
+                    team: ALIGNMENT.INDEPENDENT,
+                    description: 'An independent role',
+                    custom: true,
+                    quantity: 1
+                }
+            ];
+
+            expect(GameCreationRequest.deckIsValid(deck)).toBe(true);
+        });
+
+        it('should reject a deck with invalid team values', () => {
+            const deck = [
+                {
+                    role: 'InvalidRole',
+                    team: 'invalid',
+                    description: 'Invalid team',
+                    custom: true,
+                    quantity: 1
+                }
+            ];
+
+            expect(GameCreationRequest.deckIsValid(deck)).toBe(false);
+        });
+
+        it('should reject a deck with missing required fields', () => {
+            const deck = [
+                {
+                    role: 'Villager',
+                    // missing team
+                    description: 'A simple villager',
+                    custom: false,
+                    quantity: 1
+                }
+            ];
+
+            expect(GameCreationRequest.deckIsValid(deck)).toBe(false);
+        });
+    });
+});