diff --git a/web/index.html b/web/index.html index 3cf9b10..d2c2474 100644 --- a/web/index.html +++ b/web/index.html @@ -167,7 +167,7 @@ display: flex; gap: 20px; } .offer-card { - width: 230px; min-height: 140px; background: rgba(20,20,30,0.9); + width: 230px; min-height: 220px; background: rgba(20,20,30,0.9); border: 2px solid #888; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: transform 0.1s ease, border-color 0.1s ease; @@ -177,8 +177,17 @@ border-color: #ffcc00; background: rgba(60,50,20,0.95); transform: scale(1.04); box-shadow: 0 0 18px rgba(255,204,0,0.4); } + .offer-icon { + width: 76px; height: 76px; margin: 2px auto 0; + filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55)); + transition: filter 0.1s ease; + } + .offer-icon svg { width: 100%; height: 100%; display: block; } + .offer-card:hover .offer-icon, .offer-card.selected .offer-icon { + filter: drop-shadow(0 0 9px rgba(255,204,0,0.5)); + } .offer-title { - color: #ffcc00; font-size: 18px; font-weight: bold; + color: #ffcc00; font-size: 18px; font-weight: bold; text-align: center; } .offer-desc { color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.5; @@ -244,16 +253,19 @@

Level Up!

+
[1] auswählen
+
[2] auswählen
+
[3] auswählen
diff --git a/web/src/Game.ts b/web/src/Game.ts index ee680f1..b2f4795 100644 --- a/web/src/Game.ts +++ b/web/src/Game.ts @@ -19,6 +19,7 @@ import { Cross, initCrossModel } from './Cross'; import { Arena } from './Arena'; import { SlashEffect, isInSlashArc } from './SwordTrail'; import { SkillSystem, getSkill, type SkillOffer } from './Skills'; +import { skillIcon } from './SkillIcons'; import { initSounds, playSound, resumeContext } from './SoundManager'; const SPAWN_TIME = 10; @@ -92,6 +93,7 @@ export class Game { private uiShieldText!: HTMLElement; private uiLevelUp!: HTMLElement; private uiConfirmBtn!: HTMLButtonElement; + private uiOfferIcons: HTMLElement[] = []; private uiOfferTitles: HTMLElement[] = []; private uiOfferDescs: HTMLElement[] = []; private mouseOnCanvas = false; @@ -180,6 +182,7 @@ export class Game { for (let i = 0; i < 3; i++) { const card = document.getElementById(`offer-${i}`)!; card.addEventListener('click', () => this.selectOffer(i)); + this.uiOfferIcons.push(document.getElementById(`offer-icon-${i}`)!); this.uiOfferTitles.push(document.getElementById(`offer-title-${i}`)!); this.uiOfferDescs.push(document.getElementById(`offer-desc-${i}`)!); } @@ -540,6 +543,7 @@ export class Game { const offer = this.offers[i]; const skill = getSkill(offer.id); const isNew = offer.nextLevel === 1; + this.uiOfferIcons[i].innerHTML = skillIcon(offer.id); title.textContent = `${skill.name}${isNew ? ' (NEU)' : ` · Stufe ${offer.nextLevel}`}`; desc.textContent = skill.describe(offer.nextLevel); card.style.display = ''; diff --git a/web/src/SkillIcons.ts b/web/src/SkillIcons.ts new file mode 100644 index 0000000..855caa4 --- /dev/null +++ b/web/src/SkillIcons.ts @@ -0,0 +1,210 @@ +const ICONS: Record = { + fireball: ` + + + + + + + + + + + + + + + + + + + + + + + `, + + teleport: ` + + + + + + + + + + + + + + + + + + `, + + chainlightning: ` + + + + + + + + + + + + + + + `, + + swordRange: ` + + + + + + + + + + + + + + + + `, + + swordDamage: ` + + + + + + + + + + + + + + + + + `, + + regen: ` + + + + + + + + + + + + + + `, + + lifesteal: ` + + + + + + + + + + + + + + + + `, + + shield: ` + + + + + + + + + + + + + + `, + + maxHp: ` + + + + + + + + + + + + + `, + + thorns: ` + + + + + + + + + + + + + + + + + + + + + + `, + + speed: ` + + + + + + + + + + + + + + + `, +}; + +export function skillIcon(id: string): string { + return ICONS[id] ?? ''; +}