Skip to content

Commit 0a72d8d

Browse files
mazlsmazls
authored
Style Fehler behoben und T H D durch Symbole ersetzt
1 parent fda2432 commit 0a72d8d

1 file changed

Lines changed: 96 additions & 57 deletions

File tree

‎index.html‎

Lines changed: 96 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
#raid-selector, .assignment-select {
7676
background-color: rgba(10, 20, 15, 0.7) !important;
7777
border: 1px solid var(--color-gold-border) !important;
78-
color: var(--color-parchment) !important;
78+
color: var(--color-parchment);
7979
border-radius: 0.25rem;
8080
}
8181

@@ -123,13 +123,35 @@
123123
.login-modal-content input { background-color: rgba(10, 20, 15, 0.7) !important; border: 1px solid var(--color-gold-border) !important; color: var(--color-parchment) !important; border-radius: 0.25rem; padding: 0.5rem; width: 100%; margin-bottom: 1rem; }
124124
.login-modal-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
125125

126-
/* KORREKTUR: Roster-Button Farben */
127-
.role-btn { border: 1px solid var(--color-gold-border-light); background-color: transparent; color: rgba(204, 163, 76, 0.7); opacity: 0.7; }
128-
.role-btn:not(:disabled):hover { opacity: 1; border-color: #ca8a04; }
129-
.role-btn.active { opacity: 1; font-weight: bold; color: #ffffff !important; }
130-
.role-btn.role-tank.active { background-color: #2563eb !important; border-color: #60a5fa !important; }
131-
.role-btn.role-healer.active { background-color: #059669 !important; border-color: #34d399 !important; }
132-
.role-btn.role-dps.active { background-color: #dc2626 !important; border-color: #f87171 !important; }
126+
/* KORREKTUR: Roster-Button Farben und Hervorhebung */
127+
.role-btn {
128+
border: 2px solid transparent; /* Transparenter Rand, um Layout-Sprünge zu vermeiden */
129+
background-color: rgba(0,0,0,0.2);
130+
color: rgba(204, 163, 76, 0.7);
131+
opacity: 0.7;
132+
border-radius: 6px;
133+
}
134+
.role-btn:not(:disabled):hover {
135+
opacity: 1;
136+
border-color: #ca8a04;
137+
}
138+
.role-btn.active {
139+
opacity: 1;
140+
transform: scale(1.1); /* Aktives Icon leicht vergrößern */
141+
background-color: transparent !important; /* Sicherstellen, dass der Hintergrund weg ist */
142+
}
143+
.role-btn.role-tank.active {
144+
border-color: #60a5fa !important;
145+
box-shadow: 0 0 8px #60a5fa;
146+
}
147+
.role-btn.role-healer.active {
148+
border-color: #34d399 !important;
149+
box-shadow: 0 0 8px #34d399;
150+
}
151+
.role-btn.role-dps.active {
152+
border-color: #f87171 !important;
153+
box-shadow: 0 0 8px #f87171;
154+
}
133155

134156
/* Originale Klassen zur Sicherheit beibehalten und überschreiben */
135157
.text-gray-200, .text-white { color: var(--color-parchment); }
@@ -750,56 +772,73 @@ <h3>Nachricht</h3>
750772
return { name: playerEntry.name, class: playerClass, roles: [role], id: crypto.randomUUID() };
751773
}
752774

753-
function displayRoster(roster) {
754-
const lists = { TANK: document.getElementById('tanks-list'), HEALER: document.getElementById('healers-list'), DPS: document.getElementById('dps-list') };
755-
if (!lists.TANK) return;
756-
Object.values(lists).forEach(list => list.innerHTML = '');
757-
758-
function createPlayerElement(player) {
759-
const playerDiv = document.createElement('div');
760-
playerDiv.className = 'flex justify-between items-center';
761-
playerDiv.dataset.playerId = player.id;
762-
playerDiv.innerHTML = `
763-
<div class="player-details">
764-
<input type="text" value="${player.name}" class="editable-name" style="color: ${window.classColors[player.class.toUpperCase()] || '#FFFFFF'};" ${!window.isManager ? 'disabled' : ''}>
765-
<select class="editable-class-select" ${!window.isManager ? 'disabled' : ''}>
766-
${wowClasses.map(c => `<option value="${c}" ${player.class === c ? 'selected' : ''}>${c.charAt(0).toUpperCase() + c.slice(1).toLowerCase()}</option>`).join('')}
767-
</select>
768-
</div>
769-
<div class="flex gap-1">
770-
${['TANK', 'HEALER', 'DPS'].map(role => `<button class="role-btn role-${role.toLowerCase()} ${player.roles.includes(role) ? 'active' : ''}" data-role="${role}" ${!window.isManager ? 'disabled' : ''}>${role.charAt(0)}</button>`).join('')}
771-
</div>`;
772-
return playerDiv;
773-
}
774-
775-
roster.forEach(player => {
776-
const playerElement = createPlayerElement(player);
777-
if (player.roles.includes('TANK')) lists.TANK.appendChild(playerElement.cloneNode(true));
778-
if (player.roles.includes('HEALER')) lists.HEALER.appendChild(playerElement.cloneNode(true));
779-
if (player.roles.includes('DPS')) lists.DPS.appendChild(playerElement.cloneNode(true));
780-
});
781-
782-
roster.forEach(player => {
783-
document.querySelectorAll(`[data-player-id="${player.id}"]`).forEach(element => {
784-
const nameInput = element.querySelector('.editable-name');
785-
nameInput?.addEventListener('blur', (e) => handlePlayerUpdate(e, player.id, 'name'));
775+
function displayRoster(roster) {
776+
const lists = { TANK: document.getElementById('tanks-list'), HEALER: document.getElementById('healers-list'), DPS: document.getElementById('dps-list') };
777+
if (!lists.TANK) return;
778+
Object.values(lists).forEach(list => list.innerHTML = '');
779+
780+
function createPlayerElement(player) {
781+
const playerDiv = document.createElement('div');
782+
playerDiv.className = 'flex justify-between items-center';
783+
playerDiv.dataset.playerId = player.id;
784+
785+
// NEU: Ordnet den Rollen die gewünschten Symbole zu
786+
const roleIcons = {
787+
TANK: '🛡️',
788+
HEALER: '❤️',
789+
DPS: '⚔️'
790+
};
791+
792+
playerDiv.innerHTML = `
793+
<div class="player-details">
794+
<input type="text" value="${player.name}" class="editable-name" style="color: ${window.classColors[player.class.toUpperCase()] || '#FFFFFF'};" ${!window.isManager ? 'disabled' : ''}>
795+
<select class="editable-class-select" ${!window.isManager ? 'disabled' : ''}>
796+
${wowClasses.map(c => `<option value="${c}" ${player.class === c ? 'selected' : ''}>${c.charAt(0).toUpperCase() + c.slice(1).toLowerCase()}</option>`).join('')}
797+
</select>
798+
</div>
799+
<div class="flex gap-1">
800+
${['TANK', 'HEALER', 'DPS'].map(role => `
801+
<button
802+
class="role-btn role-${role.toLowerCase()} ${player.roles.includes(role) ? 'active' : ''}"
803+
data-role="${role}"
804+
${!window.isManager ? 'disabled' : ''}
805+
style="font-size: 1.25rem; line-height: 1; padding: 0.25rem;"
806+
>
807+
${roleIcons[role]}
808+
</button>
809+
`).join('')}
810+
</div>`;
811+
return playerDiv;
812+
}
813+
814+
roster.forEach(player => {
815+
const playerElement = createPlayerElement(player);
816+
if (player.roles.includes('TANK')) lists.TANK.appendChild(playerElement.cloneNode(true));
817+
if (player.roles.includes('HEALER')) lists.HEALER.appendChild(playerElement.cloneNode(true));
818+
if (player.roles.includes('DPS')) lists.DPS.appendChild(playerElement.cloneNode(true));
819+
});
820+
821+
roster.forEach(player => {
822+
document.querySelectorAll(`[data-player-id="${player.id}"]`).forEach(element => {
823+
const nameInput = element.querySelector('.editable-name');
824+
nameInput?.addEventListener('blur', (e) => handlePlayerUpdate(e, player.id, 'name'));
786825
nameInput?.addEventListener('keydown', (event) => {
787-
if (event.key === 'Enter') {
788-
event.preventDefault();
789-
event.target.blur(); // Simuliert das Verlassen des Feldes
790-
}
791-
});
792-
const classSelect = element.querySelector('.editable-class-select');
793-
classSelect?.addEventListener('change', (e) => handlePlayerUpdate(e, player.id, 'class'));
794-
element.querySelectorAll('.role-btn').forEach(btn => btn.addEventListener('click', () => togglePlayerRole(player.id, btn.dataset.role)));
795-
});
796-
});
797-
798-
['TANK', 'HEALER', 'DPS'].forEach(role => {
799-
if(lists[role] && lists[role].children.length === 0) lists[role].innerHTML = `<p class="text-gray-500">Keine ${role.toLowerCase()}s zugewiesen.</p>`;
800-
});
801-
window.toggleCompEditability();
802-
}
826+
if (event.key === 'Enter') {
827+
event.preventDefault();
828+
event.target.blur(); // Simuliert das Verlassen des Feldes
829+
}
830+
});
831+
const classSelect = element.querySelector('.editable-class-select');
832+
classSelect?.addEventListener('change', (e) => handlePlayerUpdate(e, player.id, 'class'));
833+
element.querySelectorAll('.role-btn').forEach(btn => btn.addEventListener('click', () => togglePlayerRole(player.id, btn.dataset.role)));
834+
});
835+
});
836+
837+
['TANK', 'HEALER', 'DPS'].forEach(role => {
838+
if(lists[role] && lists[role].children.length === 0) lists[role].innerHTML = `<p class="text-gray-500">Keine ${role.toLowerCase()}s zugewiesen.</p>`;
839+
});
840+
window.toggleCompEditability();
841+
}
803842

804843
window.toggleSelectEditability = function() {
805844
document.querySelectorAll('.assignment-select').forEach(el => { el.disabled = !window.isManager; });

0 commit comments

Comments
 (0)