Spaces:
Running
Running
| <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> |