Add skill icons to level-up offer cards

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

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 = '';