Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

deal roles

Browse Source
This commit is contained in:
Alec
2021-11-17 23:19:54 -05:00
parent b85ee7dcfc
commit eb4193fb1b
10 changed files with 166 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
client/config/globals.js
View File

@@ -5,17 +5,20 @@ export const globals = {
ACCESS_CODE_CHAR_POOL: 'abcdefghijklmnopqrstuvwxyz0123456789',
COMMANDS: {
FETCH_GAME_STATE: 'fetchGameState',
GET_ENVIRONMENT: 'getEnvironment'
GET_ENVIRONMENT: 'getEnvironment',
START_GAME: 'startGame'
},
GAME_STATE: {
LOBBY: 'lobby'
STATUS: {
LOBBY: "lobby",
IN_PROGRESS: "in progress"
},
ALIGNMENT: {
GOOD: "good",
EVIL: "evil"
},
EVENTS: {
PLAYER_JOINED: "playerJoined"
PLAYER_JOINED: "playerJoined",
SYNC_GAME_STATE: "syncGameState"
},
USER_TYPES: {
MODERATOR: "moderator",

3
client/model/Game.js
View File

@@ -4,6 +4,7 @@ export class Game {
this.hasTimer = hasTimer;
this.moderatorName = moderatorName;
this.timerParams = timerParams;
this.hasDedicatedModerator = hasDedicatedModerator
this.hasDedicatedModerator = hasDedicatedModerator;
this.accessCode = null;
}
}

19
client/modules/GameStateRenderer.js
View File

@@ -61,6 +61,25 @@ export class GameStateRenderer {
cardEl.classList.add('lobby-card')
}
}
renderGameHeader() {
let title = document.createElement("h1");
title.innerText = "Game";
document.querySelector('#game-title h1')?.remove();
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;
}
}
function renderClient(client, container) {

17
client/modules/Templates.js
View File

@@ -24,5 +24,22 @@ export const templates = {
START_GAME_PROMPT:
"<div id='start-game-prompt'>" +
"<button id='start-game-button'>Start Game</button>" +
"</div>",
GAME:
"<div id='person-name'></div>" +
"<div id='game-header'>" +
"<div>" +
"<label for='game-timer'>Timer</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'>" +
"<h4 id='role-name'></h4>" +
"<img alt='role' id='role-image'/>" +
"<p id='role-description'></p>" +
"</div>"
}

37
client/scripts/game.js
View File

@@ -2,7 +2,7 @@ import { UserUtility } from "../modules/UserUtility.js";
import { globals } from "../config/globals.js";
import {templates} from "../modules/Templates.js";
import {GameStateRenderer} from "../modules/GameStateRenderer.js";
import {toast} from "../modules/Toast.js";
import {cancelCurrentToast, toast} from "../modules/Toast.js";
export const game = () => {
socket.emit(globals.COMMANDS.GET_ENVIRONMENT, function(environment) {
@@ -15,6 +15,7 @@ export const game = () => {
window.location.replace('/not-found');
} else {
console.log(gameState);
gameState.accessCode = accessCode;
userId = gameState.client.id;
UserUtility.setAnonymousUserId(userId, environment);
let gameStateRenderer = new GameStateRenderer(gameState);
@@ -29,8 +30,9 @@ export const game = () => {
};
function processGameState (gameState, userId, socket, gameStateRenderer) {
cancelCurrentToast();
switch (gameState.status) {
case globals.GAME_STATE.LOBBY:
case globals.STATUS.LOBBY:
document.getElementById("game-state-container").innerHTML = templates.LOBBY;
gameStateRenderer.renderLobbyHeader();
gameStateRenderer.renderLobbyPlayers();
@@ -41,9 +43,16 @@ function processGameState (gameState, userId, socket, gameStateRenderer) {
|| gameState.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
)
) {
displayStartGamePromptForModerators();
displayStartGamePromptForModerators(gameStateRenderer);
}
break;
case globals.STATUS.IN_PROGRESS:
document.querySelector("#start-game-prompt")?.remove();
gameStateRenderer.gameState = gameState;
document.getElementById("game-state-container").innerHTML = templates.GAME;
gameStateRenderer.renderGameHeader();
gameStateRenderer.renderPlayerRole();
break;
default:
break;
}
@@ -61,14 +70,32 @@ function setClientSocketHandlers(gameStateRenderer, socket) {
|| gameStateRenderer.gameState.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
)
) {
displayStartGamePromptForModerators();
displayStartGamePromptForModerators(gameStateRenderer);
}
});
socket.on(globals.EVENTS.SYNC_GAME_STATE, () => {
socket.emit(
globals.COMMANDS.FETCH_GAME_STATE,
gameStateRenderer.gameState.accessCode,
gameStateRenderer.gameState.client.id,
function (gameState) {
processGameState(gameState, gameState.client.id, socket, gameStateRenderer);
}
);
})
}
function displayStartGamePromptForModerators() {
function displayStartGamePromptForModerators(gameStateRenderer) {
document.getElementById("lobby-players").setAttribute("style", 'margin-bottom: 130px');
let div = document.createElement("div");
div.innerHTML = templates.START_GAME_PROMPT;
document.body.appendChild(div);
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);
}
});
}

55
client/styles/game.css
View File

@@ -62,6 +62,61 @@ h1 {
font-size: 25px;
}
#game-role {
position: relative;
border-bottom: 2px solid gray;
background-color: #e7e7e7;
display: flex;
flex-direction: column;
cursor: pointer;
justify-content: space-between;
max-width: 17em;
border-radius: 3px;
height: 23em;
margin: 0 auto 2em auto;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 8px 8px rgba(0,0,0,0.11),
0 16px 16px rgba(0,0,0,0.11),
0 32px 32px rgba(0,0,0,0.11);
/*perspective: 1000px;*/
/*transform-style: preserve-3d;*/
}
#role-name {
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-family: 'diavlo', sans-serif;
width: 95%;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#role-image {
position: absolute;
top: 34%;
left: 50%;
transform: translate(-50%, -50%);
}
#role-description {
overflow: auto;
position: absolute;
bottom: 8%;
left: 50%;
transform: translate(-50%, 0);
font-size: 16px;
width: 78%;
max-height: 7em;
}
#game-link img {
width: 20px;
margin-left: 0.5em;

6
server/config/globals.js
View File

@@ -3,7 +3,8 @@ const globals = {
ACCESS_CODE_LENGTH: 6,
CLIENT_COMMANDS: {
FETCH_GAME_STATE: 'fetchGameState',
GET_ENVIRONMENT: 'getEnvironment'
GET_ENVIRONMENT: 'getEnvironment',
START_GAME: 'startGame'
},
STATUS: {
LOBBY: "lobby",
@@ -19,7 +20,8 @@ const globals = {
GAME_IS_FULL: "This game is full"
},
EVENTS: {
PLAYER_JOINED: "playerJoined"
PLAYER_JOINED: "playerJoined",
SYNC_GAME_STATE: "syncGameState"
},
ENVIRONMENT: {
LOCAL: "local",

4
server/model/Person.js
View File

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

31
server/modules/GameManager.js
View File

@@ -30,7 +30,15 @@ class GameManager {
socket.on(globals.CLIENT_COMMANDS.GET_ENVIRONMENT, (ackFn) => {
ackFn(this.environment);
})
});
socket.on(globals.CLIENT_COMMANDS.START_GAME, (accessCode, personId) => {
let game = this.activeGameRunner.activeGames[accessCode];
if (game) {
game.status = globals.STATUS.IN_PROGRESS;
namespace.in(accessCode).emit(globals.EVENTS.SYNC_GAME_STATE);
}
});
}
@@ -44,15 +52,12 @@ class GameManager {
let moderator = initializeModerator(gameParams.moderatorName, gameParams.hasDedicatedModerator);
this.activeGameRunner.activeGames[newAccessCode] = new Game(
globals.STATUS.LOBBY,
initializePeopleForGame(gameParams.deck),
initializePeopleForGame(gameParams.deck, moderator),
gameParams.deck,
gameParams.hasTimer,
moderator,
gameParams.timerParams
);
if (!gameParams.hasDedicatedModerator) {
this.activeGameRunner.activeGames[newAccessCode].people.push(moderator);
}
return Promise.resolve(newAccessCode);
}
}
@@ -96,7 +101,7 @@ function initializeModerator(name, hasDedicatedModerator) {
return new Person(createRandomUserId(), name, userType)
}
function initializePeopleForGame(uniqueCards) {
function initializePeopleForGame(uniqueCards, moderator) {
let people = [];
let cards = []; // this will contain copies of each card equal to the quantity.
let numberOfRoles = 0;
@@ -109,8 +114,18 @@ function initializePeopleForGame(uniqueCards) {
cards = shuffleArray(cards); // The deck should probably be shuffled, ey?.
for(let j = 0; j < numberOfRoles; j ++) {
people.push(new Person(createRandomUserId(), UsernameGenerator.generate(), globals.USER_TYPES.PLAYER, cards[j].role, cards[j].description))
let j = 0;
if (moderator.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) { // temporary moderators should be dealt in.
moderator.gameRole = cards[j].role;
moderator.gameRoleDescription = cards[j].description;
moderator.alignment = cards[j].team;
people.push(moderator);
j ++;
}
while (j < numberOfRoles) {
people.push(new Person(createRandomUserId(), UsernameGenerator.generate(), globals.USER_TYPES.PLAYER, cards[j].role, cards[j].description, cards[j].team))
j ++;
}
return people;

6
server/modules/GameStateCurator.js
View File

@@ -13,7 +13,8 @@ function getGameStateBasedOnPermissions(game, person) {
name: person.name,
id: person.id,
gameRole: person.gameRole,
roleDescription: person.roleDescription
gameRoleDescription: person.gameRoleDescription,
alignment: person.alignment
}
switch (person.userType) {
case globals.USER_TYPES.PLAYER:
@@ -66,7 +67,8 @@ function mapPeopleForModerator(people, client) {
.map((person) => ({
name: person.name,
gameRole: person.gameRole,
gameRoleDescription: person.gameRoleDescription
gameRoleDescription: person.gameRoleDescription,
alignment: person.alignment
}));
}