Arena Fighter

\n 100%\n

\n \n \n

\n \n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n",[],[192,217],{"_107":224,"_100":225,"_165":226,"_167":193,"_168":150,"_169":227,"_171":122,"_109":228,"_104":33,"_173":203,"_175":229,"_176":22,"_177":-5,"_178":230,"_103":231},"32bd4d18-3398-11f1-9ac4-42b51c65c3df","npc.js","32bd4dc2-3398-11f1-9ac4-42b51c65c3df",8,["D",1775686420442],"import { Entity, Projectile, DebrisParticle, STATES, M_SIZE, T_SIZE, P_SIZE } from \"./entities.js\";\n\nconst PUNCH_DAMAGE = 3;\nconst PUNCH_STUN = 400;\nconst PUNCH_WINDOW = 600;\nconst COMBO_STUN = 2000;\n\nexport class NPC extends Entity {\n constructor(x, y, character, difficulty) {\n super(x, y, character.color, character);\n this.isNPC = true;\n this.size = P_SIZE;\n this.difficulty = difficulty; // 1-10\n this.speed = 1.2 + difficulty * 0.18;\n this.thinkTimer = 0;\n this.thinkInterval = Math.max(200, 800 - difficulty * 60);\n this.target = null;\n this.punchCombo = 0;\n this.punchTimer = 0;\n this.lastPunchTime = 0;\n this.actionCooldown = 0;\n this.moveCooldowns = [0, 0, 0, 0];\n this.ultMoveCooldowns = [0, 0, 0, 0];\n this.reactionTime = Math.max(100, 600 - difficulty * 50);\n this.aggression = difficulty / 10;\n this.game = null;\n this.parrying = false;\n this.parryTimer = 0;\n }\n\n update(dt, entities, game) {\n this.game = game;\n super.update(dt, entities, game);\n if (this.health <= 0) return;\n\n // Pick target (player or closest enemy)\n this.target = this._pickTarget(entities);\n\n this.thinkTimer -= dt;\n this.actionCooldown -= dt;\n\n if (this.thinkTimer <= 0) {\n this.thinkTimer = this.thinkInterval + Math.random() * 200;\n if (this.target && this.isNormal()) {\n this._think(dt);\n }\n }\n\n // Parry timer\n if (this.parrying) {\n this.parryTimer -= dt;\n if (this.parryTimer <= 0) {\n this.parrying = false;\n this.stun(PUNCH_STUN);\n }\n }\n\n // Movement (only when not stunned/down)\n if (this.isNormal() && this.target && !this.parrying) {\n const tx = this.target.centerX - this.centerX;\n const ty = this.target.centerY - this.centerY;\n const dist = Math.sqrt(tx*tx + ty*ty);\n const idealDist = this.size * 3;\n if (dist > idealDist) {\n const spd = this.speed;\n this.vx += (tx / dist * spd - this.vx) * 0.12;\n this.vy += (ty / dist * spd - this.vy) * 0.12;\n } else if (dist < idealDist * 0.7) {\n this.vx *= 0.9;\n this.vy *= 0.9;\n } else {\n this.vx *= 0.9;\n this.vy *= 0.9;\n }\n this.facing = { x: tx / dist, y: ty / dist };\n } else if (!this.isDown()) {\n this.vx *= 0.85;\n this.vy *= 0.85;\n }\n }\n\n _pickTarget(entities) {\n let best = null, bestDist = Infinity;\n entities.forEach(e => {\n if (e === this || e.health <= 0) return;\n const dx = e.centerX - this.centerX, dy = e.centerY - this.centerY;\n const d = Math.sqrt(dx*dx + dy*dy);\n if (d < bestDist) { bestDist = d; best = e; }\n });\n return best;\n }\n\n _think() {\n if (!this.target || !this.isNormal()) return;\n const dx = this.target.centerX - this.centerX;\n const dy = this.target.centerY - this.centerY;\n const dist = Math.sqrt(dx*dx + dy*dy);\n const angle = Math.atan2(dy, dx);\n this.facing = { x: Math.cos(angle), y: Math.sin(angle) };\n\n if (this.actionCooldown > 0) return;\n\n const now = performance.now();\n const attackRange = this.size * 4;\n\n if (dist < attackRange) {\n const r = Math.random();\n if (r < 0.3 * this.aggression && this._tryUseMove(angle)) return;\n if (r < 0.55) { this._doPunch(angle); return; }\n if (r < 0.6 && this.difficulty >= 5) { this._tryDash(angle); return; }\n if (r < 0.65 && this.difficulty >= 7) { this._tryBlock(); return; }\n }\n\n // Down cancel\n if (this.isDown() && this.downCancelCooldown <= 0 && this.difficulty >= 6 && Math.random() < 0.4) {\n this._doDownCancel();\n }\n }\n\n _tryDash(angle) {\n const now = performance.now();\n if (this.dashCooldown > now) return;\n this.dashCooldown = now + 1000;\n this.vx = Math.cos(angle) * 12;\n this.vy = Math.sin(angle) * 12;\n this.game?.spawnDashIndicator && this.game.spawnDashSquare(this, \"normal\");\n this.actionCooldown = 800;\n }\n\n _tryBlock() {\n if (this.target && Math.random() < 0.3 * (this.difficulty / 10)) {\n const angle = Math.atan2(this.target.centerY - this.centerY, this.target.centerX - this.centerX);\n this.blockAngle = angle;\n setTimeout(() => { this.blockAngle = null; }, 600 + Math.random() * 400);\n this.actionCooldown = 700;\n }\n }\n\n _doDownCancel() {\n this.state = STATES.NORMAL;\n this.downTimer = 0;\n this.downCancelCooldown = 25000;\n this.vx = 0; this.vy = 0;\n this.spawnSmoke();\n }\n\n _doPunch(angle) {\n const now = performance.now();\n if (now - this.lastPunchTime > PUNCH_WINDOW) this.punchCombo = 0;\n this.punchCombo++;\n this.lastPunchTime = now;\n this.addHitIndicator(angle);\n this.actionCooldown = 350 - this.difficulty * 20;\n\n const target = this.target;\n if (!target || target.health <= 0) return;\n const dist = Math.sqrt((target.centerX-this.centerX)**2+(target.centerY-this.centerY)**2);\n if (dist > this.size * 5) return;\n\n if (this.punchCombo >= 4) {\n if (target.immunityTimer > 0 && !target.isDown()) { this.punchCombo = 0; return; }\n target.takeDamage(PUNCH_DAMAGE, this);\n target.knockDown(COMBO_STUN);\n this.punchCombo = 0;\n // Wall check\n if (this.nearWall() && this.character) {\n setTimeout(() => {\n if (target.health > 0) {\n const wa = this.character.moveset.wallAttack;\n target.takeDamage(wa.damage || 15, this);\n target.stun(1200);\n if (wa.debris) this.game?.spawnDebris(target.centerX, target.centerY, 8);\n }\n }, 300);\n }\n } else {\n if (target.immunityTimer > 0 && !target.isDown()) return;\n if (target.blockAngle !== null) {\n target.stun(PUNCH_STUN);\n return;\n }\n target.takeDamage(PUNCH_DAMAGE, this);\n if (!target.isDown()) target.stun(PUNCH_STUN);\n }\n }\n\n _tryUseMove(angle) {\n if (!this.character?.moveset) return false;\n const now = performance.now();\n const cds = this.inUltimate ? this.ultMoveCooldowns : this.moveCooldowns;\n const moves = this.inUltimate ? this.character.moveset.ultimate.moves : this.character.moveset.moves;\n\n for (let i = 0; i < 4; i++) {\n if (cds[i] <= now && moves[i]) {\n const move = moves[i];\n const cooldown = (move.cooldown || 10) * 1000;\n cds[i] = now + cooldown;\n this._executeNPCMove(move, angle);\n this.actionCooldown = 800;\n return true;\n }\n }\n return false;\n }\n\n _executeNPCMove(move, angle) {\n const target = this.target;\n if (!target || target.health <= 0) return;\n this.addHitIndicator(angle);\n\n if (move.type === \"parry\") {\n this.parrying = true;\n this.parryTimer = 1000;\n return;\n }\n if (move.type === \"projectile\") {\n const speed = 4.5;\n const proj = new Projectile(\n this.centerX, this.centerY,\n Math.cos(angle) * speed, Math.sin(angle) * speed,\n move.damage || 10, this, this.color\n );\n this.game?.projectiles.push(proj);\n return;\n }\n if (move.type === \"grab\") {\n const dist = Math.sqrt((target.centerX-this.centerX)**2+(target.centerY-this.centerY)**2);\n if (dist > this.size * 4) return;\n target.stun(500);\n const hits = move.hits || 2;\n const dmgPer = (move.damage || 15) / hits;\n for (let i = 0; i < hits; i++) {\n setTimeout(() => {\n if (target.health <= 0) return;\n target.takeDamage(dmgPer, this);\n if (i === hits-1) target.knockDown(move.downDuration || 1500);\n if (move.debris) this.game?.spawnDebris(target.centerX, target.centerY, 5);\n }, i * 250);\n }\n return;\n }\n // Attack\n const dist = Math.sqrt((target.centerX-this.centerX)**2+(target.centerY-this.centerY)**2);\n if (dist > this.size * 5) return;\n const hits = move.hits || 1;\n const dmgPer = (move.damage || 10) / hits;\n for (let i = 0; i < hits; i++) {\n setTimeout(() => {\n if (target.health <= 0) return;\n const canHit = move.canHitDown || !target.isDown();\n if (!canHit) return;\n if (target.blockAngle !== null && !move.canHitBlocking) {\n target.stun(PUNCH_STUN);\n return;\n }\n target.takeDamage(dmgPer, this);\n if (i === hits-1) {\n if (move.downDuration > 0) target.knockDown(move.downDuration);\n else target.stun(move.stunDuration || 400);\n } else target.stun(250);\n if (move.debris) this.game?.spawnDebris(target.centerX, target.centerY, 5);\n }, i * 220);\n }\n }\n\n activateUltimate() {\n if (!this.character || this.ultimateBar < 1 || this.inUltimate) return;\n this.inUltimate = true;\n this.ultTimer = 40000;\n this.ultMoveCooldowns = [0, 0, 0, 0];\n this.health = Math.min(this.maxHealth, this.health + this.maxHealth * 0.5);\n const ultData = this.character.moveset.ultimate;\n if (this.target) {\n this.target.takeDamage(ultData.activationDamage || 25, this);\n this.target.knockDown(2000);\n }\n this.game?.spawnDebris(this.centerX, this.centerY, 10);\n }\n}\n",[],[192,225],{"_107":233,"_100":234,"_165":235,"_167":193,"_168":150,"_169":236,"_171":122,"_109":237,"_104":33,"_173":203,"_175":238,"_176":22,"_177":-5,"_178":239,"_103":240},"172e6e9c-3398-11f1-a080-42b51c65c3df","player.js","172e6f5a-3398-11f1-a080-42b51c65c3df",7,["D",1775686374207],"import { Entity, Projectile, DebrisParticle, STATES, M_SIZE, T_SIZE, P_SIZE } from \"./entities.js\";\n\nconst DASH_COOLDOWN = 1000;\nconst DOWN_CANCEL_COOLDOWN = 25000;\nconst PUNCH_WINDOW = 600;\nconst PUNCH_STUN = 400;\nconst COMBO_STUN = 2000;\nconst PUNCH_DAMAGE = 3;\nconst SELF_STUN_ON_4TH = 1000;\n\nexport class Player extends Entity {\n constructor(x, y) {\n super(x, y, \"#2ecc71\", null);\n this.isPlayer = true;\n this.size = P_SIZE;\n this.speed = 2.5;\n this.keys = {};\n this.mouse = { x: 0, y: 0, down: false };\n this.dashCooldown = 0;\n this.dashSquares = [];\n this.lastClickTime = 0;\n this.clickCount = 0;\n this.selfStunTimer = 0;\n this.comboTarget = null;\n this._setupInput();\n this.activeMove = null;\n this.activeMoveTimer = 0;\n this.grabTarget = null;\n this.parrying = false;\n this.parryTimer = 0;\n this.wallComboQueued = false;\n }\n\n _setupInput() {\n window.addEventListener(\"keydown\", (e) => {\n const k = e.key.toLowerCase();\n this.keys[k] = true;\n if (k === \"q\") this._tryDash();\n if (k === \"g\") this.activateUltimate();\n if (k === \"1\") this._useMove(0);\n if (k === \"2\") this._useMove(1);\n if (k === \"3\") this._useMove(2);\n if (k === \"4\") this._useMove(3);\n });\n window.addEventListener(\"keyup\", (e) => { this.keys[e.key.toLowerCase()] = false; });\n window.addEventListener(\"mousemove\", (e) => {\n const rect = document.getElementById(\"game-canvas\").getBoundingClientRect();\n const scaleX = parseFloat(document.getElementById(\"game-canvas\").getAttribute(\"data-scalex\") || 1);\n const scaleY = parseFloat(document.getElementById(\"game-canvas\").getAttribute(\"data-scaley\") || 1);\n this.mouse.x = (e.clientX - rect.left) / scaleX;\n this.mouse.y = (e.clientY - rect.top) / scaleY;\n });\n window.addEventListener(\"mousedown\", (e) => {\n if (e.button !== 0) return;\n if (e.target.closest(\"#ui-layer\")) return;\n this.mouse.down = true;\n this._tryPunch();\n });\n window.addEventListener(\"mouseup\", (e) => { if (e.button === 0) this.mouse.down = false; });\n }\n\n _tryDash() {\n if (this.isStunned()) return;\n const now = performance.now();\n if (this.dashCooldown > now) return;\n\n if (this.isDown()) {\n if (this.downCancelCooldown > 0) return;\n this._doDownCancel();\n return;\n }\n\n // Normal dash\n const dx = (this.keys[\"d\"] ? 1 : 0) - (this.keys[\"a\"] ? 1 : 0);\n const dy = (this.keys[\"s\"] ? 1 : 0) - (this.keys[\"w\"] ? 1 : 0);\n const len = Math.sqrt(dx*dx + dy*dy) || 1;\n const fx = dx / len || this.facing.x;\n const fy = dy / len || this.facing.y;\n this.vx = fx * 15;\n this.vy = fy * 15;\n this.dashCooldown = now + DASH_COOLDOWN;\n\n // Show dash square\n this.dashSquares.push({ type: \"normal\", startTime: now, duration: DASH_COOLDOWN });\n this._checkWallCombo();\n }\n\n _doDownCancel() {\n const now = performance.now();\n this.state = STATES.NORMAL;\n this.downTimer = 0;\n this.vx = 0; this.vy = 0;\n this.downCancelCooldown = DOWN_CANCEL_COOLDOWN;\n this.dashCooldown = now + DASH_COOLDOWN;\n this.dashSquares.push({ type: \"down\", startTime: now, duration: DASH_COOLDOWN * 1.8 });\n this.spawnSmoke();\n }\n\n _checkWallCombo() {\n // If 4th punch recently and near wall\n if (this.wallComboTimer > 0 && this.nearWall() && this.comboTarget) {\n const t = this.comboTarget;\n if (t && t.isAlive()) {\n this._doWallAttack(t);\n }\n }\n }\n\n _doWallAttack(target) {\n if (!this.character) return;\n const wa = this.character.moveset.wallAttack;\n target.stun(1200);\n target.takeDamage(wa.damage || 15, this);\n if (wa.debris) this.game?.spawnDebris(target.centerX, target.centerY, 10);\n // Finisher\n if (wa.finisherAnimation && target.health <= 0) {\n this.game?.showFinisher(wa.finisherAnimation, target);\n }\n this.wallComboTimer = 0;\n this.comboTarget = null;\n this.wallComboQueued = false;\n }\n\n _tryPunch() {\n if (!this.isNormal()) return;\n const now = performance.now();\n if (now - this.lastClickTime > PUNCH_WINDOW) {\n this.clickCount = 0;\n }\n this.clickCount++;\n this.lastClickTime = now;\n\n const angle = Math.atan2(this.mouse.y - this.centerY, this.mouse.x - this.centerX);\n this.addHitIndicator(angle);\n this.facing = { x: Math.cos(angle), y: Math.sin(angle) };\n\n if (this.clickCount >= 4) {\n // 4th hit\n const hit = this._punchHitCheck(angle);\n if (hit) {\n hit.entity.takeDamage(PUNCH_DAMAGE, this);\n hit.entity.knockDown(COMBO_STUN);\n this.wallComboTimer = 1500;\n this.comboTarget = hit.entity;\n // check wall attack\n if (this.nearWall()) {\n setTimeout(() => this._checkWallCombo(), 100);\n }\n } else {\n // Stun self\n this.stun(SELF_STUN_ON_4TH);\n }\n this.clickCount = 0;\n } else {\n const hit = this._punchHitCheck(angle);\n if (hit) {\n hit.entity.takeDamage(PUNCH_DAMAGE, this);\n hit.entity.stun(PUNCH_STUN);\n }\n }\n }\n\n _punchHitCheck(angle) {\n if (!this.game) return null;\n const dist = this.size * 1.5;\n const cx = this.centerX + Math.cos(angle) * dist;\n const cy = this.centerY + Math.sin(angle) * dist;\n const range = this.size * 2.0;\n for (const e of this.game.entities) {\n if (e === this || e.health <= 0) continue;\n const dx = e.centerX - cx, dy = e.centerY - cy;\n if (Math.sqrt(dx*dx+dy*dy) < range) {\n // Check block\n if (e.blockAngle !== null) {\n const diff = Math.abs(angle - e.blockAngle);\n const norm = diff > Math.PI ? 2 * Math.PI - diff : diff;\n if (norm < Math.PI / 2) {\n e.stun(PUNCH_STUN);\n this.stun(PUNCH_STUN);\n return null;\n }\n }\n return { entity: e };\n }\n }\n return null;\n }\n\n _useMove(idx) {\n if (!this.isNormal() || !this.character) return;\n const now = performance.now();\n const cds = this.inUltimate ? this.ultMoveCooldowns : this.moveCooldowns;\n if (cds[idx] > now) return;\n const moveset = this.inUltimate ? this.character.moveset.ultimate.moves : this.character.moveset.moves;\n const move = moveset[idx];\n if (!move) return;\n const cooldown = (move.cooldown || 10) * 1000;\n cds[idx] = now + cooldown;\n this._executeMove(move, idx);\n }\n\n _executeMove(move, idx) {\n const angle = Math.atan2(this.mouse.y - this.centerY, this.mouse.x - this.centerX);\n this.facing = { x: Math.cos(angle), y: Math.sin(angle) };\n this.addHitIndicator(angle);\n\n if (move.type === \"parry\") {\n this.parrying = true;\n this.parryTimer = 1000;\n return;\n }\n if (move.type === \"projectile\") {\n const speed = 5;\n const proj = new Projectile(\n this.centerX, this.centerY,\n Math.cos(angle) * speed, Math.sin(angle) * speed,\n move.damage || 10, this, this.color\n );\n this.game?.projectiles.push(proj);\n return;\n }\n if (move.type === \"grab\") {\n this._doGrab(move, angle);\n return;\n }\n // Attack\n this._doAttack(move, angle);\n }\n\n _doAttack(move, angle) {\n const hits = move.hits || 1;\n const dmgPer = (move.damage || 10) / hits;\n for (let i = 0; i < hits; i++) {\n setTimeout(() => {\n this.addHitIndicator(angle);\n const target = this._findTarget(angle, this.size * 3);\n if (target) {\n const canHit = move.canHitDown || !target.isDown();\n if (canHit) {\n if (target.blockAngle !== null && !move.canHitBlocking) {\n const diff = Math.abs(angle - target.blockAngle);\n const norm = diff > Math.PI ? 2 * Math.PI - diff : diff;\n if (norm < Math.PI / 2) {\n target.stun(PUNCH_STUN);\n return;\n }\n }\n target.takeDamage(dmgPer, this);\n if (i === hits - 1) {\n if (move.downDuration > 0) target.knockDown(move.downDuration);\n else target.stun(move.stunDuration || 400);\n } else {\n target.stun(300);\n }\n if (move.debris) this.game?.spawnDebris(target.centerX, target.centerY, 5);\n if (move.finisherAnimation && target.health <= 0) {\n this.game?.showFinisher(move.finisherAnimation, target);\n }\n }\n }\n }, i * 200);\n }\n }\n\n _doGrab(move, angle) {\n const target = this._findTarget(angle, this.size * 2.5);\n if (!target) return;\n if (target.isDown() && target.immunityTimer > 0) {\n // grabs bypass immunity\n } else if (target.immunityTimer > 0) {\n return;\n }\n target.stun(500);\n const hits = move.hits || 2;\n const dmgPer = (move.damage || 15) / hits;\n for (let i = 0; i < hits; i++) {\n setTimeout(() => {\n if (target.health <= 0) return;\n target.takeDamage(dmgPer, this);\n if (i === hits - 1) {\n target.knockDown(move.downDuration || 1500);\n if (move.debris) this.game?.spawnDebris(target.centerX, target.centerY, 6);\n if (move.finisherAnimation && target.health <= 0) {\n this.game?.showFinisher(move.finisherAnimation, target);\n }\n }\n }, i * 250);\n }\n }\n\n _findTarget(angle, range) {\n if (!this.game) return null;\n const dist = this.size * 1.5;\n const cx = this.centerX + Math.cos(angle) * dist;\n const cy = this.centerY + Math.sin(angle) * dist;\n let best = null, bestDist = range;\n for (const e of this.game.entities) {\n if (e === this || e.health <= 0) continue;\n const dx = e.centerX - cx, dy = e.centerY - cy;\n const d = Math.sqrt(dx*dx + dy*dy);\n if (d < bestDist) { bestDist = d; best = e; }\n }\n return best;\n }\n\n activateUltimate() {\n if (!this.character || this.ultimateBar < 1 || this.inUltimate) return;\n this.inUltimate = true;\n this.ultTimer = 40000;\n this.ultMoveCooldowns = [0, 0, 0, 0];\n // Heal half health\n this.health = Math.min(this.maxHealth, this.health + this.maxHealth * 0.5);\n // Do activation attack\n const ultData = this.character.moveset.ultimate;\n const angle = Math.atan2(this.mouse.y - this.centerY, this.mouse.x - this.centerX);\n const target = this._findTarget(angle, this.size * 4);\n if (target) {\n target.takeDamage(ultData.activationDamage || 25, this);\n target.knockDown(2000);\n }\n if (ultData.activationFinisher && target?.health <= 0) {\n this.game?.showFinisher(ultData.activationFinisher, target);\n }\n this.game?.spawnDebris(this.centerX, this.centerY, 12);\n this.game?.ui?.updateHealth(this.health);\n }\n\n update(dt, entities, game) {\n this.game = game;\n super.update(dt, entities, game);\n\n // Blocking\n if (this.keys[\"f\"] && this.isNormal()) {\n this.blockAngle = Math.atan2(this.mouse.y - this.centerY, this.mouse.x - this.centerX);\n } else {\n this.blockAngle = null;\n }\n\n // Parry\n if (this.parrying) {\n this.parryTimer -= dt;\n if (this.parryTimer <= 0) {\n this.parrying = false;\n this.stun(PUNCH_STUN);\n }\n }\n\n // Movement\n if (this.isNormal() && !this.parrying) {\n const dx = (this.keys[\"d\"] ? 1 : 0) - (this.keys[\"a\"] ? 1 : 0);\n const dy = (this.keys[\"s\"] ? 1 : 0) - (this.keys[\"w\"] ? 1 : 0);\n const len = Math.sqrt(dx*dx + dy*dy) || 1;\n const spd = this.speed;\n if (dx !== 0 || dy !== 0) {\n this.vx += (dx / len * spd - this.vx) * 0.2;\n this.vy += (dy / len * spd - this.vy) * 0.2;\n this.facing = { x: dx / len, y: dy / len };\n } else {\n this.vx *= 0.8;\n this.vy *= 0.8;\n }\n } else if (this.state === STATES.NORMAL) {\n this.vx *= 0.85;\n this.vy *= 0.85;\n }\n\n // Dash cooldown drag\n if (this.dashCooldown > performance.now()) {\n this.vx *= 0.88;\n this.vy *= 0.88;\n }\n\n // Down cancel cooldown timer\n // (downCancelCooldown is in ms, decrement in Entity.update)\n\n // Update dash squares in UI\n this._updateDashUI();\n\n // Ultimate bar\n if (game.ui) {\n const name = this.character?.moveset?.ultimate?.name || \"-\";\n game.ui.updateUltBar(this.ultimateBar, name, this.ultimateBar >= 1 && !this.inUltimate);\n game.ui.updateHealth(this.health);\n }\n }\n\n _updateDashUI() {\n const now = performance.now();\n this.dashSquares = this.dashSquares.filter(d => now - d.startTime < d.duration);\n const indicator = document.getElementById(\"dash-indicator\");\n if (!indicator) return;\n indicator.innerHTML = \"\";\n this.dashSquares.forEach(d => {\n const el = document.createElement(\"div\");\n el.className = `dash-square dash-${d.type}`;\n const fill = document.createElement(\"div\");\n fill.className = \"dash-fill\";\n const progress = (now - d.startTime) / d.duration;\n fill.style.height = (progress * 100) + \"%\";\n el.appendChild(fill);\n indicator.appendChild(el);\n });\n }\n}\n",[],[192,234],{"_107":242,"_100":243,"_165":244,"_167":193,"_168":150,"_169":245,"_171":122,"_109":246,"_104":33,"_173":203,"_175":247,"_176":22,"_177":-5,"_178":248,"_103":249},"bf749f64-3397-11f1-9b96-42b51c65c3df","style.css","bf74a036-3397-11f1-9b96-42b51c65c3df",4,["D",1775686227025],"* { box-sizing: border-box; margin: 0; padding: 0; }\nbody { background: #111; overflow: hidden; font-family: 'Segoe UI', sans-serif; color: #fff; }\n\n#game-canvas { display: block; position: fixed; top: 0; left: 0; }\n\n#ui-layer {\n position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\n pointer-events: none; z-index: 10;\n}\n\n#top-bar {\n position: absolute; top: 0; left: 50%; transform: translateX(-50%);\n padding: 6px 18px; font-size: 28px; font-weight: bold;\n color: white; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;\n pointer-events: none; user-select: none;\n}\n\n#top-right-buttons {\n position: absolute; top: 10px; right: 10px;\n display: flex; gap: 8px; pointer-events: all;\n}\n#top-right-buttons button {\n background: rgba(0,0,0,0.7); color: #fff; border: 2px solid #555;\n padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 14px;\n transition: background 0.2s;\n}\n#top-right-buttons button:hover { background: rgba(80,80,80,0.9); }\n\n/* Ult bar */\n#ult-bar-container {\n position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);\n display: flex; align-items: center; gap: 8px; pointer-events: all;\n}\n#ult-bar-label { font-size: 13px; color: #aaa; white-space: nowrap; min-width: 80px; text-align: right; }\n#ult-bar-track {\n width: 200px; height: 14px; background: #222; border: 2px solid #555; border-radius: 7px; overflow: hidden;\n}\n#ult-bar-fill {\n height: 100%; width: 0%; background: linear-gradient(90deg, #8e44ad, #e056fd);\n transition: width 0.3s; border-radius: 7px;\n}\n#ult-activate-btn {\n background: #8e44ad; color: white; border: none; border-radius: 6px;\n padding: 4px 10px; cursor: pointer; font-weight: bold; font-size: 13px;\n animation: pulse 1s infinite;\n}\n@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }\n\n/* Move bar */\n#move-bar {\n position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);\n display: flex; gap: 10px; pointer-events: none;\n}\n.move-slot {\n width: 54px; height: 54px; background: #111; border: 2px solid #555; border-radius: 8px;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n font-size: 10px; text-align: center; color: #ccc; position: relative;\n user-select: none;\n}\n.move-slot .move-key {\n position: absolute; top: 3px; left: 5px; font-size: 11px; font-weight: bold; color: #888;\n}\n.move-slot .move-name { font-size: 9px; color: #bbb; padding: 0 2px; line-height: 1.2; }\n.move-slot.on-cooldown { opacity: 0.35; }\n.move-slot .cooldown-overlay {\n position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.7);\n border-radius: 0 0 6px 6px; font-size: 12px; text-align: center; color: #ff9; padding: 2px 0;\n}\n.move-slot.ult-move { border-color: #8e44ad; }\n.move-slot.usable { border-color: #2ecc71; background: #0a1a0a; }\n\n/* Dash indicator */\n#dash-indicator {\n position: absolute; bottom: 10px; right: 10px;\n display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none;\n}\n.dash-square {\n width: 28px; height: 28px; border-radius: 4px; border: 2px solid #333;\n position: relative; overflow: hidden;\n}\n.dash-square.dash-normal { background: #f1c40f; }\n.dash-square.dash-down { background: #e74c3c; }\n.dash-fill {\n position: absolute; top: 0; left: 0; width: 100%;\n background: #111; height: 0%;\n transition: none;\n}\n\n/* Modals */\n.modal {\n position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\n background: rgba(0,0,0,0.7); z-index: 100;\n display: flex; align-items: center; justify-content: center;\n}\n.modal.hidden { display: none; }\n.modal-inner {\n background: #1a1a2e; border: 2px solid #555; border-radius: 12px;\n padding: 24px; min-width: 320px; max-width: 420px; position: relative;\n max-height: 90vh; overflow-y: auto;\n}\n.modal-inner.wide { max-width: 560px; min-width: 400px; }\n.modal-inner h2 { margin-bottom: 14px; font-size: 20px; color: #e0e0ff; }\n.modal-inner h3 { margin: 14px 0 8px; font-size: 15px; color: #aac; }\n.modal-inner label { display: block; margin: 8px 0 4px; font-size: 13px; color: #ccc; }\n.modal-inner input[type=text],\n.modal-inner input[type=color],\n.modal-inner textarea,\n.modal-inner select {\n display: block; width: 100%; padding: 6px 8px; margin-top: 3px;\n background: #111; color: #fff; border: 1px solid #444; border-radius: 6px; font-size: 13px;\n}\n.modal-inner input[type=color] { height: 36px; padding: 2px; cursor: pointer; }\n.modal-inner input[type=range] { width: calc(100% - 30px); }\n.modal-inner textarea { resize: vertical; }\n.form-scroll { max-height: 60vh; overflow-y: auto; padding-right: 4px; }\n.form-buttons { display: flex; gap: 10px; margin-top: 14px; }\n.form-buttons button {\n flex: 1; padding: 8px; background: #2d2d5e; color: #fff; border: 1px solid #555;\n border-radius: 8px; cursor: pointer; font-size: 14px; transition: background 0.2s;\n}\n.form-buttons button:hover { background: #3d3d7e; }\n.form-buttons button:first-child { background: #6c3483; }\n.form-buttons button:first-child:hover { background: #8e44ad; }\n.close-btn {\n position: absolute; top: 10px; right: 12px; background: none; border: none;\n color: #aaa; font-size: 18px; cursor: pointer;\n}\n.close-btn:hover { color: #fff; }\n.move-form-block {\n background: #111827; border: 1px solid #333; border-radius: 8px;\n padding: 10px; margin-bottom: 10px;\n}\n.move-form-block h4 { font-size: 13px; color: #9a9; margin-bottom: 6px; }\n#char-list { margin-bottom: 12px; }\n.char-item {\n display: flex; align-items: center; gap: 10px; padding: 8px;\n background: #111; border: 1px solid #333; border-radius: 6px; margin-bottom: 6px;\n cursor: pointer; transition: background 0.2s;\n}\n.char-item:hover { background: #1e1e3e; }\n.char-item.selected { border-color: #8e44ad; background: #1a0a2e; }\n.char-dot { width: 18px; height: 18px; border-radius: 3px; border: 2px solid #000; flex-shrink: 0; }\n#new-char-btn {\n width: 100%; padding: 8px; background: #1a3a1a; border: 1px dashed #2ecc71;\n color: #2ecc71; border-radius: 8px; cursor: pointer; font-size: 14px;\n pointer-events: all;\n}\n#new-char-btn:hover { background: #1e4a1e; }\n#cf-loading { text-align: center; color: #aaa; font-size: 14px; padding: 10px; }\n\n/* Status dot colors */\n.status-dot-green { color: #2ecc71; }\n.status-dot-yellow { color: #f1c40f; }\n.status-dot-red { color: #e74c3c; }\n",[],[192,243],{"_107":251,"_100":252,"_165":253,"_167":193,"_168":150,"_169":254,"_171":122,"_109":255,"_104":33,"_173":203,"_175":256,"_176":22,"_177":-5,"_178":257,"_103":258},"d1cc2d6c-3397-11f1-98aa-42b51c65c3df","ui.js","d1cc2ea2-3397-11f1-98aa-42b51c65c3df",5,["D",1775686257800],"// UI management: character creator, modals, move bar\n\nexport class UI {\n constructor(game) {\n this.game = game;\n this.characters = JSON.parse(localStorage.getItem(\"arena-characters\") || \"[]\");\n this._buildMoveFormRows();\n this._bindEvents();\n this._renderMoveBar();\n }\n\n saveCharacters() {\n localStorage.setItem(\"arena-characters\", JSON.stringify(this.characters));\n }\n\n _buildMoveFormRows() {\n const movesDiv = document.getElementById(\"cf-moves\");\n const ultMovesDiv = document.getElementById(\"cf-ult-moves\");\n movesDiv.innerHTML = \"\";\n ultMovesDiv.innerHTML = \"\";\n for (let i = 0; i < 4; i++) {\n movesDiv.appendChild(this._makeMoveFormBlock(i, false));\n ultMovesDiv.appendChild(this._makeMoveFormBlock(i, true));\n }\n }\n\n _makeMoveFormBlock(i, isUlt) {\n const div = document.createElement(\"div\");\n div.className = \"move-form-block\";\n const prefix = isUlt ? `ult-move-${i}` : `move-${i}`;\n div.innerHTML = `\n

${isUlt ? \"Ult Move\" : \"Move\"} ${i + 1}

\n Name \n Type\n \n \n Description \n Finisher (optional) \n `;\n return div;\n }\n\n _bindEvents() {\n document.getElementById(\"characters-btn\").addEventListener(\"click\", () => this._openCharModal());\n document.getElementById(\"close-char-modal\").addEventListener(\"click\", () => this._closeCharModal());\n document.getElementById(\"new-char-btn\").addEventListener(\"click\", () => this._openCreator());\n document.getElementById(\"close-creator-modal\").addEventListener(\"click\", () => this._closeCreator());\n document.getElementById(\"cf-submit\").addEventListener(\"click\", () => this._submitCharacter());\n document.getElementById(\"cf-cancel\").addEventListener(\"click\", () => this._closeCreator());\n document.getElementById(\"spawn-npc-btn\").addEventListener(\"click\", () => this._openSpawn());\n document.getElementById(\"close-spawn-modal\").addEventListener(\"click\", () => this._closeSpawn());\n document.getElementById(\"spawn-cancel\").addEventListener(\"click\", () => this._closeSpawn());\n document.getElementById(\"spawn-confirm\").addEventListener(\"click\", () => this._spawnNPC());\n document.getElementById(\"spawn-difficulty\").addEventListener(\"input\", (e) => {\n document.getElementById(\"spawn-diff-label\").textContent = e.target.value;\n });\n document.getElementById(\"ult-activate-btn\").addEventListener(\"click\", () => {\n this.game.player?.activateUltimate();\n });\n }\n\n _openCharModal() {\n document.getElementById(\"char-modal\").classList.remove(\"hidden\");\n this._renderCharList();\n }\n _closeCharModal() { document.getElementById(\"char-modal\").classList.add(\"hidden\"); }\n\n _renderCharList() {\n const list = document.getElementById(\"char-list\");\n list.innerHTML = \"\";\n if (this.characters.length === 0) {\n list.innerHTML = '

No characters yet.

';\n return;\n }\n this.characters.forEach((c, idx) => {\n const item = document.createElement(\"div\");\n item.className = \"char-item\";\n if (this.game.player?.character === c) item.classList.add(\"selected\");\n item.innerHTML = `

${c.name}`;\n item.addEventListener(\"click\", () => {\n this.game.selectCharacter(c);\n this._closeCharModal();\n });\n list.appendChild(item);\n });\n }\n\n _openCreator() {\n this._buildMoveFormRows();\n document.getElementById(\"creator-modal\").classList.remove(\"hidden\");\n document.getElementById(\"char-modal\").classList.add(\"hidden\");\n }\n _closeCreator() {\n document.getElementById(\"creator-modal\").classList.add(\"hidden\");\n document.getElementById(\"char-modal\").classList.remove(\"hidden\");\n document.getElementById(\"cf-loading\").classList.add(\"hidden\");\n }\n\n _getFormData() {\n const val = (id) => document.getElementById(id)?.value?.trim() || \"\";\n const moves = [];\n for (let i = 0; i < 4; i++) {\n moves.push({\n name: val(`move-${i}-name`) || `Move ${i + 1}`,\n type: val(`move-${i}-type`) || \"attack\",\n description: val(`move-${i}-desc`) || \"Basic attack\",\n finisher: val(`move-${i}-finisher`) || null,\n });\n }\n const ultimateMoves = [];\n for (let i = 0; i < 4; i++) {\n ultimateMoves.push({\n name: val(`ult-move-${i}-name`) || `Ult Move ${i + 1}`,\n type: val(`ult-move-${i}-type`) || \"attack\",\n description: val(`ult-move-${i}-desc`) || \"Powerful attack\",\n finisher: val(`ult-move-${i}-finisher`) || null,\n });\n }\n return {\n name: val(\"cf-name\") || \"Unnamed\",\n color: val(\"cf-color\") || \"#e74c3c\",\n passive: val(\"cf-passive\") || \"No special passive\",\n wallAttack: val(\"cf-wall\") || \"Slam into wall\",\n wallFinisher: val(\"cf-wall-finisher\") || null,\n moves,\n ultimateName: val(\"cf-ult-name\") || \"Ultimate\",\n ultimateActivation: val(\"cf-ult-activation\") || \"Powerful activation\",\n ultActivationFinisher: val(\"cf-ult-activation-finisher\") || null,\n ultimateMoves,\n };\n }\n\n async _submitCharacter() {\n const data = this._getFormData();\n if (!data.name) { alert(\"Please enter a character name\"); return; }\n\n const loading = document.getElementById(\"cf-loading\");\n const submitBtn = document.getElementById(\"cf-submit\");\n loading.classList.remove(\"hidden\");\n submitBtn.disabled = true;\n\n try {\n const resp = await fetch(\"/api/generate-moveset\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(data),\n });\n const result = await resp.json();\n if (result.error) throw new Error(result.error);\n\n const character = {\n id: Date.now(),\n name: data.name,\n color: data.color,\n rawInput: data,\n moveset: result.moveset,\n };\n this.characters.push(character);\n this.saveCharacters();\n this._closeCreator();\n this._openCharModal();\n } catch (e) {\n alert(\"Error generating moveset: \" + e.message);\n } finally {\n loading.classList.add(\"hidden\");\n submitBtn.disabled = false;\n }\n }\n\n _openSpawn() {\n const sel = document.getElementById(\"spawn-char-select\");\n sel.innerHTML = \"\";\n if (this.characters.length === 0) {\n alert(\"Create a character first!\");\n return;\n }\n this.characters.forEach((c, i) => {\n const opt = document.createElement(\"option\");\n opt.value = i;\n opt.textContent = c.name;\n sel.appendChild(opt);\n });\n document.getElementById(\"spawn-modal\").classList.remove(\"hidden\");\n }\n _closeSpawn() { document.getElementById(\"spawn-modal\").classList.add(\"hidden\"); }\n\n _spawnNPC() {\n const idx = parseInt(document.getElementById(\"spawn-char-select\").value);\n const diff = parseInt(document.getElementById(\"spawn-difficulty\").value);\n const char = this.characters[idx];\n if (!char) return;\n this.game.spawnNPC(char, diff);\n this._closeSpawn();\n }\n\n _renderMoveBar() {\n const bar = document.getElementById(\"move-bar\");\n bar.innerHTML = \"\";\n const player = this.game.player;\n if (!player || !player.character) return;\n\n const moveset = player.inUltimate ? player.character.moveset.ultimate.moves : player.character.moveset.moves;\n const keys = [\"1\", \"2\", \"3\", \"4\"];\n moveset.forEach((move, i) => {\n const slot = document.createElement(\"div\");\n slot.className = \"move-slot\";\n if (player.inUltimate) slot.classList.add(\"ult-move\");\n const cd = player.moveCooldowns[i] || 0;\n const now = performance.now();\n const remaining = Math.max(0, (cd - now) / 1000);\n if (remaining > 0) {\n slot.classList.add(\"on-cooldown\");\n slot.innerHTML = `${keys[i]}${move.name}

${remaining.toFixed(1)}s

`;\n } else {\n slot.classList.add(\"usable\");\n slot.innerHTML = `${keys[i]}${move.name}`;\n }\n bar.appendChild(slot);\n });\n }\n\n updateUltBar(pct, name, ready) {\n document.getElementById(\"ult-bar-fill\").style.width = (pct * 100) + \"%\";\n document.getElementById(\"ult-bar-label\").textContent = name || \"-\";\n const btn = document.getElementById(\"ult-activate-btn\");\n btn.style.display = ready ? \"inline-block\" : \"none\";\n }\n\n updateHealth(pct) {\n document.getElementById(\"health-display\").textContent = Math.max(0, Math.round(pct)) + \"%\";\n }\n\n tick() {\n this._renderMoveBar();\n }\n}\n",[],[192,252],[192],{"_107":261,"_100":262,"_165":120,"_167":-5,"_168":150,"_169":263,"_171":122,"_109":264,"_104":33,"_173":265,"_175":266,"_176":22,"_177":-5,"_178":267,"_103":268},"991eb30e-3397-11f1-9390-42b51c65c3df","main.ts",1,["D",1775686162709],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/\" || url.pathname === \"/index.html\") {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n }\n if (url.pathname.startsWith(\"/frontend/\")) {\n return serveFile(url.pathname, import.meta.url);\n }\n\n // AI moveset generation endpoint\n if (url.pathname === \"/api/generate-moveset\" && req.method === \"POST\") {\n const { generateMoveset } = await import(\"./api/generate-moveset.ts\");\n return generateMoveset(req);\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n",[],[262],"files",[162,180,190,197,207,215,223,232,241,250,260],"counts",{"_273":33,"_274":263,"_275":33,"_276":277,"_280":281},"pulls","branches","forks","envVars",{"_278":33,"_279":33},"count","emptyCount","connections",{"_278":33,"_282":33},"unfilledCount","contents",[285,288,291],{"_107":163,"_100":164,"_165":166,"_167":-5,"_168":150,"_169":170,"_171":122,"_109":286,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_103":287},["D",1775686182387],[164],{"_107":191,"_100":192,"_165":193,"_167":-5,"_168":150,"_169":194,"_171":122,"_109":289,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_103":290},["D",1775686197506],[192],{"_107":261,"_100":262,"_165":120,"_167":-5,"_168":150,"_169":263,"_171":122,"_109":292,"_104":33,"_173":265,"_175":266,"_176":22,"_177":-5,"_103":293},["D",1775686162709],[262],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_98":99,"_100":101,"_105":302,"_276":307,"_308":22},{"_107":108,"_100":101,"_109":303,"_111":-5,"_112":22,"_113":114,"_115":116,"_117":-5,"_14":118,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":33,"_16":126,"_127":-5,"_128":-5,"_129":-5,"_130":-5,"_131":132,"_133":132,"_134":135,"_136":135,"_137":135,"_138":132,"_139":132,"_23":304,"_142":305,"_147":306,"_159":22},["D",1775686153766],{"_98":99,"_141":77},{"_98":99,"_144":77,"_14":118,"_145":146},{"_104":149,"_100":46,"_107":150,"_151":108,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":-5,"_157":101,"_158":99},[],"isTeamOrg","actionData","errors"]

Characters

Create Character

Moves (4)

Ultimate

Ultimate Moves (4)

Spawn NPC

${isUlt ? \"Ult Move\" : \"Move\"} ${i + 1}

Gubble

arena-fighter

Environment variables