Add independent alignment for custom roles

[Copilot]

Adds support for a third alignment option 'independent' alongside 'good' and 'evil', enabling custom roles with unique win conditions (e.g., Tanner who wins if eliminated during day phase).

Changes

Constants & Validation

• Added INDEPENDENT: 'independent' to ALIGNMENT object in both client and server globals
• Updated GameCreationRequest.deckIsValid() to accept independent as valid team value

Role Sorting

• Replaced binary ternary operators with order map pattern across codebase:

// Before: a.team === ALIGNMENT.GOOD ? -1 : 1
// After:
const order = { good: 0, evil: 1, independent: 2 };
return order[a.team] - order[b.team];

UI & Display

• Added independent option to role creation modal dropdown
• Updated player grouping in InProgress.js to render three team containers (good, evil, independent)
• Added player-list-moderator-team-independent container to MODERATOR_GAME_VIEW HTML template
• Fixed CSS class handling to use dynamic team values instead of binary conditionals

Styling

• Independent roles display with gold/orange color scheme (#d4a027)
• Added .independent, .independent-players, .game-role-independent classes

Tests

• Added unit tests for deck validation with all three alignment types

Original prompt

Add "Independent" Alignment for Custom Roles

Overview

Add support for a third alignment option called "independent" in addition to the existing "good" and "evil" alignments. This will allow users to create custom roles with their own win conditions (like the Tanner, who wins if eliminated during the day).

This feature should ONLY be available for custom roles - do not create any default independent roles.

Required Changes

1. Update Constants (Both Client and Server)

Client: client/src/config/globals.js

• Add INDEPENDENT: 'independent' to the ALIGNMENT object (currently lines 22-25)

Server: server/config/globals.js

• Add INDEPENDENT: 'independent' to the ALIGNMENT object (currently line 25-27)

2. Update Validation Logic

Server: server/model/GameCreationRequest.js

• Update the deckIsValid method (around line 42) to accept 'independent' as a valid team value
• Change the validation from (entry.team === ALIGNMENT.GOOD || entry.team === ALIGNMENT.EVIL) to also include ALIGNMENT.INDEPENDENT

3. Update UI Components

Client: client/src/view_templates/CreateTemplate.js

• Update the role creation modal (around lines 10-13) to add a third option for "independent" in the select dropdown
• Add: <option value="independent">independent</option>

Client: Update role display logic in multiple files:

Files that need updates for displaying independent roles with proper styling:

• client/src/modules/game_creation/RoleBox.js (around lines 28-33, 204-208)
• client/src/modules/game_creation/DeckStateManager.js (around lines 143-151, 182-195)
• client/src/modules/game_state/states/InProgress.js (around lines 284-302, 458-467)
• client/src/modules/game_state/states/Ended.js (around lines 62-75)
• client/src/modules/game_state/states/shared/SharedStateUtil.js (around lines 149-175)
• client/src/modules/game_creation/GameCreationStepManager.js (around lines 456-477)

For each file, ensure:

• Role sorting includes independent roles (sort order: good, evil, independent)
• CSS class addition handles independent alignment: roleElement.classList.add(alignment) where alignment can be 'good', 'evil', or 'independent'
• Independent roles are displayed in their own group when appropriate

4. Add CSS Styling

Client: Create styling for independent alignment

Add CSS rules for the .independent class to distinguish independent roles visually. This should be added to the relevant stylesheets (likely client/src/styles/create.css and other game-state related CSS files).

Suggested styling:

• Use a distinct color scheme (e.g., purple/orange tones) to differentiate from good (typically blue/green) and evil (typically red)
• Apply to: .independent class for role elements, role names, role cards, etc.

Example CSS to add:

.independent {
    color: #d4a027; /* gold/orange color */
    border-color: #d4a027;
}

5. Update Role Sorting Logic

Anywhere roles are sorted by team/alignment, update to handle three alignments:

// Current pattern (two-alignment):
sortedRoles.sort((a, b) => {
    if (a.team !== b.team) {
        return a.team === ALIGNMENT.GOOD ? -1 : 1;
    }
    return a.role.localeCompare(b.role);
});

// Updated pattern (three-alignment):
sortedRoles.sort((a, b) => {
    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);
});

Apply this pattern to all role sorting instances found in the codebase.

6. Update Player Grouping in InProgress View

Client: client/src/modules/game_state/states/InProgress.js

Update the renderPlayersWithRoleInformation method (around lines 284-302) to:

• Create a third group for independent players
• Render independent players separately from good and evil teams
• Ensure moderator view shows all three alignment groups

Testing Considerations

After implementation, verify:

1. Custom roles can be created with "independent" alignment
2. Independent roles display correctly in the deck builder
3. Independent roles are dealt correctly during game start
4. Independent role cards display with distinct styling during gameplay
5. Role info modal shows independent roles with proper alignment label
6. End game view shows independent players in their own group
7. Server validation accepts independent roles in deck composition

Files to Modify

Must modify:

• client/src/config/globals.js
• server/config/globals.js
• server/model/GameCreationRequest.js
• client/src/view_templates/CreateTemplate.js
• client/src/modules/game_creation/RoleBox.js
• client/src/modules/game_creation/DeckStateManager.js
• client/src/modules/game_state/states/InProgress.js
• client/src/modules/game_state/states/Ended.js
• client/src/modules/game_state/states/shared/SharedStateUtil.js
• client/src/modules/game_creation/GameCreationStepManager.js

CSS ...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.