// === Echoes of the Enchanted Veil — SELF-CONTAINED HUD === // Zero external requires. Everything inlined. const { clamp } = require('builtin/math'); // ============================================================ // ITEM DATABASE // ============================================================ const ITEMS = { health_potion: { name: 'Healing Dew', icon: '/cdn/sprite-fairy-healing-potion-glowing-pink.png', weight: 1 }, echo_shard: { name: 'Echo Shard', icon: '/cdn/sprite-fairy-echo-shard-crystal-purple.png', weight: 0 }, fairy_bread: { name: 'Fairy Bread', icon: '/cdn/sprite-fairy-enchanted-bread-golden.png', weight: 1 }, wonder_tonic: { name: 'Wonder Tonic', icon: '/cdn/sprite-fairy-wonder-tonic-swirling-blue.png', weight: 1 }, pixie_dust: { name: 'Pixie Dust', icon: '/cdn/sprite-fairy-pixie-dust-sparkle-gold.png', weight: 1 }, enchanted_apple: { name: 'Enchanted Apple', icon: '/cdn/sprite-fairy-enchanted-apple-red-glow.png', weight: 1 }, iron_sword: { name: 'Iron Sword', icon: '/cdn/sprite-fairy-iron-sword-medieval.png', weight: 3 }, echo_staff: { name: 'Echo Staff', icon: '/cdn/sprite-fairy-echo-staff-crystal-tip.png', weight: 3 }, dragon_scale: { name: 'Dragon Scale', icon: '/cdn/sprite-fairy-dragon-scale-shimmering-gold.png', weight: 2 }, spindle_thread: { name: 'Spindle Thread', icon: '/cdn/sprite-fairy-golden-spindle-thread.png', weight: 1 }, frog_tongue: { name: "Frog's Tongue", icon: '/cdn/sprite-fairy-frog-tongue-green-slimy.png', weight: 1 }, mermaid_tear: { name: 'Mermaid Tear', icon: '/cdn/sprite-fairy-mermaid-tear-blue-pearl.png', weight: 1 }, spider_silk: { name: 'Spider Silk', icon: '/cdn/sprite-fairy-spider-silk-silver-thread.png', weight: 1 }, dream_herb: { name: 'Dream Herb', icon: '/cdn/sprite-fairy-dream-herb-purple-luminous.png', weight: 1 }, shadow_essence: { name: 'Shadow Essence', icon: '/cdn/sprite-fairy-shadow-essence-dark-wisp.png', weight: 1 }, golden_fleece: { name: 'Golden Fleece', icon: '/cdn/sprite-fairy-golden-fleece-shimmering.png', weight: 3 }, poisoned_apple: { name: 'Poisoned Apple', icon: '/cdn/sprite-fairy-poisoned-apple-dark-red.png', weight: 1 }, moonstone: { name: 'Moonstone', icon: '/cdn/sprite-fairy-moonstone-silver-glow.png', weight: 2 }, thorn_branch: { name: 'Thorn Branch', icon: '/cdn/sprite-fairy-thorn-branch-dark-twisted.png', weight: 2 }, glass_slipper: { name: 'Glass Slipper', icon: '/cdn/sprite-fairy-glass-slipper-crystal-sparkling.png', weight: 2 }, shadow_cloak: { name: 'Shadow Cloak', icon: '/cdn/sprite-fairy-shadow-cloak-dark-ethereal.png', weight: 3 }, dragon_scale_shield:{ name: 'Dragon Scale Shield', icon: '/cdn/sprite-fairy-dragon-scale-shield-golden.png', weight: 5 }, shape_shift_potion: { name: 'Shape-Shift Potion', icon: '/cdn/sprite-fairy-shape-shift-potion-swirling-rainbow.png',weight: 1 }, silk_bandage: { name: 'Silk Bandage', icon: '/cdn/sprite-fairy-silk-bandage-white-shimmer.png', weight: 1 }, wonder_tea: { name: 'Wonder Tea', icon: '/cdn/sprite-fairy-wonder-tea-glowing-cup.png', weight: 1 }, rumpels_contract: { name: "Rumpel's Contract", icon: '/cdn/sprite-fairy-magic-contract-golden-seal.png', weight: 0 }, babas_mortar: { name: "Baba's Mortar", icon: '/cdn/sprite-fairy-witch-mortar-pestle-enchanted.png', weight: 0 }, anansi_web: { name: "Anansi's Web", icon: '/cdn/sprite-fairy-spider-web-golden-intricate.png', weight: 0 }, flight_potion: { name: 'Flight Potion', icon: '/cdn/sprite-fairy-flight-potion-swirling-sky-blue.png', weight: 1 }, }; // ============================================================ // RECIPES DATABASE // ============================================================ const RECIPES = [ { a: 'pixie_dust', b: 'frog_tongue', result: 'shape_shift_potion', intReq: 3 }, { a: 'pixie_dust', b: 'enchanted_apple', result: 'flight_potion', intReq: 2 }, { a: 'pixie_dust', b: 'health_potion', result: 'wonder_tonic', intReq: 2 }, { a: 'fairy_bread', b: 'pixie_dust', result: 'enchanted_apple', intReq: 1 }, { a: 'spider_silk', b: 'dream_herb', result: 'silk_bandage', intReq: 2 }, { a: 'dream_herb', b: 'moonstone', result: 'wonder_tea', intReq: 3 }, { a: 'dragon_scale', b: 'thorn_branch', result: 'dragon_scale_shield',intReq: 5 }, { a: 'shadow_essence', b: 'spider_silk', result: 'shadow_cloak', intReq: 4 }, { a: 'moonstone', b: 'spindle_thread', result: 'glass_slipper', intReq: 4 }, { a: 'poisoned_apple', b: 'mermaid_tear', result: 'health_potion', intReq: 3 }, { a: 'golden_fleece', b: 'echo_shard', result: 'echo_staff', intReq: 6 }, ]; function findRecipe(slot1, slot2) { if (!slot1 || !slot2) return null; return RECIPES.find(r => (r.a === slot1 && r.b === slot2) || (r.a === slot2 && r.b === slot1) ) || null; } // ============================================================ // CHARACTER CREATION DATA (inlined for UI — no require) // ============================================================ const CC_RACES = { guardian: { name: 'Guardian (ARK)', desc: 'The chosen Veilwalker. ARK bears the mark of the Veil itself — part dragon, part phoenix, all heart.', bonuses: { strength: 1, agility: 1, intellect: 1, charisma: 1, echoAffinity: 1 }, icon: '/cdn/sprite-fairy-guardian-ark-icon-dragon-armor.png', portrait: '/cdn/image-anime-shounen-guardian-ark-spiky-blue-hair-dragon-scale-armor-phoenix-cape-portrait.png' }, human: { name: 'Human', desc: 'Versatile and adaptive', bonuses: { strength: 1, agility: 1, intellect: 1, charisma: 1, echoAffinity: 1 }, icon: '/cdn/sprite-fairy-race-human-portrait.png', portrait: '/cdn/image-fantasy-human-knight-ornate-plate-armor-sword-portrait.png' }, elf: { name: 'Elf', desc: 'Agile forest-dweller', bonuses: { agility: 3, intellect: 2, echoAffinity: 1 }, icon: '/cdn/sprite-fairy-race-elf-portrait.png', portrait: '/cdn/image-fantasy-elf-silver-hair-emerald-cloak-longbow-portrait.png' }, dwarf: { name: 'Dwarf', desc: 'Sturdy crafter of legends', bonuses: { strength: 3, charisma: 1, intellect: 2 }, icon: '/cdn/sprite-fairy-race-dwarf-portrait.png', portrait: '/cdn/image-fantasy-dwarf-braided-beard-heavy-plate-warhammer-portrait.png' }, fey: { name: 'Fey', desc: 'Trickster with innate echo magic', bonuses: { echoAffinity: 4, charisma: 2 }, icon: '/cdn/sprite-fairy-race-fey-portrait.png', portrait: '/cdn/image-fairy-fey-luminous-wings-crystal-robes-portrait.png' }, beastkin: { name: 'Beastkin', desc: 'Shape-shifting animal hybrid', bonuses: { strength: 2, agility: 3, echoAffinity: 1 }, icon: '/cdn/sprite-fairy-race-beastkin-portrait.png', portrait: '/cdn/image-fantasy-beastkin-wolf-tribal-fur-armor-fierce-portrait.png' }, merfolk: { name: 'Merfolk', desc: 'Aquatic adapter of the deep', bonuses: { intellect: 2, echoAffinity: 2, agility: 2 }, icon: '/cdn/sprite-fairy-race-merfolk-portrait.png', portrait: '/cdn/image-fantasy-merfolk-iridescent-scales-coral-trident-portrait.png' }, }; const CC_CLASSES = { warrior: { name: 'Warrior', desc: 'Melee tank — Jack the Giant Slayer', bonuses: { strength: 4, agility: 1 }, perk: 'giantSlayer', icon: '/cdn/sprite-fairy-class-warrior-sword-shield.png' }, mage: { name: 'Mage', desc: 'Arcane blaster of echo magic', bonuses: { intellect: 4, echoAffinity: 2 }, perk: 'essenceMaster', icon: '/cdn/sprite-fairy-class-mage-crystal-staff.png' }, rogue: { name: 'Rogue', desc: 'Stealth assassin of shadows', bonuses: { agility: 4, charisma: 1 }, perk: 'shadowStrike', icon: '/cdn/sprite-fairy-class-rogue-dual-daggers.png' }, ranger: { name: 'Ranger', desc: 'Ranged survivalist', bonuses: { agility: 3, intellect: 1, strength: 1 }, perk: 'hunterMark', icon: '/cdn/sprite-fairy-class-ranger-bow-arrows.png' }, bard: { name: 'Bard', desc: 'Support charmer of the Veil', bonuses: { charisma: 4, echoAffinity: 2 }, perk: 'songOfVeil', icon: '/cdn/sprite-fairy-class-bard-lute-golden.png' }, paladin: { name: 'Paladin', desc: 'Holy defender of ancient pacts', bonuses: { strength: 2, charisma: 2, echoAffinity: 2 }, perk: 'holyShield', icon: '/cdn/sprite-fairy-class-paladin-golden-armor.png' }, }; const CC_TYPES = { elemental: { name: 'Elemental', desc: 'Fire and ice affinities surge through you', bonuses: { intellect: 2, strength: 1 }, icon: '/cdn/sprite-fairy-type-elemental-fire-ice.png' }, shadow: { name: 'Shadow', desc: 'Illusion and stealth lean into darkness', bonuses: { agility: 2, echoAffinity: 1 }, icon: '/cdn/sprite-fairy-type-shadow-dark-mist.png' }, verdant: { name: 'Verdant', desc: 'Nature and growth weave life', bonuses: { echoAffinity: 2, charisma: 1 }, icon: '/cdn/sprite-fairy-type-verdant-leaf-glow.png' }, celestial: { name: 'Celestial', desc: 'Starlight and radiance guide your path', bonuses: { charisma: 2, intellect: 1 }, icon: '/cdn/sprite-fairy-type-celestial-star-halo.png' }, abyssal: { name: 'Abyssal', desc: 'Deep currents of ancient power', bonuses: { strength: 2, echoAffinity: 1 }, icon: '/cdn/sprite-fairy-type-abyssal-dark-wave.png' }, }; const CC_EVOLUTIONS = { phase1: { level: 25, paths: { harmony: { name: 'Harmony', desc: 'Balanced growth — all stats rise together', bonuses: { strength: 2, agility: 2, intellect: 2, charisma: 2, echoAffinity: 2 }, perk: 'echoResonance', icon: '/cdn/sprite-fairy-evo-harmony-golden-aura.png' }, dominance: { name: 'Dominance', desc: 'Raw power — primary stats surge', bonuses: { strength: 5, agility: 3 }, perk: 'runeOvercharge', icon: '/cdn/sprite-fairy-evo-dominance-red-spikes.png' }, } }, phase2: { level: 50, paths: { luminary: { name: 'Luminary', desc: 'Heroic ascent — radiant abilities', bonuses: { charisma: 4, echoAffinity: 4, intellect: 2 }, perk: 'radiantWings', icon: '/cdn/sprite-fairy-evo-luminary-golden-wings.png' }, eclipse: { name: 'Eclipse', desc: 'Dark descent — void abilities', bonuses: { strength: 4, agility: 4, echoAffinity: 2 }, perk: 'voidWings', icon: '/cdn/sprite-fairy-evo-eclipse-dark-wings.png' }, } }, }; const STAT_LABELS = { strength: 'STR', agility: 'AGI', intellect: 'INT', charisma: 'CHA', echoAffinity: 'ECH' }; const STAT_COLORS = { strength: '#ef4444', agility: '#22c55e', intellect: '#60a5fa', charisma: '#facc15', echoAffinity: '#c084fc' }; const PERK_NAMES = { giantSlayer: 'Giant Slayer', essenceMaster: 'Essence Master', shadowStrike: 'Shadow Strike', hunterMark: 'Hunter Mark', songOfVeil: 'Song of Veil', holyShield: 'Holy Shield', echoResonance: 'Echo Resonance', runeOvercharge: 'Rune Overcharge', radiantWings: 'Radiant Wings', voidWings: 'Void Wings' }; // ============================================================ // CHARACTER CREATION STYLES // ============================================================ const CC_STYLES = ` @keyframes titlePulse { 0%,100%{text-shadow:0 0 20px rgba(255,200,80,0.4),0 4px 12px rgba(0,0,0,0.8);} 50%{text-shadow:0 0 40px rgba(255,200,80,0.7),0 4px 12px rgba(0,0,0,0.8);} } @keyframes shardPulse { 0%,100%{transform:scale(1);opacity:0.9;} 50%{transform:scale(1.1);opacity:1;} } @keyframes bgFloat { 0%,100%{background-position:50% 50%;} 50%{background-position:50% 48%;} } @keyframes ccCardFadeIn { 0%{opacity:0;transform:translateY(24px) scale(0.96);} 100%{opacity:1;transform:translateY(0) scale(1);} } @keyframes ccShimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} } @keyframes ccAwakenPulse { 0%,100%{box-shadow:0 0 20px rgba(255,200,80,0.3),0 0 40px rgba(255,180,60,0.15);} 50%{box-shadow:0 0 30px rgba(255,200,80,0.6),0 0 60px rgba(255,180,60,0.3);} } @keyframes ccConfirmFadeIn { 0%{opacity:0;transform:translateY(16px);} 100%{opacity:1;transform:translateY(0);} } .cc-overlay { position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:100; } .cc-bg { background:url('/cdn/image-fairy-enchanted-veiloria-panorama-forest-mountains-aurora.png') center/cover no-repeat;animation:bgFloat 12s ease-in-out infinite; } .cc-dark-overlay { position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,30,0.4) 0%,rgba(30,15,40,0.7) 50%,rgba(15,8,25,0.85) 100%); } .cc-title { font-size:clamp(2rem,5vw,3.5rem);font-weight:900;letter-spacing:0.06em;animation:titlePulse 3s ease-in-out infinite; color:#fbbf24; } .cc-subtitle { font-size:clamp(0.9rem,2vw,1.2rem);color:rgba(255,235,200,0.7);text-shadow:0 2px 4px rgba(0,0,0,0.6);letter-spacing:0.1em; } .cc-btn { background:linear-gradient(135deg,rgba(120,80,20,0.6),rgba(80,50,15,0.8));border:2px solid rgba(255,200,80,0.5);color:#fde68a;padding:14px 40px;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;letter-spacing:0.08em;text-shadow:0 2px 4px rgba(0,0,0,0.6);transition:all 0.2s;box-shadow:0 0 20px rgba(255,200,80,0.15); } .cc-btn:hover { background:linear-gradient(135deg,rgba(160,100,30,0.7),rgba(120,70,20,0.9));border-color:rgba(255,220,100,0.8);box-shadow:0 0 30px rgba(255,200,80,0.35);transform:translateY(-1px); } .cc-btn-sm { background:linear-gradient(135deg,rgba(80,50,80,0.7),rgba(50,30,55,0.85));border:1.5px solid rgba(255,200,80,0.3);color:#fde68a;padding:8px 20px;border-radius:8px;font-size:0.85rem;font-weight:600;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,0.6);transition:all 0.15s; } .cc-btn-sm:hover { border-color:rgba(255,200,80,0.6);box-shadow:0 0 12px rgba(255,200,80,0.2); } .cc-card { background:linear-gradient(135deg,rgba(50,25,55,0.85),rgba(30,15,40,0.92));border:1.5px solid rgba(255,200,80,0.2);border-radius:12px;padding:12px;cursor:pointer;transition:all 0.2s;text-align:center;min-width:0; } .cc-card:hover { border-color:rgba(255,200,80,0.6);box-shadow:0 0 18px rgba(255,200,80,0.2);transform:translateY(-2px); } .cc-header { font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:#fbbf24;text-shadow:0 0 12px rgba(255,200,80,0.4),0 2px 6px rgba(0,0,0,0.6);margin-bottom:16px; } .cc-pill { display:inline-block;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:700;margin:2px; } .cc-scroll { background:linear-gradient(135deg,rgba(40,20,50,0.92),rgba(25,12,35,0.96));border:1.5px solid rgba(255,200,80,0.25);border-radius:16px;padding:24px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.6);backdrop-filter:blur(8px); } /* ===== SHOWCASE CHARACTER CREATION CARDS ===== */ .cc-creation-bg { background:url('/cdn/image-fairy-enchanted-character-creation-mystical-portal-swirling.png') center/cover no-repeat; animation:bgFloat 14s ease-in-out infinite; } .cc-creation-dark-overlay { position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,5,25,0.6) 0%,rgba(25,10,40,0.82) 40%,rgba(10,5,20,0.92) 100%); } .cc-creation-header { font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:#fbbf24;text-align:center; text-shadow:0 0 24px rgba(255,200,80,0.5),0 0 60px rgba(255,180,60,0.2),0 4px 8px rgba(0,0,0,0.7); letter-spacing:0.06em;margin-bottom:24px; } .cc-showcase-grid { display:grid; grid-template-columns:repeat(3,minmax(180px,240px)); gap:16px; justify-content:center; } .cc-showcase-grid-5 { grid-template-columns:repeat(3,minmax(180px,220px)); } @media (max-width:720px) { .cc-showcase-grid { grid-template-columns:repeat(2,minmax(160px,220px)); } .cc-showcase-grid-5 { grid-template-columns:repeat(2,minmax(160px,220px)); } } .cc-showcase-card { background:linear-gradient(145deg,rgba(40,20,60,0.85),rgba(28,12,45,0.92)); border:1.5px solid rgba(255,200,80,0.25); border-radius:16px; padding:20px 16px 18px; cursor:pointer; text-align:center; position:relative; overflow:hidden; backdrop-filter:blur(8px); transition:transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease; animation:ccCardFadeIn 0.5s ease both; box-shadow:0 4px 16px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.06); } .cc-showcase-card::before { content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none; background:linear-gradient(90deg,transparent 0%,rgba(255,200,80,0.06) 50%,transparent 100%); background-size:200% 100%; animation:ccShimmer 4s ease-in-out infinite; } .cc-showcase-card:hover { transform:scale(1.03) translateY(-4px); border-color:rgba(255,200,80,0.6); box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 24px rgba(255,200,80,0.2),inset 0 1px 0 rgba(255,255,255,0.1); } .cc-portrait-wrap { width:96px;height:96px;margin:0 auto;border-radius:50%; background:radial-gradient(circle,rgba(60,30,80,0.6),rgba(30,15,45,0.9)); border:2px solid rgba(255,200,80,0.2); display:flex;align-items:center;justify-content:center; box-shadow:0 0 16px rgba(168,85,247,0.15); overflow:hidden; } .cc-portrait-img { width:80px;height:80px;object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5)); } .cc-perk-badge { display:inline-block; background:linear-gradient(135deg,rgba(168,85,247,0.25),rgba(120,60,200,0.15)); border:1px solid rgba(192,132,252,0.4); color:#c084fc; padding:3px 12px; border-radius:9999px; font-size:12px; font-weight:700; text-shadow:0 0 6px rgba(168,85,247,0.3); letter-spacing:0.04em; } .cc-selection-badge { display:inline-block; background:linear-gradient(135deg,rgba(50,25,60,0.8),rgba(35,18,45,0.9)); border:1px solid rgba(255,200,80,0.3); color:#fde68a; padding:4px 14px; border-radius:9999px; font-size:12px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.6); } /* ===== CONFIRM SCREEN ===== */ .cc-confirm-panel { background:linear-gradient(145deg,rgba(40,20,60,0.9),rgba(25,12,40,0.95)); border:1.5px solid rgba(255,200,80,0.25); border-radius:20px; padding:28px 32px 24px; max-width:600px; width:100%; box-shadow:0 8px 40px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter:blur(10px); animation:ccConfirmFadeIn 0.6s ease both; } .cc-confirm-choice { display:flex;flex-direction:column;align-items:center;gap:6px; min-width:120px; animation:ccConfirmFadeIn 0.5s ease both; } .cc-confirm-divider { width:1px; background:linear-gradient(180deg,transparent,rgba(255,200,80,0.25),transparent); align-self:stretch; margin:0 8px; } .cc-awaken-btn { background:linear-gradient(135deg,#b8860b,#daa520,#fbbf24,#daa520,#b8860b); background-size:200% 100%; border:2px solid rgba(255,220,100,0.7); color:#1a0a2e; padding:14px 36px; border-radius:14px; font-size:1.15rem; font-weight:900; cursor:pointer; letter-spacing:0.08em; text-shadow:0 1px 0 rgba(255,255,255,0.3); animation:ccAwakenPulse 2s ease-in-out infinite; transition:transform 0.2s,background-position 0.4s; } .cc-awaken-btn:hover { transform:scale(1.05) translateY(-2px); background-position:100% 0; box-shadow:0 0 40px rgba(255,200,80,0.5),0 0 80px rgba(255,180,60,0.2); } `; function renderBonusPills(bonuses) { return Object.entries(bonuses).map(function(entry) { var stat = entry[0]; var val = entry[1]; return '+' + val + ' ' + (STAT_LABELS[stat] || stat) + ''; }).join(''); } function renderBackBtn() { return ''; } // ============================================================ // TITLE SCREEN // ============================================================ function renderTitleScreen() { var fairyLights = [ { left: 12, bottom: 10, size: 5, color: 'rgba(255,200,80,0.9)', dur: 10, delay: 0 }, { left: 28, bottom: 5, size: 4, color: 'rgba(192,132,252,0.85)', dur: 12, delay: 1.5 }, { left: 45, bottom: 15, size: 6, color: 'rgba(34,211,238,0.8)', dur: 9, delay: 0.5 }, { left: 62, bottom: 8, size: 5, color: 'rgba(255,200,80,0.85)', dur: 14, delay: 2 }, { left: 78, bottom: 12, size: 4, color: 'rgba(192,132,252,0.9)', dur: 11, delay: 3 }, { left: 88, bottom: 6, size: 5, color: 'rgba(34,211,238,0.85)', dur: 13, delay: 1 }, { left: 35, bottom: 3, size: 4, color: 'rgba(255,220,100,0.8)', dur: 15, delay: 4 }, { left: 55, bottom: 18, size: 6, color: 'rgba(192,132,252,0.8)', dur: 8, delay: 0.8 }, { left: 8, bottom: 20, size: 5, color: 'rgba(255,200,80,0.75)', dur: 12, delay: 2.5 }, { left: 92, bottom: 14, size: 4, color: 'rgba(34,211,238,0.9)', dur: 10, delay: 3.5 }, ]; var lightsHtml = fairyLights.map(function(f) { return '

'; }).join(''); var sparkles = [ { left: 20, top: 30, size: 9, color: 'rgba(255,220,100,0.7)', dur: 4, delay: 0 }, { left: 75, top: 25, size: 8, color: 'rgba(192,132,252,0.6)', dur: 5, delay: 1.2 }, { left: 50, top: 65, size: 10, color: 'rgba(34,211,238,0.6)', dur: 3.5, delay: 0.6 }, { left: 85, top: 55, size: 8, color: 'rgba(255,200,80,0.65)', dur: 4.5, delay: 2 }, ]; var sparklesHtml = sparkles.map(function(sp) { return '

'; }).join(''); return '' + '

' + '

' + lightsHtml + sparklesHtml + '

' + '

Echoes of the Enchanted Veil

' + '

Rewrite the tales. Shape the Veil.

' + '' + '

' + '

' + 'A tale woven in the Veil...' + '

' + '

'; } // ============================================================ // RACE SELECTION // ============================================================ function renderRaceSelect() { var keys = Object.keys(CC_RACES); var cards = keys.map(function(key, idx) { var r = CC_RACES[key]; var delay = (idx * 0.08).toFixed(2); var portraitUrl = r.portrait || r.icon; return '

' + '

' + r.name + '

' + '

' + r.desc + '

' + '

' + renderBonusPills(r.bonuses) + '

' + '

'; }).join(''); return '

' + '

Choose Your Bloodline

' + '

' + cards + '

' + '

' + renderBackBtn() + '

' + '

'; } // ============================================================ // CLASS SELECTION // ============================================================ function renderClassSelect(s) { var raceData = (s && s.selectedRace && CC_RACES[s.selectedRace]) ? CC_RACES[s.selectedRace] : null; var raceName = raceData ? raceData.name : ''; var racePortrait = raceData ? (raceData.portrait || raceData.icon) : ''; var breadcrumb = raceData ? '

Race: ' + raceName + '

' : ''; var keys = Object.keys(CC_CLASSES); var cards = keys.map(function(key, idx) { var c = CC_CLASSES[key]; var delay = (idx * 0.1).toFixed(1); return '

' + '

' + c.name + '

' + '

' + c.desc + '

' + '

✦ ' + (PERK_NAMES[c.perk] || c.perk) + '

' + '

' + renderBonusPills(c.bonuses) + '

' + '

'; }).join(''); return '

' + '

' + breadcrumb + '

Choose Your Path

' + '

' + cards + '

' + '

' + renderBackBtn() + '

' + '

'; } // ============================================================ // TYPE SELECTION // ============================================================ function renderTypeSelect(s) { var raceData = (s && s.selectedRace && CC_RACES[s.selectedRace]) ? CC_RACES[s.selectedRace] : null; var classData = (s && s.selectedClass && CC_CLASSES[s.selectedClass]) ? CC_CLASSES[s.selectedClass] : null; var raceName = raceData ? raceData.name : ''; var className = classData ? classData.name : ''; var racePortrait = raceData ? (raceData.portrait || raceData.icon) : ''; var breadcrumbs = '

'; if (raceData) breadcrumbs += '

Race: ' + raceName + '

'; if (classData) breadcrumbs += '

Class: ' + className + '

'; breadcrumbs += '

'; var TYPE_GLOWS = { elemental: 'rgba(255,150,50,0.7)', shadow: 'rgba(130,80,200,0.7)', verdant: 'rgba(80,200,120,0.7)', celestial: 'rgba(255,215,100,0.7)', abyssal: 'rgba(60,60,200,0.7)' }; var TYPE_BORDERS = { elemental: 'rgba(255,150,50,0.7)', shadow: 'rgba(130,80,200,0.7)', verdant: 'rgba(80,200,120,0.7)', celestial: 'rgba(255,215,100,0.7)', abyssal: 'rgba(60,60,200,0.7)' }; var keys = Object.keys(CC_TYPES); var cards = keys.map(function(key, idx) { var t = CC_TYPES[key]; var delay = (idx * 0.1).toFixed(1); var glow = TYPE_GLOWS[key] || 'rgba(255,200,80,0.3)'; var border = TYPE_BORDERS[key] || 'rgba(255,200,80,0.4)'; return '

' + '

' + t.name + '

' + '

' + t.desc + '

' + '

' + renderBonusPills(t.bonuses) + '

' + '

'; }).join(''); return '

' + '

' + breadcrumbs + '

Choose Your Essence

' + '

' + cards + '

' + '

' + renderBackBtn() + '

' + '

'; } // ============================================================ // CONFIRMATION SCREEN // ============================================================ function renderConfirmScreen(s) { var race = CC_RACES[s.selectedRace]; var cls = CC_CLASSES[s.selectedClass]; var type = CC_TYPES[s.selectedType]; if (!race || !cls || !type) return ''; var racePortrait = race.portrait || race.icon; // Type glow colors for the type badge var TYPE_BADGE_COLORS = { elemental: { bg: 'rgba(255,150,50,0.2)', border: 'rgba(255,150,50,0.6)', color: '#ffb347' }, shadow: { bg: 'rgba(130,80,200,0.2)', border: 'rgba(130,80,200,0.6)', color: '#b87ee8' }, verdant: { bg: 'rgba(80,200,120,0.2)', border: 'rgba(80,200,120,0.6)', color: '#6dd89c' }, celestial: { bg: 'rgba(255,215,100,0.2)', border: 'rgba(255,215,100,0.6)', color: '#ffd764' }, abyssal: { bg: 'rgba(60,60,200,0.2)', border: 'rgba(60,60,200,0.6)', color: '#8888ee' } }; var typeBadge = TYPE_BADGE_COLORS[s.selectedType] || { bg: 'rgba(255,200,80,0.2)', border: 'rgba(255,200,80,0.5)', color: '#fbbf24' }; // Calculate totals with base 5 var BASE = 5; var statKeys = ['strength', 'agility', 'intellect', 'charisma', 'echoAffinity']; var totals = {}; statKeys.forEach(function(stat) { totals[stat] = BASE + (race.bonuses[stat] || 0) + (cls.bonuses[stat] || 0) + (type.bonuses[stat] || 0); }); var statBlock = statKeys.map(function(stat) { var val = totals[stat]; var color = STAT_COLORS[stat] || '#ccc'; var label = STAT_LABELS[stat] || stat; return '

' + '' + label + '' + '' + val + '' + '

'; }).join(''); var perkHtml = cls.perk ? '

✦ ' + (PERK_NAMES[cls.perk] || cls.perk) + ' ✦

Starting Perk

' : ''; return '

' + '

Your Destiny Awaits

' + '

' // Left: Large portrait + '

' + '

' + '

' + race.name + '

' + '

' // Right: Summary + '

' + '

Path

' + '

' + cls.name + '

' + '

Essence

' + '' + type.name + '' + '

' + perkHtml + '

' + '

Final Stats

' + '

' + statBlock + '

' + '

' + renderBackBtn() + '' + '

' + '

'; } // ============================================================ // PAUSE MENU OVERLAY // ============================================================ function renderPauseMenu(s) { var raceName = ''; var className = ''; var typeName = ''; if (s.selectedRace && CC_RACES[s.selectedRace]) raceName = CC_RACES[s.selectedRace].name; if (s.selectedClass && CC_CLASSES[s.selectedClass]) className = CC_CLASSES[s.selectedClass].name; if (s.selectedType && CC_TYPES[s.selectedType]) typeName = CC_TYPES[s.selectedType].name; var charSummary = (raceName || className || typeName) ? '

' + '

Current Character

' + '

' + raceName + (className ? ' · ' + className : '') + (typeName ? ' · ' + typeName : '') + '

' + '

' : ''; var menuBtnStyle = 'display:block;width:100%;padding:14px 24px;margin-bottom:10px;border:1.5px solid rgba(255,200,80,0.25);border-radius:12px;' + 'background:linear-gradient(135deg,rgba(40,20,60,0.85),rgba(60,30,80,0.85));color:#fbbf24;font-size:15px;font-weight:700;' + 'letter-spacing:0.04em;cursor:pointer;transition:all 0.2s ease;text-shadow:0 0 8px rgba(255,200,80,0.3),0 1px 2px rgba(0,0,0,0.8);' + 'box-shadow:0 2px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04);'; var menuBtnHover = 'this.style.transform=\'scale(1.03)\';this.style.borderColor=\'rgba(255,200,80,0.5)\';this.style.boxShadow=\'0 4px 20px rgba(255,200,80,0.15),0 2px 12px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.06)\''; var menuBtnLeave = 'this.style.transform=\'scale(1)\';this.style.borderColor=\'rgba(255,200,80,0.25)\';this.style.boxShadow=\'0 2px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04)\''; return '

' + '

' // Header + '

' + '

⟡ The Veil Pauses ⟡

' + '

' // Character summary badge + charSummary // Buttons + '' + '' + '' // Footer hint + '

Press M to close

' + '

'; } // ============================================================ // EVOLUTION CHOICE OVERLAY // ============================================================ function renderEvolutionChoice(s) { var phase = s.evolutionPhase; var evoData = CC_EVOLUTIONS['phase' + phase]; if (!evoData) return ''; var headerText = phase === 1 ? 'Echo Surge — Choose Your Evolution' : 'The Veil Fractures — Ascend or Descend'; var pathCards = Object.keys(evoData.paths).map(function(pathKey) { var p = evoData.paths[pathKey]; var isLight = pathKey === 'harmony' || pathKey === 'luminary'; var borderColor = isLight ? 'rgba(255,200,80,0.5)' : 'rgba(168,85,247,0.5)'; var glowColor = isLight ? 'rgba(255,200,80,0.2)' : 'rgba(168,85,247,0.2)'; return '

' + '

' + p.name + '

' + '

' + p.desc + '

' + '

' + renderBonusPills(p.bonuses) + '

' + '

Perk: ' + (PERK_NAMES[p.perk] || p.perk) + '

' + '

'; }).join(''); return '

' + '

' + headerText + '

' + '

' + pathCards + '

' + '

'; } // ============================================================ // SHARED STYLES // ============================================================ const SHARED_STYLES = ` .veil-panel { background: linear-gradient(135deg, rgba(60,30,60,0.85), rgba(40,20,50,0.9)); border: 1.5px solid oklch(0.65 0.12 80 / 0.4); box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,200,100,0.1); backdrop-filter: blur(6px); } .veil-text { text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .veil-header { text-shadow: 0 0 8px oklch(0.8 0.14 85 / 0.4); } .veil-bar-track { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.05); border-radius: 9999px; } .veil-glow { animation: veilGlow 1.5s ease-in-out infinite; } @keyframes veilGlow { 0%,100%{opacity:1} 50%{opacity:0.6} } .veil-btn { background: linear-gradient(135deg, oklch(0.35 0.1 290), oklch(0.28 0.08 300)); border: 1px solid oklch(0.65 0.12 80 / 0.5); color: oklch(0.85 0.1 85); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.6); transition: all 0.15s; } .veil-btn:hover { background: linear-gradient(135deg, oklch(0.42 0.12 290), oklch(0.35 0.1 300)); box-shadow: 0 0 10px oklch(0.7 0.15 80 / 0.3); } .veil-slot { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(50,25,55,0.9), rgba(30,15,35,0.95)); border: 1.5px solid oklch(0.55 0.1 80 / 0.35); border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .veil-slot:hover { border-color: oklch(0.7 0.15 80 / 0.6); } .veil-slot img { width: 36px; height: 36px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); } .veil-slot .qty { position: absolute; bottom: 1px; right: 3px; font-size: 11px; font-weight: 700; color: oklch(0.9 0.05 85); text-shadow: 0 1px 2px black; } `; // ============================================================ // STAT BARS (Health, Wonder, Hunger + Coins) // ============================================================ function renderStatBars(s) { const bars = [ { label: 'HP', icon: '/cdn/sprite-fairy-heart-icon-glowing-pink.png', current: clamp(s.health ?? 100, 0, s.maxHealth ?? 100), max: s.maxHealth ?? 100, grad: 'linear-gradient(to right, oklch(0.55 0.22 25), oklch(0.65 0.25 15))', glow: 'oklch(0.6 0.22 20 / 0.5)', }, { label: 'WM', icon: '/cdn/sprite-fairy-wonder-star-glowing-blue.png', current: clamp(s.wonderMeter ?? 0, 0, s.maxWonder ?? 100), max: s.maxWonder ?? 100, grad: 'linear-gradient(to right, oklch(0.55 0.18 260), oklch(0.65 0.22 280))', glow: 'oklch(0.6 0.2 270 / 0.5)', }, { label: 'HNG', icon: '/cdn/sprite-fairy-hunger-apple-golden.png', current: clamp(s.hunger ?? 100, 0, s.maxHunger ?? 100), max: s.maxHunger ?? 100, grad: 'linear-gradient(to right, oklch(0.6 0.15 85), oklch(0.7 0.18 70))', glow: 'oklch(0.65 0.15 80 / 0.5)', }, ]; const barsHtml = bars.map(b => { const pct = b.max > 0 ? Math.round((b.current / b.max) * 100) : 0; return `

${b.current}/${b.max}

`; }).join(''); const coins = s.coins ?? 0; const coinHtml = `

${coins}

`; return `

${barsHtml} ${coinHtml}

`; } // ============================================================ // STATS PANEL (Level, XP, Attributes) // ============================================================ function renderStatsPanel(s) { const level = s.level ?? 1; const xp = s.xp ?? 0; const xpToNext = s.xpToNext ?? 100; const xpPct = xpToNext > 0 ? Math.round((xp / xpToNext) * 100) : 0; const attrs = [ { label: 'STR', value: s.strength ?? 1, color: 'oklch(0.65 0.2 25)' }, { label: 'AGI', value: s.agility ?? 1, color: 'oklch(0.65 0.18 145)' }, { label: 'INT', value: s.intellect ?? 1, color: 'oklch(0.65 0.2 265)' }, { label: 'CHA', value: s.charisma ?? 1, color: 'oklch(0.7 0.18 55)' }, { label: 'ECH', value: s.echoAffinity ?? 1, color: 'oklch(0.65 0.2 300)' }, ]; const attrsHtml = attrs.map(a => `

${a.label} ${a.value}

`).join(''); return `

Lv ${level}

${xp}/${xpToNext}

${attrsHtml}

`; } // ============================================================ // ECHO SHARDS DISPLAY // ============================================================ function renderEchoShards(s) { const shards = s.echoShards ?? 0; const needed = s.echoShardsNeeded ?? 7; return `

${shards} / ${needed}

`; } // ============================================================ // MINIMAP (top-right, 140px) // ============================================================ function renderMinimap(localPlayer, world) { const pos = localPlayer.feetPosition || { x: 0, y: 0, z: 0 }; const mapSize = 140; const half = mapSize / 2; const mapRange = 80; // Query nearby entities const enemies = world.query({ anyTags: ['enemy', 'cursed-thorn'], radius: mapRange }); const npcs = world.query({ anyTags: ['npc', 'friendly'], radius: mapRange }); function worldToMap(wx, wz) { const dx = wx - pos.x; const dz = wz - pos.z; const mx = clamp(half + (dx / mapRange) * half, 4, mapSize - 4); const my = clamp(half + (dz / mapRange) * half, 4, mapSize - 4); return { mx, my }; } const enemyDots = enemies.map(e => { const { mx, my } = worldToMap(e.feetPosition.x, e.feetPosition.z); return '

'; }).join(''); const npcDots = npcs.map(n => { const { mx, my } = worldToMap(n.feetPosition.x, n.feetPosition.z); return '

'; }).join(''); return `

${enemyDots} ${npcDots}

`; } // ============================================================ // COURT REPUTATION // ============================================================ function renderCourtRep(s) { const courtRep = s.courtRep || {}; const thorn = courtRep.thorn_dynasty ?? 0; const dewdrop = courtRep.dewdrop_alliance ?? 0; if (thorn === 0 && dewdrop === 0) return ''; function repBar(name, val, grad, glow) { const absVal = Math.abs(val); const pct = clamp(absVal, 0, 100); const sign = val >= 0 ? '+' : ''; return `

${name}

${sign}${val}

`; } let html = ''; if (thorn !== 0) { html += repBar('Thorn', thorn, 'linear-gradient(to right, oklch(0.45 0.18 25), oklch(0.55 0.22 15))', 'oklch(0.5 0.2 20 / 0.4)'); } if (dewdrop !== 0) { html += repBar('Dewdrop', dewdrop, 'linear-gradient(to right, oklch(0.5 0.15 200), oklch(0.6 0.18 220))', 'oklch(0.55 0.16 210 / 0.4)'); } return `

Court Favor

${html}

`; } // ============================================================ // QUICK SLOTS (bottom center) // ============================================================ function renderQuickSlots(s) { const quickSlots = s.quickSlots || [null, null, null, null]; const inventory = s.inventory || []; const slots = quickSlots.map((itemId, i) => { const invItem = itemId ? inventory.find(inv => inv.id === itemId) : null; const itemDef = itemId ? ITEMS[itemId] : null; const qty = invItem ? invItem.quantity : 0; const content = itemDef ? '

' + (qty > 1 ? '' + qty + '' : '') : ''; return `

${i + 1}

${content}

`; }).join(''); return `

${slots}

`; } // ============================================================ // INVENTORY PANEL (centered, toggled) // ============================================================ function renderInventory(s) { const inventory = s.inventory || []; const SLOTS = 20; const COLS = 4; // Compute weight let totalWeight = 0; for (const item of inventory) { const def = ITEMS[item.id]; if (def) totalWeight += def.weight * item.quantity; } const maxWeight = 50; const weightPct = clamp(Math.round((totalWeight / maxWeight) * 100), 0, 100); // Build grid const gridSlots = []; for (let i = 0; i < SLOTS; i++) { const item = inventory[i] || null; const itemDef = item ? ITEMS[item.id] : null; if (itemDef) { gridSlots.push( '

' + '

' + (item.quantity > 1 ? '' + item.quantity + '' : '') + '

' ); } else { gridSlots.push('

'); } } return `

Inventory

Weight ${totalWeight}/${maxWeight}

${gridSlots.join('')}

`; } // ============================================================ // CRAFTING PANEL (centered, toggled) // ============================================================ function renderCrafting(s) { const slot1 = s.selectedCraftSlot1 || null; const slot2 = s.selectedCraftSlot2 || null; const recipe = findRecipe(slot1, slot2); const intellect = s.intellect ?? 1; function craftSlot(itemId, slotLabel) { const def = itemId ? ITEMS[itemId] : null; if (def) { return `

${slotLabel}

${def.name}

`; } return `

${slotLabel}

Empty

`; } const resultDef = recipe ? ITEMS[recipe.result] : null; const canCraft = recipe && intellect >= recipe.intReq; let resultSlot; if (resultDef) { resultSlot = `

Result

${resultDef.name} INT ${recipe.intReq}${intellect < recipe.intReq ? ' ✕' : ' ✓'}

`; } else { resultSlot = `

Result

—

No recipe

`; } return `

Crafting

${craftSlot(slot1, 'Slot 1')} + ${craftSlot(slot2, 'Slot 2')} → ${resultSlot}

`; } // ============================================================ // DEATH SCREEN // ============================================================ function renderDeathScreen() { return `

Fallen...

`; } // ============================================================ // MAIN RENDER // ============================================================ export default function(localPlayer, world) { const s = localPlayer.state; const allStyles = ''; // === CHARACTER CREATION SCREENS (early returns) === if (!s.characterCreated) { const step = s.creationStep || 'title'; if (step === 'title') return allStyles + renderTitleScreen(); if (step === 'race') return allStyles + renderRaceSelect(); if (step === 'class') return allStyles + renderClassSelect(s); if (step === 'type') return allStyles + renderTypeSelect(s); if (step === 'confirm') return allStyles + renderConfirmScreen(s); return allStyles + renderTitleScreen(); } // === EVOLUTION CHOICE OVERLAY === if (s.showEvolutionChoice) { return allStyles + renderEvolutionChoice(s); } // Death screen overrides everything if (s.dead) { return allStyles + renderDeathScreen(); } // Pause menu overlay (renders on top of HUD) const menuHtml = s.menuOpen ? renderPauseMenu(s) : ''; // Court reputation const courtRepHtml = renderCourtRep(s); // Inventory panel (conditional) const inventoryHtml = s.inventoryOpen ? renderInventory(s) : ''; // Crafting panel (conditional) const craftingHtml = s.craftingOpen ? renderCrafting(s) : ''; // Inventory toggle hint const invHint = !s.inventoryOpen && !s.craftingOpen ? `

Press I for inventory

` : ''; return allStyles + '

' + '' + '

' + renderStatBars(s) + renderStatsPanel(s) + renderEchoShards(s) + '

' + '' + '

' + renderMinimap(localPlayer, world) + courtRepHtml + '

' + ((s.inventoryOpen || s.craftingOpen) ? '

' + inventoryHtml + craftingHtml + '

' : '') + '

' + renderQuickSlots(s) + invHint + '

' + '

' + menuHtml; }

Spawn