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

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

107
client/src/images/roles/custom-role.svg Normal file
View File

@@ -0,0 +1,107 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="119.66505mm"
height="109.59733mm"
viewBox="-17 0 150.66505 120.59733"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="host.svg">
<defs
id="defs2">
<inkscape:path-effect
effect="bspline"
id="path-effect4526"
is_visible="true"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false" />
<inkscape:path-effect
effect="bspline"
id="path-effect4526-4"
is_visible="true"
weight="33.333333"
steps="2"
helper_size="0"
apply_no_weight="true"
apply_with_weight="true"
only_selected="false" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-232.43275"
inkscape:cy="116.16088"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-44.488903,-69.97024)">
<circle
style="opacity:0.95999995;fill:none;fill-opacity:1;stroke:#bfbfbf;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path4518"
cx="104.32143"
cy="101.96429"
r="30.994047" />
<g
id="g4548"
transform="translate(0.75595639,-10.583334)">
<path
inkscape:original-d="m 44.60119,189.65476 c 6.047883,-10.5836 12.095501,-21.16693 18.142858,-31.75 13.607002,-2.6e-4 27.214549,-0.50423 40.821422,-0.75595"
inkscape:path-effect="#path-effect4526"
inkscape:connector-curvature="0"
id="path4524"
d="m 44.60119,189.65476 c 6.047799,-10.58365 12.095417,-21.16698 21.920308,-26.58444 9.824892,-5.41745 23.437104,-5.66953 37.043972,-5.92151"
style="fill:none;stroke:#bfbfbf;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
inkscape:original-d="m 44.60119,189.65476 c 6.047883,-10.5836 12.095501,-21.16693 18.142858,-31.75 13.607002,-2.6e-4 27.214549,-0.50423 40.821422,-0.75595"
inkscape:path-effect="#path-effect4526-4"
inkscape:connector-curvature="0"
id="path4524-1"
d="m 44.60119,189.65476 c 6.047799,-10.58365 12.095417,-21.16698 21.920308,-26.58444 9.824892,-5.41745 23.437104,-5.66953 37.043972,-5.92151"
style="fill:none;stroke:#bfbfbf;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(-1,0,0,1,207.13094,0)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
client/src/images/screenshots/deckbuilder.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

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"/>' +

1
client/src/scripts/game.js
View File

@@ -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

4
client/src/styles/create.css
View File

@@ -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 {

23
client/src/styles/modal.css
View File

@@ -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;
}

8
client/src/views/create.html
View File

@@ -56,6 +56,14 @@
</div>
</form>
</div>
<div id="custom-role-info-modal" class="modal" style="display:none">
<h3 id="custom-role-info-modal-name"></h3>
<div id="custom-role-info-modal-alignment"></div>
<div id="custom-role-info-modal-description"></div>
<div class="modal-button-container">
<button id="close-custom-role-info-modal-button" class="cancel app-button">Close</button>
</div>
</div>
<h1>Create A Game</h1>
<div id="tracker-container">
<div id="creation-step-tracker">

2
server/modules/GameManager.js
View File

@@ -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 ++;

1
server/modules/GameStateCurator.js
View File

@@ -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
}