display role art during game creation

This commit is contained in:
AlecM33
2023-08-15 22:42:22 -04:00
parent 9e70c8fc4a
commit 73d19fa7f6
4 changed files with 44 additions and 1 deletions

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);

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);