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

display custom role info

Browse Source
This commit is contained in:
AlecM33
2022-01-07 19:00:38 -05:00
parent 82e86f4fb6
commit 7ca184cfee
11 changed files with 175 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/modules/GameCreationStepManager.js
View File

@@ -537,7 +537,7 @@ function addCustomRoleEventListeners(deckManager, select) {
if (!deckManager.getCard(name)) {
deckManager.addToDeck(name);
let cardEl = constructCompactDeckBuilderElement(deckManager.getCard(name), deckManager);
toast('"' + name + '" included.', 'success', true, true, 3);
toast('"' + name + '" made available below.', 'success', true, true, 4);
if (deckManager.getCard(name).team === globals.ALIGNMENT.GOOD) {
document.getElementById("deck-good").appendChild(cardEl);
} else {
@@ -555,6 +555,19 @@ function addCustomRoleEventListeners(deckManager, select) {
deckManager.removeFromCustomRoleOptions(name);
updateCustomRoleOptionsList(deckManager, select);
}
});
role.querySelector('.deck-select-info').addEventListener('click', (e) => {
let alignmentEl = document.getElementById("custom-role-info-modal-alignment");
alignmentEl.classList.remove(globals.ALIGNMENT.GOOD);
alignmentEl.classList.remove(globals.ALIGNMENT.EVIL);
e.preventDefault();
let option = deckManager.getCustomRoleOption(name);
document.getElementById("custom-role-info-modal-name").innerText = name;
alignmentEl.classList.add(option.team);
document.getElementById("custom-role-info-modal-description").innerText = option.description;
alignmentEl.innerText = option.team;
ModalManager.displayModal("custom-role-info-modal", "modal-background", "close-custom-role-info-modal-button");
})
});
}

19
client/src/modules/GameStateRenderer.js
View File

@@ -15,9 +15,7 @@ export class GameStateRenderer {
renderLobbyPlayers() {
document.querySelectorAll('.lobby-player').forEach((el) => el.remove())
let lobbyPlayersContainer = document.getElementById("lobby-players");
if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.PLAYER
&& this.stateBucket.currentGameState.moderator.userType === globals.USER_TYPES.MODERATOR
) {
if (this.stateBucket.currentGameState.moderator.userType === globals.USER_TYPES.MODERATOR) {
lobbyPlayersContainer.appendChild(
renderLobbyPerson(
this.stateBucket.currentGameState.moderator.name,
@@ -409,10 +407,17 @@ function renderPlayerRole(gameState) {
'../images/roles/Villager' + Math.ceil(Math.random() * 2) + '.png'
);
} else {
document.getElementById("role-image").setAttribute(
'src',
'../images/roles/' + gameState.client.gameRole.replaceAll(' ', '') + '.png'
);
if (gameState.client.customRole) {
document.getElementById("role-image").setAttribute(
'src',
'../images/roles/custom-role.svg'
);
} else {
document.getElementById("role-image").setAttribute(
'src',
'../images/roles/' + gameState.client.gameRole.replaceAll(' ', '') + '.png'
);
}
}
}

8
client/src/modules/Templates.js
View File

@@ -227,11 +227,11 @@ export const templates = {
CREATE_GAME_DECK:
"<div id='deck-container'>" +
"<div>" +
"<label for='deck-good'>Included Good Roles</label>" +
"<label for='deck-good'>Available Good Roles</label>" +
"<div id='deck-good'></div>" +
"</div>" +
"<div>" +
"<label for='deck-evil'>Included Evil Roles</label>" +
"<label for='deck-evil'>Available Evil Roles</label>" +
"<div id='deck-evil'></div>" +
"</div>" +
"</div>",
@@ -246,7 +246,7 @@ export const templates = {
'<div class="custom-role-action" id="custom-roles-export">Export</div>' +
'<div class="custom-role-action" id="custom-roles-import">Import</div>' +
'</div>' +
'<label for=\"add-card-to-deck-form\">Custom Roles</label>' +
'<label for=\"add-card-to-deck-form\">Custom Role Box</label>' +
'<div id=\"deck-select\"></div>' +
'<button id=\"custom-role-btn\" class=\"app-button\">+ Create Custom Role</button>' +
'</div>',
@@ -258,7 +258,7 @@ export const templates = {
DECK_SELECT_ROLE:
'<div class="deck-select-role-name"></div>' +
'<div class="deck-select-role-options">' +
'<img class="deck-select-include" src="images/add.svg" title="include" alt="include"/>' +
'<img class="deck-select-include" src="images/add.svg" title="make available" alt="include"/>' +
'<img class="deck-select-info" src="images/info.svg" title="info" alt="info"/>' +
'<img class="deck-select-edit" src="images/pencil.svg" title="edit" alt="edit"/>' +
'<img class="deck-select-remove" src="images/delete.svg" title="remove" alt="remove"/>' +