diff --git a/client/src/images/roles/custom-role.svg b/client/src/images/roles/custom-role.svg new file mode 100644 index 0000000..3184bb5 --- /dev/null +++ b/client/src/images/roles/custom-role.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/client/src/images/screenshots/deckbuilder.PNG b/client/src/images/screenshots/deckbuilder.PNG new file mode 100644 index 0000000..f7310b0 Binary files /dev/null and b/client/src/images/screenshots/deckbuilder.PNG differ diff --git a/client/src/modules/GameCreationStepManager.js b/client/src/modules/GameCreationStepManager.js index a67208b..c6acab6 100644 --- a/client/src/modules/GameCreationStepManager.js +++ b/client/src/modules/GameCreationStepManager.js @@ -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"); }) }); } diff --git a/client/src/modules/GameStateRenderer.js b/client/src/modules/GameStateRenderer.js index 15c18b4..ad16d30 100644 --- a/client/src/modules/GameStateRenderer.js +++ b/client/src/modules/GameStateRenderer.js @@ -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' + ); + } } } diff --git a/client/src/modules/Templates.js b/client/src/modules/Templates.js index 06e231d..f3bd3b1 100644 --- a/client/src/modules/Templates.js +++ b/client/src/modules/Templates.js @@ -227,11 +227,11 @@ export const templates = { CREATE_GAME_DECK: "
" + "
" + - "" + + "" + "
" + "
" + "
" + - "" + + "" + "
" + "
" + "
", @@ -246,7 +246,7 @@ export const templates = { '
Export
' + '
Import
' + '' + - '' + + '' + '
' + '' + '', @@ -258,7 +258,7 @@ export const templates = { DECK_SELECT_ROLE: '
' + '
' + - 'include' + + 'include' + 'info' + 'edit' + 'remove' + diff --git a/client/src/scripts/game.js b/client/src/scripts/game.js index c9d2946..9f75c87 100644 --- a/client/src/scripts/game.js +++ b/client/src/scripts/game.js @@ -165,6 +165,7 @@ function setClientSocketHandlers(stateBucket, gameStateRenderer, socket, timerWo socket.on(globals.EVENTS.PLAYER_JOINED, (player, gameIsFull) => { toast(player.name + " joined!", "success", false, true, 3); stateBucket.currentGameState.people.push(player); + stateBucket.currentGameState.isFull = gameIsFull; gameStateRenderer.renderLobbyPlayers(); if ( gameIsFull diff --git a/client/src/styles/create.css b/client/src/styles/create.css index ff28b03..40192c1 100644 --- a/client/src/styles/create.css +++ b/client/src/styles/create.css @@ -135,7 +135,9 @@ bottom: 0; right: 0; width: 290px; - height: 20px; + height: 50px; + font-size: 20px; + text-align: center; } #custom-role-hamburger .hamburger-inner, #custom-role-hamburger .hamburger-inner::before, #custom-role-hamburger .hamburger-inner::after { diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css index 2d4c757..0bddbba 100644 --- a/client/src/styles/modal.css +++ b/client/src/styles/modal.css @@ -49,6 +49,29 @@ flex-direction: row; } +#custom-role-info-modal { + display: flex; + color: #d7d7d7; + text-align: left; + font-family: signika-negative, sans-serif; +} + +#custom-role-info-modal-description { + margin: 2em 0; + max-height: 10em; + overflow: auto; +} + +#custom-role-info-modal-name { + font-family: 'diavlo', sans-serif; + font-size: 23px; +} + +#custom-role-info-modal-alignment { + font-size: 20px; + font-weight: bold; +} + #change-name-modal, #transfer-mod-modal, #role-info-modal { position: fixed; } diff --git a/client/src/views/create.html b/client/src/views/create.html index db7afe6..7b11d76 100644 --- a/client/src/views/create.html +++ b/client/src/views/create.html @@ -56,6 +56,14 @@
+

Create A Game

diff --git a/server/modules/GameManager.js b/server/modules/GameManager.js index 9c838fc..fe9dd23 100644 --- a/server/modules/GameManager.js +++ b/server/modules/GameManager.js @@ -355,6 +355,7 @@ function initializePeopleForGame(uniqueCards, moderator) { let j = 0; if (moderator.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) { // temporary moderators should be dealt in. moderator.gameRole = cards[j].role; + moderator.customRole = cards[j].custom; moderator.gameRoleDescription = cards[j].description; moderator.alignment = cards[j].team; people.push(moderator); @@ -371,6 +372,7 @@ function initializePeopleForGame(uniqueCards, moderator) { cards[j].description, cards[j].team ); + person.customRole = cards[j].custom; person.hasEnteredName = false; people.push(person); j ++; diff --git a/server/modules/GameStateCurator.js b/server/modules/GameStateCurator.js index ec75652..b7f4fa6 100644 --- a/server/modules/GameStateCurator.js +++ b/server/modules/GameStateCurator.js @@ -38,6 +38,7 @@ function getGameStateBasedOnPermissions(game, person, gameRunner) { userType: person.userType, gameRole: person.gameRole, gameRoleDescription: person.gameRoleDescription, + customRole: person.customRole, alignment: person.alignment, out: person.out }