Arcane Arena

loading arcane arena

launcher

launch

editor

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Battle Royale - Multiplayer</title>
    <style>
        body { margin: 0; background: #13131b; color: white; font-family: 'Segoe UI', sans-serif; display: flex; height: 100vh; overflow: hidden; user-select: none; }
       
        #game-container { flex-grow: 1; position: relative; display: flex; justify-content: center; align-items: center; background: #000; }
        svg.main-arena { background: #1a1a24; cursor: crosshair; display: block; width: 100%; height: 100%; touch-action: none; }
       
        /* Overlays */
        #menu-overlay, #death-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(13, 13, 20, 0.9); z-index: 100;
            display: flex; justify-content: center; align-items: center; flex-direction: column;
        }
        #death-overlay { background: rgba(50, 0, 0, 0.85); display: none; }
       
        .menu-box {
            background: #1e1e2c; padding: 30px; box-shadow: 0 0 30px rgba(0,0,0,0.8);
            border: 2px solid #33334d; border-radius: 10px; width: 350px;
            display: flex; flex-direction: column; gap: 15px;
        }

h2 { margin-top: 0; font-size: 1.5rem; color: #00ffcc; border-bottom: 1px solid #444460; padding-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; text-align: center;}
        .control-group { display: flex; flex-direction: column; gap: 5px; }
        select, input[type="text"] { background: #13131b; color: #fff; border: 1px solid #444460; padding: 8px; border-radius: 4px; outline: none; font-size: 0.9rem;}
       
        .btn {
            background: #a0a0ff; color: #000; font-weight: bold; font-size: 1.1rem;
            padding: 12px; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px;
            text-transform: uppercase; transition: background 0.2s;
        }
        .btn:hover { background: #ccccff; }
        .btn-death { background: #ff4444; color: white; }
        .btn-death:hover { background: #ff7777; }

.instructions { font-size: 0.85rem; color: #8888aa; line-height: 1.6; background: #171722; padding: 12px; border-radius: 6px; border: 1px solid #2a2a3d; margin-top: 10px;}
        .key { display: inline-block; background: #3a3a55; padding: 2px 6px; border-radius: 4px; color: #fff; font-weight: bold;}
       
        /* HUD & Minimap */
        #hud { position: absolute; top: 20px; left: 20px; width: 300px; z-index: 10; display: none; }
        .hud-label { font-weight: bold; font-size: 14px; margin-bottom: 5px; text-shadow: 1px 1px 2px black;}
        #hp-bar-container { width: 100%; height: 22px; background: #222; border-radius: 11px; overflow: hidden; border: 2px solid #444; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
        #hp-bar { width: 100%; height: 100%; background: linear-gradient(90deg, #aa0000, #ff3333); transition: width 0.1s; }
       
        #minimap-container {
            position: absolute; top: 20px; right: 20px; width: 160px; height: 160px;
            background: #111; border: 2px solid #444460; border-radius: 8px;
            z-index: 10; display: none; box-shadow: 0 0 15px rgba(0,0,0,0.8);
            overflow: hidden;
        }
        svg.minimap { display: block; width: 100%; height: 100%; }

.dmg-text { font-weight: bold; font-family: monospace; pointer-events: none; text-shadow: 1px 1px 2px black; }
       
        /* Loading Overlay */
        #loading-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #13131b; z-index: 200; display: flex; justify-content: center; align-items: center; color: #00ffcc; font-size: 1.5rem; font-family: monospace;
        }
    </style>
</head>
<body>

<div id="loading-overlay">Connecting to Battle Royale Servers...</div>

<div id="menu-overlay" style="display: none;">
        <div class="menu-box">
            
<h2>Battle Royale</h2>
           
            <div class="control-group">
                <label>Player Name:</label>
                <input type="text" id="player-name" value="Fighter" maxlength="12" />
            </div>

<div class="control-group">
                <label>Weapon:</label>
                <select id="weapon-select">
                    <option value="sword">Crystal Sword</option>
                    <option value="axe">Battle Axe</option>
                    <option value="flail">Chain Flail</option>
                    <option value="spear">Dragonslayer Spear</option>
                    <option value="staff">Arcane Staff</option>
                    <option value="bow">Energy Bow</option>
                </select>
            </div>

<div class="control-group">
                <label>Spell (Key: E / R-Click):</label>
                <select id="spell-select">
                    <option value="fireball">Fireball</option>
                    <option value="lightning">Lightning</option>
                    <option value="frost">Frost Nova</option>
                    <option value="blink">Shadow Dash</option>
                </select>
            </div>

<div class="control-group">
                <label>Armor Class:</label>
                <select id="armor-select">
                    <option value="light">Rogue Cloak (+Speed)</option>
                    <option value="heavy">Titan Plate (Jump = Shockwave)</option>
                    <option value="paladin">Paladin Plate (-25% Damage Taken)</option>
                    <option value="ninja">Ninja Garb (Max Speed & Jump)</option>
                    <option value="vampire">Vampire Lord (10% Lifesteal)</option>
                    <option value="mage">Mage Robes (-50% Spell CD)</option>
                </select>
            </div>

<div class="control-group">
                <label>Aura (Cosmetic):</label>
                <select id="cosmetic-select">
                    <option value="none">None</option>
                    <option value="gold">Golden Radiance</option>
                    <option value="void">Void Energy</option>
                    <option value="blood">Blood Mist</option>
                </select>
            </div>

<div class="instructions">
                <strong>Multiplayer Tech:</strong><br>
                <span class="key">WASD</span> Move | <span class="key">Space</span> Jump<br>
                <span class="key">L-Click</span> Attack | <span class="key">Hold L-Click</span> Special
            </div>

<button class="btn" id="btn-start">Join Match</button>
        </div>
    </div>

<div id="death-overlay">
        
<h1 style="color: #ff4444; font-size: 4rem; margin: 0 0 20px 0; text-shadow: 0 0 20px red;">ELIMINATED</h1>
        <button class="btn btn-death" style="width: 200px;" id="btn-menu">Main Menu</button>
    </div>

<div id="hud">
        <div class="hud-label">HEALTH</div>
        <div id="hp-bar-container"><div id="hp-bar" style="width: 100%"></div></div>
    </div>

<div id="minimap-container">
        <svg class="minimap" id="minimap-svg" viewBox="0 0 2000 2000">
            <g id="mm-terrain"></g>
            <g id="mm-players"></g>
            <circle id="mm-local" cx="-100" cy="-100" r="40" fill="#00ffcc" stroke="#000" stroke-width="10" />
        </svg>
    </div>

<div id="game-container">
        <svg class="main-arena" id="arena" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
                    <path d="M 60 0 L 0 0 0 60" fill="none" stroke="#252535" stroke-width="0.75"/>
                </pattern>
                <pattern id="lava-pattern" width="60" height="60" patternUnits="userSpaceOnUse">
                    <rect width="60" height="60" fill="#a31b00"/>
                    <circle cx="15" cy="15" r="8" fill="#ff4500" opacity="0.6"/>
                    <circle cx="45" cy="40" r="12" fill="#ff6600" opacity="0.4"/>
                    <path d="M0 30 Q 15 10 30 30 T 60 30" stroke="#ff3300" fill="none" stroke-width="3"/>
                </pattern>
                <filter id="glow">
                    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                    <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
            </defs>
           
            <rect x="0" y="0" width="2000" height="2000" fill="url(#grid)" />
            <rect x="0" y="0" width="2000" height="2000" fill="none" stroke="#444460" stroke-width="16" />

// --- Firebase Initialization ---
    const fallbackConfig = {
        apiKey: "AIzaSyC_FvPLD599H8If_xXRhsspeRNhBARM0rg",
        authDomain: "registration-snippet.firebaseapp.com",
        databaseURL: "https://registration-snippet-default-rtdb.firebaseio.com",
        projectId: "registration-snippet",
        storageBucket: "registration-snippet.firebasestorage.app",
        messagingSenderId: "934078819764",
        appId: "1:934078819764:web:aed8d05a339840a16b16e1"
    };

const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : fallbackConfig;
    const appId = typeof __app_id !== 'undefined' ? __app_id : 'br-arena-v1';
   
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    const db = getFirestore(app);
    let userId = null;

// --- Engine Setup & World Bounds ---
    const WORLD_W = 2000;
    const WORLD_H = 2000;
    let gameState = 'MENU';

const svg = document.getElementById('arena');
    const layers = {
        ground: document.getElementById('ground-effects-layer'),
        entities: document.getElementById('entities-layer'),
        ui: document.getElementById('ui-layer')
    };

function createSVGElement(type, attrs, layer) {
        const el = document.createElementNS("http://www.w3.org/2000/svg", type);
        for (const [key, value] of Object.entries(attrs)) el.setAttribute(key, value);
        if (layer) layer.appendChild(el);
        return el;
    }

// --- Terrain Design ---
    const lavas = [
        { x: 150, y: 450, w: 500, h: 150 },
        { x: 1200, y: 200, w: 300, h: 600 },
        { x: 800, y: 1400, w: 600, h: 200 }
    ];

const platforms = [
        { x: 80, y: 150, w: 160, h: 140, elevation: 60, surface: '#303045', wall: '#1a1a25' },
        { x: 560, y: 150, w: 160, h: 140, elevation: 60, surface: '#303045', wall: '#1a1a25' },
        { x: 350, y: 80, w: 100, h: 100, elevation: 90, surface: '#403055', wall: '#20152a' },
        { x: 1000, y: 800, w: 300, h: 300, elevation: 120, surface: '#2c3e50', wall: '#1a252f' },
        { x: 1300, y: 400, w: 150, h: 150, elevation: 50, surface: '#303045', wall: '#1a1a25' },
        { x: 1500, y: 1500, w: 200, h: 200, elevation: 80, surface: '#403055', wall: '#20152a' }
    ];

function getElevation(x, y) {
        for (let p of platforms) if (x >= p.x && x <= p.x + p.w && y >= p.y && y <= p.y + p.h) return p.elevation;
        return 0;
    }

// Mathematical Push-Out Logic for smooth sliding along walls
    function applyWallCollisions(p) {
        for (let plat of platforms) {
            if (plat.elevation > p.z) {
                let testX = p.x, testY = p.y;
                if (p.x < plat.x) testX = plat.x; else if (p.x > plat.x + plat.w) testX = plat.x + plat.w;
                if (p.y < plat.y) testY = plat.y; else if (p.y > plat.y + plat.h) testY = plat.y + plat.h;
               
                let distX = p.x - testX, distY = p.y - testY;
                let distance = Math.sqrt(distX * distX + distY * distY);
               
                if (distance < p.radius) {
                    if (distance === 0) {
                        let dLeft = p.x - plat.x;
                        let dRight = (plat.x + plat.w) - p.x;
                        let dTop = p.y - plat.y;
                        let dBot = (plat.y + plat.h) - p.y;
                        let min = Math.min(dLeft, dRight, dTop, dBot);
                        if (min === dLeft) p.x = plat.x - p.radius;
                        else if (min === dRight) p.x = plat.x + plat.w + p.radius;
                        else if (min === dTop) p.y = plat.y - p.radius;
                        else p.y = plat.y + plat.h + p.radius;
                    } else {
                        let push = p.radius - distance;
                        p.x += (distX / distance) * push;
                        p.y += (distY / distance) * push;
                    }
                }
            }
        }
    }

// Build World Map & Minimap Terrain
    const mmTerrain = document.getElementById('mm-terrain');
    lavas.forEach(l => {
        createSVGElement('rect', { x: l.x, y: l.y, width: l.w, height: l.h, fill: 'url(#lava-pattern)' }, layers.ground);
        createSVGElement('rect', { x: l.x, y: l.y, width: l.w, height: l.h, fill: '#ff4500' }, mmTerrain);
    });

platforms.forEach(p => {
        const surf = createSVGElement('g', { 'data-y': p.y }, layers.entities);
        createSVGElement('rect', { x: p.x, y: p.y - p.elevation, width: p.w, height: p.h, fill: p.surface, stroke: '#556', 'stroke-width': 2 }, surf);
        const wall = createSVGElement('g', { 'data-y': p.y + p.h }, layers.entities);
        createSVGElement('rect', { x: p.x, y: p.y + p.h - p.elevation, width: p.w, height: p.elevation, fill: p.wall, stroke: '#111', 'stroke-width': 1 }, wall);
        createSVGElement('rect', { x: p.x, y: p.y, width: p.w, height: p.h, fill: '#666' }, mmTerrain);
    });

// --- Core Data Structures ---
    let lastTime = 0;
    const keys = {};
    const mouse = { screenX: 0, screenY: 0, x: 0, y: 0, isDown: false };
    const projectiles = [];
    const particles = [];
    const damageTexts = [];
    const remotePlayers = {};

// --- Player Factory ---
    function createPlayer(isLocal, name = "Fighter") {
        return {
            isLocal, name,
            x: 0, y: 0, z: 0, hp: 100, maxHp: 100,
            vx: 0, vy: 0, vz: 0,
            forcedVx: 0, forcedVy: 0, forcedTimer: 0,
            angle: 0, radius: 15, weaponAngleOffset: 0,
            weapon: 'sword', armor: 'light', cosmetic: 'none',
           
            // Remote Tracking Sync Data
            targetX: 0, targetY: 0, targetZ: 0, targetAngle: 0,
            lastAttackTs: 0, newlySpawnedAttack: null,

// Combat State Machine
            attackBuffer: 0, comboStep: 0, lastTapTime: 0, holdTimer: 0, activeHoldState: null, chargeAmount: 0, holdTickTimer: 0,
            attackAnimState: null, attackAnimTimer: 0, attackAnimMaxTime: 0, attackHit: false,

// Visual Elements
            group: createSVGElement('g', {}, layers.entities),
            shadow: null, body: null, bodyCircle: null, armorVisuals: null,
            weaponGroup: null, wPrimary: null, wSecondary: null, wSwing: null, beamEl: null, beamCoreEl: null,
            hpBarBg: null, hpBarFg: null, nameLabel: null,

init() {
                this.shadow = createSVGElement('ellipse', { cx: 0, cy: 0, fill: 'rgba(0,0,0,0.5)' }, this.group);
                this.body = createSVGElement('g', {}, this.group);
               
                this.wSwing = createSVGElement('path', { fill: 'none', stroke: '#00ffff', 'stroke-width': 10, 'stroke-linecap': 'round', opacity: 0, filter: 'url(#glow)' }, this.body);
                this.bodyCircle = createSVGElement('circle', { cx: 0, cy: 0, r: this.radius, fill: '#00ccff', stroke: '#007799', 'stroke-width': 3 }, this.body);
               
                this.armorVisuals = createSVGElement('g', {}, this.body);
                createSVGElement('line', { x1: 0, y1: 0, x2: this.radius + 5, y2: 0, stroke: 'white', 'stroke-width': 3, 'stroke-linecap': 'round' }, this.body);
               
                this.weaponGroup = createSVGElement('g', {}, this.group);
                this.beamEl = createSVGElement('line', { x1: 0, y1: 0, x2: 0, y2: 0.1, stroke: '#aa00ff', 'stroke-width': 12, opacity: 0, filter: 'url(#glow)' }, this.weaponGroup);
                this.beamCoreEl = createSVGElement('line', { x1: 0, y1: 0, x2: 0, y2: 0.1, stroke: '#ffffff', 'stroke-width': 4, opacity: 0 }, this.weaponGroup);
                this.wPrimary = createSVGElement('path', { fill: 'none', stroke: '#fff', 'stroke-width': 4, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, this.weaponGroup);
                this.wSecondary = createSVGElement('path', { fill: 'none', stroke: '#fff', 'stroke-width': 4, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, this.weaponGroup);

this.nameLabel = createSVGElement('text', { x: 0, y: -25, fill: this.isLocal ? '#00ffcc' : '#ff5555', 'font-size': '12px', 'text-anchor': 'middle', 'font-family': 'monospace', 'font-weight': 'bold', 'text-shadow': '1px 1px 2px black' }, this.group);
                this.nameLabel.textContent = this.name;

if (!this.isLocal) {
                    this.hpBarBg = createSVGElement('rect', { x: -15, y: -40, width: 30, height: 4, fill: '#333' }, this.group);
                    this.hpBarFg = createSVGElement('rect', { x: -15, y: -40, width: 30, height: 4, fill: '#ff3333' }, this.group);
                }

applyArmorVisuals(this, this.armor);
            },

takeDamage(amount) {
                if (this.hp <= 0 || gameState !== 'PLAYING') return;
               
                // Paladin 25% Damage Reduction Passive
                if (this.armor === 'paladin') amount *= 0.75;
               
                this.hp -= amount;
                if (this.hp <= 0) {
                    this.hp = 0;
                    if (this.isLocal) {
                        showDeathScreen();
                        spawnDamageText("DIED", this.x, this.y, true);
                        this.activeHoldState = null;
                        this.attackAnimState = null;
                        syncPlayerStateToFirebase();
                    }
                }
               
                if (this.isLocal) {
                    document.getElementById('hp-bar').style.width = Math.max(0, (this.hp / this.maxHp) * 100) + '%';
                } else if (this.hpBarFg) {
                    this.hpBarFg.setAttribute('width', Math.max(0, (this.hp / this.maxHp) * 30));
                }
            },

heal(amount) {
                if (this.hp <= 0 || this.hp >= this.maxHp) return;
                this.hp = Math.min(this.maxHp, this.hp + amount);
                if (this.isLocal) document.getElementById('hp-bar').style.width = Math.max(0, (this.hp / this.maxHp) * 100) + '%';
                if (Math.random() > 0.7) spawnDamageText(`+${Math.floor(amount)}`, this.x, this.y - 30, false, '#00ff00');
            },

update(dt) {
                if (!this.isLocal) return;
                const now = performance.now();

let baseSpeed = 180;
                if (this.armor === 'light') baseSpeed = 240;
                if (this.armor === 'ninja') baseSpeed = 300;

if (this.attackCooldown > 0) this.attackCooldown -= dt;
                if (this.spellCooldown > 0) this.spellCooldown -= dt;

// Combat State Machine - Holds
                if (mouse.isDown) {
                    this.holdTimer += dt;
                    if (this.holdTimer > 0.25 && !this.activeHoldState && this.attackCooldown <= 0) {
                        this.activeHoldState = this.weapon;
                        this.chargeAmount = 0;
                        this.attackAnimState = null;
                        this.weaponAngleOffset = 0;
                    }
                } else {
                    if (this.activeHoldState) {
                        releaseHoldState(this.activeHoldState, this.chargeAmount);
                        this.activeHoldState = null;
                    }
                    this.holdTimer = 0;
                }

if (now - this.lastTapTime > 1500 && !mouse.isDown) this.comboStep = 0;

if (this.activeHoldState === 'sword') baseSpeed *= 0.6;
                if (this.activeHoldState === 'spear') baseSpeed *= 0.2;
                if (this.activeHoldState === 'bow') baseSpeed *= 0.4;
                if (this.activeHoldState === 'staff') baseSpeed = 0.0;
                if (this.activeHoldState === 'axe') baseSpeed *= 0.3;

// Movement Logic
                let dx = 0, dy = 0;
                if (this.forcedTimer > 0) {
                    this.forcedTimer -= dt;
                    this.vx = this.forcedVx; this.vy = this.forcedVy;
                } else {
                    if (keys['w']) dy -= 1;
                    if (keys['s']) dy += 1;
                    if (keys['a']) dx -= 1;
                    if (keys['d']) dx += 1;

if (dx !== 0 || dy !== 0) {
                        const len = Math.sqrt(dx*dx + dy*dy);
                        dx /= len; dy /= len;
                    }
                    this.vx = dx * baseSpeed; this.vy = dy * baseSpeed;

if (this.activeHoldState !== 'staff' && this.activeHoldState !== 'spear') {
                        this.angle = Math.atan2(mouse.y - (this.y - this.z), mouse.x - this.x);
                    }
                }

// Push-Out Collisions
                this.x += this.vx * dt;
                this.y += this.vy * dt;
                applyWallCollisions(this);

// World Bounds
                this.x = Math.max(this.radius, Math.min(WORLD_W - this.radius, this.x));
                this.y = Math.max(this.radius, Math.min(WORLD_H - this.radius, this.y));

// Z-Axis Physics
                let currentElev = getElevation(this.x, this.y);
                let jumpForce = this.armor === 'ninja' ? 500 : 350;
                if (keys[' '] && this.z <= currentElev) { this.vz = jumpForce; this.isJumping = true; }
               
                if (this.z > currentElev || this.vz !== 0) {
                    this.z += this.vz * dt; this.vz -= 1000 * dt;
                    if (this.z <= currentElev) {
                        this.z = currentElev; this.vz = 0;
                        if (this.isJumping) {
                            this.isJumping = false;
                            if (this.armor === 'heavy') triggerShockwave();
                        }
                    }
                }

// Lava Hazards
                let inLava = lavas.some(l => this.x >= l.x && this.x <= l.x + l.w && this.y >= l.y && this.y <= l.y + l.h);
                if (inLava && this.z <= 0) {
                    this.takeDamage(40 * dt);
                    if (Math.random() > 0.8) {
                        const smk = createSVGElement('circle', { cx: this.x+(Math.random()-0.5)*20, cy: this.y, r: 5, fill: '#555' }, layers.ground);
                        particles.push({ type: 'float', el: smk, life: 0.5, maxLife: 0.5, vy: -50, vx: 0 });
                    }
                }

// Combat Animation System
                if (!this.activeHoldState && !this.attackAnimState) this.weaponAngleOffset = 0;
                this.beamEl.setAttribute('opacity', 0);
                if (this.beamCoreEl) this.beamCoreEl.setAttribute('opacity', 0);

if (this.activeHoldState) {
                    executeHoldState(this, this.activeHoldState, dt);
                } else if (this.attackAnimState) {
                    this.attackAnimTimer -= dt;
                    if (this.attackAnimTimer <= 0) {
                        this.attackAnimState = null;
                        this.wSwing.setAttribute('opacity', 0);
                    }
                    else animateWeapon(this, this.attackAnimState, this.attackAnimTimer, this.attackAnimMaxTime);
                }

// Hide weapons cleanly when completely idle
                if (!this.attackAnimState && !this.activeHoldState) {
                    setWeaponVisuals(this, this.weapon, 0, 0, false);
                }

updateCosmetics(this.cosmetic, this.x, this.y - this.z, dt);

this.group.setAttribute('transform', `translate(${this.x}, ${this.y - this.z})`);
                this.group.setAttribute('data-y', this.y);
               
                this.body.setAttribute('transform', `rotate(${this.angle * 180 / Math.PI})`);
                this.weaponGroup.setAttribute('transform', `rotate(${(this.angle + this.weaponAngleOffset) * 180 / Math.PI})`);

this.shadow.setAttribute('cy', this.z - currentElev);
                const shadowScale = Math.max(0.2, 1 - (this.z / 200));
                this.shadow.setAttribute('rx', 15 * shadowScale);
                this.shadow.setAttribute('ry', 6 * shadowScale);
            },

updateVisuals(dt) {
                if (!this.isLocal) {
                    this.x += (this.targetX - this.x) * 12 * dt;
                    this.y += (this.targetY - this.y) * 12 * dt;
                    this.z += (this.targetZ - this.z) * 12 * dt;
                    let da = this.targetAngle - this.angle;
                    da = Math.atan2(Math.sin(da), Math.cos(da));
                    this.angle += da * 12 * dt;
                   
                    if (this.hpBarFg) this.hpBarFg.setAttribute('width', Math.max(0, (this.hp / this.maxHp) * 30));
                }

this.weaponAngleOffset = 0;
                this.beamEl.setAttribute('opacity', 0);
                if (this.beamCoreEl) this.beamCoreEl.setAttribute('opacity', 0);

if (!this.attackAnimState && !this.activeHoldState) {
                    setWeaponVisuals(this, this.weapon, 0, 0, false);
                }

if (!this.isLocal) updateCosmetics(this.cosmetic, this.x, this.y - this.z, dt);

this.group.setAttribute('transform', `translate(${this.x}, ${this.y - this.z})`);
                this.group.setAttribute('data-y', this.y);
                this.body.setAttribute('transform', `rotate(${this.angle * 180 / Math.PI})`);
                this.weaponGroup.setAttribute('transform', `rotate(${(this.angle + this.weaponAngleOffset) * 180 / Math.PI})`);

let currentElev = getElevation(this.x, this.y);
                this.shadow.setAttribute('cy', this.z - currentElev);
                const shadowScale = Math.max(0.2, 1 - (this.z / 200));
                this.shadow.setAttribute('rx', 15 * shadowScale);
                this.shadow.setAttribute('ry', 6 * shadowScale);
            }
        };
    }

const localPlayer = createPlayer(true);
    localPlayer.init();
    let camX = 1000, camY = 1000;

// --- UI Flow & Spawn ---
    function showDeathScreen() {
        gameState = 'DEAD';
        document.getElementById('hud').style.display = 'none';
        document.getElementById('death-overlay').style.display = 'flex';
    }

function generateSafeSpawn() {
        let validSpawn = false;
        while (!validSpawn) {
            localPlayer.x = Math.random() * (WORLD_W - 200) + 100;
            localPlayer.y = Math.random() * (WORLD_H - 200) + 100;
            let inLava = lavas.some(l => localPlayer.x >= l.x && localPlayer.x <= l.x + l.w && localPlayer.y >= l.y && localPlayer.y <= l.y + l.h);
            if (!inLava && getElevation(localPlayer.x, localPlayer.y) === 0) validSpawn = true;
        }
        localPlayer.z = 0;
        camX = localPlayer.x; camY = localPlayer.y;
    }

// Connect Select Menus Directly to Player
    document.getElementById('weapon-select').addEventListener('change', (e) => {
        if (gameState === 'PLAYING') localPlayer.weapon = e.target.value;
    });
    document.getElementById('armor-select').addEventListener('change', (e) => {
        if (gameState === 'PLAYING') {
            localPlayer.armor = e.target.value;
            applyArmorVisuals(localPlayer, localPlayer.armor);
        }
    });
    document.getElementById('cosmetic-select').addEventListener('change', (e) => {
        if (gameState === 'PLAYING') localPlayer.cosmetic = e.target.value;
    });

document.getElementById('btn-start').addEventListener('click', () => {
        document.getElementById('menu-overlay').style.display = 'none';
        document.getElementById('hud').style.display = 'block';
        document.getElementById('minimap-container').style.display = 'block';
       
        localPlayer.name = document.getElementById('player-name').value || "Fighter";
        localPlayer.nameLabel.textContent = localPlayer.name;
        localPlayer.weapon = document.getElementById('weapon-select').value;
        localPlayer.armor = document.getElementById('armor-select').value;
        localPlayer.cosmetic = document.getElementById('cosmetic-select').value;
       
        localPlayer.hp = localPlayer.maxHp;
        document.getElementById('hp-bar').style.width = '100%';
        generateSafeSpawn();
       
        localPlayer.vx = 0; localPlayer.vy = 0; localPlayer.vz = 0;
        localPlayer.comboStep = 0; localPlayer.activeHoldState = null; localPlayer.attackAnimState = null;
        applyArmorVisuals(localPlayer, localPlayer.armor);
       
        gameState = 'PLAYING';
        lastTime = performance.now();
       
        syncPlayerStateToFirebase();
    });

document.getElementById('btn-menu').addEventListener('click', () => {
        document.getElementById('death-overlay').style.display = 'none';
        document.getElementById('menu-overlay').style.display = 'flex';
        gameState = 'MENU';
    });

// --- Firebase Sync Loop ---
    function syncPlayerStateToFirebase() {
        if (gameState !== 'PLAYING' || !userId) return;
       
        let payload = {
            x: localPlayer.x, y: localPlayer.y, z: localPlayer.z,
            angle: localPlayer.angle, hp: localPlayer.hp,
            name: localPlayer.name,
            weapon: localPlayer.weapon, armor: localPlayer.armor, cosmetic: localPlayer.cosmetic,
            attackAnimState: localPlayer.attackAnimState,
            attackAnimTimer: localPlayer.attackAnimTimer,
            attackAnimMaxTime: localPlayer.attackAnimMaxTime,
            activeHoldState: localPlayer.activeHoldState,
            chargeAmount: localPlayer.chargeAmount,
            lastUpdate: Date.now()
        };

if (localPlayer.newlySpawnedAttack) {
            payload.lastAttack = localPlayer.newlySpawnedAttack;
            localPlayer.newlySpawnedAttack = null;
        }

setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'players', userId), payload, { merge: true });
    }

setInterval(syncPlayerStateToFirebase, 100);

window.addEventListener('beforeunload', () => {
        if (userId) deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'players', userId));
    });

// --- Visuals System ---
    function applyArmorVisuals(p, armorStr) {
        p.armorVisuals.innerHTML = '';
        let bodyColor = '#00ccff';
        if (!p.isLocal) bodyColor = '#ff5555';

if (armorStr === 'light') {
            bodyColor = p.isLocal ? '#228822' : '#882222';
            createSVGElement('path', { d: 'M -5 -15 L -25 -20 L -25 20 L -5 15 Z', fill: '#114411' }, p.armorVisuals);
        } else if (armorStr === 'heavy') {
            bodyColor = '#777777';
            createSVGElement('rect', { x: -5, y: -22, width: 20, height: 12, fill: '#555555', rx: 3 }, p.armorVisuals);
            createSVGElement('rect', { x: -5, y: 10, width: 20, height: 12, fill: '#555555', rx: 3 }, p.armorVisuals);
        } else if (armorStr === 'paladin') {
            bodyColor = '#ddcc44';
            createSVGElement('circle', { cx: 0, cy: 0, r: 20, fill: 'none', stroke: '#ffffff', 'stroke-width': 2, opacity: 0.6, filter: 'url(#glow)' }, p.armorVisuals);
        } else if (armorStr === 'ninja') {
            bodyColor = '#222222';
            createSVGElement('line', { x1: -8, y1: -12, x2: -25, y2: -20, stroke: '#ff0000', 'stroke-width': 3, 'stroke-linecap': 'round' }, p.armorVisuals);
            createSVGElement('line', { x1: -8, y1: -12, x2: -20, y2: -5, stroke: '#ff0000', 'stroke-width': 3, 'stroke-linecap': 'round' }, p.armorVisuals);
        } else if (armorStr === 'vampire') {
            bodyColor = '#330000';
            createSVGElement('path', { d: 'M -5 -18 L -35 -25 L -35 25 L -5 18 Z', fill: '#000000' }, p.armorVisuals);
            createSVGElement('circle', { cx: 8, cy: -5, r: 3, fill: '#ff0000', filter: 'url(#glow)' }, p.armorVisuals);
            createSVGElement('circle', { cx: 8, cy: 5, r: 3, fill: '#ff0000', filter: 'url(#glow)' }, p.armorVisuals);
        } else if (armorStr === 'mage') {
            bodyColor = '#4400aa';
            createSVGElement('path', { d: 'M -10 0 L 10 -15 L 10 15 Z', fill: '#220066' }, p.armorVisuals);
        }
       
        p.bodyCircle.setAttribute('fill', bodyColor);
    }

function setWeaponVisuals(p, weapon, lengthMod = 0, charge = 0, isVisible = true) {
        if (!isVisible) {
            p.wPrimary.setAttribute('d', '');
            p.wSecondary.setAttribute('d', '');
            return;
        }

p.wPrimary.setAttribute('stroke-width', 2);
        p.wSecondary.setAttribute('stroke-width', 2);

if (weapon === 'sword') {
            let tip = 50 + lengthMod;
            p.wPrimary.setAttribute('d', `M 0 -3 L ${tip-10} -3 L ${tip} 0 L ${tip-10} 3 L 0 3 Z`);
            p.wPrimary.setAttribute('fill', '#00ffff');
            p.wPrimary.setAttribute('stroke', '#00aaaa');
           
            p.wSecondary.setAttribute('d', `M 5 -10 L 10 -10 L 10 10 L 5 10 Z`);
            p.wSecondary.setAttribute('fill', '#ffcc00');
            p.wSecondary.setAttribute('stroke', '#cc9900');

} else if (weapon === 'axe') {
            let reach = 40 + lengthMod;
            p.wPrimary.setAttribute('d', `M 0 -2 L ${reach} -2 L ${reach} 2 L 0 2 Z`);
            p.wPrimary.setAttribute('fill', '#5c3a21');
            p.wPrimary.setAttribute('stroke', '#3e2723');

p.wSecondary.setAttribute('d', `M ${reach-10} -20 L ${reach+15} -25 L ${reach+5} 0 L ${reach+15} 25 L ${reach-10} 20 L ${reach-5} 0 Z`);
            p.wSecondary.setAttribute('fill', '#e0e0e0');
            p.wSecondary.setAttribute('stroke', '#2c3e50');

} else if (weapon === 'spear') {
            let reach = 80 + lengthMod;
            p.wPrimary.setAttribute('d', `M 0 -2 L ${reach} -2 L ${reach} 2 L 0 2 Z`);
            p.wPrimary.setAttribute('fill', '#8B4513');
            p.wPrimary.setAttribute('stroke', '#5c2d0c');
           
            p.wSecondary.setAttribute('d', `M ${reach} -4 L ${reach+20} 0 L ${reach} 4 Z`);
            p.wSecondary.setAttribute('fill', '#00ffff');
            p.wSecondary.setAttribute('stroke', '#00aaaa');

} else if (weapon === 'flail') {
            let chain = 20 + lengthMod;
            p.wPrimary.setAttribute('d', `M 0 -2 L 15 -2 L 15 2 L 0 2 Z M 15 0 L ${15+chain} 0`);
            p.wPrimary.setAttribute('fill', '#8B4513');
            p.wPrimary.setAttribute('stroke', '#5c2d0c');
            p.wPrimary.setAttribute('stroke-width', 2);
           
            p.wSecondary.setAttribute('d', `M ${15+chain} 0 A 8 8 0 1 1 ${15.01+chain} 0`);
            p.wSecondary.setAttribute('fill', '#777777');
            p.wSecondary.setAttribute('stroke', '#444444');
            p.wSecondary.setAttribute('stroke-width', 3);

} else if (weapon === 'staff') {
            let reach = 35 + lengthMod;
            p.wPrimary.setAttribute('d', `M 0 -2 L ${reach} -2 L ${reach} 2 L 0 2 Z`);
            p.wPrimary.setAttribute('fill', '#8B4513');
            p.wPrimary.setAttribute('stroke', '#5c2d0c');
           
            p.wSecondary.setAttribute('d', `M ${reach} 0 A 6 6 0 1 1 ${reach+0.01} 0`);
            p.wSecondary.setAttribute('fill', '#ff00ff');
            p.wSecondary.setAttribute('stroke', '#aa00aa');
            p.wSecondary.setAttribute('stroke-width', 2 + (lengthMod > 0 ? 4 : 0));

} else if (weapon === 'bow') {
            let pull = -15 + (-15 * charge);
            p.wPrimary.setAttribute('d', `M 10 -25 Q ${30 + pull} 0 10 25 Q ${20 + pull} 0 10 -25 Z`);
            p.wPrimary.setAttribute('fill', '#cc8800');
            p.wPrimary.setAttribute('stroke', '#884400');
           
            if (charge > 0) {
                p.wSecondary.setAttribute('d', `M 10 -25 L ${10 + pull} 0 L 10 25 M ${10 + pull} 0 L 30 0`);
                p.wSecondary.setAttribute('fill', 'none');
                p.wSecondary.setAttribute('stroke', '#ffffff');
            } else {
                p.wSecondary.setAttribute('d', '');
            }
        }
    }

// --- Inputs ---
    window.addEventListener('keydown', e => {
        if (gameState !== 'PLAYING') return;
        const key = e.key.toLowerCase();
        keys[key] = true;
        if (key === 'e') castSpell();
    });

window.addEventListener('keyup', e => {
        if (e.key) keys[e.key.toLowerCase()] = false;
    });
   
    // Basic direct SVG listeners
    svg.addEventListener('mousemove', e => {
        if (gameState !== 'PLAYING') return;
        const rect = svg.getBoundingClientRect();
        mouse.screenX = e.clientX - rect.left;
        mouse.screenY = e.clientY - rect.top;
    });

svg.addEventListener('mousedown', e => {
        if (gameState !== 'PLAYING') return;
        if (e.button === 0) {
            mouse.isDown = true;
            if (localPlayer.attackCooldown > 0 || localPlayer.activeHoldState) return;
           
            localPlayer.comboStep++;
            if (localPlayer.comboStep > 3) localPlayer.comboStep = 1;
           
            localPlayer.lastTapTime = performance.now();
            executeTapAttack(localPlayer.weapon, localPlayer.comboStep);
        }
        if (e.button === 2) castSpell();
    });

window.addEventListener('mouseup', e => { if (e.button === 0) mouse.isDown = false; });
    svg.addEventListener('contextmenu', e => e.preventDefault());

// --- Clean Combat Execution ---
    function triggerAnim(state, time, cd) {
        localPlayer.attackAnimState = state;
        localPlayer.attackAnimTimer = time;
        localPlayer.attackAnimMaxTime = time;
        localPlayer.attackCooldown = cd;
        localPlayer.attackHit = false;
    }

function triggerLunge(speed, duration) {
        localPlayer.forcedVx = Math.cos(localPlayer.angle) * speed;
        localPlayer.forcedVy = Math.sin(localPlayer.angle) * speed;
        localPlayer.forcedTimer = duration;
    }

function animateWeapon(p, state, timer, maxTime) {
        const pNorm = Math.max(0, Math.min(1, 1 - (timer / maxTime)));
        const easeOut = 1 - Math.pow(1 - pNorm, 3);
       
        let offset = 0, lengthMod = 0;

if (state === 'slash1' || state === 'slash_f1') {
            offset = -Math.PI/1.2 + (Math.PI*1.8) * easeOut;
            if (state === 'slash_f1') lengthMod = Math.sin(easeOut * Math.PI) * 30;
           
            p.wSwing.setAttribute('d', getArcPath(45, -Math.PI/1.2, offset));
            p.wSwing.setAttribute('opacity', 1 - easeOut);
        } else if (state === 'slash2' || state === 'slash_f2') {
            offset = Math.PI/1.2 - (Math.PI*1.8) * easeOut;
            if (state === 'slash_f2') lengthMod = Math.sin(easeOut * Math.PI) * 30;
           
            p.wSwing.setAttribute('d', getArcPath(45, Math.PI/1.2, offset));
            p.wSwing.setAttribute('opacity', 1 - easeOut);
        } else if (state === 'slam') {
            offset = -Math.PI/2 * (1-easeOut); lengthMod = easeOut * 20;
            p.wSwing.setAttribute('opacity', 0);
        } else if (state === 'axe_slam') {
            offset = -Math.PI/2 * (1-easeOut); lengthMod = easeOut * 40;
            p.wSwing.setAttribute('opacity', 0);
        } else if (state === 'stab' || state === 'lunge' || state === 'whip') {
            lengthMod = easeOut < 0.3 ? 50 * (easeOut/0.3) : 50 * (1 - (easeOut-0.3)/0.7);
            if (state === 'lunge') lengthMod *= 1.5;
            if (state === 'whip') lengthMod = easeOut < 0.4 ? 60 * (easeOut/0.4) : 60 * (1 - (easeOut-0.4)/0.6);
            p.wSwing.setAttribute('opacity', 0);
        } else if (state === 'staff_tap') {
            lengthMod = Math.sin(easeOut * Math.PI) * 15;
            p.wSwing.setAttribute('opacity', 0);
        } else {
            p.wSwing.setAttribute('opacity', 0);
        }

p.weaponAngleOffset = offset;
        setWeaponVisuals(p, p.weapon, lengthMod, 0, true);

if (p.isLocal && !p.attackHit) {
            if (pNorm >= 0.35) {
                p.attackHit = true;
               
                if (state.startsWith('slash') && p.weapon === 'sword') checkMeleeHit(90, Math.PI*0.8, 30);
                if (state === 'slam') checkMeleeHit(100, Math.PI/2.5, 60, true);
               
                if (state.startsWith('slash') && p.weapon === 'axe') checkMeleeHit(85, Math.PI*0.7, 40);
                if (state === 'axe_slam') checkMeleeHit(110, Math.PI/3, 90, true);
               
                if (state.startsWith('slash') && p.weapon === 'flail') checkMeleeHit(100, Math.PI*0.8, 25);
                if (state === 'whip') checkMeleeHit(140, Math.PI/6, 45, true);
               
                if (state === 'stab') checkLinearHit(150, 40, 30);
                if (state === 'lunge') checkLinearHit(220, 50, 65, true);
            }
        }
    }

// --- Multiplayer Hit Detection ---
    function executeDamageToRemote(id, dmg, isCrit) {
        const rp = remotePlayers[id];
        if (!rp || rp.hp <= 0) return;
       
        let newHp = Math.max(0, rp.hp - dmg);
        updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'players', id), { hp: newHp });
       
        spawnDamageText(dmg, rp.targetX, rp.targetY, isCrit);
       
        if (document.getElementById('armor-select').value === 'vampire' && localPlayer.hp > 0) {
            localPlayer.heal(dmg * 0.1);
        }
    }

function castSpell() {
        if (localPlayer.spellCooldown > 0 || localPlayer.activeHoldState) return;
        const spellType = document.getElementById('spell-select').value;
        const armor = document.getElementById('armor-select').value;
        const cdMult = armor === 'mage' ? 0.5 : 1.0;

if (spellType === 'fireball') {
            localPlayer.spellCooldown = 2.0 * cdMult;
            spawnProjectile(localPlayer.x, localPlayer.y, localPlayer.z, localPlayer.angle, 'fireball', { targetX: mouse.x, targetY: mouse.y });
            localPlayer.newlySpawnedAttack = { type: 'fireball', targetX: mouse.x, targetY: mouse.y, ts: Date.now() };
        } else if (spellType === 'lightning') {
            localPlayer.spellCooldown = 3.0 * cdMult;
            const flash = createSVGElement('circle', { cx: mouse.x, cy: mouse.y, r: 50, fill: 'rgba(0, 255, 255, 0.4)' }, layers.ground);
            const bolt = createSVGElement('path', { d: `M ${mouse.x} 0 L ${mouse.x-10} ${mouse.y/2} L ${mouse.x+10} ${mouse.y/2} L ${mouse.x} ${mouse.y}`, stroke: '#00ffff', 'stroke-width': 5, fill: 'none', filter: 'url(#glow)', 'data-y': mouse.y }, layers.entities);
            particles.push({ type: 'fade', el: flash, life: 0.15, maxLife: 0.15 }); particles.push({ type: 'fade', el: bolt, life: 0.15, maxLife: 0.15 });
           
            for (const [id, rp] of Object.entries(remotePlayers)) {
                if (Math.hypot(rp.targetX - mouse.x, rp.targetY - mouse.y) < 40) executeDamageToRemote(id, 120, true);
            }
        } else if (spellType === 'frost') {
            localPlayer.spellCooldown = 4.0 * cdMult;
            const nova = createSVGElement('circle', { cx: localPlayer.x, cy: localPlayer.y, r: 0, fill: 'rgba(0, 200, 255, 0.3)', stroke: '#00ffff', 'stroke-width': 3 }, layers.ground);
            particles.push({ type: 'shockwave', el: nova, r: 0, maxR: 120, life: 0.4, maxLife: 0.4 });
           
            for (const [id, rp] of Object.entries(remotePlayers)) {
                if (Math.hypot(rp.targetX - localPlayer.x, rp.targetY - localPlayer.y) < 120 && Math.abs(rp.targetZ - localPlayer.z) < 40) executeDamageToRemote(id, 75, false);
            }
        } else if (spellType === 'blink') {
            localPlayer.spellCooldown = 2.5 * cdMult;
            const dist = Math.min(Math.hypot(mouse.x - localPlayer.x, mouse.y - localPlayer.y), 250);
            const nx = localPlayer.x + Math.cos(localPlayer.angle) * dist; const ny = localPlayer.y + Math.sin(localPlayer.angle) * dist;
            if (getElevation(nx, ny) <= localPlayer.z && !isPointInWall(nx, ny, localPlayer.z, localPlayer.radius)) {
                spawnTrail(localPlayer.x, localPlayer.y, localPlayer.z, localPlayer.angle);
                localPlayer.x = Math.max(localPlayer.radius, Math.min(WORLD_W - localPlayer.radius, nx));
                localPlayer.y = Math.max(localPlayer.radius, Math.min(WORLD_H - localPlayer.radius, ny));
                const flash = createSVGElement('circle', { cx: localPlayer.x, cy: localPlayer.y-localPlayer.z, r: 30, fill: '#440088', opacity: 0.7, 'data-y': localPlayer.y }, layers.entities);
                particles.push({ type: 'fade', el: flash, life: 0.2, maxLife: 0.2 });
            }
        }
    }

function spawnTrail(x, y, z, angle) {
        const trail = createSVGElement('circle', { cx: x, cy: y - z, r: localPlayer.radius, fill: '#00ccff', opacity: 0.4, 'data-y': y }, layers.entities);
        particles.push({ type: 'fade', el: trail, life: 0.2, maxLife: 0.2 });
    }

// --- Main Rendering Loop ---
    function update(time) {
        const dt = Math.min((time - lastTime) / 1000, 0.05);
        lastTime = time;

if (gameState === 'PLAYING') {
            localPlayer.update(dt);
        }

// --- Camera & Map System ---
        const svgW = svg.clientWidth || 800;
        const svgH = svg.clientHeight || 600;
       
        let targetCx = localPlayer.x - svgW / 2;
        let targetCy = localPlayer.y - svgH / 2;
        targetCx = Math.max(0, Math.min(WORLD_W - svgW, targetCx));
        targetCy = Math.max(0, Math.min(WORLD_H - svgH, targetCy));
       
        camX += (targetCx - camX) * 8 * dt;
        camY += (targetCy - camY) * 8 * dt;
        svg.setAttribute('viewBox', `${camX} ${camY} ${svgW} ${svgH}`);

if (gameState === 'PLAYING') {
            const mmLocal = document.getElementById('mm-local');
            if (mmLocal) { mmLocal.setAttribute('cx', localPlayer.x); mmLocal.setAttribute('cy', localPlayer.y); }
           
            const scaleX = svgW / svg.clientWidth;
            const scaleY = svgH / svg.clientHeight;
            mouse.x = mouse.screenX * scaleX + camX;
            mouse.y = mouse.screenY * scaleY + camY;
        }

// Process Remote Players
        const mmPlayersLayer = document.getElementById('mm-players');
        for (const [id, rp] of Object.entries(remotePlayers)) {
            rp.updateVisuals(dt);
           
            let dot = document.getElementById('mm-rp-' + id);
            if (rp.hp > 0 && gameState === 'PLAYING') {
                if (!dot) {
                    dot = createSVGElement('circle', { id: 'mm-rp-' + id, r: 40, fill: '#ff3333', stroke: '#000', 'stroke-width': 10 }, mmPlayersLayer);
                }
                dot.setAttribute('cx', rp.x); dot.setAttribute('cy', rp.y);
            } else if (dot) {
                dot.remove();
            }
        }

for (let i = projectiles.length - 1; i >= 0; i--) {
            const p = projectiles[i];
            if (gameState === 'PLAYING') p.x += p.vx * dt; p.y += p.vy * dt; p.life -= dt;
           
            let hit = false;
            if (getElevation(p.x, p.y) > p.z) hit = true;
            if (p.x < 0 || p.x > WORLD_W || p.y < 0 || p.y > WORLD_H) hit = true;

if (!hit) {
                if (p.type.includes('arrow') || p.type === 'piercing') {
                    p.el.setAttribute('transform', `translate(${p.x}, ${p.y - p.z}) rotate(${p.angle * 180 / Math.PI})`);
                    p.el.setAttribute('data-y', p.y);
                } else {
                    p.el.setAttribute('cx', p.x); p.el.setAttribute('cy', p.y - p.z);
                    p.el.setAttribute('data-y', p.y);
                }
               
                if (!p.meta.isVisualOnly && gameState === 'PLAYING') {
                    for (const [id, rp] of Object.entries(remotePlayers)) {
                        if (rp.hp <= 0) continue;
                        if (Math.hypot(rp.targetX - p.x, rp.targetY - p.y) < rp.radius + 10 && Math.abs(rp.targetZ - p.z) < 40) {
                            if (p.type === 'arrow') { executeDamageToRemote(id, 28, Math.random() > 0.7); hit = true; }
                            if (p.type === 'magic') { executeDamageToRemote(id, 15, false); hit = true; }
                            if (p.type === 'magic_nova') { createExplosion(p.x, p.y, p.z, 60, 45); hit = true; }
                            if (p.type === 'piercing' && !p.meta.hitDummy) { executeDamageToRemote(id, p.meta.dmg, true); p.meta.hitDummy = true; }
                        }
                    }
                }

if (p.type === 'fireball' && gameState === 'PLAYING') {
                    p.destTime -= dt;
                    if (p.destTime <= 0) {
                        createExplosion(p.x, p.y, p.z, 90, p.meta.isVisualOnly ? 0 : 110);
                        hit = true;
                    }
                }
            }

if (hit || p.life <= 0) {
                if (p.type === 'fireball' && hit && p.life > 0 && p.destTime > 0) createExplosion(p.x, p.y, p.z, 90, p.meta.isVisualOnly ? 0 : 110);
                p.el.remove(); projectiles.splice(i, 1);
            }
        }

for (let i = particles.length - 1; i >= 0; i--) {
            const p = particles[i];
            if (gameState === 'PLAYING') p.life -= dt;
            const progress = Math.min(1, Math.max(0, 1 - (p.life / p.maxLife)));

if (p.type === 'fade') p.el.setAttribute('opacity', 1 - progress);
            else if (p.type === 'shockwave') { p.el.setAttribute('r', p.maxR * progress); p.el.setAttribute('opacity', 1 - progress); }
            else if (p.type === 'explosion') { p.el.setAttribute('r', p.r + (p.maxR - p.r) * progress); p.el.setAttribute('opacity', 1 - Math.pow(progress, 2)); }
            else if (p.type === 'float') {
                if (gameState === 'PLAYING') {
                    p.el.setAttribute('cy', parseFloat(p.el.getAttribute('cy')) + p.vy * dt);
                    p.el.setAttribute('cx', parseFloat(p.el.getAttribute('cx')) + p.vx * dt);
                }
                p.el.setAttribute('opacity', 1 - progress);
            }
            if (p.life <= 0) { p.el.remove(); particles.splice(i, 1); }
        }

for (let i = damageTexts.length - 1; i >= 0; i--) {
            const t = damageTexts[i];
            if (gameState === 'PLAYING') {
                t.life -= dt; t.x += t.vx * dt; t.y += t.vy * dt;
            } else if (t.el.textContent === "DIED") {
                t.life -= dt * 0.5; t.y -= 20 * dt;
            }

t.el.setAttribute('x', t.x); t.el.setAttribute('y', t.y);
            t.el.setAttribute('opacity', Math.max(0, t.life / t.maxLife));
            if (t.life <= 0) { t.el.remove(); damageTexts.splice(i, 1); }
        }

const renderNodes = Array.from(layers.entities.children);
        renderNodes.sort((a, b) => parseFloat(a.getAttribute('data-y') || 0) - parseFloat(b.getAttribute('data-y') || 0));
        renderNodes.forEach(node => layers.entities.appendChild(node));

requestAnimationFrame(update);
    }
   
    // --- Start Firebase & Main Engine ---
    const initAuth = async () => {
        try {
            document.getElementById('loading-overlay').style.display = 'flex';
            if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                await signInWithCustomToken(auth, __initial_auth_token);
            } else {
                await signInAnonymously(auth);
            }
           
            userId = auth.currentUser.uid;

onSnapshot(collection(db, 'artifacts', appId, 'public', 'data', 'players'), (snapshot) => {
                snapshot.forEach(docSnap => {
                    const id = docSnap.id;
                    const data = docSnap.data();

// Process Local Incoming Damage
                    if (id === userId) {
                        if (data.hp !== undefined && data.hp < localPlayer.hp && gameState === 'PLAYING') {
                            localPlayer.takeDamage(localPlayer.hp - data.hp);
                        }
                        return;
                    }
                   
                    if (Date.now() - data.lastUpdate > 8000) {
                        if (remotePlayers[id]) {
                            remotePlayers[id].group.remove();
                            const dot = document.getElementById('mm-rp-' + id);
                            if (dot) dot.remove();
                            delete remotePlayers[id];
                        }
                        return;
                    }

if (!remotePlayers[id]) {
                        remotePlayers[id] = createPlayer(false, data.name || "Fighter");
                        remotePlayers[id].x = data.x; remotePlayers[id].y = data.y;
                        remotePlayers[id].init();
                    }

const rp = remotePlayers[id];
                   
                    if (rp.weapon !== data.weapon || rp.armor !== data.armor || rp.cosmetic !== data.cosmetic || rp.name !== data.name) {
                        rp.weapon = data.weapon; rp.armor = data.armor; rp.cosmetic = data.cosmetic; rp.name = data.name;
                        rp.nameLabel.textContent = rp.name;
                        applyArmorVisuals(rp, data.armor);
                    }
                   
                    rp.targetX = data.x; rp.targetY = data.y; rp.targetZ = data.z; rp.targetAngle = data.angle;
                   
                    rp.attackAnimState = data.attackAnimState;
                    rp.attackAnimTimer = data.attackAnimTimer;
                    rp.attackAnimMaxTime = data.attackAnimMaxTime;
                    rp.activeHoldState = data.activeHoldState;
                    rp.chargeAmount = data.chargeAmount;

if (data.lastAttack && data.lastAttack.ts !== rp.lastAttackTs) {
                        rp.lastAttackTs = data.lastAttack.ts;
                        spawnProjectile(rp.targetX, rp.targetY, rp.targetZ, rp.targetAngle, data.lastAttack.type, { isVisualOnly: true, targetX: data.lastAttack.targetX, targetY: data.lastAttack.targetY });
                    }

rp.hp = data.hp;
                    rp.group.style.display = rp.hp > 0 ? 'block' : 'none';
                });
            }, (error) => {
                console.error("Firestore Error", error);
            });

document.getElementById('loading-overlay').style.display = 'none';
            document.getElementById('menu-overlay').style.display = 'flex';

requestAnimationFrame((t) => { lastTime = t; update(t); });

} catch(e) {
            document.getElementById('loading-overlay').innerHTML = "Connection Failed. Check Firebase configuration.";
            console.error(e);
        }
    };
   
    initAuth();

</script>
</body>
</html>
</template>

about

Arcane Arena is a futuristic cinematic launcher UI with advanced animated nebula rendering, fullscreen template execution, and layered sci-fi visuals.

ARCANE ARENA

⠀

launcher

launch

editor

about

⠀