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

Merge pull request #173 from AlecM33/role-pictures-during-create

Browse Source 
display role art during game creation
This commit is contained in:
Alec
2023-08-15 22:44:21 -04:00
committed by GitHub
parent 9e70c8fc4a 73d19fa7f6
commit 92a48bdcd8
4 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/modules/game_creation/DeckStateManager.js
View File

@@ -216,8 +216,24 @@ export class DeckStateManager {
roleEl.querySelector('.role-remove').addEventListener('keyup', minusOneHandler);
const infoHandler = (e) => {
document.querySelector('#custom-role-info-modal-image')?.remove();
if (e.type === 'click' || e.code === 'Enter') {
const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
if (!sortedDeck[i].custom) {
document.getElementById('custom-role-info-modal-image-placeholder').style.display = 'flex';
const roleImg = new Image();
roleImg.id = 'custom-role-info-modal-image';
roleImg.onload = () => {
document.getElementById('custom-role-info-modal-image-placeholder').appendChild(roleImg);
};
if (sortedDeck[i].role.toLowerCase() === 'villager') {
roleImg.src = '../images/roles/Villager' + Math.ceil(Math.random() * 2) + '.png';
} else {
roleImg.src = '../images/roles/' + sortedDeck[i].role.replaceAll(' ', '') + '.png';
}
} else {
document.getElementById('custom-role-info-modal-image-placeholder').style.display = 'none';
}
const nameEl = document.getElementById('custom-role-info-modal-name');
alignmentEl.classList.remove(ALIGNMENT.GOOD);
alignmentEl.classList.remove(ALIGNMENT.EVIL);

13
client/src/modules/game_creation/RoleBox.js
View File

@@ -263,6 +263,7 @@ export class RoleBox {
}
if (info) {
const infoHandler = (e) => {
document.querySelector('#custom-role-info-modal-image')?.remove();
if (e.type === 'click' || e.code === 'Enter') {
const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
const nameEl = document.getElementById('custom-role-info-modal-name');
@@ -273,9 +274,21 @@ export class RoleBox {
e.preventDefault();
let role;
if (isCustom) {
document.getElementById('custom-role-info-modal-image-placeholder').style.display = 'none';
role = this.getCustomRole(name);
} else {
document.getElementById('custom-role-info-modal-image-placeholder').style.display = 'flex';
role = this.getDefaultRole(name);
const roleImg = new Image();
roleImg.id = 'custom-role-info-modal-image';
roleImg.onload = () => {
document.getElementById('custom-role-info-modal-image-placeholder').appendChild(roleImg);
};
if (name.toLowerCase() === 'villager') {
roleImg.src = '../images/roles/Villager' + Math.ceil(Math.random() * 2) + '.png';
} else {
roleImg.src = '../images/roles/' + name.replaceAll(' ', '') + '.png';
}
}
nameEl.innerText = name;
nameEl.classList.add(role.team);

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

@@ -55,6 +55,13 @@
justify-content: center;
}
#custom-role-info-modal-image {
margin: 0 auto;
width: 200px;
background-color: #4645525c;
border-radius: 5px;
}
#custom-role-info-modal {
color: #d7d7d7;
text-align: left;
@@ -62,8 +69,14 @@
align-items: flex-start;
}
#custom-role-info-modal-image-placeholder {
width: 200px;
height: 200px;
margin: 0 auto;
}
#custom-role-info-modal h3 {
margin: 0 0 0.5em 0;
margin: 0 auto 0.5em auto;
}
#custom-role-info-modal-description {

1
client/src/view_templates/CreateTemplate.js
View File

@@ -35,6 +35,7 @@ export const hiddenMenus =
</div>
<div tabindex="-1" id="custom-role-info-modal" class="modal">
<h3 id="custom-role-info-modal-name"></h3>
<div id="custom-role-info-modal-image-placeholder"></div>
<label for="custom-role-info-modal-alignment">alignment:</label>
<div id="custom-role-info-modal-alignment"></div>
<label for="custom-role-info-modal-alignment">description:</label>