Spaces:

Lashtw
/

Vibecodingex

Running

App Files Files Community

Lashtw commited on Jan 26

Commit

21778f6

verified ·

1 Parent(s): f256bb2

Upload 10 files

Browse files

Files changed (6) hide show

monster_preview.html +586 -0
src/services/classroom.js +39 -1
src/utils/monsterUtils.js +464 -0
src/views/AdminView.js +59 -14
src/views/InstructorView.js +34 -3
src/views/StudentView.js +108 -6

monster_preview.html ADDED Viewed

	@@ -0,0 +1,586 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VIBECODING Monster Gallery - Final Check</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            background-color: #0F172A;
+            color: white;
+            font-family: 'Courier New', monospace;
+        }
+        @keyframes breathe {
+            0% {
+                transform: scaleY(1) translateY(0);
+            }
+            50% {
+                transform: scaleY(0.92) translateY(4px);
+            }
+            100% {
+                transform: scaleY(1) translateY(0);
+            }
+        }
+        .pixel-art {
+            image-rendering: pixelated;
+            width: 144px;
+            height: 144px;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            animation: breathe 2.5s infinite ease-in-out;
+            transform-origin: bottom center;
+        }
+        .pixel-art:hover {
+            animation-play-state: paused;
+            transform: scale(1.1);
+            z-index: 10;
+            box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
+        }
+        .card {
+            background: rgba(30, 41, 59, 0.5);
+            border: 1px solid rgba(148, 163, 184, 0.1);
+            border-radius: 16px;
+            padding: 15px;
+            text-align: center;
+            position: relative;
+        }
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 24px;
+            padding: 20px;
+        }
+        h2 {
+            border-bottom: 2px solid #334155;
+            padding-bottom: 10px;
+            margin-top: 40px;
+            margin-bottom: 20px;
+            color: #60A5FA;
+            font-size: 1.5em;
+            font-weight: bold;
+        }
+        .badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 999px;
+            font-size: 0.7rem;
+            font-weight: bold;
+            margin-top: 5px;
+            background: #374151;
+            color: #9CA3AF;
+        }
+        .done-badge {
+            background: #059669;
+            color: #ccfbf1;
+        }
+        .new-badge {
+            background: #2563eb;
+            color: #dbeafe;
+        }
+        .fam-label {
+            position: absolute;
+            top: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #1e293b;
+            color: #94a3b8;
+            font-size: 0.6rem;
+            padding: 2px 6px;
+            border-radius: 4px;
+            border: 1px solid #334155;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+<body>
+    <div class="container mx-auto max-w-7xl p-8">
+        <h1
+            class="text-4xl font-extrabold mb-2 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500">
+            👾 VIBECODING 怪獸全圖鑑 👾</h1>
+        <p class="text-center text-slate-400 mb-12 font-mono">Restored & Updated: Wolf & Cat Redesigned</p>
+        <div id="gallery"></div>
+    </div>
+    <script>
+        const gallery = document.getElementById('gallery');
+        const W = 24; const H = 24; const C = W / 2;
+        function renderSVG(grid) {
+            let svg = '';
+            for (let y = 0; y < H; y++) {
+                for (let x = 0; x < W; x++) {
+                    if (grid[y][x]) svg += `<rect x="${x}" y="${y}" width="1" height="1" fill="${grid[y][x]}"/>`;
+                }
+            }
+            return `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-full h-full drop-shadow-md">${svg}</svg>`;
+        }
+        const monsters = [
+            { id: 'Egg', name: '🥚 像素蛋', type: 'neutral', stage: 0, arch: 'egg', status: 'done', fam: 'Origin' },
+            // Stage 1
+            { id: 'L1_C', name: '🔴 灰塵球 Dust-Ball', type: 'glitch', stage: 1, arch: 'dust', status: 'done', fam: 'Dust' },
+            { id: 'L1_B', name: '🟡 像素狗 Pixel-Pup', type: 'animal', stage: 1, arch: 'beast_pup', status: 'done', fam: 'Beast' },
+            { id: 'L1_A', name: '🔵 光之靈 Lumina', type: 'holy', stage: 1, arch: 'spirit_orb', status: 'done', fam: 'Spirit' },
+            // Stage 2
+            { id: 'L2_CC', name: '🔴 垃圾怪 Trash-Mob', type: 'glitch', stage: 2, arch: 'dust_trash', status: 'done', fam: 'Dust' },
+            { id: 'L2_CB', name: '🟡 史萊姆 Slime-Box', type: 'slime', stage: 2, arch: 'dust_slime', status: 'done', fam: 'Dust' },
+            { id: 'L2_CA', name: '🔵 駭客蟲 Hacker-Bug', type: 'tech', stage: 2, arch: 'dust_tech', status: 'done', fam: 'Dust' },
+            { id: 'L2_BC', name: '🔴 廢鐵狼 Rusty-Wolf', type: 'grunge', stage: 2, arch: 'beast_wolf', status: 'done', fam: 'Beast' },
+            { id: 'L2_BB', name: '🟡 勇者貓 Hero-Cat', type: 'animal', stage: 2, arch: 'beast_cat', status: 'done', fam: 'Beast' },
+            { id: 'L2_BA', name: '🔵 機甲獅 Mecha-Lion', type: 'mech', stage: 2, arch: 'beast_mech', status: 'done', fam: 'Beast' },
+            { id: 'L2_AC', name: '🔴 幽靈火 Ghost-Fire', type: 'spirit', stage: 2, arch: 'spirit_fire', status: 'done', fam: 'Spirit' },
+            { id: 'L2_AB', name: '🟡 天使鳥 Angel-Bird', type: 'holy', stage: 2, arch: 'spirit_wing', status: 'done', fam: 'Spirit' },
+            { id: 'L2_AA', name: '🔵 星雲龍 Cosmos-Dragon', type: 'cosmic', stage: 2, arch: 'spirit_dragon', status: 'done', fam: 'Spirit' },
+            // Stage 3 - ESTABLISHED
+            { id: 'L3_CCC', name: '🗑️ 崩潰垃圾山', type: 'glitch', stage: 3, arch: 'pile_big', status: 'done', fam: 'Glitch/Trash' },
+            { id: 'L3_CCB', name: '📦 寶箱怪', type: 'mimic', stage: 3, arch: 'box_teeth', status: 'done', fam: 'Glitch/Trash' },
+            { id: 'L3_CCA', name: '🦠 病毒王', type: 'virus', stage: 3, arch: 'corona', status: 'done', fam: 'Glitch/Trash' },
+            { id: 'L3_CBC', name: '💧 汙泥怪', type: 'grunge', stage: 3, arch: 'fluid', status: 'done', fam: 'Slime' },
+            { id: 'L3_CBB', name: '🧊 果凍騎士', type: 'slime', stage: 3, arch: 'knight_slime', status: 'done', fam: 'Slime' },
+            { id: 'L3_CBA', name: '💎 鑽石魔像', type: 'crystal', stage: 3, arch: 'golem', status: 'done', fam: 'Slime' },
+            { id: 'L3_CAC', name: '🕷️ 錯誤蜘蛛', type: 'glitch', stage: 3, arch: 'spider', status: 'done', fam: 'Hacker' },
+            { id: 'L3_CAB', name: '👾 程式遊俠', type: 'tech', stage: 3, arch: 'ranger', status: 'done', fam: 'Hacker' },
+            { id: 'L3_CAA', name: '🧠 量子主腦', type: 'tech', stage: 3, arch: 'brain', status: 'done', fam: 'Hacker' },
+            { id: 'L3_BAC', name: '🚜 重裝推土機', type: 'mech', stage: 3, arch: 'tank', status: 'done', fam: 'Mech Lion' },
+            { id: 'L3_BAB', name: '✈️ 變形戰機', type: 'mech', stage: 3, arch: 'jet', status: 'done', fam: 'Mech Lion' },
+            { id: 'L3_BAA', name: '🤖 究極鋼彈', type: 'mech', stage: 3, arch: 'gundam', status: 'done', fam: 'Mech Lion' },
+            { id: 'L3_ACC', name: '💀 骷髏法師', type: 'undead', stage: 3, arch: 'mage_skull', status: 'done', fam: 'Ghost' },
+            { id: 'L3_ACB', name: '🕯️ 南瓜燈杰克', type: 'spirit', stage: 3, arch: 'pumpkin', status: 'done', fam: 'Ghost' },
+            { id: 'L3_ACA', name: '👻 虛空死神', type: 'void', stage: 3, arch: 'reaper', status: 'done', fam: 'Ghost' },
+            // Stage 3 - REDESIGN TARGETS (Wolf V2 & Cat)
+            { id: 'L3_BCC', name: '🧟 喪屍犬', type: 'undead', stage: 3, arch: 'wolf_zombie_v2', status: 'new', fam: 'Wolf' },
+            { id: 'L3_BCB', name: '🐕 警備犬', type: 'animal', stage: 3, arch: 'wolf_guard_v2', status: 'new', fam: 'Wolf' },
+            { id: 'L3_BCA', name: '🐺 合金戰狼', type: 'mech', stage: 3, arch: 'wolf_alloy_v2', status: 'new', fam: 'Wolf' },
+            { id: 'L3_BBC', name: '😼 流浪劍客', type: 'warrior', stage: 3, arch: 'ronin', status: 'new', fam: 'Cat' },
+            { id: 'L3_BBB', name: '👑 貓咪國王', type: 'royal', stage: 3, arch: 'king_cat', status: 'new', fam: 'Cat' },
+            { id: 'L3_BBA', name: '🦁 雷霆獅王', type: 'elemental', stage: 3, arch: 'lion_mane', status: 'new', fam: 'Cat' },
+            { id: 'L3_BBA', name: '🦁 雷霆獅王', type: 'elemental', stage: 3, arch: 'lion_mane', status: 'new', fam: 'Cat' },
+            // Stage 3 - NEW ADDITIONS (Angel & Cosmos)
+            { id: 'L3_ABC', name: '👁️ 座天使 Ophanim', type: 'holy', stage: 3, arch: 'biblical_angel', status: 'new', fam: 'Angel' },
+            { id: 'L3_ABB', name: '⚔️ 女武神 Valkyrie', type: 'warrior', stage: 3, arch: 'valkyrie', status: 'new', fam: 'Angel' },
+            { id: 'L3_ABA', name: '🔥 聖火鳳凰 Phoenix', type: 'divine', stage: 3, arch: 'phoenix', status: 'new', fam: 'Angel' },
+            { id: 'L3_AAC', name: '🛡️ 大地泰坦 Titan', type: 'cosmic', stage: 3, arch: 'terra_titan', status: 'new', fam: 'Cosmos' },
+            { id: 'L3_AAB', name: '🐋 星海鯨 Astro-Whale', type: 'cosmic', stage: 3, arch: 'cosmo_whale', status: 'new', fam: 'Cosmos' },
+            { id: 'L3_AAA', name: '🌌 創世龍 Genesis', type: 'god', stage: 3, arch: 'genesis_dragon', status: 'new', fam: 'Cosmos' },
+        ];
+        function mulberry32(a) {
+            return function () {
+                var t = a += 0x6D2B79F5;
+                t = Math.imul(t ^ (t >>> 15), t | 1);
+                t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+                return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+            }
+        }
+        const palettes = {
+            base: ['#94A3B8', '#64748B', '#475569', '#334155'],
+            // Standard
+            glitch: ['#18181b', '#27272a', '#3f3f46', '#ef4444'],
+            trash: ['#3f3f46', '#71717a', '#a1a1aa', '#ef4444'],
+            mimic: ['#854d0e', '#a16207', '#ca8a04', '#eab308'],
+            virus: ['#2e1065', '#581c87', '#7e22ce', '#bef264', '#84cc16'],
+            spider: ['#1e293b', '#0f172a', '#b91c1c', '#ef4444'],
+            slime: ['#059669', '#10b981', '#34d399', '#d1fae5'],
+            fluid: ['#3f3f46', '#52525b', '#4b5563', '#a1a1aa'],
+            knight: ['#0ea5e9', '#38bdf8', '#7dd3fc', '#ffffff'],
+            crypto: ['#0891b2', '#06b6d4', '#22d3ee', '#cffafe'],
+            tech: ['#22d3ee', '#06b6d4', '#0891b2', '#155e75'],
+            ranger: ['#3b82f6', '#2563eb', '#1d4ed8', '#fbbf24'],
+            brain: ['#d8b4fe', '#c084fc', '#a855f7', '#7e22ce', '#22d3ee'],
+            tank: ['#3f3f46', '#18181b', '#facc15', '#fbbf24'],
+            jet: ['#cbd5e1', '#94a3b8', '#ef4444', '#dc2626'],
+            gundam: ['#ffffff', '#2563eb', '#dc2626', '#facc15'],
+            mage: ['#4c1d95', '#a855f7', '#172554', '#fbbf24'],
+            pumpkin: ['#ea580c', '#c2410c', '#3f3f46', '#facc15'],
+            reaper: ['#000000', '#171717', '#7f1d1d', '#9ca3af'],
+            // Wolf V2
+            wolf: ['#c2410c', '#9a3412', '#7c2d12', '#ef4444'], // Rust/Browns
+            zombie: ['#44403c', '#78716c', '#991b1b', '#fecaca'],
+            guard: ['#172554', '#1e3a8a', '#fbbf24', '#f59e0b', '#3b82f6'],
+            alloy: ['#e2e8f0', '#94a3b8', '#0ea5e9', '#0284c7', '#38bdf8', '#ffffff'], // Added white/brights
+            // Cat V2
+            cat: ['#fb923c', '#ea580c', '#c2410c', '#fff7ed'],
+            ronin: ['#c2410c', '#9a3412', '#fde047', '#e2e8f0'],
+            king: ['#7e22ce', '#a855f7', '#fbbf24', '#ffffff'],
+            thunder: ['#facc15', '#eab308', '#fefce8', '#f59e0b', '#ffffff'],
+            // Base Fams
+            beast: ['#fbbf24', '#f59e0b', '#d97706', '#78350f'],
+            mech_lion: ['#60a5fa', '#3b82f6', '#1d4ed8', '#93c5fd'],
+            holy: ['#fef3c7', '#fde68a', '#f59e0b', '#ffffff'],
+            fire: ['#c084fc', '#a855f7', '#7e22ce', '#ffffff'],
+            space: ['#4f46e5', '#312e81', '#818cf8', '#f472b6', '#22d3ee'],
+            // Angel V3
+            biblical: ['#facc15', '#eab308', '#ffffff', '#ef4444', '#3b82f6'], // Gold + Eyes
+            valkyrie: ['#e2e8f0', '#94a3b8', '#facc15', '#38bdf8', '#fbbf24'], // Silver/Gold
+            seraphim: ['#dc2626', '#ef4444', '#fbbf24', '#facc15', '#ffffff'], // Fire/Gold
+            // Cosmos V3
+            meteor: ['#475569', '#334155', '#ea580c', '#f97316'], // Rock/Magma
+            whale: ['#1e1b4b', '#312e81', '#6366f1', '#c7d2fe', '#ffffff'], // Deep Space
+            genesis: ['#000000', '#171717', '#c084fc', '#22d3ee', '#f472b6', '#ffffff'] // Cosmic
+        };
+        function generateMonsterSVG(monster) {
+            let seed = 0;
+            for (let i = 0; i < monster.id.length; i++) seed += monster.id.charCodeAt(i);
+            const rng = mulberry32(seed);
+            let palette = palettes.base;
+            const t = monster.type;
+            const a = monster.arch;
+            // Palette Select
+            if (a.includes('wolf')) {
+                if (a.includes('zombie')) palette = palettes.zombie;
+                else if (a.includes('guard')) palette = palettes.guard;
+                else if (a.includes('alloy')) palette = palettes.alloy;
+                else palette = palettes.wolf;
+            }
+            else if (a === 'ronin') palette = palettes.ronin;
+            else if (a === 'king_cat') palette = palettes.king;
+            else if (a === 'lion_mane') palette = palettes.thunder;
+            else if (a === 'tank') palette = palettes.tank;
+            else if (a === 'jet') palette = palettes.jet;
+            else if (a === 'gundam') palette = palettes.gundam;
+            else if (a === 'mage_skull') palette = palettes.mage;
+            else if (a === 'pumpkin') palette = palettes.pumpkin;
+            else if (a === 'reaper') palette = palettes.reaper;
+            // Angel & Cosmos V3
+            else if (a === 'biblical_angel') palette = palettes.biblical;
+            else if (a === 'valkyrie') palette = palettes.valkyrie;
+            else if (a === 'phoenix') palette = palettes.seraphim; // Reuse Fire/Gold palette
+            else if (a === 'terra_titan') palette = palettes.meteor; // Reuse Rock palette
+            else if (a === 'cosmo_whale') palette = palettes.whale;
+            else if (a === 'genesis_dragon') palette = palettes.genesis;
+            // Beast Family
+            else if (a === 'beast_pup') palette = palettes.beast;
+            else if (a === 'beast_cat') palette = palettes.cat;
+            else if (a === 'beast_mech') palette = palettes.mech_lion;
+            // Spirit Family
+            else if (a === 'spirit_orb') palette = palettes.holy;
+            else if (a === 'spirit_fire') palette = palettes.fire;
+            else if (a === 'spirit_wing') palette = palettes.holy;
+            else if (a === 'spirit_dragon') palette = palettes.space;
+            // ... (Other palettes handled by fallbacks correctly as per previous logic)
+            // Safety fallbacks
+            if (a.includes('dust')) {
+                if (a === 'dust_trash' || a === 'pile_big' || a === 'box_teeth' || a === 'corona') palette = palettes.glitch; // Approx
+                if (a.includes('slime') || a === 'fluid' || a === 'knight_slime' || a === 'golem') palette = palettes.slime;
+                if (a.includes('tech') || a === 'spider' || a === 'ranger' || a === 'brain') palette = palettes.tech;
+            }
+            // Better-specific overrides
+            if (a === 'pile_big') palette = palettes.trash;
+            if (a === 'box_teeth') palette = palettes.mimic;
+            if (a === 'corona') palette = palettes.virus;
+            if (a === 'fluid') palette = palettes.fluid;
+            if (a === 'knight_slime') palette = palettes.knight;
+            if (a === 'golem') palette = palettes.crypto;
+            if (a === 'spider') palette = palettes.spider;
+            if (a === 'ranger') palette = palettes.ranger;
+            if (a === 'brain') palette = palettes.brain;
+            let grid = new Array(H).fill(0).map(() => new Array(W).fill(null));
+            const rect = (x, y, w, h, col) => {
+                for (let i = Math.max(0, Math.floor(x)); i < Math.min(W, x + w); i++)
+                    for (let j = Math.max(0, Math.floor(y)); j < Math.min(H, y + h); j++)
+                        grid[j][i] = col;
+            }
+            const circle = (cx, cy, r, col) => {
+                for (let y = 0; y < H; y++)
+                    for (let x = 0; x < W; x++)
+                        if (Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) < r) grid[y][x] = col;
+            }
+            const line = (x1, y1, x2, y2, col) => {
+                let dx = Math.abs(x2 - x1), sx = x1 < x2 ? 1 : -1;
+                let dy = -Math.abs(y2 - y1), sy = y1 < y2 ? 1 : -1;
+                let err = dx + dy, e2;
+                while (true) {
+                    if (y1 >= 0 && y1 < H && x1 >= 0 && x1 < W) grid[y1][x1] = col;
+                    if (x1 == x2 && y1 == y2) break;
+                    const e2_val = 2 * err;
+                    if (e2_val >= dy) { err += dy; x1 += sx; }
+                    if (e2_val <= dx) { err += dx; y1 += sy; }
+                }
+            }
+            const mainCol = palette[Math.floor(rng() * (palette.length - 1))];
+            const secCol = palette[Math.floor(rng() * (palette.length - 2))] || palette[1];
+            const thirdCol = palette[palette.length - 1];
+            // --- STAGE 0-2 (Explicit Restoration) ---
+            if (a === 'egg') { circle(C, C, 7, mainCol); circle(C - 2, C - 3, 2, '#ffffff'); rect(C + 1, C + 2, 2, 2, secCol); rect(C - 4, C + 1, 2, 2, secCol); }
+            else if (a === 'dust') { circle(C, C, 5, '#1e293b'); for (let i = 0; i < 30; i++) { let angle = rng() * Math.PI * 2; let r = 4 + rng() * 4; rect(C + Math.cos(angle) * r, C + Math.sin(angle) * r, 1, 1, '#334155'); } rect(C - 4, C - 2, 3, 3, '#ffffff'); rect(C + 1, C - 2, 3, 3, '#ffffff'); rect(C - 3, C - 1, 1, 1, '#000000'); rect(C + 2, C - 1, 1, 1, '#000000'); }
+            else if (a === 'dust_trash') { circle(C, C, 6, mainCol); for (let i = 0; i < 40; i++) { let s = 7 + rng() * 3; rect(C + (rng() - 0.5) * s * 1.5, C + (rng() - 0.5) * s, 2, 2, i % 2 == 0 ? secCol : thirdCol); } rect(C - 3, C - 3, 3, 3, '#ffffff'); rect(C - 2, C - 2, 1, 1, '#000000'); rect(C + 1, C - 1, 2, 2, '#ffffff'); rect(C + 1, C - 1, 1, 1, '#000000'); }
+            else if (a === 'dust_slime') { for (let i = 0; i < 8; i++) circle(C + (rng() - 0.5) * 10, C + 3 + rng() * 3, 3, mainCol); rect(C - 3, C - 3, 2, 2, '#ffffff'); rect(C - 3, C - 1, 2, 2, '#000000'); rect(C + 1, C - 1, 2, 2, '#000000'); }
+            else if (a === 'dust_tech') { rect(C - 1, C - 9, 2, 4, secCol); rect(C - 5, C - 7, 10, 2, secCol); rect(C - 6, C + 2, 2, 4, mainCol); rect(C + 4, C + 2, 2, 4, mainCol); rect(C - 4, C - 1, 3, 2, '#a5f3fc'); rect(C + 1, C - 1, 3, 2, '#a5f3fc'); }
+            else if (a === 'beast_pup') { rect(C - 5, C - 1, 10, 6, mainCol); rect(C - 6, C - 5, 3, 4, secCol); rect(C + 3, C - 5, 3, 4, secCol); rect(C - 2, C + 1, 4, 3, secCol); rect(C - 1, C + 1, 2, 1, '#000000'); }
+            else if (a === 'beast_wolf') { rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 7, C - 6, 5, 5, mainCol); for (let i = 0; i < 10; i++) rect(C - 7 + rng() * 14, C - 4 + rng() * 6, 1, 1, secCol); rect(C - 7, C - 8, 2, 3, secCol); rect(C - 4, C - 8, 2, 3, secCol); rect(C + 6, C, 4, 2, secCol); rect(C - 6, C - 5, 1, 1, '#ef4444'); }
+            else if (a === 'beast_cat') { rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 7, C - 6, 5, 5, mainCol); rect(C - 7, C - 8, 2, 2, mainCol); rect(C - 4, C - 8, 2, 2, mainCol); rect(C - 6, C - 3, 1, 1, '#f9a8d4'); rect(C - 2, C - 3, 6, 6, '#ef4444'); }
+            else if (a === 'beast_mech') { rect(C - 6, C - 2, 12, 6, secCol); rect(C - 7, C - 6, 5, 5, mainCol); rect(C - 4, C - 8, 2, 6, thirdCol); rect(C - 6, C - 5, 3, 1, '#3b82f6'); }
+            else if (a === 'spirit_orb') { circle(C, C, 6, mainCol); for (let t = 0; t < Math.PI * 2; t += 0.4) { let r = 8; rect(C + Math.cos(t) * r, C + Math.sin(t) * r, 1, 1, secCol); } rect(C - 8, C - 2, 3, 4, '#ffffff'); rect(C + 5, C - 2, 3, 4, '#ffffff'); }
+            else if (a === 'spirit_fire') { circle(C, C + 1, 5, '#ffffff'); for (let i = 0; i < 40; i++) { let r = 4 + rng() * 6; let t = rng() * Math.PI * 2; let py = C + Math.sin(t) * r - (rng() * 6); let px = C + Math.cos(t) * r; rect(px, py, 2, 2, i % 3 == 0 ? thirdCol : secCol); } rect(C - 3, C - 1, 2, 3, '#000000'); rect(C + 1, C - 1, 2, 3, '#000000'); }
+            else if (a === 'spirit_wing') { circle(C, C, 5, mainCol); rect(C - 7, C + 2, 14, 2, secCol); rect(C - 11, C - 4, 2, 2, '#ffffff'); rect(C - 10, C - 5, 2, 4, '#ffffff'); rect(C - 8, C - 3, 4, 4, '#ffffff'); rect(C + 9, C - 4, 2, 2, '#ffffff'); rect(C + 8, C - 5, 2, 4, '#ffffff'); rect(C + 4, C - 3, 4, 4, '#ffffff'); rect(C - 4, C - 9, 8, 1, '#fbbf24'); rect(C - 5, C - 8, 1, 1, '#fbbf24'); rect(C + 4, C - 8, 1, 1, '#fbbf24'); rect(C - 1, C, 2, 2, '#fbbf24'); rect(C - 3, C - 2, 1, 1, '#3b82f6'); rect(C + 2, C - 2, 1, 1, '#3b82f6'); }
+            else if (a === 'spirit_dragon') { circle(C, C, 7, '#1e1b4b'); for (let i = 0; i < 20; i++) { let px = C + (rng() - 0.5) * 12; let py = C + (rng() - 0.5) * 10; rect(px, py, 1, 1, i % 3 == 0 ? '#f472b6' : (i % 2 == 0 ? '#22d3ee' : '#ffffff')); } rect(C - 9, C - 5, 4, 4, secCol); rect(C - 8, C - 9, 2, 4, thirdCol); rect(C + 6, C - 2, 6, 2, secCol); rect(C - 4, C - 2, 2, 1, '#22d3ee'); }
+            // --- STAGE 3 (Previously Done & APPROVED) ---
+            else if (a === 'pile_big') { circle(C, C, 8, '#000000'); for (let i = 0; i < 60; i++) rect(C + (rng() - 0.5) * 16, C + (rng() - 0.5) * 16, 2, 2, '#ef4444'); rect(C - 4, C - 2, 2, 2, '#ffffff'); rect(C - 3, C - 2, 1, 1, '#000000'); rect(C + 4, C, 2, 2, '#ffffff'); rect(C + 4, C, 1, 1, '#000000'); rect(C, C - 5, 3, 3, '#ffffff'); rect(C + 1, C - 5, 1, 1, '#000000'); }
+            else if (a === 'box_teeth') { rect(C - 8, C - 6, 16, 14, mainCol); rect(C - 8, C, 16, 2, '#000000'); rect(C - 1, C + 4, 2, 2, '#000000'); rect(C - 6, C + 2, 1, 2, '#ffffff'); rect(C - 2, C + 2, 1, 2, '#ffffff'); rect(C + 2, C + 2, 1, 2, '#ffffff'); rect(C + 5, C + 2, 1, 2, '#ffffff'); rect(C - 4, C - 3, 2, 1, '#ef4444'); rect(C + 2, C - 3, 2, 1, '#ef4444'); }
+            else if (a === 'corona') { circle(C, C, 6, mainCol); for (let t = 0; t < 6.28; t += 0.8) rect(C + Math.cos(t) * 10, C + Math.sin(t) * 10, 3, 3, secCol); rect(C - 4, C - 8, 8, 2, '#facc15'); rect(C - 4, C - 10, 2, 2, '#facc15'); rect(C + 2, C - 10, 2, 2, '#facc15'); rect(C - 3, C - 1, 2, 1, '#bef264'); rect(C + 1, C - 1, 2, 1, '#bef264'); rect(C - 2, C + 2, 4, 1, '#000000'); }
+            else if (a === 'fluid') { for (let i = 0; i < 4; i++) rect(C - 10 + i * 2, C + 4, 18 - i * 4, 4, mainCol); rect(C - 6, C, 2, 6, mainCol); rect(C + 4, C - 2, 3, 8, mainCol); rect(C - 5, C - 6, 3, 3, secCol); rect(C + 2, C - 5, 2, 2, secCol); rect(C - 2, C + 2, 4, 4, '#ffffff'); rect(C - 1, C + 2, 2, 2, '#000000'); }
+            else if (a === 'knight_slime') { rect(C - 3, C - 4, 6, 8, mainCol); rect(C - 4, C - 9, 8, 6, mainCol); rect(C - 2, C - 3, 4, 6, '#e0f2fe'); rect(C + 4, C, 8, 2, secCol); rect(C + 4, C - 2, 2, 6, secCol); rect(C - 7, C - 2, 4, 8, thirdCol); rect(C - 3, C - 7, 6, 1, '#000000'); }
+            else if (a === 'golem') { rect(C - 4, C - 4, 8, 8, mainCol); rect(C - 8, C - 8, 4, 4, secCol); rect(C + 4, C - 8, 4, 4, secCol); rect(C - 6, C + 4, 4, 6, secCol); rect(C + 2, C + 4, 4, 6, secCol); rect(C - 2, C - 10, 4, 4, thirdCol); rect(C - 3, C - 3, 2, 2, '#ffffff'); rect(C + 5, C - 7, 1, 1, '#ffffff'); rect(C - 1, C - 9, 2, 1, '#000000'); }
+            else if (a === 'spider') { rect(C - 4, C - 4, 8, 8, mainCol); rect(C - 5, C - 5, 10, 2, secCol); line(C - 4, C, C - 10, C - 4, secCol); line(C - 4, C + 2, C - 10, C + 4, secCol); line(C - 4, C + 4, C - 8, C + 8, secCol); line(C + 4, C, C + 10, C - 4, secCol); line(C + 4, C + 2, C + 10, C + 4, secCol); line(C + 4, C + 4, C + 8, C + 8, secCol); rect(C - 3, C - 2, 2, 2, '#ef4444'); rect(C + 1, C - 2, 2, 2, '#ef4444'); rect(C - 1, C + 1, 2, 2, '#ef4444'); }
+            else if (a === 'ranger') { rect(C - 4, C - 10, 8, 8, mainCol); rect(C - 3, C - 9, 2, 6, secCol); rect(C + 1, C - 9, 2, 6, secCol); rect(C - 1, C - 5, 2, 2, '#fbbf24'); rect(C - 4, C - 2, 8, 6, mainCol); rect(C + 4, C - 2, 6, 4, mainCol); rect(C + 8, C - 1, 2, 2, '#22d3ee'); rect(C - 4, C + 4, 3, 6, mainCol); rect(C + 1, C + 4, 3, 6, mainCol); }
+            else if (a === 'brain') { rect(C - 6, C - 6, 12, 12, '#a5f3fc'); rect(C - 6, C + 6, 12, 2, secCol); rect(C - 6, C - 8, 12, 2, secCol); rect(C - 4, C - 4, 8, 6, '#d8b4fe'); rect(C - 2, C - 2, 4, 1, '#ffffff'); line(C - 6, C, C - 10, C + 4, secCol); line(C + 6, C, C + 10, C + 4, secCol); }
+            else if (a === 'tank') {
+                rect(C - 8, C + 4, 16, 4, '#1e293b'); rect(C - 9, C + 5, 18, 2, '#000000');
+                rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 4, C - 6, 8, 4, mainCol); rect(C, C - 5, 8, 2, '#3f3f46'); rect(C - 5, C, 10, 2, '#facc15');
+                rect(C - 3, C - 3, 2, 2, '#3f3f46'); rect(C - 1, C - 2, 2, 1, '#ef4444');
+            }
+            else if (a === 'jet') {
+                rect(C - 2, C - 10, 4, 6, '#ef4444'); rect(C - 4, C - 4, 8, 10, mainCol); rect(C - 10, C, 6, 8, secCol); rect(C + 4, C, 6, 8, secCol);
+                rect(C - 3, C - 6, 6, 2, '#38bdf8'); rect(C - 3, C + 6, 2, 4, '#ef4444'); rect(C + 1, C + 6, 2, 4, '#ef4444');
+            }
+            else if (a === 'gundam') {
+                rect(C - 4, C - 10, 8, 6, '#ffffff'); rect(C - 5, C - 8, 10, 2, '#ffffff'); rect(C - 1, C - 11, 2, 3, '#dc2626'); rect(C - 3, C - 9, 6, 1, '#facc15');
+                rect(C - 4, C - 4, 8, 8, '#2563eb'); rect(C - 2, C - 4, 4, 2, '#dc2626'); rect(C - 5, C - 4, 2, 4, '#ffffff'); rect(C + 3, C - 4, 2, 4, '#ffffff');
+                rect(C - 4, C + 4, 3, 6, '#ffffff'); rect(C + 1, C + 4, 3, 6, '#ffffff'); rect(C + 5, C, 2, 6, '#334155');
+            }
+            else if (a === 'mage_skull') {
+                rect(C - 4, C - 5, 8, 14, '#172554'); rect(C - 3, C - 9, 6, 5, '#e5e5e5'); rect(C - 2, C - 8, 1, 1, '#000000'); rect(C + 1, C - 8, 1, 1, '#000000');
+                rect(C - 6, C - 10, 12, 1, '#4c1d95'); rect(C - 3, C - 13, 6, 3, '#4c1d95'); rect(C + 5, C - 8, 1, 16, '#fbbf24'); circle(C + 5, C - 9, 2, '#a855f7');
+            }
+            else if (a === 'pumpkin') {
+                rect(C - 4, C - 2, 8, 10, '#3f3f46'); circle(C, C - 6, 6, '#ea580c'); rect(C - 2, C - 7, 1, 1, '#facc15'); rect(C + 1, C - 7, 1, 1, '#facc15');
+                rect(C - 2, C - 5, 4, 1, '#facc15'); rect(C, C - 13, 1, 2, '#166534'); rect(C - 6, C, 2, 2, '#ea580c'); rect(C + 4, C, 2, 2, '#ea580c');
+            }
+            else if (a === 'reaper') {
+                rect(C - 5, C - 8, 10, 16, '#000000'); rect(C - 3, C - 6, 6, 4, '#171717'); rect(C - 1, C - 5, 1, 1, '#ef4444'); rect(C, C - 5, 1, 1, '#ef4444');
+                rect(C + 6, C - 8, 1, 16, '#7f1d1d'); rect(C + 4, C - 10, 6, 2, '#9ca3af'); rect(C + 3, C - 10, 1, 6, '#9ca3af');
+            }
+            // --- REDESIGNED STAGE 3 (Wolf V2 & Cat V2 Targets) ---
+            else if (a === 'wolf_zombie_v2') {
+                rect(C - 6, C - 3, 13, 6, '#4b5563'); // Darker rot body
+                rect(C - 2, C - 2, 5, 4, '#991b1b'); // Ribcage
+                rect(C - 8, C - 7, 6, 6, '#4b5563'); // Head
+                rect(C - 6, C - 6, 2, 2, '#e7e5e4'); // Skull patch
+                rect(C - 5, C - 5, 1, 1, '#000000'); // Eye empty
+                rect(C - 7, C + 3, 2, 5, '#4b5563'); // Leg FL
+                rect(C + 4, C + 3, 2, 5, '#e7e5e4'); // Leg BR (Bone)
+                for (let i = 0; i < 4; i++) rect(C + (rng() - 0.5) * 14, C - 6 + (rng() - 0.5) * 8, 1, 1, '#bef264');
+            }
+            else if (a === 'wolf_guard_v2') {
+                rect(C - 7, C - 3, 14, 7, '#1e3a8a'); // Body Armor
+                rect(C - 3, C - 4, 6, 6, '#fbbf24'); // Heavy Plating
+                rect(C - 9, C - 8, 7, 7, '#172554'); // Helmet
+                rect(C - 9, C - 6, 7, 1, '#60a5fa'); // Visor
+                rect(C - 3, C - 6, 3, 3, '#1e40af'); // Pad
+                rect(C - 7, C + 4, 3, 5, '#3b82f6');
+                rect(C + 5, C + 4, 3, 5, '#3b82f6');
+            }
+            else if (a === 'wolf_alloy_v2') {
+                rect(C - 7, C - 3, 14, 5, '#e2e8f0'); // Silver Body
+                rect(C - 2, C - 8, 4, 6, '#94a3b8'); // Booster base
+                rect(C - 3, C - 9, 2, 4, '#0ea5e9'); // Thruster
+                rect(C - 9, C - 6, 7, 5, '#e2e8f0'); // Head
+                rect(C - 6, C - 6, 4, 1, '#0ea5e9'); // Visor
+                line(C + 7, C, C + 11, C - 4, '#0ea5e9'); // Saber tail
+                rect(C - 7, C + 5, 2, 3, '#94a3b8');
+                rect(C + 6, C + 5, 2, 3, '#94a3b8');
+            }
+            else if (a === 'ronin') {
+                rect(C - 3, C - 4, 6, 8, '#c2410c'); // Orange Gi
+                rect(C - 4, C - 10, 8, 4, '#fde047'); // Hat
+                rect(C - 3, C + 4, 2, 4, '#3f3f46'); // Hakama
+                rect(C + 1, C + 4, 2, 4, '#3f3f46');
+                line(C + 4, C - 4, C + 8, C - 8, '#e5e5e5'); // Blade handle
+                rect(C - 4, C - 3, 2, 2, '#ef4444'); // Scarf
+            }
+            else if (a === 'king_cat') {
+                rect(C - 4, C - 3, 8, 8, '#7e22ce'); // Robe
+                rect(C - 2, C - 3, 4, 8, '#ffffff'); // Fur
+                rect(C - 4, C - 10, 8, 3, '#fbbf24'); // Crown
+                rect(C - 1, C - 10, 2, 2, '#ef4444');
+                line(C + 6, C, C + 6, C + 6, '#fbbf24'); // Scepter
+                circle(C + 6, C - 1, 2, '#ef4444');
+            }
+            else if (a === 'lion_mane') {
+                rect(C - 4, C - 3, 8, 8, '#ffffff');
+                for (let t = 0; t < 6.3; t += 0.6) rect(C + Math.cos(t) * 11, C + Math.sin(t) * 11 - 5, 2, 2, '#facc15'); // Mane
+                rect(C - 2, C - 6, 4, 4, '#fff7ed'); // Face
+                rect(C - 1, C - 5, 2, 1, '#3b82f6'); // Eyes
+                line(C - 8, C, C - 4, C + 4, '#facc15'); // Lightning
+                line(C + 8, C, C + 4, C - 4, '#facc15');
+            }
+            // --- ANGEL FAMILY V3 ---
+            else if (a === 'biblical_angel') {
+                // Ophanim: Interlocking rings
+                for (let t = 0; t < 6.3; t += 0.1) {
+                    let r = 9;
+                    let x1 = C + Math.cos(t) * r; let y1 = C + Math.sin(t) * r * 0.4;
+                    rect(x1, y1, 1, 1, mainCol); // Ring 1
+                    let x2 = C + Math.cos(t) * r * 0.4; let y2 = C + Math.sin(t) * r;
+                    rect(x2, y2, 1, 1, secCol);  // Ring 2
+                }
+                circle(C, C, 4, '#ffffff'); // Core
+                // Eyes on rings
+                for (let i = 0; i < 8; i++) {
+                    rect(C + Math.cos(i * 0.8) * 9, C + Math.sin(i * 0.8) * 3.5, 2, 2, '#ffffff');
+                    rect(C + Math.cos(i * 0.8) * 9, C + Math.sin(i * 0.8) * 3.5, 1, 1, '#3b82f6');
+                }
+            }
+            else if (a === 'valkyrie') {
+                rect(C - 3, C - 5, 6, 8, '#e2e8f0'); // Armor Body
+                rect(C - 3, C - 9, 6, 4, '#facc15'); // Helm
+                rect(C - 4, C + 3, 3, 5, '#e2e8f0'); // Leg L
+                rect(C + 1, C + 3, 3, 5, '#e2e8f0'); // Leg R
+                rect(C - 8, C - 6, 4, 10, '#ffffff'); // Wing L
+                rect(C + 5, C - 6, 4, 10, '#ffffff'); // Wing R
+                line(C + 4, C + 8, C + 10, C - 8, '#fbbf24'); // Spear
+                rect(C + 9, C - 9, 2, 4, '#38bdf8'); // Spear Tip
+            }
+            else if (a === 'phoenix') {
+                // Body
+                rect(C - 2, C - 4, 4, 8, mainCol);
+                // Head
+                rect(C - 2, C - 8, 4, 4, mainCol);
+                rect(C, C - 7, 1, 1, '#fbbf24'); // Eye
+                rect(C - 3, C - 6, 1, 2, '#fbbf24'); // Beak
+                // Wings (Spread Y shape)
+                for (let i = 0; i < 8; i++) {
+                    rect(C - 2 - i, C - 4 - i, 1, 2, '#ef4444');
+                    rect(C + 1 + i, C - 4 - i, 1, 2, '#ef4444');
+                    rect(C - 2 - i, C - 2 - i, 1, 4, secCol); // Feathers
+                    rect(C + 1 + i, C - 2 - i, 1, 4, secCol);
+                }
+                // Tail
+                rect(C - 1, C + 4, 2, 6, '#fbbf24');
+                rect(C - 3, C + 6, 2, 4, '#ef4444');
+                rect(C + 1, C + 6, 2, 4, '#ef4444');
+            }
+            // --- COSMOS FAMILY V3 ---
+            else if (a === 'terra_titan') {
+                // Heavy Mech/Golem body
+                rect(C - 6, C - 6, 12, 10, mainCol); // Chest
+                rect(C - 8, C - 8, 4, 6, secCol); // Shoulder L
+                rect(C + 4, C - 8, 4, 6, secCol); // Shoulder R
+                // Head
+                rect(C - 3, C - 9, 6, 4, mainCol);
+                rect(C - 2, C - 8, 4, 1, '#f97316'); // Visor
+                // Limbs
+                rect(C - 8, C - 2, 3, 8, mainCol); // Arm L
+                rect(C + 5, C - 2, 3, 8, mainCol); // Arm R
+                rect(C - 6, C + 4, 4, 6, secCol); // Leg L
+                rect(C + 2, C + 4, 4, 6, secCol); // Leg R
+                // Core
+                circle(C, C - 2, 3, '#ea580c');
+                rect(C - 1, C - 3, 2, 2, '#f97316');
+            }
+            else if (a === 'cosmo_whale') {
+                // Massive Body (Sperm whale shape)
+                rect(C - 10, C - 6, 14, 10, mainCol); // Big Head/Front
+                rect(C + 4, C - 4, 6, 6, mainCol); // Mid
+                rect(C + 10, C - 2, 4, 3, mainCol); // Tail fuse
+                // Underbelly
+                rect(C - 10, C + 2, 12, 2, '#c7d2fe');
+                // Tail Fluke
+                rect(C + 12, C - 5, 2, 8, mainCol);
+                rect(C + 11, C - 6, 1, 2, mainCol);
+                rect(C + 11, C + 4, 1, 2, mainCol);
+                // Eye
+                rect(C - 5, C, 2, 1, '#ffffff');
+                // Blowhole Spray
+                for (let k = 0; k < 5; k++) rect(C - 6 + (rng() - 0.5) * 4, C - 10 + (rng() - 0.5) * 4, 1, 1, '#22d3ee');
+                // Stars/Spots
+                rect(C - 8, C - 3, 1, 1, '#ffffff');
+                rect(C - 2, C - 4, 1, 1, '#ffffff');
+                rect(C + 6, C - 1, 1, 1, '#ffffff');
+            }
+            else if (a === 'genesis_dragon') {
+                // Sinuous body
+                let px = C, py = C;
+                for (let i = 0; i < 30; i++) {
+                    rect(px, py, 3, 3, i % 2 == 0 ? '#000000' : secCol);
+                    px += Math.cos(i * 0.4) * 2;
+                    py += Math.sin(i * 0.4) * 2;
+                }
+                circle(C, C, 5, '#c084fc'); // Void Core
+                // Cosmic Particles
+                for (let k = 0; k < 20; k++) {
+                    rect(C + (rng() - 0.5) * 20, C + (rng() - 0.5) * 20, 1, 1, k % 3 == 0 ? '#22d3ee' : '#f472b6');
+                }
+            }
+            return renderSVG(grid);
+        }
+        const stages = [0, 1, 2, 3];
+        stages.forEach(stage => {
+            const section = document.createElement('div');
+            section.innerHTML = `<h2>Stage ${stage}</h2><div class="grid-container" id="stage-${stage}"></div>`;
+            gallery.appendChild(section);
+            const container = section.querySelector('.grid-container');
+            monsters.filter(m => m.stage === stage && (m.status === 'done' || m.status === 'new')).sort((a, b) => {
+                const famOrder = { 'Origin': 0, 'Dust': 1, 'Beast': 2, 'Spirit': 3, 'Glitch/Trash': 4, 'Slime': 5, 'Hacker': 6, 'Wolf': 7, 'Cat': 8, 'Mech Lion': 9, 'Ghost': 10, 'Angel': 11, 'Cosmos': 12 };
+                return (famOrder[a.fam] || 99) - (famOrder[b.fam] || 99);
+            }).forEach(m => {
+                const card = document.createElement('div');
+                card.className = 'card';
+                let badgeClass = m.status === 'new' ? 'new-badge' : 'done-badge';
+                card.innerHTML = `
+                    <div class="fam-label">${m.fam || 'Base'}</div>
+                    <div class="pixel-art mx-auto bg-slate-800 p-2">${generateMonsterSVG(m)}</div>
+                    <div class="mt-4 font-bold text-sm text-slate-200" style="min-height: 48px; display: flex; align-items: center; justify-content: center;">${m.name.replace(' ', '<br>')}</div>
+                    <span class="badge ${badgeClass}">${m.status.toUpperCase()}</span>
+                `;
+                container.appendChild(card);
+            });
+        });
+    </script>
+</body>
+</html>

src/services/classroom.js CHANGED Viewed

@@ -12,7 +12,8 @@ import {
     getDocs,
     orderBy,
     deleteDoc,
-    updateDoc
 } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
 // Collection references
@@ -442,3 +443,40 @@ export async function markNotificationRead(notificationId) {
         read: true
     });
 }

     getDocs,
     orderBy,
     deleteDoc,
+    updateDoc,
+    getCountFromServer
 } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
 // Collection references
         read: true
     });
 }
+/**
+ * Gets the number of users in a room
+ * @param {string} roomCode
+ * @returns {Promise<number>}
+ */
+export async function getClassSize(roomCode) {
+    const q = query(
+        collection(db, USERS_COLLECTION),
+        where("current_room", "==", roomCode)
+    );
+    const snapshot = await getCountFromServer(q);
+    return snapshot.data().count;
+}
+/**
+ * Updates a student's monster stage
+ * @param {string} userId
+ * @param {number} newStage
+ */
+export async function updateUserStage(userId, newStage) {
+    const userRef = doc(db, USERS_COLLECTION, userId);
+    await updateDoc(userRef, {
+        monster_stage: newStage
+    });
+}
+/**
+ * Gets user profile data
+ * @param {string} userId
+ * @returns {Promise<Object>}
+ */
+export async function getUser(userId) {
+    const userRef = doc(db, USERS_COLLECTION, userId);
+    const snap = await getDoc(userRef);
+    return snap.exists() ? snap.data() : null;
+}

src/utils/monsterUtils.js ADDED Viewed

	@@ -0,0 +1,464 @@

+/**
+ * Logic for generating Pixel Art Monsters
+ * Adapted from monster_preview.html
+ */
+export const MONSTER_STAGES = {
+    EGG: 0,
+    BASIC: 1,
+    EVOLVED: 2,
+    FINAL: 3
+};
+// Monster Definitions
+export const MONSTER_DEFS = [
+    { id: 'Egg', name: '🥚 像素蛋', type: 'neutral', stage: 0, arch: 'egg', fam: 'Origin' },
+    // Stage 1
+    { id: 'L1_C', name: '🔴 灰塵球 Dust-Ball', type: 'glitch', stage: 1, arch: 'dust', fam: 'Dust' },
+    { id: 'L1_B', name: '🟡 像素狗 Pixel-Pup', type: 'animal', stage: 1, arch: 'beast_pup', fam: 'Beast' },
+    { id: 'L1_A', name: '🔵 光之靈 Lumina', type: 'holy', stage: 1, arch: 'spirit_orb', fam: 'Spirit' },
+    // Stage 2
+    { id: 'L2_CC', name: '🔴 垃圾怪 Trash-Mob', type: 'glitch', stage: 2, arch: 'dust_trash', fam: 'Dust' },
+    { id: 'L2_CB', name: '🟡 史萊姆 Slime-Box', type: 'slime', stage: 2, arch: 'dust_slime', fam: 'Dust' },
+    { id: 'L2_CA', name: '🔵 駭客蟲 Hacker-Bug', type: 'tech', stage: 2, arch: 'dust_tech', fam: 'Dust' },
+    { id: 'L2_BC', name: '🔴 廢鐵狼 Rusty-Wolf', type: 'grunge', stage: 2, arch: 'beast_wolf', fam: 'Beast' },
+    { id: 'L2_BB', name: '🟡 勇者貓 Hero-Cat', type: 'animal', stage: 2, arch: 'beast_cat', fam: 'Beast' },
+    { id: 'L2_BA', name: '🔵 機甲獅 Mecha-Lion', type: 'mech', stage: 2, arch: 'beast_mech', fam: 'Beast' },
+    { id: 'L2_AC', name: '🔴 幽靈火 Ghost-Fire', type: 'spirit', stage: 2, arch: 'spirit_fire', fam: 'Spirit' },
+    { id: 'L2_AB', name: '🟡 天使鳥 Angel-Bird', type: 'holy', stage: 2, arch: 'spirit_wing', fam: 'Spirit' },
+    { id: 'L2_AA', name: '🔵 星雲龍 Cosmos-Dragon', type: 'cosmic', stage: 2, arch: 'spirit_dragon', fam: 'Spirit' },
+    // Stage 3
+    { id: 'L3_CCC', name: '🗑️ 崩潰垃圾山', type: 'glitch', stage: 3, arch: 'pile_big', fam: 'Glitch/Trash' },
+    { id: 'L3_CCB', name: '📦 寶箱怪', type: 'mimic', stage: 3, arch: 'box_teeth', fam: 'Glitch/Trash' },
+    { id: 'L3_CCA', name: '🦠 病毒王', type: 'virus', stage: 3, arch: 'corona', fam: 'Glitch/Trash' },
+    { id: 'L3_CBC', name: '💧 汙泥怪', type: 'grunge', stage: 3, arch: 'fluid', fam: 'Slime' },
+    { id: 'L3_CBB', name: '🧊 果凍騎士', type: 'slime', stage: 3, arch: 'knight_slime', fam: 'Slime' },
+    { id: 'L3_CBA', name: '💎 鑽石魔像', type: 'crystal', stage: 3, arch: 'golem', fam: 'Slime' },
+    { id: 'L3_CAC', name: '🕷️ 錯誤蜘蛛', type: 'glitch', stage: 3, arch: 'spider', fam: 'Hacker' },
+    { id: 'L3_CAB', name: '👾 程式遊俠', type: 'tech', stage: 3, arch: 'ranger', fam: 'Hacker' },
+    { id: 'L3_CAA', name: '🧠 量子主腦', type: 'tech', stage: 3, arch: 'brain', fam: 'Hacker' },
+    { id: 'L3_BAC', name: '🚜 重裝推土機', type: 'mech', stage: 3, arch: 'tank', fam: 'Mech Lion' },
+    { id: 'L3_BAB', name: '✈️ 變形戰機', type: 'mech', stage: 3, arch: 'jet', fam: 'Mech Lion' },
+    { id: 'L3_BAA', name: '🤖 究極鋼彈', type: 'mech', stage: 3, arch: 'gundam', fam: 'Mech Lion' },
+    { id: 'L3_ACC', name: '💀 骷髏法師', type: 'undead', stage: 3, arch: 'mage_skull', fam: 'Ghost' },
+    { id: 'L3_ACB', name: '🕯️ 南瓜燈杰克', type: 'spirit', stage: 3, arch: 'pumpkin', fam: 'Ghost' },
+    { id: 'L3_ACA', name: '👻 虛空死神', type: 'void', stage: 3, arch: 'reaper', fam: 'Ghost' },
+    // Stage 3 - REDESIGN TARGETS (Wolf V2 & Cat)
+    { id: 'L3_BCC', name: '🧟 喪屍犬', type: 'undead', stage: 3, arch: 'wolf_zombie_v2', fam: 'Wolf' },
+    { id: 'L3_BCB', name: '🐕 警備犬', type: 'animal', stage: 3, arch: 'wolf_guard_v2', fam: 'Wolf' },
+    { id: 'L3_BCA', name: '🐺 合金戰狼', type: 'mech', stage: 3, arch: 'wolf_alloy_v2', fam: 'Wolf' },
+    { id: 'L3_BBC', name: '😼 流浪劍客', type: 'warrior', stage: 3, arch: 'ronin', fam: 'Cat' },
+    { id: 'L3_BBB', name: '👑 貓咪國王', type: 'royal', stage: 3, arch: 'king_cat', fam: 'Cat' },
+    { id: 'L3_BBA', name: '🦁 雷霆獅王', type: 'elemental', stage: 3, arch: 'lion_mane', fam: 'Cat' },
+    // Stage 3 - NEW ADDITIONS (Angel & Cosmos)
+    { id: 'L3_ABC', name: '👁️ 座天使 Ophanim', type: 'holy', stage: 3, arch: 'biblical_angel', fam: 'Angel' },
+    { id: 'L3_ABB', name: '⚔️ 女武神 Valkyrie', type: 'warrior', stage: 3, arch: 'valkyrie', fam: 'Angel' },
+    { id: 'L3_ABA', name: '🔥 聖火鳳凰 Phoenix', type: 'divine', stage: 3, arch: 'phoenix', fam: 'Angel' },
+    { id: 'L3_AAC', name: '🛡️ 大地泰坦 Titan', type: 'cosmic', stage: 3, arch: 'terra_titan', fam: 'Cosmos' },
+    { id: 'L3_AAB', name: '🐋 星海鯨 Astro-Whale', type: 'cosmic', stage: 3, arch: 'cosmo_whale', fam: 'Cosmos' },
+    { id: 'L3_AAA', name: '🌌 創世龍 Genesis', type: 'god', stage: 3, arch: 'genesis_dragon', fam: 'Cosmos' },
+];
+const palettes = {
+    base: ['#94A3B8', '#64748B', '#475569', '#334155'],
+    // Standard
+    glitch: ['#18181b', '#27272a', '#3f3f46', '#ef4444'],
+    trash: ['#3f3f46', '#71717a', '#a1a1aa', '#ef4444'],
+    mimic: ['#854d0e', '#a16207', '#ca8a04', '#eab308'],
+    virus: ['#2e1065', '#581c87', '#7e22ce', '#bef264', '#84cc16'],
+    spider: ['#1e293b', '#0f172a', '#b91c1c', '#ef4444'],
+    slime: ['#059669', '#10b981', '#34d399', '#d1fae5'],
+    fluid: ['#3f3f46', '#52525b', '#4b5563', '#a1a1aa'],
+    knight: ['#0ea5e9', '#38bdf8', '#7dd3fc', '#ffffff'],
+    crypto: ['#0891b2', '#06b6d4', '#22d3ee', '#cffafe'],
+    tech: ['#22d3ee', '#06b6d4', '#0891b2', '#155e75'],
+    ranger: ['#3b82f6', '#2563eb', '#1d4ed8', '#fbbf24'],
+    brain: ['#d8b4fe', '#c084fc', '#a855f7', '#7e22ce', '#22d3ee'],
+    tank: ['#3f3f46', '#18181b', '#facc15', '#fbbf24'],
+    jet: ['#cbd5e1', '#94a3b8', '#ef4444', '#dc2626'],
+    gundam: ['#ffffff', '#2563eb', '#dc2626', '#facc15'],
+    mage: ['#4c1d95', '#a855f7', '#172554', '#fbbf24'],
+    pumpkin: ['#ea580c', '#c2410c', '#3f3f46', '#facc15'],
+    reaper: ['#000000', '#171717', '#7f1d1d', '#9ca3af'],
+    // Wolf V2
+    wolf: ['#c2410c', '#9a3412', '#7c2d12', '#ef4444'], // Rust/Browns
+    zombie: ['#44403c', '#78716c', '#991b1b', '#fecaca'],
+    guard: ['#172554', '#1e3a8a', '#fbbf24', '#f59e0b', '#3b82f6'],
+    alloy: ['#e2e8f0', '#94a3b8', '#0ea5e9', '#0284c7', '#38bdf8', '#ffffff'], // Added white/brights
+    // Cat V2
+    cat: ['#fb923c', '#ea580c', '#c2410c', '#fff7ed'],
+    ronin: ['#c2410c', '#9a3412', '#fde047', '#e2e8f0'],
+    king: ['#7e22ce', '#a855f7', '#fbbf24', '#ffffff'],
+    thunder: ['#facc15', '#eab308', '#fefce8', '#f59e0b', '#ffffff'],
+    // Base Fams
+    beast: ['#fbbf24', '#f59e0b', '#d97706', '#78350f'],
+    mech_lion: ['#60a5fa', '#3b82f6', '#1d4ed8', '#93c5fd'],
+    holy: ['#fef3c7', '#fde68a', '#f59e0b', '#ffffff'],
+    fire: ['#c084fc', '#a855f7', '#7e22ce', '#ffffff'],
+    space: ['#4f46e5', '#312e81', '#818cf8', '#f472b6', '#22d3ee'],
+    // Angel V3
+    biblical: ['#facc15', '#eab308', '#ffffff', '#ef4444', '#3b82f6'], // Gold + Eyes
+    valkyrie: ['#e2e8f0', '#94a3b8', '#facc15', '#38bdf8', '#fbbf24'], // Silver/Gold
+    seraphim: ['#dc2626', '#ef4444', '#fbbf24', '#facc15', '#ffffff'], // Fire/Gold
+    // Cosmos V3
+    meteor: ['#475569', '#334155', '#ea580c', '#f97316'], // Rock/Magma
+    whale: ['#1e1b4b', '#312e81', '#6366f1', '#c7d2fe', '#ffffff'], // Deep Space
+    genesis: ['#000000', '#171717', '#c084fc', '#22d3ee', '#f472b6', '#ffffff'] // Cosmic
+};
+function mulberry32(a) {
+    return function () {
+        var t = a += 0x6D2B79F5;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    }
+}
+/**
+ * Generates an SVG string of the monster
+ * @param {Object} monster The monster object (from MONSTER_DEFS)
+ * @returns {string} SVG string
+ */
+export function generateMonsterSVG(monster) {
+    // If no monster provided, return empty
+    if (!monster) return '';
+    const W = 24; const H = 24; const C = W / 2;
+    let seed = 0;
+    // Use monster ID as seed source
+    for (let i = 0; i < monster.id.length; i++) seed += monster.id.charCodeAt(i);
+    const rng = mulberry32(seed);
+    let palette = palettes.base;
+    const t = monster.type;
+    const a = monster.arch;
+    // Palette Select (Simplified Logic from original)
+    if (a.includes('wolf')) {
+        if (a.includes('zombie')) palette = palettes.zombie;
+        else if (a.includes('guard')) palette = palettes.guard;
+        else if (a.includes('alloy')) palette = palettes.alloy;
+        else palette = palettes.wolf;
+    }
+    else if (a === 'ronin') palette = palettes.ronin;
+    else if (a === 'king_cat') palette = palettes.king;
+    else if (a === 'lion_mane') palette = palettes.thunder;
+    else if (a === 'tank') palette = palettes.tank;
+    else if (a === 'jet') palette = palettes.jet;
+    else if (a === 'gundam') palette = palettes.gundam;
+    else if (a === 'mage_skull') palette = palettes.mage;
+    else if (a === 'pumpkin') palette = palettes.pumpkin;
+    else if (a === 'reaper') palette = palettes.reaper;
+    else if (a === 'biblical_angel') palette = palettes.biblical;
+    else if (a === 'valkyrie') palette = palettes.valkyrie;
+    else if (a === 'phoenix') palette = palettes.seraphim;
+    else if (a === 'terra_titan') palette = palettes.meteor;
+    else if (a === 'cosmo_whale') palette = palettes.whale;
+    else if (a === 'genesis_dragon') palette = palettes.genesis;
+    else if (a === 'beast_pup') palette = palettes.beast;
+    else if (a === 'beast_cat') palette = palettes.cat;
+    else if (a === 'beast_mech') palette = palettes.mech_lion;
+    else if (a === 'spirit_orb') palette = palettes.holy;
+    else if (a === 'spirit_fire') palette = palettes.fire;
+    else if (a === 'spirit_wing') palette = palettes.holy;
+    else if (a === 'spirit_dragon') palette = palettes.space;
+    // Safety Fallbacks
+    else if (a.includes('dust')) {
+        if (a === 'dust_trash' || a === 'pile_big' || a === 'box_teeth' || a === 'corona') palette = palettes.glitch;
+        else if (a.includes('slime') || a === 'fluid' || a === 'knight_slime' || a === 'golem') palette = palettes.slime;
+        else if (a.includes('tech') || a === 'spider' || a === 'ranger' || a === 'brain') palette = palettes.tech;
+        else palette = palettes.trash; // Generic
+    }
+    // Specific Overrides
+    if (a === 'pile_big') palette = palettes.trash;
+    if (a === 'box_teeth') palette = palettes.mimic;
+    if (a === 'corona') palette = palettes.virus;
+    if (a === 'fluid') palette = palettes.fluid;
+    if (a === 'knight_slime') palette = palettes.knight;
+    if (a === 'golem') palette = palettes.crypto;
+    if (a === 'spider') palette = palettes.spider;
+    if (a === 'ranger') palette = palettes.ranger;
+    if (a === 'brain') palette = palettes.brain;
+    let grid = new Array(H).fill(0).map(() => new Array(W).fill(null));
+    const rect = (x, y, w, h, col) => {
+        for (let i = Math.max(0, Math.floor(x)); i < Math.min(W, x + w); i++)
+            for (let j = Math.max(0, Math.floor(y)); j < Math.min(H, y + h); j++)
+                grid[j][i] = col;
+    }
+    const circle = (cx, cy, r, col) => {
+        for (let y = 0; y < H; y++)
+            for (let x = 0; x < W; x++)
+                if (Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) < r) grid[y][x] = col;
+    }
+    const line = (x1, y1, x2, y2, col) => {
+        let dx = Math.abs(x2 - x1), sx = x1 < x2 ? 1 : -1;
+        let dy = -Math.abs(y2 - y1), sy = y1 < y2 ? 1 : -1;
+        let err = dx + dy, e2;
+        while (true) {
+            if (y1 >= 0 && y1 < H && x1 >= 0 && x1 < W) grid[y1][x1] = col;
+            if (x1 == x2 && y1 == y2) break;
+            const e2_val = 2 * err;
+            if (e2_val >= dy) { err += dy; x1 += sx; }
+            if (e2_val <= dx) { err += dx; y1 += sy; }
+        }
+    }
+    const mainCol = palette[Math.floor(rng() * (palette.length - 1))];
+    const secCol = palette[Math.floor(rng() * (palette.length - 2))] || palette[1];
+    const thirdCol = palette[palette.length - 1];
+    // --- DRAWING LOGIC ---
+    if (a === 'egg') { circle(C, C, 7, mainCol); circle(C - 2, C - 3, 2, '#ffffff'); rect(C + 1, C + 2, 2, 2, secCol); rect(C - 4, C + 1, 2, 2, secCol); }
+    else if (a === 'dust') { circle(C, C, 5, '#1e293b'); for (let i = 0; i < 30; i++) { let angle = rng() * Math.PI * 2; let r = 4 + rng() * 4; rect(C + Math.cos(angle) * r, C + Math.sin(angle) * r, 1, 1, '#334155'); } rect(C - 4, C - 2, 3, 3, '#ffffff'); rect(C + 1, C - 2, 3, 3, '#ffffff'); rect(C - 3, C - 1, 1, 1, '#000000'); rect(C + 2, C - 1, 1, 1, '#000000'); }
+    else if (a === 'dust_trash') { circle(C, C, 6, mainCol); for (let i = 0; i < 40; i++) { let s = 7 + rng() * 3; rect(C + (rng() - 0.5) * s * 1.5, C + (rng() - 0.5) * s, 2, 2, i % 2 == 0 ? secCol : thirdCol); } rect(C - 3, C - 3, 3, 3, '#ffffff'); rect(C - 2, C - 2, 1, 1, '#000000'); rect(C + 1, C - 1, 2, 2, '#ffffff'); rect(C + 1, C - 1, 1, 1, '#000000'); }
+    else if (a === 'dust_slime') { for (let i = 0; i < 8; i++) circle(C + (rng() - 0.5) * 10, C + 3 + rng() * 3, 3, mainCol); rect(C - 3, C - 3, 2, 2, '#ffffff'); rect(C - 3, C - 1, 2, 2, '#000000'); rect(C + 1, C - 1, 2, 2, '#000000'); }
+    else if (a === 'dust_tech') { rect(C - 1, C - 9, 2, 4, secCol); rect(C - 5, C - 7, 10, 2, secCol); rect(C - 6, C + 2, 2, 4, mainCol); rect(C + 4, C + 2, 2, 4, mainCol); rect(C - 4, C - 1, 3, 2, '#a5f3fc'); rect(C + 1, C - 1, 3, 2, '#a5f3fc'); }
+    else if (a === 'beast_pup') { rect(C - 5, C - 1, 10, 6, mainCol); rect(C - 6, C - 5, 3, 4, secCol); rect(C + 3, C - 5, 3, 4, secCol); rect(C - 2, C + 1, 4, 3, secCol); rect(C - 1, C + 1, 2, 1, '#000000'); }
+    else if (a === 'beast_wolf') { rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 7, C - 6, 5, 5, mainCol); for (let i = 0; i < 10; i++) rect(C - 7 + rng() * 14, C - 4 + rng() * 6, 1, 1, secCol); rect(C - 7, C - 8, 2, 3, secCol); rect(C - 4, C - 8, 2, 3, secCol); rect(C + 6, C, 4, 2, secCol); rect(C - 6, C - 5, 1, 1, '#ef4444'); }
+    else if (a === 'beast_cat') { rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 7, C - 6, 5, 5, mainCol); rect(C - 7, C - 8, 2, 2, mainCol); rect(C - 4, C - 8, 2, 2, mainCol); rect(C - 6, C - 3, 1, 1, '#f9a8d4'); rect(C - 2, C - 3, 6, 6, '#ef4444'); }
+    else if (a === 'beast_mech') { rect(C - 6, C - 2, 12, 6, secCol); rect(C - 7, C - 6, 5, 5, mainCol); rect(C - 4, C - 8, 2, 6, thirdCol); rect(C - 6, C - 5, 3, 1, '#3b82f6'); }
+    else if (a === 'spirit_orb') { circle(C, C, 6, mainCol); for (let t = 0; t < Math.PI * 2; t += 0.4) { let r = 8; rect(C + Math.cos(t) * r, C + Math.sin(t) * r, 1, 1, secCol); } rect(C - 8, C - 2, 3, 4, '#ffffff'); rect(C + 5, C - 2, 3, 4, '#ffffff'); }
+    else if (a === 'spirit_fire') { circle(C, C + 1, 5, '#ffffff'); for (let i = 0; i < 40; i++) { let r = 4 + rng() * 6; let t = rng() * Math.PI * 2; let py = C + Math.sin(t) * r - (rng() * 6); let px = C + Math.cos(t) * r; rect(px, py, 2, 2, i % 3 == 0 ? thirdCol : secCol); } rect(C - 3, C - 1, 2, 3, '#000000'); rect(C + 1, C - 1, 2, 3, '#000000'); }
+    else if (a === 'spirit_wing') { circle(C, C, 5, mainCol); rect(C - 7, C + 2, 14, 2, secCol); rect(C - 11, C - 4, 2, 2, '#ffffff'); rect(C - 10, C - 5, 2, 4, '#ffffff'); rect(C - 8, C - 3, 4, 4, '#ffffff'); rect(C + 9, C - 4, 2, 2, '#ffffff'); rect(C + 8, C - 5, 2, 4, '#ffffff'); rect(C + 4, C - 3, 4, 4, '#ffffff'); rect(C - 4, C - 9, 8, 1, '#fbbf24'); rect(C - 5, C - 8, 1, 1, '#fbbf24'); rect(C + 4, C - 8, 1, 1, '#fbbf24'); rect(C - 1, C, 2, 2, '#fbbf24'); rect(C - 3, C - 2, 1, 1, '#3b82f6'); rect(C + 2, C - 2, 1, 1, '#3b82f6'); }
+    else if (a === 'spirit_dragon') { circle(C, C, 7, '#1e1b4b'); for (let i = 0; i < 20; i++) { let px = C + (rng() - 0.5) * 12; let py = C + (rng() - 0.5) * 10; rect(px, py, 1, 1, i % 3 == 0 ? '#f472b6' : (i % 2 == 0 ? '#22d3ee' : '#ffffff')); } rect(C - 9, C - 5, 4, 4, secCol); rect(C - 8, C - 9, 2, 4, thirdCol); rect(C + 6, C - 2, 6, 2, secCol); rect(C - 4, C - 2, 2, 1, '#22d3ee'); }
+    // --- STAGE 3 ---
+    else if (a === 'pile_big') { circle(C, C, 8, '#000000'); for (let i = 0; i < 60; i++) rect(C + (rng() - 0.5) * 16, C + (rng() - 0.5) * 16, 2, 2, '#ef4444'); rect(C - 4, C - 2, 2, 2, '#ffffff'); rect(C - 3, C - 2, 1, 1, '#000000'); rect(C + 4, C, 2, 2, '#ffffff'); rect(C + 4, C, 1, 1, '#000000'); rect(C, C - 5, 3, 3, '#ffffff'); rect(C + 1, C - 5, 1, 1, '#000000'); }
+    else if (a === 'box_teeth') { rect(C - 8, C - 6, 16, 14, mainCol); rect(C - 8, C, 16, 2, '#000000'); rect(C - 1, C + 4, 2, 2, '#000000'); rect(C - 6, C + 2, 1, 2, '#ffffff'); rect(C - 2, C + 2, 1, 2, '#ffffff'); rect(C + 2, C + 2, 1, 2, '#ffffff'); rect(C + 5, C + 2, 1, 2, '#ffffff'); rect(C - 4, C - 3, 2, 1, '#ef4444'); rect(C + 2, C - 3, 2, 1, '#ef4444'); }
+    else if (a === 'corona') { circle(C, C, 6, mainCol); for (let t = 0; t < 6.28; t += 0.8) rect(C + Math.cos(t) * 10, C + Math.sin(t) * 10, 3, 3, secCol); rect(C - 4, C - 8, 8, 2, '#facc15'); rect(C - 4, C - 10, 2, 2, '#facc15'); rect(C + 2, C - 10, 2, 2, '#facc15'); rect(C - 3, C - 1, 2, 1, '#bef264'); rect(C + 1, C - 1, 2, 1, '#bef264'); rect(C - 2, C + 2, 4, 1, '#000000'); }
+    else if (a === 'fluid') { for (let i = 0; i < 4; i++) rect(C - 10 + i * 2, C + 4, 18 - i * 4, 4, mainCol); rect(C - 6, C, 2, 6, mainCol); rect(C + 4, C - 2, 3, 8, mainCol); rect(C - 5, C - 6, 3, 3, secCol); rect(C + 2, C - 5, 2, 2, secCol); rect(C - 2, C + 2, 4, 4, '#ffffff'); rect(C - 1, C + 2, 2, 2, '#000000'); }
+    else if (a === 'knight_slime') { rect(C - 3, C - 4, 6, 8, mainCol); rect(C - 4, C - 9, 8, 6, mainCol); rect(C - 2, C - 3, 4, 6, '#e0f2fe'); rect(C + 4, C, 8, 2, secCol); rect(C + 4, C - 2, 2, 6, secCol); rect(C - 7, C - 2, 4, 8, thirdCol); rect(C - 3, C - 7, 6, 1, '#000000'); }
+    else if (a === 'golem') { rect(C - 4, C - 4, 8, 8, mainCol); rect(C - 8, C - 8, 4, 4, secCol); rect(C + 4, C - 8, 4, 4, secCol); rect(C - 6, C + 4, 4, 6, secCol); rect(C + 2, C + 4, 4, 6, secCol); rect(C - 2, C - 10, 4, 4, thirdCol); rect(C - 3, C - 3, 2, 2, '#ffffff'); rect(C + 5, C - 7, 1, 1, '#ffffff'); rect(C - 1, C - 9, 2, 1, '#000000'); }
+    else if (a === 'spider') { rect(C - 4, C - 4, 8, 8, mainCol); rect(C - 5, C - 5, 10, 2, secCol); line(C - 4, C, C - 10, C - 4, secCol); line(C - 4, C + 2, C - 10, C + 4, secCol); line(C - 4, C + 4, C - 8, C + 8, secCol); line(C + 4, C, C + 10, C - 4, secCol); line(C + 4, C + 2, C + 10, C + 4, secCol); line(C + 4, C + 4, C + 8, C + 8, secCol); rect(C - 3, C - 2, 2, 2, '#ef4444'); rect(C + 1, C - 2, 2, 2, '#ef4444'); rect(C - 1, C + 1, 2, 2, '#ef4444'); }
+    else if (a === 'ranger') { rect(C - 4, C - 10, 8, 8, mainCol); rect(C - 3, C - 9, 2, 6, secCol); rect(C + 1, C - 9, 2, 6, secCol); rect(C - 1, C - 5, 2, 2, '#fbbf24'); rect(C - 4, C - 2, 8, 6, mainCol); rect(C + 4, C - 2, 6, 4, mainCol); rect(C + 8, C - 1, 2, 2, '#22d3ee'); rect(C - 4, C + 4, 3, 6, mainCol); rect(C + 1, C + 4, 3, 6, mainCol); }
+    else if (a === 'brain') { rect(C - 6, C - 6, 12, 12, '#a5f3fc'); rect(C - 6, C + 6, 12, 2, secCol); rect(C - 6, C - 8, 12, 2, secCol); rect(C - 4, C - 4, 8, 6, '#d8b4fe'); rect(C - 2, C - 2, 4, 1, '#ffffff'); line(C - 6, C, C - 10, C + 4, secCol); line(C + 6, C, C + 10, C + 4, secCol); }
+    else if (a === 'tank') {
+        rect(C - 8, C + 4, 16, 4, '#1e293b'); rect(C - 9, C + 5, 18, 2, '#000000');
+        rect(C - 6, C - 2, 12, 6, mainCol); rect(C - 4, C - 6, 8, 4, mainCol); rect(C, C - 5, 8, 2, '#3f3f46'); rect(C - 5, C, 10, 2, '#facc15');
+        rect(C - 3, C - 3, 2, 2, '#3f3f46'); rect(C - 1, C - 2, 2, 1, '#ef4444');
+    }
+    else if (a === 'jet') {
+        rect(C - 2, C - 10, 4, 6, '#ef4444'); rect(C - 4, C - 4, 8, 10, mainCol); rect(C - 10, C, 6, 8, secCol); rect(C + 4, C, 6, 8, secCol);
+        rect(C - 3, C - 6, 6, 2, '#38bdf8'); rect(C - 3, C + 6, 2, 4, '#ef4444'); rect(C + 1, C + 6, 2, 4, '#ef4444');
+    }
+    else if (a === 'gundam') {
+        rect(C - 4, C - 10, 8, 6, '#ffffff'); rect(C - 5, C - 8, 10, 2, '#ffffff'); rect(C - 1, C - 11, 2, 3, '#dc2626'); rect(C - 3, C - 9, 6, 1, '#facc15');
+        rect(C - 4, C - 4, 8, 8, '#2563eb'); rect(C - 2, C - 4, 4, 2, '#dc2626'); rect(C - 5, C - 4, 2, 4, '#ffffff'); rect(C + 3, C - 4, 2, 4, '#ffffff');
+        rect(C - 4, C + 4, 3, 6, '#ffffff'); rect(C + 1, C + 4, 3, 6, '#ffffff'); rect(C + 5, C, 2, 6, '#334155');
+    }
+    else if (a === 'mage_skull') {
+        rect(C - 4, C - 5, 8, 14, '#172554'); rect(C - 3, C - 9, 6, 5, '#e5e5e5'); rect(C - 2, C - 8, 1, 1, '#000000'); rect(C + 1, C - 8, 1, 1, '#000000');
+        rect(C - 6, C - 10, 12, 1, '#4c1d95'); rect(C - 3, C - 13, 6, 3, '#4c1d95'); rect(C + 5, C - 8, 1, 16, '#fbbf24'); circle(C + 5, C - 9, 2, '#a855f7');
+    }
+    else if (a === 'pumpkin') {
+        rect(C - 4, C - 2, 8, 10, '#3f3f46'); circle(C, C - 6, 6, '#ea580c'); rect(C - 2, C - 7, 1, 1, '#facc15'); rect(C + 1, C - 7, 1, 1, '#facc15');
+        rect(C - 2, C - 5, 4, 1, '#facc15'); rect(C, C - 13, 1, 2, '#166534'); rect(C - 6, C, 2, 2, '#ea580c'); rect(C + 4, C, 2, 2, '#ea580c');
+    }
+    else if (a === 'reaper') {
+        rect(C - 5, C - 8, 10, 16, '#000000'); rect(C - 3, C - 6, 6, 4, '#171717'); rect(C - 1, C - 5, 1, 1, '#ef4444'); rect(C, C - 5, 1, 1, '#ef4444');
+        rect(C + 6, C - 8, 1, 16, '#7f1d1d'); rect(C + 4, C - 10, 6, 2, '#9ca3af'); rect(C + 3, C - 10, 1, 6, '#9ca3af');
+    }
+    // --- REDESIGNED STAGE 3 (Wolf V2 & Cat V2 Targets) ---
+    else if (a === 'wolf_zombie_v2') {
+        rect(C - 6, C - 3, 13, 6, '#4b5563'); // Darker rot body
+        rect(C - 2, C - 2, 5, 4, '#991b1b'); // Ribcage
+        rect(C - 8, C - 7, 6, 6, '#4b5563'); // Head
+        rect(C - 6, C - 6, 2, 2, '#e7e5e4'); // Skull patch
+        rect(C - 5, C - 5, 1, 1, '#000000'); // Eye empty
+        rect(C - 7, C + 3, 2, 5, '#4b5563'); // Leg FL
+        rect(C + 4, C + 3, 2, 5, '#e7e5e4'); // Leg BR (Bone)
+        for (let i = 0; i < 4; i++) rect(C + (rng() - 0.5) * 14, C - 6 + (rng() - 0.5) * 8, 1, 1, '#bef264');
+    }
+    else if (a === 'wolf_guard_v2') {
+        rect(C - 7, C - 3, 14, 7, '#1e3a8a'); // Body Armor
+        rect(C - 3, C - 4, 6, 6, '#fbbf24'); // Heavy Plating
+        rect(C - 9, C - 8, 7, 7, '#172554'); // Helmet
+        rect(C - 9, C - 6, 7, 1, '#60a5fa'); // Visor
+        rect(C - 3, C - 6, 3, 3, '#1e40af'); // Pad
+        rect(C - 7, C + 4, 3, 5, '#3b82f6');
+        rect(C + 5, C + 4, 3, 5, '#3b82f6');
+    }
+    else if (a === 'wolf_alloy_v2') {
+        rect(C - 7, C - 3, 14, 5, '#e2e8f0'); // Silver Body
+        rect(C - 2, C - 8, 4, 6, '#94a3b8'); // Booster base
+        rect(C - 3, C - 9, 2, 4, '#0ea5e9'); // Thruster
+        rect(C - 9, C - 6, 7, 5, '#e2e8f0'); // Head
+        rect(C - 6, C - 6, 4, 1, '#0ea5e9'); // Visor
+        line(C + 7, C, C + 11, C - 4, '#0ea5e9'); // Saber tail
+        rect(C - 7, C + 5, 2, 3, '#94a3b8');
+        rect(C + 6, C + 5, 2, 3, '#94a3b8');
+    }
+    else if (a === 'ronin') {
+        rect(C - 3, C - 4, 6, 8, '#c2410c'); // Orange Gi
+        rect(C - 4, C - 10, 8, 4, '#fde047'); // Hat
+        rect(C - 3, C + 4, 2, 4, '#3f3f46'); // Hakama
+        rect(C + 1, C + 4, 2, 4, '#3f3f46');
+        line(C + 4, C - 4, C + 8, C - 8, '#e5e5e5'); // Blade handle
+        rect(C - 4, C - 3, 2, 2, '#ef4444'); // Scarf
+    }
+    else if (a === 'king_cat') {
+        rect(C - 4, C - 3, 8, 8, '#7e22ce'); // Robe
+        rect(C - 2, C - 3, 4, 8, '#ffffff'); // Fur
+        rect(C - 4, C - 10, 8, 3, '#fbbf24'); // Crown
+        rect(C - 1, C - 10, 2, 2, '#ef4444');
+        line(C + 6, C, C + 6, C + 6, '#fbbf24'); // Scepter
+        circle(C + 6, C - 1, 2, '#ef4444');
+    }
+    else if (a === 'lion_mane') {
+        rect(C - 4, C - 3, 8, 8, '#ffffff');
+        for (let t = 0; t < 6.3; t += 0.6) rect(C + Math.cos(t) * 11, C + Math.sin(t) * 11 - 5, 2, 2, '#facc15'); // Mane
+        rect(C - 2, C - 6, 4, 4, '#fff7ed'); // Face
+        rect(C - 1, C - 5, 2, 1, '#3b82f6'); // Eyes
+        line(C - 8, C, C - 4, C + 4, '#facc15'); // Lightning
+        line(C + 8, C, C + 4, C - 4, '#facc15');
+    }
+    // --- ANGEL FAMILY V3 ---
+    else if (a === 'biblical_angel') {
+        for (let t = 0; t < 6.3; t += 0.1) {
+            let r = 9;
+            let x1 = C + Math.cos(t) * r; let y1 = C + Math.sin(t) * r * 0.4;
+            rect(x1, y1, 1, 1, mainCol);
+            let x2 = C + Math.cos(t) * r * 0.4; let y2 = C + Math.sin(t) * r;
+            rect(x2, y2, 1, 1, secCol);
+        }
+        circle(C, C, 4, '#ffffff');
+        for (let i = 0; i < 8; i++) {
+            rect(C + Math.cos(i * 0.8) * 9, C + Math.sin(i * 0.8) * 3.5, 2, 2, '#ffffff');
+            rect(C + Math.cos(i * 0.8) * 9, C + Math.sin(i * 0.8) * 3.5, 1, 1, '#3b82f6');
+        }
+    }
+    else if (a === 'valkyrie') {
+        rect(C - 3, C - 5, 6, 8, '#e2e8f0'); rect(C - 3, C - 9, 6, 4, '#facc15');
+        rect(C - 4, C + 3, 3, 5, '#e2e8f0'); rect(C + 1, C + 3, 3, 5, '#e2e8f0');
+        rect(C - 8, C - 6, 4, 10, '#ffffff'); rect(C + 5, C - 6, 4, 10, '#ffffff');
+        line(C + 4, C + 8, C + 10, C - 8, '#fbbf24'); rect(C + 9, C - 9, 2, 4, '#38bdf8');
+    }
+    else if (a === 'phoenix') {
+        rect(C - 2, C - 4, 4, 8, mainCol); rect(C - 2, C - 8, 4, 4, mainCol);
+        rect(C, C - 7, 1, 1, '#fbbf24'); rect(C - 3, C - 6, 1, 2, '#fbbf24');
+        for (let i = 0; i < 8; i++) {
+            rect(C - 2 - i, C - 4 - i, 1, 2, '#ef4444');
+            rect(C + 1 + i, C - 4 - i, 1, 2, '#ef4444');
+            rect(C - 2 - i, C - 2 - i, 1, 4, secCol);
+            rect(C + 1 + i, C - 2 - i, 1, 4, secCol);
+        }
+        rect(C - 1, C + 4, 2, 6, '#fbbf24'); rect(C - 3, C + 6, 2, 4, '#ef4444'); rect(C + 1, C + 6, 2, 4, '#ef4444');
+    }
+    // --- COSMOS FAMILY V3 ---
+    else if (a === 'terra_titan') {
+        rect(C - 6, C - 6, 12, 10, mainCol); rect(C - 8, C - 8, 4, 6, secCol); rect(C + 4, C - 8, 4, 6, secCol);
+        rect(C - 3, C - 9, 6, 4, mainCol); rect(C - 2, C - 8, 4, 1, '#f97316');
+        rect(C - 8, C - 2, 3, 8, mainCol); rect(C + 5, C - 2, 3, 8, mainCol);
+        rect(C - 6, C + 4, 4, 6, secCol); rect(C + 2, C + 4, 4, 6, secCol);
+        circle(C, C - 2, 3, '#ea580c'); rect(C - 1, C - 3, 2, 2, '#f97316');
+    }
+    else if (a === 'cosmo_whale') {
+        rect(C - 10, C - 6, 14, 10, mainCol); rect(C + 4, C - 4, 6, 6, mainCol); rect(C + 10, C - 2, 4, 3, mainCol);
+        rect(C - 10, C + 2, 12, 2, '#c7d2fe'); rect(C + 12, C - 5, 2, 8, mainCol);
+        rect(C + 11, C - 6, 1, 2, mainCol); rect(C + 11, C + 4, 1, 2, mainCol);
+        rect(C - 5, C, 2, 1, '#ffffff');
+        for (let k = 0; k < 5; k++) rect(C - 6 + (rng() - 0.5) * 4, C - 10 + (rng() - 0.5) * 4, 1, 1, '#22d3ee');
+        rect(C - 8, C - 3, 1, 1, '#ffffff'); rect(C - 2, C - 4, 1, 1, '#ffffff'); rect(C + 6, C - 1, 1, 1, '#ffffff');
+    }
+    else if (a === 'genesis_dragon') {
+        let px = C, py = C;
+        for (let i = 0; i < 30; i++) {
+            rect(px, py, 3, 3, i % 2 == 0 ? '#000000' : secCol);
+            px += Math.cos(i * 0.4) * 2;
+            py += Math.sin(i * 0.4) * 2;
+        }
+        circle(C, C, 5, '#c084fc');
+        for (let k = 0; k < 20; k++) {
+            rect(C + (rng() - 0.5) * 20, C + (rng() - 0.5) * 20, 1, 1, k % 3 == 0 ? '#22d3ee' : '#f472b6');
+        }
+    }
+    let svg = '';
+    for (let y = 0; y < H; y++) {
+        for (let x = 0; x < W; x++) {
+            if (grid[y][x]) svg += `<rect x="${x}" y="${y}" width="1" height="1" fill="${grid[y][x]}"/>`;
+        }
+    }
+    return `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-full h-full drop-shadow-md shape-rendering-crispEdges">${svg}</svg>`;
+}
+/**
+ * Determines the next monster form based on parameters
+ * @param {number} currentStage - Current evolutionary stage (0-3)
+ * @param {number} likes - Student's total likes
+ * @param {number} classSize - Active class size
+ * @param {string} [currentFam] - Current family hint (optional, for persistent lineage)
+ * @returns {Object} Selected Monster Definition
+ */
+export function getNextMonster(currentStage, likes, classSize, currentFam = null) {
+    if (currentStage === 0) return MONSTER_DEFS.find(m => m.id === 'Egg');
+    // Stage 1: Basic Families
+    if (currentStage === 1) {
+        // Simple logic for Stage 1? Or Random?
+        // Let's use simple hash of likes or random to distribute if there's no clear indicator?
+        // Requirements say "After beginner 5 tasks, Stage 1 unlocks".
+        // Let's default to Dust or something based on likes?
+        // Actually the prompt says:
+        // "Stage 1 (Basic): Unlocks after Beginner... Three basic families: Dust, Pup, Spirit"
+        // Let's pick based on (Likes % 3) for variety or just return one?
+        // Let's return Spirit if Likes are high, Dust if low?
+        // Simple distribution for now:
+        if (likes > 5) return MONSTER_DEFS.find(m => m.id === 'L1_A'); // Spirit
+        if (likes > 2) return MONSTER_DEFS.find(m => m.id === 'L1_B'); // Pup
+        return MONSTER_DEFS.find(m => m.id === 'L1_C'); // Dust
+    }
+    // Branching Logic for Stage 2 & 3
+    // A: High Likes ( > classSize / 2 )
+    // B: Mid Likes ( 1 < likes <= classSize / 2 )
+    // C: Low Likes ( <= 1 )
+    const ratio = classSize > 0 ? likes / classSize : 0;
+    // Tier Logic
+    let tier = 'C';
+    if (likes > classSize / 2) tier = 'A';
+    else if (likes > 1) tier = 'B';
+    // Safety check for small classes
+    if (classSize <= 2 && likes >= 1) tier = 'A'; // Boost for testing pairs
+    // Filter potential monsters for this Stage
+    const candidates = MONSTER_DEFS.filter(m => m.stage === currentStage);
+    // Filter by Tier (Suffix A/B/C)
+    // IDs are like L2_AA, L2_AB... allow flexible matching.
+    // Last char of ID corresponds to Tier? (A=High, B=Mid, C=Low)
+    // Yes: L3_AAA (High), L3_CAA (High? No wait, logic in readme says:
+    // Tier 1 (Low) -> C route.
+    // Tier 3 (High) -> A route.
+    const targetSuffix = tier;
+    // If we have a current family, try to stick to it?
+    // Implementation Plan didn't specify strict lineage tracking yet, but usually we want to.
+    // Let's filter candidates ending in targetSuffix
+    let match = candidates.find(m => m.id.endsWith(targetSuffix) && (!currentFam || m.fam === currentFam));
+    // If no match (e.g. family change allowed or not found), just pick any of that Tier
+    if (!match) match = candidates.find(m => m.id.endsWith(targetSuffix));
+    return match || MONSTER_DEFS[0]; // Fallback
+}

src/views/AdminView.js CHANGED Viewed

@@ -107,19 +107,62 @@ async function loadChallenges() {
     const list = document.getElementById('challenges-list');
     const challenges = await getChallenges();
-    list.innerHTML = challenges.map(c => `
-        <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 flex justify-between items-center group hover:border-gray-500 transition-colors">
-            <div>
-                <span class="inline-block px-2 py-1 text-xs rounded bg-gray-700 text-gray-300 mr-2">${c.level}</span>
-                <span class="font-bold text-white text-lg">${c.title}</span>
-                <p class="text-gray-400 text-sm mt-1 truncate max-w-md">${c.description}</p>
-            </div>
-            <div class="flex space-x-2 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
-                <button onclick="window.editChallenge('${c.id}')" class="bg-cyan-600/20 text-cyan-400 px-3 py-1 rounded hover:bg-cyan-600 hover:text-white transition-colors">編輯</button>
-                <button onclick="window.deleteChallenge('${c.id}')" class="bg-red-600/20 text-red-400 px-3 py-1 rounded hover:bg-red-600 hover:text-white transition-colors">刪除</button>
             </div>
-        </div>
-    `).join('');
     // Expose helpers globally for onclick
     window.editChallenge = (id) => {
@@ -134,14 +177,16 @@ async function loadChallenges() {
     };
 }
-function openModal(challenge = null) {
     const modal = document.getElementById('challenge-modal');
     const title = document.getElementById('modal-title');
     // Reset or Fill
     document.getElementById('edit-id').value = challenge ? challenge.id : '';
     document.getElementById('edit-title').value = challenge ? challenge.title : '';
-    document.getElementById('edit-level').value = challenge ? challenge.level : 'beginner';
     document.getElementById('edit-desc').value = challenge ? challenge.description : '';
     document.getElementById('edit-link').value = challenge ? challenge.link : '';
     document.getElementById('edit-order').value = challenge ? challenge.order : '1';

     const list = document.getElementById('challenges-list');
     const challenges = await getChallenges();
+    const levels = ['beginner', 'intermediate', 'advanced'];
+    const levelNames = {
+        beginner: "初級 (Beginner)",
+        intermediate: "中級 (Intermediate)",
+        advanced: "高級 (Advanced)"
+    };
+    // Group challenges
+    const groups = { beginner: [], intermediate: [], advanced: [] };
+    challenges.forEach(c => {
+        if (groups[c.level]) groups[c.level].push(c);
+        else groups.beginner.push(c); // Fallback
+    });
+    list.innerHTML = levels.map(level => {
+        const groupItems = groups[level] || [];
+        const isOpen = level === 'beginner' ? 'open' : ''; // Open first by default
+        const itemsHtml = groupItems.map(c => `
+            <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 flex justify-between items-center group hover:border-gray-500 transition-colors mb-2">
+                <div class="flex items-center space-x-3">
+                    <span class="text-gray-500 font-mono text-sm">#${c.order}</span>
+                    <div>
+                        <span class="font-bold text-white text-lg">${c.title}</span>
+                        <p class="text-gray-400 text-sm mt-1 truncate max-w-md">${c.description}</p>
+                    </div>
+                </div>
+                <div class="flex space-x-2 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button onclick="window.editChallenge('${c.id}')" class="bg-cyan-600/20 text-cyan-400 px-3 py-1 rounded hover:bg-cyan-600 hover:text-white transition-colors">編輯</button>
+                    <button onclick="window.deleteChallenge('${c.id}')" class="bg-red-600/20 text-red-400 px-3 py-1 rounded hover:bg-red-600 hover:text-white transition-colors">刪除</button>
+                </div>
             </div>
+        `).join('');
+        return `
+            <details class="group border border-gray-700 rounded-xl bg-gray-800/30 overflow-hidden mb-4" ${isOpen}>
+                <summary class="flex items-center justify-between p-4 cursor-pointer bg-gray-800 hover:bg-gray-700 transition-colors select-none">
+                    <div class="flex items-center space-x-3">
+                        <h3 class="text-xl font-bold text-cyan-400">${levelNames[level]}</h3>
+                        <span class="text-xs text-gray-400 bg-gray-900 px-2 py-1 rounded-full">${groupItems.length} 題</span>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <button onclick="event.preventDefault(); window.openModal(null, '${level}')" class="bg-green-600 hover:bg-green-500 text-white text-xs font-bold py-1 px-3 rounded transition-colors shadow-lg">
+                            + 新增至此區
+                        </button>
+                        <svg class="w-5 h-5 text-gray-400 transform group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </div>
+                </summary>
+                <div class="p-4 pt-4 border-t border-gray-700/50">
+                    ${itemsHtml || '<div class="text-gray-500 text-center italic">尚無題目，請新增</div>'}
+                </div>
+            </details>
+        `;
+    }).join('');
     // Expose helpers globally for onclick
     window.editChallenge = (id) => {
     };
 }
+// Global expose for the "Add to Section" button
+window.openModal = function (challenge = null, defaultLevel = 'beginner') {
     const modal = document.getElementById('challenge-modal');
     const title = document.getElementById('modal-title');
     // Reset or Fill
     document.getElementById('edit-id').value = challenge ? challenge.id : '';
     document.getElementById('edit-title').value = challenge ? challenge.title : '';
+    // Use challenge level if editing, otherwise use defaultLevel passed from section button
+    document.getElementById('edit-level').value = challenge ? challenge.level : defaultLevel;
     document.getElementById('edit-desc').value = challenge ? challenge.description : '';
     document.getElementById('edit-link').value = challenge ? challenge.link : '';
     document.getElementById('edit-order').value = challenge ? challenge.order : '1';

src/views/InstructorView.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createRoom, subscribeToRoom, getChallenges } from "../services/classroom.js";
 let cachedChallenges = [];
@@ -40,6 +40,9 @@ export async function renderInstructorView() {
                <button id="btn-show-stage" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg">
                     <span>🖥️ 投放到大螢幕 (本機)</span>
                </button>
                <!-- Future Feature: Send to Students -->
                <!--
                <button id="btn-broadcast-all" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg opacity-50 cursor-not-allowed" title="此功能開發中">
@@ -229,6 +232,30 @@ export function setupInstructorEvents() {
         const author = document.getElementById('broadcast-author').textContent;
         window.openStage(prompt, author);
     });
 }
 /**
@@ -296,7 +323,7 @@ function renderTransposedHeatmap(students) {
                     statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-pointer shadow-[0_0_10px_rgba(34,197,94,0.1)]';
                     content = '✅';
                     const safePrompt = p.prompt.replace(/"/g, '&quot;').replace(/'/g, "\\'");
-                    action = `onclick="window.showBroadcastModal('${student.nickname}', '${c.title}', '${safePrompt}')"`;
                 } else if (p.status === 'started') {
                     // Check stuck
                     const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
@@ -342,7 +369,7 @@ function renderTransposedHeatmap(students) {
 }
 // Global scope for HTML access
-window.showBroadcastModal = (nickname, title, prompt) => {
     const modal = document.getElementById('broadcast-modal');
     const content = document.getElementById('broadcast-content');
@@ -351,6 +378,10 @@ window.showBroadcastModal = (nickname, title, prompt) => {
     document.getElementById('broadcast-challenge').textContent = title;
     document.getElementById('broadcast-prompt').textContent = prompt;
     modal.classList.remove('hidden');
     // Animation trigger
     setTimeout(() => {

+import { createRoom, subscribeToRoom, getChallenges, resetProgress } from "../services/classroom.js";
 let cachedChallenges = [];
                <button id="btn-show-stage" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg">
                     <span>🖥️ 投放到大螢幕 (本機)</span>
                </button>
+               <button id="btn-reject-task" class="bg-red-600 hover:bg-red-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg shadow-lg">
+                    <span>🛑 退回重做 (Reject)</span>
+               </button>
                <!-- Future Feature: Send to Students -->
                <!--
                <button id="btn-broadcast-all" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg opacity-50 cursor-not-allowed" title="此功能開發中">
         const author = document.getElementById('broadcast-author').textContent;
         window.openStage(prompt, author);
     });
+    // Reject Logic
+    document.getElementById('btn-reject-task').addEventListener('click', async () => {
+        if (!confirm('確定要退回此題目讓學員重做嗎？')) return;
+        // We need student ID (userId) and Challenge ID.
+        // Currently showBroadcastModal only receives nickname, title, prompt.
+        // We need to attach data-userid and data-challengeid to the modal.
+        const modal = document.getElementById('broadcast-modal');
+        const userId = modal.dataset.userId;
+        const challengeId = modal.dataset.challengeId;
+        const roomCode = localStorage.getItem('vibecoding_instructor_room');
+        if (userId && challengeId && roomCode) {
+            try {
+                await resetProgress(userId, roomCode, challengeId);
+                // Close modal
+                window.closeBroadcast();
+            } catch (e) {
+                console.error(e);
+                alert('退回失敗');
+            }
+        }
+    });
 }
 /**
                     statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-pointer shadow-[0_0_10px_rgba(34,197,94,0.1)]';
                     content = '✅';
                     const safePrompt = p.prompt.replace(/"/g, '&quot;').replace(/'/g, "\\'");
+                    action = `onclick="window.showBroadcastModal('${student.id}', '${c.id}', '${student.nickname}', '${c.title}', '${safePrompt}')"`;
                 } else if (p.status === 'started') {
                     // Check stuck
                     const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
 }
 // Global scope for HTML access
+window.showBroadcastModal = (userId, challengeId, nickname, title, prompt) => {
     const modal = document.getElementById('broadcast-modal');
     const content = document.getElementById('broadcast-content');
     document.getElementById('broadcast-challenge').textContent = title;
     document.getElementById('broadcast-prompt').textContent = prompt;
+    // Store IDs for actions
+    modal.dataset.userId = userId;
+    modal.dataset.challengeId = challengeId;
     modal.classList.remove('hidden');
     // Animation trigger
     setTimeout(() => {

src/views/StudentView.js CHANGED Viewed

@@ -1,4 +1,6 @@
-import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead } from "../services/classroom.js";
 // Cache challenges locally
 let cachedChallenges = [];
@@ -128,20 +130,103 @@ export async function renderStudentView() {
         advanced: "高級 (Advanced)"
     };
     // Accordion Layout
     return `
-    <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl">
-        <header class="flex justify-between items-center mb-6 sticky top-0 bg-slate-900/95 backdrop-blur z-20 py-4 px-2 -mx-2 border-b border-gray-800">
-            <div class="flex flex-col">
                 <div class="flex items-center space-x-2">
                     <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                     <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
                 </div>
                 <div class="text-xs text-gray-500 mt-1">教室: <span class="font-mono text-cyan-400 font-bold">${roomCode}</span></div>
             </div>
-            <div>
                 <h1 class="text-xl font-bold italic text-white tracking-widest">VIBECODING</h1>
-            </div>
         </header>
         <div class="space-y-4">
@@ -432,3 +517,20 @@ window.handleLike = async (progressId, targetUserId) => {
         loadPeerPrompts(select.value);
     }
 };

+import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserStage, getUser } from "../services/classroom.js";
+import { generateMonsterSVG, getNextMonster, MONSTER_STAGES } from "../utils/monsterUtils.js";
+import { generateMonsterSVG, getNextMonster, MONSTER_STAGES } from "../utils/monsterUtils.js";
 // Cache challenges locally
 let cachedChallenges = [];
         advanced: "高級 (Advanced)"
     };
+    // --- Monster Evolution Logic ---
+    let classSize = 1;
+    let userProfile = {};
+    try {
+        classSize = await getClassSize(roomCode);
+        userProfile = await getUser(userId) || {};
+    } catch (e) { console.error("Fetch stats error", e); }
+    // Calculate Stats
+    const totalLikes = Object.values(userProgress).reduce((acc, p) => acc + (p.likes || 0), 0);
+    const completedCounts = {
+        0: 0,
+        1: cachedChallenges.filter(c => c.level === 'beginner' && userProgress[c.id]?.status === 'completed').length,
+        2: cachedChallenges.filter(c => c.level === 'intermediate' && userProgress[c.id]?.status === 'completed').length,
+        3: cachedChallenges.filter(c => c.level === 'advanced' && userProgress[c.id]?.status === 'completed').length
+    };
+    // 1. Calculate Potential Stage (What they qualify for)
+    let potentialStage = 0;
+    if (completedCounts[1] >= 5) potentialStage = 1;
+    if (completedCounts[2] >= 5 && potentialStage >= 1) potentialStage = 2;
+    if (completedCounts[3] >= 5 && potentialStage >= 2) potentialStage = 3;
+    // 2. Get Actual Stage (What they have chosen/evolved to)
+    const actualStage = userProfile.monster_stage || 0;
+    // 3. Determine Display Logic
+    // If Potential > Actual => Evolution Available.
+    // If they don't evolve, they get BIGGER.
+    // Scale Factor: 1.0 + (Potential - Actual) * 0.3
+    const scale = 1 + (potentialStage - actualStage) * 0.3;
+    const canEvolve = potentialStage > actualStage;
+    // Get Monster Data for Current Actual Stage
+    const monster = getNextMonster(actualStage, totalLikes, classSize);
+    // Monster UI HTML
+    const monsterHtml = `
+        <div class="fixed top-6 left-6 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto">
+            <!-- Monster with Dynamic Scale -->
+            <div class="pixel-art-container relative transform transition-transform duration-500 ease-out hover:scale-110 origin-center" style="transform: scale(${scale});">
+                <div class="pixel-monster w-20 h-20 sm:w-24 sm:h-24 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out;">
+                    ${generateMonsterSVG(monster)}
+                </div>
+                <!-- Stage Indicator Badge -->
+                <div class="absolute -bottom-2 -right-2 bg-gray-900/80 text-xs text-yellow-500 px-1.5 py-0.5 rounded border border-yellow-500/30 font-mono transform scale-75 origin-top-left">
+                    Lv.${monster.stage}
+                </div>
+            </div>
+            <!-- Evolution Trigger (Only if canEvolve) -->
+            ${canEvolve ? `
+                <div class="animate-bounce mt-4 pointer-events-auto">
+                    <button onclick="window.triggerEvolution(${actualStage + 1})" class="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-[0_0_15px_rgba(236,72,153,0.5)] border-2 border-white/20 text-xs sm:text-sm flex items-center space-x-2 transition-all hover:scale-105 active:scale-95">
+                        <span class="text-lg">✨</span>
+                        <span>進化 (Evolve)!</span>
+                    </button>
+                    <div class="text-[10px] text-center text-pink-300 mt-1 text-shadow bg-black/50 rounded px-1">
+                        或是忽略並保持巨大化!
+                    </div>
+                </div>
+            ` : ''}
+            <!-- Stats Tooltip (Show on Hover) -->
+            <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-900/90 backdrop-blur text-xs text-gray-300 p-2 rounded-lg border border-gray-700 mt-2 text-center pointer-events-auto shadow-xl ${canEvolve ? 'mt-1' : 'mt-4'}">
+                <div class="font-bold text-white mb-1">${monster.name}</div>
+                <div>💖 Likes: ${totalLikes}</div>
+                <div class="text-[10px] text-gray-500">Class: ${classSize}</div>
+                ${scale > 1 ? `<div class="text-green-400 font-bold mt-1">巨大化 x${scale.toFixed(1)}</div>` : ''}
+            </div>
+        </div>
+        <style>
+            @keyframes breathe {
+                0%, 100% { transform: translateY(0); }
+                50% { transform: translateY(-3px); }
+            }
+        </style>
+    `;
     // Accordion Layout
     return `
+    ${monsterHtml}
+    <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl pt-24 sm:pt-4">
+        <header class="flex justify-end items-center mb-6 sticky top-0 bg-slate-900/95 backdrop-blur z-20 py-4 px-2 -mx-2 border-b border-gray-800">
+            <div class="flex flex-col items-end">
                 <div class="flex items-center space-x-2">
                     <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                     <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
                 </div>
                 <div class="text-xs text-gray-500 mt-1">教室: <span class="font-mono text-cyan-400 font-bold">${roomCode}</span></div>
             </div>
+            <!-- Logo removed/minimized since we have Monster -->
+            <!-- <div>
                 <h1 class="text-xl font-bold italic text-white tracking-widest">VIBECODING</h1>
+            </div> -->
         </header>
         <div class="space-y-4">
         loadPeerPrompts(select.value);
     }
 };
+window.triggerEvolution = async (nextStage) => {
+    const userId = localStorage.getItem('vibecoding_user_id');
+    if (!confirm(`是否要進化到階段 ${nextStage}？\n(進化後怪獸大小將重置)`)) return;
+    try {
+        const { updateUserStage } = await import("../services/classroom.js");
+        await updateUserStage(userId, nextStage);
+        alert("✨ 進化成功！");
+        // Reload view
+        const app = document.querySelector('#app');
+        app.innerHTML = await renderStudentView();
+    } catch (e) {
+        console.error(e);
+        alert("進化失敗");
+    }
+};