Arena Fighter

${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",[],[196,188],"frontend","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",[],[196,198],"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",[],[196,206],"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",[],[196,214],"adde8fc6-3397-11f1-8ca8-42b51c65c3df","index.html","adde90ac-3397-11f1-8ca8-42b51c65c3df",3,["D",1775686197506],"\n\n\n\n\nArena Fighter\n\n\n\n

\n 100%\n

\n \n \n

\n \n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n",[],[196,222],"44335178-3398-11f1-a8ef-42b51c65c3df","game.js","44335240-3398-11f1-a8ef-42b51c65c3df",["D",1775686449736],"import { M_SIZE, T_SIZE, P_SIZE, DebrisParticle } from \"./entities.js\";\nimport { Player } from \"./player.js\";\nimport { NPC } from \"./npc.js\";\nimport { UI } from \"./ui.js\";\n\nconst CORNERS = [\n [T_SIZE, T_SIZE],\n [M_SIZE - T_SIZE * 2, T_SIZE],\n [T_SIZE, M_SIZE - T_SIZE * 2],\n [M_SIZE - T_SIZE * 2, M_SIZE - T_SIZE * 2],\n];\n\nclass Game {\n constructor() {\n this.canvas = document.getElementById(\"game-canvas\");\n this.ctx = this.canvas.getContext(\"2d\");\n this.entities = [];\n this.projectiles = [];\n this.debris = [];\n this.finisherText = null;\n this.finisherTimer = 0;\n this._resize();\n window.addEventListener(\"resize\", () => this._resize());\n\n this.player = new Player(M_SIZE / 2 - P_SIZE / 2, M_SIZE / 2 - P_SIZE / 2);\n this.player.game = this;\n this.entities.push(this.player);\n\n this.ui = new UI(this);\n this.lastTime = performance.now();\n requestAnimationFrame((t) => this._loop(t));\n }\n\n _resize() {\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n const scale = Math.min(vw / M_SIZE, vh / M_SIZE);\n this.scale = scale;\n this.canvas.width = M_SIZE;\n this.canvas.height = M_SIZE;\n this.canvas.style.width = Math.round(M_SIZE * scale) + \"px\";\n this.canvas.style.height = Math.round(M_SIZE * scale) + \"px\";\n this.canvas.style.left = ((vw - M_SIZE * scale) / 2) + \"px\";\n this.canvas.style.top = ((vh - M_SIZE * scale) / 2) + \"px\";\n this.canvas.setAttribute(\"data-scalex\", scale);\n this.canvas.setAttribute(\"data-scaley\", scale);\n }\n\n selectCharacter(char) {\n this.player.character = char;\n this.player.color = char.color;\n this.player.health = 100;\n this.player.ultimateBar = 0;\n this.player.inUltimate = false;\n this.player.moveCooldowns = [0, 0, 0, 0];\n this.player.ultMoveCooldowns = [0, 0, 0, 0];\n this.player.state = \"normal\";\n // Respawn at random corner\n const corner = CORNERS[Math.floor(Math.random() * CORNERS.length)];\n this.player.x = corner[0];\n this.player.y = corner[1];\n this.player.vx = 0; this.player.vy = 0;\n // Despawn NPCs\n this.entities = this.entities.filter(e => !e.isNPC);\n this.projectiles = [];\n this.ui?.updateHealth(100);\n }\n\n spawnNPC(char, difficulty) {\n const corner = CORNERS[Math.floor(Math.random() * CORNERS.length)];\n const npc = new NPC(corner[0], corner[1], char, difficulty);\n npc.game = this;\n this.entities.push(npc);\n }\n\n spawnDebris(x, y, count = 6) {\n for (let i = 0; i < count; i++) {\n this.debris.push(new DebrisParticle(x + (Math.random() - 0.5) * 20, y + (Math.random() - 0.5) * 20));\n }\n }\n\n showFinisher(text, target) {\n this.finisherText = text;\n this.finisherTimer = 2500;\n // Freeze target briefly for finisher anim feel\n if (target) {\n target.vx = 0; target.vy = 0;\n }\n }\n\n _respawnPlayer() {\n this.player.health = 100;\n this.player.ultimateBar = 0;\n this.player.inUltimate = false;\n this.player.moveCooldowns = [0, 0, 0, 0];\n this.player.ultMoveCooldowns = [0, 0, 0, 0];\n this.player.state = \"normal\";\n this.player.stunTimer = 0;\n this.player.downTimer = 0;\n const corner = CORNERS[Math.floor(Math.random() * CORNERS.length)];\n this.player.x = corner[0];\n this.player.y = corner[1];\n this.player.vx = 0; this.player.vy = 0;\n this.entities = this.entities.filter(e => !e.isNPC);\n this.projectiles = [];\n this.ui?.updateHealth(100);\n }\n\n _loop(time) {\n const dt = Math.min(time - this.lastTime, 50);\n this.lastTime = time;\n this._update(dt);\n this._draw();\n requestAnimationFrame((t) => this._loop(t));\n }\n\n _update(dt) {\n // Update entities\n this.entities.forEach(e => {\n e.update(dt, this.entities, this);\n });\n\n // NPC ultimates check\n this.entities.forEach(e => {\n if (e.isNPC && e.ultimateBar >= 1 && !e.inUltimate && Math.random() < 0.002) {\n e.activateUltimate();\n }\n });\n\n // Remove dead NPCs\n const deadNPCs = this.entities.filter(e => e.isNPC && e.health <= 0);\n deadNPCs.forEach(e => {\n this.spawnDebris(e.centerX, e.centerY, 12);\n });\n this.entities = this.entities.filter(e => !(e.isNPC && e.health <= 0));\n\n // Player respawn\n if (this.player.health <= 0) {\n setTimeout(() => this._respawnPlayer(), 1500);\n this.player.health = -999; // prevent double respawn\n }\n\n // Update projectiles\n this.projectiles = this.projectiles.filter(p => {\n p.update(dt, this.entities);\n return p.life > 0;\n });\n\n // Update debris\n this.debris = this.debris.filter(d => {\n d.update(dt);\n return d.life > 0;\n });\n\n // Finisher timer\n if (this.finisherTimer > 0) this.finisherTimer -= dt;\n\n this.ui?.tick();\n }\n\n _draw() {\n const ctx = this.ctx;\n ctx.clearRect(0, 0, M_SIZE, M_SIZE);\n\n // Background\n ctx.fillStyle = \"#1a1a2e\";\n ctx.fillRect(0, 0, M_SIZE, M_SIZE);\n\n // Grid\n this._drawGrid(ctx);\n\n // Debris\n this.debris.forEach(d => d.draw(ctx));\n\n // Projectiles\n this.projectiles.forEach(p => p.draw(ctx));\n\n // Entities (draw order: down first, then normal)\n const sorted = [...this.entities].sort((a, b) => {\n if (a.isDown() && !b.isDown()) return -1;\n if (!a.isDown() && b.isDown()) return 1;\n return 0;\n });\n sorted.forEach(e => e.draw(ctx));\n\n // Finisher overlay\n if (this.finisherTimer > 0 && this.finisherText) {\n const a = Math.min(1, this.finisherTimer / 500);\n ctx.save();\n ctx.globalAlpha = a;\n ctx.font = \"bold 36px sans-serif\";\n ctx.textAlign = \"center\";\n ctx.fillStyle = \"#ff0\";\n ctx.strokeStyle = \"#000\";\n ctx.lineWidth = 4;\n ctx.strokeText(\"FINISH: \" + this.finisherText, M_SIZE / 2, M_SIZE / 2 - 40);\n ctx.fillText(\"FINISH: \" + this.finisherText, M_SIZE / 2, M_SIZE / 2 - 40);\n ctx.restore();\n }\n }\n\n _drawGrid(ctx) {\n const cols = 10, rows = 10;\n const cw = M_SIZE / cols, rh = M_SIZE / rows;\n for (let r = 0; r < rows; r++) {\n for (let c = 0; c < cols; c++) {\n const even = (r + c) % 2 === 0;\n ctx.fillStyle = even ? \"#16213e\" : \"#0f3460\";\n ctx.fillRect(c * cw, r * rh, cw, rh);\n }\n }\n // Grid lines\n ctx.strokeStyle = \"#1e2d5a\";\n ctx.lineWidth = 1;\n for (let i = 0; i <= cols; i++) {\n ctx.beginPath();\n ctx.moveTo(i * cw, 0);\n ctx.lineTo(i * cw, M_SIZE);\n ctx.stroke();\n }\n for (let j = 0; j <= rows; j++) {\n ctx.beginPath();\n ctx.moveTo(0, j * rh);\n ctx.lineTo(M_SIZE, j * rh);\n ctx.stroke();\n }\n // Border\n ctx.strokeStyle = \"#4a4a8a\";\n ctx.lineWidth = 3;\n ctx.strokeRect(1, 1, M_SIZE - 2, M_SIZE - 2);\n }\n}\n\n// Boot\nconst game = new Game();\nwindow.__game = game; // debug access\n",[],[196,230],"f23e8afe-3397-11f1-a080-42b51c65c3df","entities.js","f23e8bc6-3397-11f1-a080-42b51c65c3df",6,["D",1775686312237],"// Entity classes: Player, NPC, Projectile, Particle, Debris\n\nexport const TILE = 50;\nexport const GRID = 10;\nexport const MAP_W = TILE * GRID;\nexport const MAP_H = TILE * GRID;\nexport const PLAYER_SIZE = Math.round(TILE / 6); // ~8px player (1/6th of tile? spec says 50x as big as player => tile=50, player~8-10)\n// Actually: \"10x10 grid of squares 50x as big as the player\" => player = TILE/50 * tile? \n// Let's interpret: map tile is 50x player size => player = 50px/50 = 1? too small.\n// More natural: player is ~16px, tile is ~50px for a nice looking game.\n// Let's do player=14, tile=70, map=700x700\n\nexport const P_SIZE = 14;\nexport const T_SIZE = 70;\nexport const M_SIZE = T_SIZE * 10; // 700\n\nexport const STATES = { NORMAL: \"normal\", STUNNED: \"stunned\", DOWN: \"down\" };\n\nexport class Entity {\n constructor(x, y, color, character) {\n this.x = x; this.y = y;\n this.vx = 0; this.vy = 0;\n this.color = color;\n this.character = character;\n this.state = STATES.NORMAL;\n this.health = 100;\n this.maxHealth = 100;\n this.stunTimer = 0;\n this.downTimer = 0;\n this.immunityTimer = 0;\n this.ultimateBar = 0; // 0-1\n this.inUltimate = false;\n this.ultTimer = 0;\n this.moveCooldowns = [0, 0, 0, 0];\n this.ultMoveCooldowns = [0, 0, 0, 0];\n this.punchCount = 0;\n this.punchTimer = 0;\n this.lastPunchTime = 0;\n this.facing = { x: 1, y: 0 };\n this.isPlayer = false;\n this.isNPC = false;\n this.id = Math.random();\n this.particles = [];\n this.smoke = [];\n this.hitIndicators = [];\n this.downCancelCooldown = 0;\n this.blockAngle = null; // null = not blocking\n this.blockTimer = 0;\n this.comboHits = 0;\n this.size = P_SIZE;\n this.wallComboTimer = 0;\n }\n\n get centerX() { return this.x + this.size / 2; }\n get centerY() { return this.y + this.size / 2; }\n\n isAlive() { return this.health > 0; }\n isStunned() { return this.state === STATES.STUNNED; }\n isDown() { return this.state === STATES.DOWN; }\n isNormal() { return this.state === STATES.NORMAL; }\n\n stun(duration) {\n if (this.immunityTimer > 0 && this.state === STATES.NORMAL) return;\n this.state = STATES.STUNNED;\n this.stunTimer = duration;\n this.vx = 0; this.vy = 0;\n }\n\n knockDown(duration = 2000) {\n this.state = STATES.DOWN;\n this.downTimer = duration;\n }\n\n takeDamage(amount, attacker) {\n if (this.health <= 0) return;\n this.health = Math.max(0, this.health - amount);\n // Build ultimate bar\n this.ultimateBar = Math.min(1, this.ultimateBar + amount / 100);\n this.spawnHitParticles();\n }\n\n healPct(pct) {\n this.health = Math.min(this.maxHealth, this.health + this.maxHealth * pct);\n }\n\n spawnHitParticles() {\n for (let i = 0; i < 6; i++) {\n this.particles.push({\n x: this.centerX, y: this.centerY,\n vx: (Math.random() - 0.5) * 4,\n vy: (Math.random() - 0.5) * 4,\n life: 400, maxLife: 400,\n color: \"#ff6600\", size: 3,\n });\n }\n }\n\n spawnSmoke() {\n for (let i = 0; i < 8; i++) {\n this.smoke.push({\n x: this.centerX + (Math.random() - 0.5) * this.size,\n y: this.centerY + (Math.random() - 0.5) * this.size,\n vx: (Math.random() - 0.5) * 2,\n vy: -Math.random() * 2 - 0.5,\n life: 600, maxLife: 600,\n size: 4 + Math.random() * 4,\n });\n }\n }\n\n addHitIndicator(angle) {\n this.hitIndicators.push({\n angle, life: 300, maxLife: 300,\n });\n }\n\n nearWall() {\n const margin = T_SIZE * 0.8;\n return this.x < margin || this.x + this.size > M_SIZE - margin ||\n this.y < margin || this.y + this.size > M_SIZE - margin;\n }\n\n update(dt, entities, game) {\n // Stun timer\n if (this.state === STATES.STUNNED) {\n this.stunTimer -= dt;\n if (this.stunTimer <= 0) {\n this.state = STATES.NORMAL;\n this.stunTimer = 0;\n }\n }\n // Down timer\n if (this.state === STATES.DOWN) {\n this.downTimer -= dt;\n if (this.downTimer <= 0) {\n this.state = STATES.NORMAL;\n this.immunityTimer = 1500;\n }\n }\n if (this.immunityTimer > 0) this.immunityTimer -= dt;\n if (this.downCancelCooldown > 0) this.downCancelCooldown -= dt;\n\n // Ultimate timer\n if (this.inUltimate) {\n this.ultTimer -= dt;\n this.ultimateBar = Math.max(0, this.ultTimer / 40000);\n if (this.ultTimer <= 0) {\n this.inUltimate = false;\n this.ultimateBar = 0;\n }\n }\n\n // Physics\n if (this.state !== STATES.STUNNED && this.state !== STATES.DOWN) {\n this.x += this.vx * dt / 16;\n this.y += this.vy * dt / 16;\n } else if (this.state === STATES.DOWN) {\n // Slide to stop\n this.vx *= 0.85;\n this.vy *= 0.85;\n this.x += this.vx * dt / 16;\n this.y += this.vy * dt / 16;\n }\n\n // Clamp to map\n this.x = Math.max(0, Math.min(M_SIZE - this.size, this.x));\n this.y = Math.max(0, Math.min(M_SIZE - this.size, this.y));\n\n // Update particles\n this.particles = this.particles.filter(p => {\n p.life -= dt;\n p.x += p.vx; p.y += p.vy;\n p.vx *= 0.95; p.vy *= 0.95;\n return p.life > 0;\n });\n this.smoke = this.smoke.filter(s => {\n s.life -= dt;\n s.x += s.vx; s.y += s.vy;\n s.vx *= 0.97;\n return s.life > 0;\n });\n this.hitIndicators = this.hitIndicators.filter(h => {\n h.life -= dt;\n return h.life > 0;\n });\n\n if (this.punchTimer > 0) {\n this.punchTimer -= dt;\n if (this.punchTimer <= 0) this.punchCount = 0;\n }\n if (this.wallComboTimer > 0) this.wallComboTimer -= dt;\n }\n\n draw(ctx) {\n const x = this.x, y = this.y, s = this.size;\n\n // Draw smoke\n this.smoke.forEach(sm => {\n const a = sm.life / sm.maxLife;\n ctx.globalAlpha = a * 0.5;\n ctx.fillStyle = \"#aaa\";\n ctx.beginPath();\n ctx.arc(sm.x, sm.y, sm.size * a, 0, Math.PI * 2);\n ctx.fill();\n });\n ctx.globalAlpha = 1;\n\n // Body\n ctx.save();\n ctx.shadowColor = this.color;\n ctx.shadowBlur = this.inUltimate ? 12 : 0;\n ctx.fillStyle = this.color;\n ctx.strokeStyle = \"#000\";\n ctx.lineWidth = 2;\n const r = 3;\n ctx.beginPath();\n ctx.roundRect(x, y, s, s, r);\n ctx.fill();\n ctx.stroke();\n ctx.restore();\n\n // Status dot above entity\n const dotX = this.centerX;\n const dotY = y - 10;\n let dotColor = \"#2ecc71\";\n if (this.state === STATES.STUNNED) dotColor = \"#f1c40f\";\n else if (this.state === STATES.DOWN) dotColor = \"#e74c3c\";\n ctx.beginPath();\n ctx.arc(dotX, dotY, 4, 0, Math.PI * 2);\n ctx.fillStyle = dotColor;\n ctx.fill();\n ctx.strokeStyle = \"#000\";\n ctx.lineWidth = 1;\n ctx.stroke();\n\n // NPC health bar\n if (this.isNPC && this.character) {\n const barW = 40, barH = 5;\n const bx = dotX - barW / 2, by = dotY - 10;\n ctx.fillStyle = \"#333\";\n ctx.fillRect(bx, by, barW, barH);\n ctx.fillStyle = \"#e74c3c\";\n ctx.fillRect(bx, by, barW * (this.health / this.maxHealth), barH);\n // NPC name\n ctx.font = \"8px sans-serif\";\n ctx.fillStyle = \"#ccc\";\n ctx.textAlign = \"center\";\n ctx.fillText(this.character.name, dotX, by - 2);\n }\n\n // Block indicator\n if (this.blockAngle !== null) {\n this._drawSemiCircle(ctx, this.blockAngle, \"#4488ff\", true);\n }\n\n // Hit indicators (attack arcs)\n this.hitIndicators.forEach(h => {\n const a = h.life / h.maxLife;\n ctx.globalAlpha = a;\n this._drawSemiCircle(ctx, h.angle, \"#ffffff\", false);\n ctx.globalAlpha = 1;\n });\n\n // Particles\n this.particles.forEach(p => {\n const a = p.life / p.maxLife;\n ctx.globalAlpha = a;\n ctx.fillStyle = p.color;\n ctx.fillRect(p.x - p.size / 2, p.y - p.size / 2, p.size, p.size);\n });\n ctx.globalAlpha = 1;\n }\n\n _drawSemiCircle(ctx, angle, color, filled) {\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 radius = this.size * 1.2;\n ctx.save();\n ctx.strokeStyle = color;\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.arc(cx, cy, radius, angle - Math.PI / 2, angle + Math.PI / 2);\n if (filled) {\n ctx.globalAlpha = 0.25;\n ctx.fillStyle = color;\n ctx.fill();\n }\n ctx.stroke();\n ctx.restore();\n }\n}\n\nexport class Projectile {\n constructor(x, y, vx, vy, damage, owner, color = \"#ff0\") {\n this.x = x; this.y = y;\n this.vx = vx; this.vy = vy;\n this.damage = damage;\n this.owner = owner;\n this.color = color;\n this.size = 8;\n this.life = 3000;\n this.hit = false;\n this.id = Math.random();\n }\n\n update(dt, entities) {\n this.x += this.vx * dt / 16;\n this.y += this.vy * dt / 16;\n this.life -= dt;\n if (this.x < 0 || this.x > M_SIZE || this.y < 0 || this.y > M_SIZE) this.life = 0;\n\n if (!this.hit) {\n entities.forEach(e => {\n if (e === this.owner || e.health <= 0) return;\n const dx = e.centerX - this.x, dy = e.centerY - this.y;\n if (Math.sqrt(dx*dx+dy*dy) < e.size + this.size / 2) {\n // Check if blocked\n if (e.blockAngle !== null) {\n const angle = Math.atan2(this.vy, this.vx);\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 // Parried — reflect\n e.stun(1000);\n this.vx = -this.vx; this.vy = -this.vy;\n this.owner = e;\n return;\n }\n }\n e.takeDamage(this.damage, this.owner);\n e.stun(500);\n this.hit = true;\n this.life = 0;\n }\n });\n }\n }\n\n draw(ctx) {\n ctx.save();\n ctx.fillStyle = this.color;\n ctx.strokeStyle = \"#000\";\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size / 2, 0, Math.PI * 2);\n ctx.fill();\n ctx.stroke();\n ctx.restore();\n }\n}\n\nexport class DebrisParticle {\n constructor(x, y) {\n this.x = x; this.y = y;\n this.vx = (Math.random() - 0.5) * 6;\n this.vy = (Math.random() - 0.5) * 6 - 2;\n this.size = 4 + Math.random() * 6;\n this.life = 800 + Math.random() * 400;\n this.maxLife = this.life;\n this.angle = Math.random() * Math.PI * 2;\n this.spin = (Math.random() - 0.5) * 0.2;\n }\n\n update(dt) {\n this.x += this.vx * dt / 16;\n this.y += this.vy * dt / 16;\n this.vy += 0.1;\n this.vx *= 0.98;\n this.angle += this.spin;\n this.life -= dt;\n }\n\n draw(ctx) {\n const a = this.life / this.maxLife;\n ctx.save();\n ctx.globalAlpha = a;\n ctx.translate(this.x, this.y);\n ctx.rotate(this.angle);\n ctx.fillStyle = \"#888\";\n ctx.strokeStyle = \"#555\";\n ctx.lineWidth = 1;\n ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size);\n ctx.strokeRect(-this.size/2, -this.size/2, this.size, this.size);\n ctx.restore();\n }\n}\n",[],[196,237],"addec720-3397-11f1-8ca8-42b51c65c3df",["D",1775686197506],[171,172,173,174,175,176,177],[196],["D",1775686182387],[],[18,65],["D",1775686182387],[169],[18],["D",1775686153766],{"_11":12,"_123":71},{"_11":12,"_119":-5,"_70":71,"_31":69,"_120":121,"_122":30},{"_39":110,"_13":16,"_33":36,"_111":75,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":14,"_118":12},"ctx",{"_53":-5,"_142":291,"_292":293,"_294":295,"_296":30,"_297":30,"_298":30,"_299":24,"_300":-5,"_301":-7,"_302":-7,"_303":26,"_304":30,"_305":30,"_306":-5,"_307":30,"_308":30,"_309":30,"_310":-5},"ENV",{"_262":263,"_264":265,"_266":16,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

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

Characters

Create Character

Moves (4)

Ultimate

Ultimate Moves (4)

Spawn NPC

History · api