// ============================================================ // Dust & Glory — FIGHT SCREEN UI // The core arena combat view: two gladiators, liquid orbs, crowd meter // Characters positioned by tile position on a 0–20 arena. // Red circular action buttons flank the player character. // NOTE: dngCombatAction input action is registered separately. // ============================================================ const F = require('lib/dng-formulas.js'); const { SPELLS } = require('lib/dng-spells.js'); // ── Build a lookup map for spell data by id ── var SPELL_MAP = {}; for (var si = 0; si < SPELLS.length; si++) { SPELL_MAP[SPELLS[si].id] = SPELLS[si]; } // ── Spell cast icon mapping (for visual overlay) ── var SPELL_CAST_ICONS = { teleport: '/cdn/sprite-fantasy-magic-teleport-blue-portal-icon.png', whirlwind: '/cdn/sprite-fantasy-magic-whirlwind-green-tornado-icon.png', lightning_bolt: '/cdn/sprite-fantasy-magic-lightning-bolt-yellow-icon.png', fireball: '/cdn/sprite-fantasy-magic-fireball-orange-icon.png', gale: '/cdn/sprite-fantasy-magic-gale-wind-blue-icon.png', swift_sandals: '/cdn/sprite-fantasy-magic-swift-sandals-speed-icon.png', adulation: '/cdn/sprite-fantasy-magic-adulation-charm-pink-icon.png', command: '/cdn/sprite-fantasy-magic-command-mind-control-purple-icon.png', weaken_armor: '/cdn/sprite-fantasy-magic-weaken-armor-shatter-icon.png', bloodlust: '/cdn/sprite-fantasy-magic-bloodlust-red-rage-icon.png', boundless_energy: '/cdn/sprite-fantasy-magic-boundless-energy-golden-aura-icon.png', regenerate: '/cdn/sprite-fantasy-magic-regenerate-green-heal-icon.png', ghost_strike: '/cdn/sprite-fantasy-magic-ghost-strike-spectral-icon.png', rejuvenate: '/cdn/sprite-fantasy-magic-rejuvenate-nature-bloom-icon.png', colossus: '/cdn/sprite-fantasy-magic-colossus-giant-strength-icon.png', flame: '/cdn/sprite-fantasy-magic-flame-enchant-fire-icon.png', frost: '/cdn/sprite-fantasy-magic-frost-enchant-ice-icon.png', toxic: '/cdn/sprite-fantasy-magic-toxic-enchant-poison-icon.png', wraith: '/cdn/sprite-fantasy-magic-wraith-enchant-shadow-icon.png' }; var SPELL_CAST_GLOW = { teleport: 'rgba(59,130,246,0.7)', whirlwind: 'rgba(34,197,94,0.7)', lightning_bolt: 'rgba(250,204,21,0.7)', fireball: 'rgba(249,115,22,0.7)', gale: 'rgba(96,165,250,0.7)', swift_sandals: 'rgba(251,191,36,0.7)', adulation: 'rgba(236,72,153,0.7)', command: 'rgba(168,85,247,0.7)', weaken_armor: 'rgba(156,163,175,0.7)', bloodlust: 'rgba(239,68,68,0.7)', boundless_energy: 'rgba(234,179,8,0.7)', regenerate: 'rgba(34,197,94,0.7)', ghost_strike: 'rgba(148,163,184,0.7)', rejuvenate: 'rgba(74,222,128,0.7)', colossus: 'rgba(217,119,6,0.7)', flame: 'rgba(231,76,60,0.7)', frost: 'rgba(52,152,219,0.7)', toxic: 'rgba(46,204,113,0.7)', wraith: 'rgba(155,89,182,0.7)' }; function formatStageUnit(value) { var num = Number(value); if (!isFinite(num)) num = 0; return Math.round(num * 1000) / 1000; } function stageVwTerm(value) { return formatStageUnit(value) + ' * var(--dng-vw)'; } function stageVhTerm(value) { return formatStageUnit(value) + ' * var(--dng-vh)'; } function stageVw(value) { return 'calc(' + stageVwTerm(value) + ')'; } function stageVh(value) { return 'calc(' + stageVhTerm(value) + ')'; } function stageClamp(minPx, preferredVw, maxVw) { return 'clamp(' + minPx + ', ' + stageVw(preferredVw) + ', ' + stageVw(maxVw) + ')'; } function stageClampPx(minPx, preferredPx, maxPx) { return 'clamp(' + minPx + 'px, ' + stageVw((preferredPx / 1920) * 100) + ', ' + maxPx + 'px)'; } function stagePercentOffset(basePct, offsetVh) { var base = formatStageUnit(basePct); if (!offsetVh) return base + '%'; return 'calc(' + base + '% ' + (offsetVh >= 0 ? '+ ' : '- ') + stageVh(Math.abs(offsetVh)) + ')'; } function renderSkyCloudLayer(scrollVw, topPct, heightPct, opacity, blurPx, ellipses) { return '

' + '' + '

'; } function renderSpellCastOverlay(combat) { var anim = combat.spellCastAnim; if (!anim || !anim.id) return ''; var icon = SPELL_CAST_ICONS[anim.id] || ''; if (!icon) return ''; var glow = SPELL_CAST_GLOW[anim.id] || 'rgba(200,200,255,0.6)'; var spellName = SPELL_MAP[anim.id] ? SPELL_MAP[anim.id].name : anim.id; return '' + '

' + '

' + '' + spellName + '' + '

'; } // ── Buff / Debuff classification ── // Known debuffs — everything else is treated as a positive buff var DEBUFF_IDS = { stunned: true, stun: true, weaken: true, weakened: true, poison: true, poisoned: true, bleed: true, bleeding: true, burning: true, frozen: true, cursed: true, slowed: true, silence: true, silenced: true, blind: true, blinded: true, exhausted: true, fear: true, feared: true, confused: true, frost_slow: true, flame_dot: true, toxic_dot: true, wraith_drain: true }; // Icon + sprite lookup per buff id var BUFF_META = { bloodlust: { emoji: '⚔️', sprite: '/cdn/pixel-sprite-spell-icon-bloodlust-rage-red.png' }, swift_sandals: { emoji: '🥾', sprite: '/cdn/pixel-sprite-spell-icon-swift-sandals-boots.png' }, colossus: { emoji: '🛡️', sprite: '/cdn/pixel-sprite-spell-icon-colossus-titan-gold.png' }, boundless_energy:{ emoji: '⚡', sprite: '/cdn/pixel-sprite-spell-icon-boundless-energy-aura.png' }, regenerate: { emoji: '💚', sprite: '/cdn/pixel-sprite-spell-icon-regenerate-heal-green.png' }, truesight: { emoji: '👁️', sprite: null }, stunned: { emoji: '💫', sprite: null }, poison: { emoji: '☠️', sprite: null }, bleed: { emoji: '🩸', sprite: null }, burning: { emoji: '🔥', sprite: null }, frozen: { emoji: '❄️', sprite: null }, weaken: { emoji: '💔', sprite: null }, cursed: { emoji: '👻', sprite: null }, slowed: { emoji: '🐌', sprite: null }, }; // ── Render a single buff/debuff icon tile ── function renderBuffTile(bId, b, isDebuff) { var meta = BUFF_META[bId] || {}; var spell = SPELL_MAP[bId]; var name = spell ? spell.name : bId.replace(/_/g, ' '); var desc = spell ? (spell.descDetail || spell.desc) : ''; // Remaining count var remaining = 0; var countLabel = ''; if (b.turnsLeft !== undefined && b.turnsLeft > 0) { remaining = b.turnsLeft; countLabel = '' + b.turnsLeft; } else if (b.charges !== undefined && b.charges > 0) { remaining = b.charges; countLabel = '' + b.charges; } var isLow = (remaining === 1); var borderColor = isDebuff ? (isLow ? '#ff4444' : '#a03030') : (isLow ? '#e8a040' : '#d4a037'); var bgGrad = 'transparent'; var glowColor = isDebuff ? 'rgba(200,40,40,0.3)' : 'rgba(212,160,55,0.25)'; var countColor = isDebuff ? '#ff8888' : '#fde8d0'; var countBg = isDebuff ? 'rgba(160,20,20,0.85)' : 'rgba(120,80,20,0.85)'; // Use sprite if available, fall back to emoji var hasSprite = meta.sprite || (spell && spell.sprite); var spriteUrl = meta.sprite || (spell && spell.sprite) || ''; var iconHtml = hasSprite ? '

' : '' + (meta.emoji || '✦') + ''; return `

${iconHtml} ${countLabel ? '' + countLabel + '' : ''}

${(function() { var spellData = SPELL_MAP[bId]; if (spellData) { var tName = spellData.name || bId.replace(/_/g, ' '); var tType = spellData.type || ''; var tTypeLabel = tType.charAt(0).toUpperCase() + tType.slice(1); var tDesc = spellData.desc || ''; var tDescDetail = spellData.descDetail || ''; var tCostLine = ''; if (spellData.activationCost) { var ac = spellData.activationCost; if (ac.stat === 'energy' && ac.drainAll) tCostLine = 'Drains all energy (min ' + Math.round(ac.pct * 100) + '%)'; else if (ac.stat === 'energy' && ac.pct > 0) tCostLine = Math.round(ac.pct * 100) + '% energy'; else if (ac.stat === 'health' && ac.pct > 0) tCostLine = Math.round(ac.pct * 100) + '% health'; else if (ac.stat === 'none') tCostLine = 'No cost'; } var tTypeColor = '#5a3d1a'; var tTypeBg = 'rgba(139,105,20,0.15)'; if (tType === 'buff') { tTypeColor = '#2a6e2a'; tTypeBg = 'rgba(42,110,42,0.12)'; } else if (tType === 'debuff') { tTypeColor = '#8b2211'; tTypeBg = 'rgba(139,34,17,0.12)'; } else if (tType === 'damage') { tTypeColor = '#8b2211'; tTypeBg = 'rgba(139,34,17,0.12)'; } else if (tType === 'instant') { tTypeColor = '#2255aa'; tTypeBg = 'rgba(34,85,170,0.12)'; } var turnsLine = ''; if (b.turnsLeft !== undefined && b.turnsLeft > 0) turnsLine = '

Turns remaining: ' + b.turnsLeft + '

'; var chargesLine = ''; if (b.charges !== undefined && b.charges > 0) chargesLine = '

Attacks remaining: ' + b.charges + '

'; return '

' + '

' + tName + '

' + '

' + tTypeLabel + '

' + (tDesc ? '

' + tDesc + '

' : '') + (tDescDetail ? '

' + tDescDetail + '

' : '') + (tCostLine ? '

Cost: ' + tCostLine + '

' : '') + turnsLine + chargesLine + '

' + '

'; } else { return '

' + '

' + name + '

' + (desc ? '

' + desc + '

' : '') + (countLabel ? '

' + (b.charges !== undefined ? 'Attacks' : 'Turns') + ' remaining: ' + countLabel + '

' : '') + '

' + '

'; } })()}

`; } // ── Render the two-bar buff/debuff display ── function renderBuffBars(combat, whichKey) { var buffs = combat[whichKey || 'playerBuffs']; if (!buffs) return ''; var keys = Object.keys(buffs); if (keys.length === 0) return ''; // Separate into positive buffs and debuffs var positives = []; var negatives = []; for (var i = 0; i < keys.length; i++) { var bId = keys[i]; var b = buffs[bId]; if (!b) continue; var remaining = 0; if (b.turnsLeft !== undefined) remaining = b.turnsLeft; else if (b.charges !== undefined) remaining = b.charges; var entry = { id: bId, data: b, remaining: remaining }; if (DEBUFF_IDS[bId]) { negatives.push(entry); } else { positives.push(entry); } } // Sort by remaining (ascending — closest to expiring on left) positives.sort(function(a, b) { return a.remaining - b.remaining; }); negatives.sort(function(a, b) { return a.remaining - b.remaining; }); // Build buff tiles var buffTiles = ''; for (var pi = 0; pi < positives.length; pi++) { buffTiles += renderBuffTile(positives[pi].id, positives[pi].data, false); } var debuffTiles = ''; for (var ni = 0; ni < negatives.length; ni++) { debuffTiles += renderBuffTile(negatives[ni].id, negatives[ni].data, true); } // Only render rows that have content — empty rows collapsed to avoid tooltip overlap issues var buffBar = positives.length > 0 ? '

' + buffTiles + '

' : ''; var debuffBar = negatives.length > 0 ? '

' + debuffTiles + '

' : ''; return '

' + buffBar + debuffBar + '

'; } const SKIN_CDN = ['light-pale-skin', 'medium-skin', 'tan-olive-skin', 'dark-brown-skin', 'ebony-dark-skin']; const HAIR_CDN = ['bald-no-hair', 'short-messy-black-hair', 'tall-mohawk-black-hair', 'long-black-hair-past-shoulders', 'black-hair-tied-ponytail', 'spiky-anime-black-hair']; const STUBBLE_CDN = ['clean-shaven-no-facial-hair', 'light-stubble-shadow', 'full-thick-beard', 'pointed-goatee-beard']; function buildCharUrl(skin, hair, stubble) { return '/cdn/sprite-cartoon-muscle-man-character-eeun4l2x.webp?modify=transparent-background-' + SKIN_CDN[skin || 0] + '-' + HAIR_CDN[hair || 0] + '-' + STUBBLE_CDN[stubble || 0]; } // ── Potion Flask SVG (S&S2 style — round bulb, narrow neck, cork) ── function renderBottle(prefix, current, max, type) { var pct = max > 0 ? Math.max(0, Math.min(100, (current / max) * 100)) : 0; // The bulb spans roughly y=30 to y=88. Fill rises from bottom of bulb. var bulbTop = 30; var bulbBot = 88; var bulbRange = bulbBot - bulbTop; var fillY = bulbBot - (pct / 100) * bulbRange; // Colors var liquidMain = type === 'health' ? '#9b1010' : '#102a80'; var liquidLight = type === 'health' ? '#d03030' : '#3068d0'; var liquidDark = type === 'health' ? '#5a0808' : '#0a1a50'; var bodyDark = type === 'health' ? '#3a0505' : '#050a2a'; var bodyMid = type === 'health' ? '#6a1010' : '#0c1850'; var shineColor = type === 'health' ? 'rgba(255,120,120,0.25)' : 'rgba(120,160,255,0.25)'; var label = type === 'health' ? 'HEALTH' : 'ENERGY'; return `

${current}/${max} ${label}

`; } // ── Gold Name Banner ──────────────────────────────────────── function renderNameBanner(name, extra) { return `

${name}

${extra ? `${extra}` : ''}

`; } // ── Shield Armour Display (matches potion size) ───────────── function renderShield(prefix, current, max) { var pct = max > 0 ? Math.max(0, Math.min(100, (current / max) * 100)) : 0; // Shield fill rises from bottom var shieldBot = 82; var shieldTop = 14; var range = shieldBot - shieldTop; var fillY = shieldBot - (pct / 100) * range; return `

${current}/${max} ARMOUR

`; } // ── Crowd Meter ───────────────────────────────────────────── function renderCrowdMeter(mood, label) { var m = Math.max(0, Math.min(100, mood)); var barColor = m < 30 ? '#888' : m < 60 ? '#d4a020' : '#c03020'; var barGlow = m < 30 ? 'none' : m < 60 ? '0 0 6px rgba(212,160,32,0.5)' : '0 0 8px rgba(192,48,32,0.6)'; return `

crowd: ${label || 'bored to tears'}

`; } // ── Hover-based Inspect Tabs (EXACT same pattern as buildTabsHtml in ui-dng-title.js) ── function buildFightTabsHtml(s, pStats, pLevel, enemy) { var slot = (s.dngSaveSlots || [])[s.dngActiveSlot] || {}; var st = slot.stats || pStats || { str:1, agi:1, atk:1, def:1, vit:1, cha:1, sta:1, mag:1 }; var lvl = slot.level || pLevel || 1; var hp = F.calcHP(lvl, st.vit || 1); var energy = F.calcMaxEnergy(st.sta || 1, lvl); var xp = slot.xp || 0; var xpNeeded = F.calcXpThreshold(lvl); var gold = slot.gold || 0; var charName = slot.name || (s.dngCharCreate || {}).name || 'Gladiator'; // Character sprite URL var cc = s.dngCharCreate || {}; var charUrl = buildCharUrl(cc.skin, cc.hair, cc.stubble); // Find equipped melee weapon from equipment array var equip = slot.equipment || []; var equippedMelee = null; var equippedRanged = null; for (var ei = 0; ei < equip.length; ei++) { if (equip[ei].category === 'bows') { if (!equippedRanged || equip[ei].dmgMax > equippedRanged.dmgMax) equippedRanged = equip[ei]; } else { if (!equippedMelee || equip[ei].dmgMax > equippedMelee.dmgMax) equippedMelee = equip[ei]; } } // Damage range — weapon + str bonus var weapMin = equippedMelee ? equippedMelee.dmgMin : 1; var weapMax = equippedMelee ? equippedMelee.dmgMax : 3; var dmgMin = weapMin + (st.str || 1) * 2; var dmgMax = weapMax + (st.str || 1) * 2; // Armour — sum all equipped armour piece values var totalArmour = 0; var playerArmourEquip = slot.armour || {}; var armourCats = Object.keys(playerArmourEquip); for (var ai = 0; ai < armourCats.length; ai++) { var armourPiece = playerArmourEquip[armourCats[ai]]; if (armourPiece && armourPiece.armour) { totalArmour += armourPiece.armour; } } var armorCur = totalArmour; var armorMax = totalArmour; // XP bar percentage var xpPct = xpNeeded === Infinity ? 100 : Math.min(100, Math.floor((xp / xpNeeded) * 100)); // Stats panel var statsPanel = `

${charName}

Level:${lvl}

Experience:

${xp} / ${xpNeeded === Infinity ? 'MAX' : xpNeeded}

Armour:${armorCur}/${armorMax}

Damage:${dmgMin}-${dmgMax}

HP:${hp}/${hp}

${gold} gold

${[ { label: 'Strength', val: st.str || 1 }, { label: 'Agility', val: st.agi || 1 }, { label: 'Attack', val: st.atk || 1 }, { label: 'Defence', val: st.def || 1 }, { label: 'Vitality', val: st.vit || 1 }, { label: 'Charisma', val: st.cha || 1 }, { label: 'Stamina', val: st.sta || 1 }, { label: 'Showmanship', val: st.mag || 1 }, ].map(function(s) { return '

' + s.label + ':' + s.val + '

'; }).join('')}

`; // Armour panel — use equipped weapons var dmgTypeMap = { swords: 'slashing', axes: 'chopping', maces: 'blunt', bows: 'ranged' }; // strBonus mirrors calcDamage() in dng-formulas.js: weaponRoll + STR (×1). var meleeWeapon = equippedMelee ? { name: equippedMelee.name, dmgMin: equippedMelee.dmgMin, dmgMax: equippedMelee.dmgMax, type: dmgTypeMap[equippedMelee.category] || 'bashing', strBonus: (st.str || 1), enchant: equippedMelee.enchantLevel > 0 ? ('Enchant +' + equippedMelee.enchantLevel) : 'Not enchanted' } : { name: 'Bare fists', dmgMin: 1, dmgMax: 3, type: 'bashing', strBonus: (st.str || 1), enchant: 'Not enchanted' }; var rangedWeapon = equippedRanged ? { name: equippedRanged.name, dmgMin: equippedRanged.dmgMin, dmgMax: equippedRanged.dmgMax, type: 'ranged', strBonus: (st.str || 1) * 2, enchant: equippedRanged.enchantLevel > 0 ? ('Enchant +' + equippedRanged.enchantLevel) : 'Not enchanted' } : null; var playerArmour = slot.armour || {}; var equipSlots = [ { label: 'Helmet', key: 'helmets' }, { label: 'Breastplate', key: 'breastplates' }, { label: 'Shoulderguards', key: 'shoulderguards' }, { label: 'Gauntlets', key: 'gauntlets' }, { label: 'Greaves', key: 'greaves' }, { label: 'Shinguards', key: 'shinguards' }, { label: 'Boots', key: 'boots' }, { label: 'Shield', key: 'shields' }, ].map(function(e) { var eq = playerArmour[e.key]; return { label: e.label, val: eq ? eq.name : 'None', armor: eq ? eq.armour : 0 }; }); var armourPanel = `

Your armour / weaponry

Melee Weapon:${meleeWeapon.name}

${meleeWeapon.dmgMin}-${meleeWeapon.dmgMax} ${meleeWeapon.type} +${meleeWeapon.strBonus} str dmg

${meleeWeapon.enchant}

Ranged Weapon:${rangedWeapon ? rangedWeapon.name : 'No ranged weapon'}

${rangedWeapon ? '

' + rangedWeapon.dmgMin + '-' + rangedWeapon.dmgMax + ' ' + rangedWeapon.type + ' +' + rangedWeapon.strBonus + ' str dmg

' + rangedWeapon.enchant + '

' : '

${equipSlots.map(function(e) { return '

' + e.label + ':' + e.val + ' ( ' + e.armor + ' )

'; }).join('')}

`; // Info panel (Fight Info — contextual to current fight) var enemyObj = enemy || {}; var enemyName = enemyObj.name || 'Unknown'; var fightMode = s.dngFightMode || 'duel'; var modeLabel = fightMode === 'tournament' ? 'Tournament' : fightMode === 'prison' ? 'Prison Fight' : 'Duel'; var days = slot.currentDay || 1; var wins = slot.wins || 0; var losses = slot.losses || 0; var infoPanel = `

Fight information

Opponent:${enemyName}

${enemyObj.level ? '

Enemy Level:' + enemyObj.level + '

' : ''}

Mode:${modeLabel}

${fightMode === 'tournament' ? (function() { var tFight = (s.dngTournamentCurrentFight || 0) + 1; var tTotal = (s.dngTournamentOpponents || []).length; var tNum = s.dngTournamentNum || 1; return '

Tournament:#' + tNum + '

' + '

Round:' + tFight + ' / ' + tTotal + '

'; })() : ''}

${days} day${days !== 1 ? 's' : ''} spent in the arena.

Battles: ${wins} wins / ${losses} losses.

Session score: ${slot.sessionScore || 0}

`; // Items panel var maxItemSlots = 2 + Math.floor((lvl) / 5); var itemsPanel = `

Your inventory

Your items will replenish after each fight

${Array.from({length: maxItemSlots}, function(_, i) { return '

' + (i + 1) + ': Nothing

'; }).join('')}

`; // Assemble: tab row + all four hover panels (EXACT same pattern as buildTabsHtml) return `

${['stats', 'armour', 'items', 'info'].map(function(tab) { var bg = 'background: linear-gradient(180deg, #e2b84a 0%, #c49525 50%, #a07818 100%);'; return '

'; }).join('')}

${statsPanel} ${armourPanel} ${itemsPanel} ${infoPanel}

`; } // ── Dust Particle ─────────────────────────────────────────── function dustParticles() { var dots = ''; for (var i = 0; i < 12; i++) { var left = (i * 8.3 + 3) % 100; var delay = (i * 0.7) % 4; var dur = 5 + (i % 3) * 2; var size = 2 + (i % 2); dots += `

`; } return dots; } // ── Action Button (image fills the circle, tooltip on hover) ── function actionBtn(iconUrl, actionName, title, flip, tooltipText) { var imgFlip = flip ? 'transform: scaleX(-1);' : ''; var tip = tooltipText || title; return ``; } // ── Inventory slots unlocked by level: 4,7,9,12,15,18 (max 6) ── var INVENTORY_UNLOCK_LEVELS = [4, 7, 9, 12, 15, 18]; function getMaxInventorySlots(level) { var count = 0; for (var i = 0; i < INVENTORY_UNLOCK_LEVELS.length; i++) { if (level >= INVENTORY_UNLOCK_LEVELS[i]) count++; } return count; } // ── Build a rich parchment-style tooltip for a spell ── function buildSpellTooltipHtml(spellInfo) { var name = spellInfo.name || 'Unknown Spell'; var desc = spellInfo.desc || ''; var descDetail = spellInfo.descDetail || ''; var type = spellInfo.type || ''; var typeLabel = type.charAt(0).toUpperCase() + type.slice(1); // Activation cost line var costLine = ''; if (spellInfo.activationCost) { var ac = spellInfo.activationCost; if (ac.stat === 'energy' && ac.drainAll) { costLine = 'Drains all energy (min ' + Math.round(ac.pct * 100) + '%)'; } else if (ac.stat === 'energy' && ac.pct > 0) { costLine = Math.round(ac.pct * 100) + '% energy'; } else if (ac.stat === 'health' && ac.pct > 0) { costLine = Math.round(ac.pct * 100) + '% health'; } else if (ac.stat === 'none') { costLine = 'No cost'; } } // Type badge color var typeColor = '#5a3d1a'; var typeBg = 'rgba(139,105,20,0.15)'; if (type === 'buff') { typeColor = '#2a6e2a'; typeBg = 'rgba(42,110,42,0.12)'; } else if (type === 'damage') { typeColor = '#8b2211'; typeBg = 'rgba(139,34,17,0.12)'; } else if (type === 'instant') { typeColor = '#2255aa'; typeBg = 'rgba(34,85,170,0.12)'; } var html = '

' // Arrow pointer (top, pointing up toward the icon) + '

' // Parchment card + '

' // Spell name + '

' + name + '

' // Type badge + '

' + typeLabel + '

' // Short desc + (desc ? '

' + desc + '

' : '') // Divider + (descDetail ? '

' : '') // Detailed desc + (descDetail ? '

' + descDetail + '

' : '') // Cost + (costLine ? '

' + '

' + 'Cost: ' + costLine + '

' : '') // Free action note + (spellInfo.freeAction ? '

✦ Does not end your turn

' : '') // Turns / charges + (spellInfo.turns ? '

Duration: ' + spellInfo.turns + ' turns

' : '') + (spellInfo.charges ? '

Attacks remaining: ' + spellInfo.charges + '

' : '') + '

' + '

'; return html; } // ── Build a simpler tooltip for potions / generic items ── function buildItemTooltipHtml(name, desc, qty) { var html = '

' // Arrow pointer (top, pointing up toward the icon) + '

' + '

' + name + '

' + (desc ? '

' + desc + '

' : '') + (qty > 1 ? '

Quantity: ' + qty + '

' : '') + '

' + '

'; return html; } // ── Build a tooltip row for the Items panel ── function buildItemPanelRow(it, slotNum) { var spellInfo = SPELL_MAP[it.id]; var name = it.name || 'Item'; var icon = it.sprite || '/cdn/sprite-painted-medium-red-health-potion-round-bottle-transparent.png'; var qty = it.qty !== undefined ? it.qty : 1; var descText = ''; if (spellInfo) { descText = spellInfo.desc || ''; var ac = spellInfo.activationCost; if (ac) { if (ac.stat === 'energy' && ac.drainAll) { descText += ' [Drains all energy]'; } else if (ac.stat === 'energy' && ac.pct > 0) { descText += ' [' + Math.round(ac.pct * 100) + '% energy]'; } else if (ac.stat === 'health' && ac.pct > 0) { descText += ' [' + Math.round(ac.pct * 100) + '% health]'; } else if (ac.stat === 'none') { descText += ' [No cost]'; } } } else if (it.type === 'healthPotion' && it.pct) { descText = 'Recover ' + Math.round(it.pct * 100) + '% health'; } else if (it.type === 'energyPotion' && it.pct) { descText = 'Recover ' + Math.round(it.pct * 100) + '% energy'; } else if (it.type === 'armourPotion' && it.pct) { descText = 'Recover ' + Math.round(it.pct * 100) + '% armour'; } return '

' + '

' + name + (qty > 1 ? ' x' + qty + '' : '') + '

' + (descText ? '

' + descText + '

' : '') + '

' + '

'; } // ── Render inventory item slots above action buttons (only filled ones) ── function renderInventorySlots(combat, playerCenterVw, zoomScale) { var inv = combat.combatInventory || []; // Filter to only filled slots var filled = []; for (var i = 0; i < inv.length; i++) { if (inv[i] && inv[i].id) filled.push({ item: inv[i], index: i }); } // Arrow counter (shown in bow mode, always below inventory area) var bowMode = combat.bowMode || false; var arrowCount = combat ? (combat.arrowCount || 0) : 0; var arrowHtml = ''; if (bowMode) { var arrowTopPct = 28; // fixed position where tooltips originally were arrowHtml = '

🏹 ' + arrowCount + '

'; } if (filled.length === 0) return arrowHtml; // Position above the action buttons — head tracking same as renderActionButtons var headAt100 = 30; var originY = 55; var headTopPct = originY + (headAt100 - originY) * (zoomScale || 1); var slotTopPct = headTopPct - 14; // above the action button area var slotSize = 48; var gap = 6; var totalW = filled.length * slotSize + (filled.length - 1) * gap; var html = '

'; for (var f = 0; f < filled.length; f++) { var it = filled[f].item; var idx = filled[f].index; var icon = it.sprite || '/cdn/sprite-painted-medium-red-health-potion-round-bottle-transparent.png'; var qty = it.qty !== undefined ? it.qty : 1; // Build tooltip text for the simple fallback tooltip var tipText = it.name || 'Item'; var spellInfo = SPELL_MAP[it.id]; // Build rich parchment tooltip HTML for spells var richTooltip = ''; if (spellInfo) { richTooltip = buildSpellTooltipHtml(spellInfo); } else { // Potion or generic item — build a simpler rich tooltip var potionDesc = ''; if (it.type === 'healthPotion' && it.pct) { potionDesc = 'Recover ' + Math.round(it.pct * 100) + '% health'; } else if (it.type === 'energyPotion' && it.pct) { potionDesc = 'Recover ' + Math.round(it.pct * 100) + '% energy'; } else if (it.type === 'armourPotion' && it.pct) { potionDesc = 'Recover ' + Math.round(it.pct * 100) + '% armour'; } richTooltip = buildItemTooltipHtml(it.name || 'Item', potionDesc, qty); } // Build simple tip text for fallback if (spellInfo && spellInfo.activationCost) { var ac = spellInfo.activationCost; if (ac.stat === 'energy' && ac.drainAll) { tipText += ' — Drains all energy (min ' + Math.round(ac.pct * 100) + '% energy)'; } else if (ac.stat === 'energy' && ac.pct > 0) { tipText += ' — Cost: ' + Math.round(ac.pct * 100) + '% energy'; } else if (ac.stat === 'health' && ac.pct > 0) { tipText += ' — Cost: ' + Math.round(ac.pct * 100) + '% health'; } else if (ac.stat === 'none') { tipText += ' — No cost'; } } else if (it.type === 'healthPotion' && it.pct) { tipText += ' — Recover ' + Math.round(it.pct * 100) + '% health'; } else if (it.type === 'energyPotion' && it.pct) { tipText += ' — Recover ' + Math.round(it.pct * 100) + '% energy'; } else if (it.type === 'armourPotion' && it.pct) { tipText += ' — Recover ' + Math.round(it.pct * 100) + '% armour'; } var isSpellSlot = (it.type === 'spell' || !!spellInfo); var spellLocked = isSpellSlot && (combat.spellCastThisTurn || !!combat.spellCastAnim); html += '

' + (spellLocked ? '' + richTooltip + '

'; } html += '

'; return arrowHtml + html; } // ── Action Button Groups ──────────────────────────────────── function renderActionButtons(playerCenterVw, distance, energyPct, pStats, eStats, enemyStunned, zoomScale, combat, pLevel) { // Calculate hit chances for attacks (+50% bonus when enemy is stunned) var stunBonus = (enemyStunned) ? 50 : 0; var baseHit = F.calcHitChance(pStats.atk || 1, eStats.def || 1); var quickHit = Math.min(100, Math.max(5, Math.round(baseHit + 25 + stunBonus))); var normalHit = Math.min(100, Math.max(5, Math.round(baseHit + stunBonus))); var powerHit = Math.min(100, Math.max(5, Math.round(baseHit - 25 + stunBonus))); // Taunt success: charisma-based (higher CHA = better crowd favor) var tauntDmgChance = Math.min(90, Math.max(10, Math.round(40 + (pStats.cha || 1) / 2))); var chargeTiles = F.calcMoveLunge(pStats.agi || 1); var chargeChance = Math.min(95, Math.max(5, Math.round(40 + (pStats.agi || 1) * 2))); // Apply poop debuff (-25% accuracy) to all hit chances var poopDebuffActive = (combat && combat.playerPoopDebuff > 0); if (poopDebuffActive) { quickHit = Math.max(5, Math.round(quickHit * 0.75)); normalHit = Math.max(5, Math.round(normalHit * 0.75)); powerHit = Math.max(5, Math.round(powerHit * 0.75)); chargeChance = Math.max(5, Math.round(chargeChance * 0.75)); } // Bow accuracy calculations var bowMode = combat && combat.bowMode; var arrowCount = combat ? (combat.arrowCount || 0) : 0; var snipeAcc = 0; var bombardAcc = 0; if (bowMode) { snipeAcc = F.calcBowAccuracy(pStats.agi || 1, eStats.agi || 1, distance, 15); bombardAcc = F.calcBowAccuracy(pStats.agi || 1, eStats.agi || 1, distance, -15); if (poopDebuffActive) { snipeAcc = Math.max(10, Math.round(snipeAcc * 0.75)); bombardAcc = Math.max(10, Math.round(bombardAcc * 0.75)); } } // Button groups flanking the player center (in vw units) var leftGroupVw = playerCenterVw - 6; var rightGroupVw = playerCenterVw + 6; // Clamp so buttons don't go off-screen if (leftGroupVw < 5) leftGroupVw = 5; if (rightGroupVw > 95) rightGroupVw = 95; var headAt100 = 30; var originY = 55; var headTopPct = originY + (headAt100 - originY) * (zoomScale || 1); var btnTopPct = headTopPct - 3; // ── Toggle button (weapon switch) ── var hasBow = combat && combat.playerHasBow && combat.arrowCount > 0; var switchBtn = ''; if (bowMode) { // In bow mode — show switch to melee button switchBtn = ``; } else if (hasBow) { // In melee mode with bow available — show switch to bow button switchBtn = ``; } // Arrow counter moved to renderInventorySlots // ── BOW MODE LAYOUTS ── if (bowMode) { var shoveDist = Math.floor(2 + ((pStats.str || 1) / 15)); if (distance > 2) { // Bow — Out of Range: left = jumpBack, walkBack, taunt/rest, winCrowd | right = bombard, walkFwd, snipe, switchMelee var bowThirdLeftFar = energyPct <= 50 ? actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-upper-body-shoulders-visible-zoomed-out-eyes-closed-sleeping-resting-big-ZZZ-text-black-outline-orange-figure-cream-white-background-round.png', 'rest', 'Rest', false, 'Recover energy') : actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-face-closeup-screaming-yelling-mouth-open-angry-orange-figure-cream-white-background-round.png', 'taunt', 'Taunt', false, 'Taunt ' + tauntDmgChance + '%'); var leftGroup = `

${pLevel >= 2 ? `

` : ''}

`; var rightGroup = `

${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-bow-arrow-arcing-overhead-shot-bombard-orange-figure-cream-white-background-round.png', 'bombard', 'Bombard', false, 'Bombard ' + bombardAcc + '%')} ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-stepping-walking-backward-left-orange-figure-cream-white-background-round.png', 'walkForward', 'Walk Forward', false, 'Walk Forward')} ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-bow-arrow-aimed-precise-snipe-shot-orange-figure-cream-white-background-round.png', 'snipe', 'Snipe', false, 'Snipe ' + snipeAcc + '%')}

${switchBtn}

`; return leftGroup + rightGroup; } else { // Bow — In Melee: left = jumpBack, walkBack, shove, winCrowd | right = jumpFwd, bash, taunt, switchMelee var leftGroup = `

${pLevel >= 2 ? `

` : ''}

`; var rightGroup = `

${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-leaping-jumping-backward-left-orange-figure-cream-white-background-round.png', 'jumpForward', 'Jump Forward', false, 'Jump Forward')} ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-bow-bash-smack-hit-close-range-orange-figure-cream-white-background-round.png', 'bash', 'Bash', false, 'Bash — always hits, knocks back')} ${energyPct <= 50 ? actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-upper-body-shoulders-visible-zoomed-out-eyes-closed-sleeping-resting-big-ZZZ-text-black-outline-orange-figure-cream-white-background-round.png', 'rest', 'Rest', false, 'Recover energy') : actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-face-closeup-screaming-yelling-mouth-open-angry-orange-figure-cream-white-background-round.png', 'taunt', 'Taunt', false, 'Taunt ' + tauntDmgChance + '%')}

${switchBtn}

`; return leftGroup + rightGroup; } } // ── MELEE MODE (original layout) ── // 3rd button on left: shove when close, rest at ≤50% energy, taunt otherwise var shoveDist = Math.floor(2 + ((pStats.str || 1) / 15)); var thirdLeftBtn; if (distance <= 2) { thirdLeftBtn = actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-two-hands-shoving-pushing-forward-orange-figure-cream-white-background-round.png', 'shove', 'Shove', false, 'Shove enemy backward'); } else if (energyPct <= 50) { thirdLeftBtn = actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-upper-body-shoulders-visible-zoomed-out-eyes-closed-sleeping-resting-big-ZZZ-text-black-outline-orange-figure-cream-white-background-round.png', 'rest', 'Rest', false, 'Recover energy'); } else { thirdLeftBtn = actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-face-closeup-screaming-yelling-mouth-open-angry-orange-figure-cream-white-background-round.png', 'taunt', 'Taunt', false, 'Taunt ' + tauntDmgChance + '%'); } // Left group: 3 buttons in arc, tilting right (rotate ~8deg) var leftGroup = `

${pLevel >= 2 ? `

` : ''}

`; // Right group: changes based on distance, tilting left (rotate ~-8deg) var rightButtons = ''; if (distance > 2) { // Movement phase — far apart rightButtons = ` ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-leaping-jumping-backward-left-orange-figure-cream-white-background-round.png', 'jumpForward', 'Jump Forward', false, 'Jump Forward')} ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-stepping-walking-backward-left-orange-figure-cream-white-background-round.png', 'walkForward', 'Walk Forward', false, 'Walk Forward')} ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-charging-lunging-running-forward-right-orange-figure-cream-white-background-round.png', 'charge', 'Charge', false, 'Charge ' + chargeChance + '%')} `; } else { // Attack phase — close enough to fight (top=power, mid=normal, bot=quick) rightButtons = ` ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-heavy-overhead-hammer-smash-power-attack-orange-figure-cream-white-background-round.png', 'powerAttack', 'Power Attack', false, 'Power Attack ' + powerHit + '%')} ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-sword-swing-normal-attack-orange-figure-cream-white-background-round.png', 'normalAttack', 'Normal Attack', false, 'Normal Attack ' + normalHit + '%')} ${actionBtn('/cdn/icon-retro-flash-game-cartoon-muscular-gladiator-man-quick-fast-dagger-slash-strike-orange-figure-cream-white-background-round.png', 'quickAttack', 'Quick Attack', false, 'Quick Attack ' + quickHit + '%')} `; } var rightGroup = `

${rightButtons}

${switchBtn ? '

' + switchBtn + '

' : ''}

`; return leftGroup + rightGroup; } // ════════════════════════════════════════════════════════════ // MAIN RENDER // ════════════════════════════════════════════════════════════ function renderFightScreen(localPlayer) { var s = localPlayer.state; var cc = s.dngCharCreate || {}; var enemy = s.dngEnemy || {}; var combat = s.dngCombat || {}; // Player data var playerName = cc.name || 'Nameless'; var pLevel = 1; var pStats = cc.stats || { str: 1, agi: 1, atk: 1, def: 1, vit: 1, cha: 1, sta: 1, mag: 1 }; var slot = s.dngActiveSlot; if (slot !== undefined && slot !== null && s.dngSaveSlots && s.dngSaveSlots[slot]) { pLevel = s.dngSaveSlots[slot].level || 1; pStats = s.dngSaveSlots[slot].stats || pStats; } var pHP = combat.playerHP !== undefined ? combat.playerHP : F.calcHP(pLevel, pStats.vit); var pMaxHP = combat.playerMaxHP !== undefined ? combat.playerMaxHP : F.calcHP(pLevel, pStats.vit); var pEn = combat.playerEnergy !== undefined ? combat.playerEnergy : F.calcMaxEnergy(pStats.sta); var pMaxEn = combat.playerMaxEnergy !== undefined ? combat.playerMaxEnergy : F.calcMaxEnergy(pStats.sta); var pArm = combat.playerArmour !== undefined ? combat.playerArmour : 0; var pMaxArm = combat.playerMaxArmour !== undefined ? combat.playerMaxArmour : 0; // Enemy data var enemyName = enemy.name || 'Unknown'; var eStats = enemy.stats || { str: 1, agi: 1, atk: 1, def: 1, vit: 1, cha: 1, sta: 1, mag: 1 }; var eLevel = enemy.level || 1; var eHP = combat.enemyHP !== undefined ? combat.enemyHP : F.calcHP(eLevel, eStats.vit); var eMaxHP = combat.enemyMaxHP !== undefined ? combat.enemyMaxHP : F.calcHP(eLevel, eStats.vit); var eEn = combat.enemyEnergy !== undefined ? combat.enemyEnergy : F.calcMaxEnergy(eStats.sta); var eMaxEn = combat.enemyMaxEnergy !== undefined ? combat.enemyMaxEnergy : F.calcMaxEnergy(eStats.sta); var eArm = combat.enemyArmour !== undefined ? combat.enemyArmour : 0; var eMaxArm = combat.enemyMaxArmour !== undefined ? combat.enemyMaxArmour : 0; var message = combat.message || 'Kill the enemy to win.'; var crowdMood = combat.crowdMood !== undefined ? combat.crowdMood : 10; var crowdLabel = combat.crowdLabel || 'bored to tears'; var isPrison = combat.arenaType === 'prison'; // ── Damage popup ── var popup = combat.damagePopup || null; // { type: 'normal'|'critical'|'grievous'|'block'|'miss', value: number, target: 'player'|'enemy' } // ── Tile positions & distance ── var playerPos = combat.playerPos !== undefined ? combat.playerPos : 3; var enemyPos = combat.enemyPos !== undefined ? combat.enemyPos : 17; var distance = Math.abs(enemyPos - playerPos); // ═══════════════════════════════════════════════════════════ // S&S2-ACCURATE PARALLAX SCROLLING + DISTANCE ZOOM // ═══════════════════════════════════════════════════════════ // Arena is 0–20 tiles. Tile 10 = center. Each tile = 1 unit. // // HOW IT WORKS (from S&S2 reference): // 1. Camera locks to midpoint between both fighters. // 2. Characters are offset FROM SCREEN CENTER based on their distance to camera. // 3. Background layers parallax-scroll based on camera world position. // Floor = 100%, Walls/crowd = 50%, Sky = 15%. // 4. When distance > 8, everything zooms out: scale = 8/distance (min 35%). // 5. At arena edges (tile <=2 or >=18), floor stops scrolling and // character walks toward screen edge ("trapped" feeling). // 6. HUD (orbs, buttons, crowd meter) NEVER zooms — stays 100% on top. // ── Charge animation state ── var chargeAnim = combat.chargeAnim || null; var chargePhase = chargeAnim ? chargeAnim.phase : null; // ── Enemy charge animation state ── var enemyChargeAnim = combat.enemyChargeAnim || null; var enemyChargePhase = enemyChargeAnim ? enemyChargeAnim.phase : null; // ── Walk animation state ── var walkAnim = combat.walkAnim || null; var walkWho = walkAnim ? walkAnim.who : null; // 'player' or 'enemy' // Effective player tile for visual positioning var visualPlayerPos = playerPos; var chargeStartPos = 0; var chargeEndPos = 0; if (chargeAnim) { chargeStartPos = chargeAnim.startPos || playerPos; chargeEndPos = chargeAnim.endPos || playerPos; if (chargePhase === 'birth') visualPlayerPos = chargeStartPos; if (chargePhase === 'drag') visualPlayerPos = chargeStartPos; // CSS animates the slide if (chargePhase === 'bump' || chargePhase === 'yeet') visualPlayerPos = chargeEndPos; } // During walk anim, player stays at startPos visually — CSS slides them if (walkAnim && walkWho === 'player') { visualPlayerPos = walkAnim.startPos; } // Effective enemy tile for visual positioning var visualEnemyPos = enemyPos; var enemyChargeStartPos = 0; var enemyChargeEndPos = 0; if (enemyChargeAnim) { enemyChargeStartPos = enemyChargeAnim.startPos || enemyPos; enemyChargeEndPos = enemyChargeAnim.endPos || enemyPos; if (enemyChargePhase === 'birth') visualEnemyPos = enemyChargeStartPos; if (enemyChargePhase === 'drag') visualEnemyPos = enemyChargeStartPos; // CSS animates the slide if (enemyChargePhase === 'bump' || enemyChargePhase === 'yeet') visualEnemyPos = enemyChargeEndPos; } if (walkAnim && walkWho === 'enemy') { visualEnemyPos = walkAnim.startPos; } // ── Camera midpoint (in tile units, 0-20 range) ── // During charge, lock camera to end position so drag→bump→yeet has no camera jumps var camMidPlayer = visualPlayerPos; var camMidEnemy = visualEnemyPos; if (chargeAnim) camMidPlayer = chargeEndPos; if (enemyChargeAnim) camMidEnemy = enemyChargeEndPos; // During walk/jump anim, use pre-calculated final positions for both fighters if (walkAnim) { camMidPlayer = walkAnim.camPlayerPos !== undefined ? walkAnim.camPlayerPos : (walkWho === 'player' ? walkAnim.endPos : playerPos); camMidEnemy = walkAnim.camEnemyPos !== undefined ? walkAnim.camEnemyPos : (walkWho === 'enemy' ? walkAnim.endPos : enemyPos); } var camPos = (camMidPlayer + camMidEnemy) / 2; // midpoint between both fighters // Soft-clamp camera to arena range (allow up to tile 3 and 17 visible area) if (camPos < 4) camPos = 4; if (camPos > 16) camPos = 16; // ── Distance-based zoom ── var dist = Math.abs(visualEnemyPos - visualPlayerPos); if (chargeAnim) dist = Math.abs(enemyPos - chargeEndPos); if (enemyChargeAnim) dist = Math.abs(playerPos - enemyChargeEndPos); if (walkAnim) dist = Math.abs((walkWho === 'enemy' ? walkAnim.endPos : enemyPos) - (walkWho === 'player' ? walkAnim.endPos : playerPos)); var distance = Math.abs(enemyPos - playerPos); // for HUD display // Zoom: exact scale table from S&S2 reference // 8 tiles = 100%, 12 = 69%, 16 = 45%, 24 = 30% var zoomScale = 1.0; if (dist > 8) { if (dist <= 12) { // Lerp 100% → 69% over distance 8→12 zoomScale = 1.0 + (dist - 8) * (0.69 - 1.0) / (12 - 8); } else if (dist <= 16) { // Lerp 69% → 45% over distance 12→16 zoomScale = 0.69 + (dist - 12) * (0.45 - 0.69) / (16 - 12); } else { // Lerp 45% → 30% over distance 16→24 zoomScale = 0.45 + (dist - 16) * (0.30 - 0.45) / (24 - 16); if (zoomScale < 0.30) zoomScale = 0.30; } } // ── Character positions relative to screen center ── // TILE_VW: how many viewport-widths per tile at 100% zoom // Higher = more spacing = more scrolling feel var TILE_VW = 5; // vw per tile at 100% zoom // At 100% zoom, characters and parallax computed normally. // The outer scene container applies CSS scale(zoomScale) from center, // so all individual sizes/offsets are computed AT 100% ZOOM. var playerOffsetVw = (visualPlayerPos - camPos) * TILE_VW; var enemyOffsetVw = (visualEnemyPos - camPos) * TILE_VW; // Screen center = 50vw. Character size at 100% zoom (container scales it) var charWidthVw = 10; var charHeightPct = 42; var playerScreenVw = 50 + playerOffsetVw - (charWidthVw / 2); var enemyScreenVw = 50 + enemyOffsetVw - (charWidthVw / 2); // ── HUD positions (outside the zoom container, need zoom-adjusted coords) ── var hudPlayerOffsetVw = playerOffsetVw * zoomScale; var hudCharWidthVw = charWidthVw * zoomScale; var hudCharHeightPct = charHeightPct * zoomScale; var hudPlayerScreenVw = 50 + hudPlayerOffsetVw - (hudCharWidthVw / 2); // ── Damage popup anchors (stage-aware so wrapper zoom doesn't over-scale them) ── var charBaseBottomPct = 30; var popupHeadBottomPct = charBaseBottomPct + charHeightPct * 0.62; var popupBurstBottom = stagePercentOffset(popupHeadBottomPct, -3.2); var popupBannerBottom = stagePercentOffset(popupHeadBottomPct, 0.8); var popupRestBottom = stagePercentOffset(popupHeadBottomPct, 0.4); var popupBlockBottom = stagePercentOffset(popupHeadBottomPct, 1.8); var popupGrievousBottom = stagePercentOffset(popupHeadBottomPct, 3.0); // ── Charge drag distance in vw (for CSS animation) ── // ── Quick attack projectile distance ── var projDistVw = enemyScreenVw - playerScreenVw - charWidthVw; var chargeDragDistVw = 0; if (chargeAnim) { chargeDragDistVw = (chargeEndPos - chargeStartPos) * TILE_VW; } var enemyChargeDragDistVw = 0; if (enemyChargeAnim) { enemyChargeDragDistVw = (enemyChargeEndPos - enemyChargeStartPos) * TILE_VW; } // ── Walk slide distance in vw (for CSS animation) ── var walkSlideDistVw = 0; if (walkAnim) { walkSlideDistVw = (walkAnim.endPos - walkAnim.startPos) * TILE_VW; } // ── Parallax offsets (all at 100% zoom — container scales everything) ── var camWorldOffset = camPos - 10; var floorScrollVw = -camWorldOffset * TILE_VW * 1.0; var midScrollVw = -camWorldOffset * TILE_VW * 0.5; var bgScrollVw = -camWorldOffset * TILE_VW * 0.15; var pillarScrollVw = -camWorldOffset * TILE_VW * 0.75; var skySunScrollVw = -camWorldOffset * TILE_VW * 0.06; var skyFarScrollVw = -camWorldOffset * TILE_VW * 0.08; var skyMidScrollVw = -camWorldOffset * TILE_VW * 0.12; var skyNearScrollVw = -camWorldOffset * TILE_VW * 0.18; var skyFarLayer = renderSkyCloudLayer(skyFarScrollVw, 2, 18, 0.42, 8, [ [220, 150, 120, 32], [330, 128, 108, 38], [440, 152, 122, 34], [860, 132, 126, 34], [975, 112, 110, 38], [1090, 136, 122, 34], [1520, 146, 140, 36], [1655, 122, 126, 42], [1795, 148, 138, 36], [2200, 138, 130, 34], [2320, 116, 116, 40], [2440, 142, 132, 34], [2860, 152, 122, 32], [2975, 130, 108, 36], [3085, 154, 120, 32] ]); var skyMidLayer = renderSkyCloudLayer(skyMidScrollVw, 7, 22, 0.58, 5, [ [140, 156, 148, 38], [280, 126, 132, 46], [432, 158, 150, 38], [760, 142, 154, 40], [920, 116, 138, 48], [1080, 146, 156, 40], [1440, 162, 166, 42], [1612, 130, 150, 52], [1788, 166, 168, 42], [2140, 150, 154, 40], [2290, 120, 138, 48], [2450, 154, 156, 40], [2780, 160, 142, 38], [2920, 134, 126, 44], [3060, 164, 144, 38] ]); var skyNearLayer = renderSkyCloudLayer(skyNearScrollVw, 14, 20, 0.74, 2, [ [360, 150, 174, 46], [540, 118, 152, 54], [720, 154, 176, 46], [1140, 146, 182, 48], [1330, 114, 160, 58], [1520, 150, 184, 48], [1840, 158, 168, 44], [2010, 126, 150, 54], [2190, 162, 170, 44], [2460, 150, 178, 46], [2645, 116, 156, 56], [2830, 154, 180, 46], [3005, 162, 144, 40], [3110, 136, 126, 48], [3190, 164, 138, 40] ]); // ── Spike positions (at 100% zoom) ── var leftSpikeVw = 50 + (0 - camPos) * TILE_VW; var rightSpikeVw = 50 + (20 - camPos) * TILE_VW; var spikeWidthVw = 4; var spikeHeightPct = 45; // Character sprites var playerImg = buildCharUrl(cc.skin, cc.hair, cc.stubble); var enemyImg = enemy.customSprite || buildCharUrl(enemy.skin, enemy.hair, enemy.stubble); // Strength scale only applies in creation screen, fight screen uses flat 1.0 var pStrScale = 1; var eStrScale = 1; var isCena = playerName.toLowerCase().replace(/\s+/g, '') === 'johncena'; // Turn indicator var turn = combat.turn || 'player'; var turnLabel = turn === 'player' ? (chargePhase ? 'CHARGING!' : 'Your turn') : "Enemy's turn"; // ── Screen shake intensity based on attack phase ── var shakeAnim = ''; if (combat.phase === 'quickAtkAnim' || combat.phase === 'enemyQuickAtkAnim') { shakeAnim = 'animation: dng-shake-light 0.35s ease-out;'; } else if (combat.phase === 'normalAtkAnim' || combat.phase === 'enemyAtkAnim') { shakeAnim = 'animation: dng-shake-medium 0.4s ease-out;'; } else if (combat.phase === 'powerAtkAnim' || combat.phase === 'enemyPowerAtkAnim') { shakeAnim = 'animation: dng-shake-heavy 0.5s ease-out;'; } // ── Hit flash: player attacks → enemy flashes, enemy attacks → player flashes ── var playerHitFlash = (combat.phase === 'enemyAtkAnim' || combat.phase === 'enemyQuickAtkAnim' || combat.phase === 'enemyPowerAtkAnim'); var enemyHitFlash = (combat.phase === 'quickAtkAnim' || combat.phase === 'normalAtkAnim' || combat.phase === 'powerAtkAnim'); // ── Damage number color coding ── var dmgNumColor = '#fff'; var dmgNumShadow = '2px 2px 0 #000, -1px -1px 0 #600, 0 0 10px rgba(255,0,0,0.6)'; if (popup) { if (popup.type === 'miss') { dmgNumColor = '#aaa'; dmgNumShadow = '2px 2px 0 #333, -1px -1px 0 #444, 0 0 8px rgba(0,0,0,0.6)'; } else if (popup.type === 'block') { dmgNumColor = '#8ec8e8'; dmgNumShadow = '2px 2px 0 #234, -1px -1px 0 #345, 0 0 10px rgba(100,160,220,0.6)'; } else if (popup.type === 'grievous') { dmgNumColor = '#8b0000'; dmgNumShadow = '2px 2px 0 #200, -1px -1px 0 #400, 0 0 14px rgba(139,0,0,0.8), 0 0 25px rgba(100,0,0,0.5)'; } else if (popup.type === 'critical') { dmgNumColor = '#ffd700'; dmgNumShadow = '2px 2px 0 #500, -1px -1px 0 #800, 0 0 12px rgba(255,200,0,0.8)'; } else if (popup.type === 'normal' && (popup.value || 0) >= 30) { dmgNumColor = '#ffc040'; dmgNumShadow = '2px 2px 0 #530, -1px -1px 0 #740, 0 0 10px rgba(255,180,0,0.6)'; } } return `

${skyFarLayer} ${skyMidLayer} ${skyNearLayer}

${isPrison ? `

` : `

${dustParticles()} ${(combat.poopTiles && combat.poopTiles.length > 0) ? combat.poopTiles.map(function(pt) { var poopTile = pt.tile; var poopScreenVw = 50 + ((poopTile - camPos) * TILE_VW * zoomScale) - 1.5; return '

💩

'; }).join('') : ''}

${combat.playerEnchantType ? (() => { var aType = combat.playerEnchantType; var aLvl = combat.playerEnchantLevel || 0; var flameColors = { fire: ['#ff5500', '#ff8822', '#ffcc44'], flame: ['#ff5500', '#ff8822', '#ffcc44'], ice: ['#2288ff', '#55bbff', '#aaddff'], frost: ['#2288ff', '#55bbff', '#aaddff'], poison: ['#22bb11', '#55dd33', '#99ff66'], toxic: ['#22bb11', '#55dd33', '#99ff66'], wraith: ['#8833ff', '#aa66ff', '#ddaaff'], lightning: ['#ddaa00', '#ffcc22', '#ffee88'] }; var fc = flameColors[aType] || flameColors.fire; var flameCount = aLvl === 0 ? 4 : aLvl === 1 ? 7 : 11; var maxSize = aLvl === 0 ? 14 : aLvl === 1 ? 18 : 24; var minSize = aLvl === 0 ? 8 : aLvl === 1 ? 10 : 12; var html = '

'; var positions = [15, 25, 35, 45, 55, 65, 75, 20, 40, 60, 50]; var anims = ['dng-aura-flame1', 'dng-aura-flame2', 'dng-aura-flame3']; var durations = ['1.2s', '1.5s', '1.0s', '1.3s', '1.6s', '1.1s', '1.4s', '1.7s', '0.9s', '1.25s', '1.35s']; var delays = ['0s', '0.3s', '0.6s', '0.15s', '0.45s', '0.75s', '0.2s', '0.5s', '0.1s', '0.35s', '0.55s']; for (var fi = 0; fi < flameCount; fi++) { var sz = minSize + (fi % 3) * ((maxSize - minSize) / 2); var ci = fi % 3; var ai = fi % 3; var bottomOff = 10 + (fi % 4) * 18; html += ''; } html += '

'; return html; })() : ''} ${(combat.elementalEffect && combat.elementalEffect.target === 'player') ? (() => { var efType = combat.elementalEffect.type; if (efType === 'fire' || efType === 'flame') { return '

' + '' + '

'; } else if (efType === 'ice' || efType === 'frost') { return '

' + '

'; } else if (efType === 'poison' || efType === 'toxic') { return '

' + '

'; } else if (efType === 'wraith') { return '

' + '

'; } else if (efType === 'lightning') { return '

' + '

'; } else { return ''; } })() : ''} ${combat.potionEffect ? (() => { var pe = combat.potionEffect; var peType = pe.type || 'health'; var peVal = pe.value || 0; var potCfg = { health: { label: 'HEALTH', color: '#ff2222', glow: 'rgba(255,50,50,0.7)', text: '#ffffff', heart: '#ff2222', heartStroke: '#cc0000', sign: '+' }, energy: { label: 'ENERGY', color: '#3388ff', glow: 'rgba(50,130,255,0.7)', text: '#ffffff', heart: '#3388ff', heartStroke: '#1155cc', sign: '+' }, armour: { label: 'ARMOUR', color: '#ffbb00', glow: 'rgba(255,200,0,0.7)', text: '#ffffff', heart: '#ffbb00', heartStroke: '#cc8800', sign: '+' }, nonsense: { label: 'NONSENSE', color: '#aa44ff', glow: 'rgba(170,68,255,0.7)', text: '#ffffff', heart: '#aa44ff', heartStroke: '#7722cc', sign: '~' } }; var cfg = potCfg[peType] || potCfg.health; var iconSvg = ''; if (peType === 'health') { iconSvg = ''; } else if (peType === 'energy') { iconSvg = ''; } else if (peType === 'armour') { iconSvg = ''; } else if (peType === 'nonsense') { iconSvg = ''; } var popupText = ''; if (peType === 'nonsense') { popupText = '!!!'; } else { var potDigits = String(peVal).length; var potFontSize = potDigits >= 4 ? 'clamp(14px, 2.2vw, 3.5vw)' : potDigits >= 3 ? 'clamp(16px, 2.8vw, 4vw)' : 'clamp(18px, 3.5vw, 5vw)'; popupText = '' + cfg.sign + ' ' + peVal + ''; } return '

' + '

' + cfg.label + '

' + '

' + iconSvg + '

' + popupText + '

' + '

'; })() : ''} ${combat.phase === 'tauntAnim' ? `

` : ''} ${combat.phase === 'fartAnim' ? `

` : ''} ${combat.phase === 'poopAnim' ? `

💩

` : ''} ${(combat.poopStepPopup && combat.poopStepPopup.target === 'player') ? `

Bad luck!

-25% accuracy

` : ''} ${(chargeAnim && chargePhase !== 'yeet') ? `

` : ''} ${combat.phase === 'stunned' || combat.phase === 'stunAutoSkip' ? `

${combat.phase === 'stunned' ? `

` : ''}

★ STUNNED ★

` : ''}

${(chargeAnim && chargePhase === 'yeet') ? `

` : ''}

${(combat.elementalEffect && combat.elementalEffect.target === 'enemy') ? (() => { var efType = combat.elementalEffect.type; if (efType === 'fire' || efType === 'flame') { return '

' + '' + '

'; } else if (efType === 'ice' || efType === 'frost') { return '

' + '

'; } else if (efType === 'poison' || efType === 'toxic') { return '

' + '

'; } else if (efType === 'wraith') { return '

' + '

'; } else if (efType === 'lightning') { return '

' + '

'; } else { return ''; } })() : ''} ${combat.phase === 'enemyTauntAnim' ? `

` : ''} ${(combat.poopStepPopup && combat.poopStepPopup.target === 'enemy') ? `

Bad luck!

-25% accuracy

` : ''} ${(combat.enemyStunned || combat.enemyWasStunned) ? `

★ STUNNED ★

` : ''} ${(enemyChargeAnim && enemyChargePhase !== 'yeet') ? `

` : ''}

${(enemyChargeAnim && enemyChargePhase === 'yeet') ? `

` : ''} ${popup ? (() => { var pTick = popup.tick || 0; var popupX = popup.target === 'enemy' ? enemyScreenVw + charWidthVw / 2 : playerScreenVw + charWidthVw / 2; var burstSvg = ''; var shieldSvg = ''; var shieldBreakSvg = ''; if (popup.type === 'elemental') { var eType = popup.elemType || 'fire'; var elemColors = { fire: { fill: '#ff4400', stroke: '#ff8800', glow: 'rgba(255,100,0,0.8)', num: '#fff', shadow: '2px 2px 0 #600, 0 0 12px rgba(255,100,0,0.8)', label: 'FIRE', bannerBg: 'linear-gradient(180deg,#aa3300,#551100)', bannerBorder: '#ff6600' }, flame: { fill: '#ff4400', stroke: '#ff8800', glow: 'rgba(255,100,0,0.8)', num: '#fff', shadow: '2px 2px 0 #600, 0 0 12px rgba(255,100,0,0.8)', label: 'FLAME', bannerBg: 'linear-gradient(180deg,#aa3300,#551100)', bannerBorder: '#ff6600' }, ice: { fill: '#44aaff', stroke: '#88ddff', glow: 'rgba(80,180,255,0.8)', num: '#fff', shadow: '2px 2px 0 #034, 0 0 12px rgba(80,180,255,0.8)', label: 'ICE', bannerBg: 'linear-gradient(180deg,#1a4488,#0a2244)', bannerBorder: '#44aaff' }, frost: { fill: '#44aaff', stroke: '#88ddff', glow: 'rgba(80,180,255,0.8)', num: '#fff', shadow: '2px 2px 0 #034, 0 0 12px rgba(80,180,255,0.8)', label: 'FROST', bannerBg: 'linear-gradient(180deg,#1a4488,#0a2244)', bannerBorder: '#44aaff' }, poison: { fill: '#44cc22', stroke: '#88ee44', glow: 'rgba(80,220,40,0.8)', num: '#fff', shadow: '2px 2px 0 #140, 0 0 12px rgba(80,220,40,0.8)', label: 'POISON', bannerBg: 'linear-gradient(180deg,#225500,#112200)', bannerBorder: '#44cc22' }, toxic: { fill: '#44cc22', stroke: '#88ee44', glow: 'rgba(80,220,40,0.8)', num: '#fff', shadow: '2px 2px 0 #140, 0 0 12px rgba(80,220,40,0.8)', label: 'TOXIC', bannerBg: 'linear-gradient(180deg,#225500,#112200)', bannerBorder: '#44cc22' }, wraith: { fill: '#aa55ff', stroke: '#cc88ff', glow: 'rgba(170,85,255,0.8)', num: '#fff', shadow: '2px 2px 0 #304, 0 0 12px rgba(170,85,255,0.8)', label: 'WRAITH', bannerBg: 'linear-gradient(180deg,#442288,#220044)', bannerBorder: '#aa55ff' }, lightning: { fill: '#ffdd00', stroke: '#ffee66', glow: 'rgba(255,220,0,0.8)', num: '#fff', shadow: '2px 2px 0 #440, 0 0 12px rgba(255,220,0,0.8)', label: 'LIGHTNING', bannerBg: 'linear-gradient(180deg,#665500,#332200)', bannerBorder: '#ffdd00' } }; var ec = elemColors[eType] || elemColors.fire; // Elemental burst SVG — unique shapes per type, 200x240 viewBox for generous number space var elemSvg = ''; if (eType === 'fire' || eType === 'flame') { elemSvg = ''; } else if (eType === 'ice' || eType === 'frost') { elemSvg = ''; } else if (eType === 'poison' || eType === 'toxic') { elemSvg = ''; } else if (eType === 'wraith') { elemSvg = ''; } else if (eType === 'lightning') { elemSvg = ''; } else { elemSvg = ''; } var elemBanner = '

' + '

' + '' + ec.label + '' + '

' + '

'; var elemBurstW = stageClampPx(92, 132, 160); var elemBurstH = stageClampPx(108, 160, 192); var elemBurst = '

' + elemSvg + '

' + (() => { var ed = String(popup.value || 0).length; var efs = ed >= 5 ? stageClampPx(14, 20, 24) : ed >= 4 ? stageClampPx(16, 24, 28) : ed >= 3 ? stageClampPx(18, 28, 32) : stageClampPx(20, 34, 38); return '' + (popup.value || 0) + ''; })() + '

' + '

'; return elemBanner + elemBurst; } if (popup.type === 'rest') { return '

' + '

' + 'ZZZ' + (() => { var rv = String(popup.value || 0); var rd = rv.length; var rfs = rd >= 4 ? stageClampPx(13, 20, 24) : rd >= 3 ? stageClampPx(15, 24, 28) : stageClampPx(16, 28, 32); return '+' + rv + ' ⚡'; })() + '

' + '

'; } if (popup.type === 'miss') { return '

' + '

MISS

' + '

'; } if (popup.type === 'block') { return '

' + '

' + '🛡' + 'BLOCK' + '🛡' + '

' + '

'; } var bannerHtml = ''; if (popup.type === 'critical') { bannerHtml = '

' + '

' + '💀' + 'CRITICAL' + '💀' + '

' + '

'; } if (popup.type === 'grievous') { bannerHtml = '

' + '

' + '💀' + 'GRIEVOUS' + '💀' + '

' + '

'; } var burstHtml = (popup.type !== 'block' && popup.type !== 'miss') ? (() => { var aHit = popup.armorHit || null; var isShield = aHit === 'shieldOnly' || aHit === 'shieldBreak'; var chosenSvg = isShield ? (aHit === 'shieldBreak' ? shieldBreakSvg : shieldSvg) : burstSvg; var shieldNumColor = aHit === 'shieldOnly' ? '#d0ddf0' : (aHit === 'shieldBreak' ? '#ffd080' : dmgNumColor); var shieldNumShadow = aHit === 'shieldOnly' ? '2px 2px 0 #1a2a40, -1px -1px 0 #2a3a55, 0 0 10px rgba(100,150,220,0.7)' : (aHit === 'shieldBreak' ? '2px 2px 0 #3a1a00, -1px -1px 0 #5a3000, 0 0 10px rgba(220,120,40,0.7)' : dmgNumShadow); var numFont = isShield ? 'Georgia, serif' : 'Impact, sans-serif'; var popW = isShield ? stageClampPx(60, 112, 138) : stageClampPx(68, 126, 148); var popH = isShield ? stageClampPx(72, 126, 154) : stageClampPx(72, 134, 160); var numOff = isShield ? 'top:42%; left:50%; transform:translate(-50%,-50%);' : 'inset:0; display:flex; align-items:center; justify-content:center;'; var dmgDigits = String(popup.value || 0).length; var dmgFontSize = dmgDigits >= 5 ? stageClampPx(12, 18, 24) : dmgDigits >= 4 ? stageClampPx(14, 22, 28) : dmgDigits >= 3 ? stageClampPx(15, 26, 32) : stageClampPx(18, 36, 46); return '

' + chosenSvg + '

' + '' + (popup.value || 0) + '' + '

' + '

'; })() : ''; return bannerHtml + burstHtml; })() : ''}

${(combat.phase === 'chargeAnim' || combat.phase === 'enemyChargeAnim') ? `

${chargePhase === 'birth' ? '...' : chargePhase === 'drag' ? 'CHAAARGE!' : chargePhase === 'bump' ? 'HYAAA!' : chargePhase === 'yeet' ? '💨' : '...'}

` : (combat.turn === 'player' && (combat.phase === 'move' || combat.phase === 'attack')) ? renderInventorySlots(combat, 50 + hudPlayerOffsetVw, zoomScale) + renderActionButtons(50 + hudPlayerOffsetVw, distance, pMaxEn > 0 ? Math.round((pEn / pMaxEn) * 100) : 100, pStats, eStats, combat.enemyStunned || combat.enemyWasStunned, zoomScale, combat, pLevel) : ` `} ${s.dngAbilitiesOpen === true ? `

⚔ ABILITIES

Walk — Move forward or back

Jump — Leap a distance (AGI-based)

Charge — Rush across the arena and strike

Quick Atk — Fast hit, high accuracy, low damage

Normal Atk — Balanced hit and damage

Power Atk — Heavy hit, low accuracy, high damage

Shove — Push enemy back (STR-based)

Taunt — 3 effects: psychic dmg, push, or stun

Rest — Recover energy, skip your turn

Click abilities with your mouse to act

` : ` `}

${message.length > 80 ? message.slice(message.lastIndexOf(' — ') > 0 ? message.lastIndexOf(' — ') + 3 : 0) : message}

${!isPrison ? `

${buildFightTabsHtml(s, pStats, pLevel, enemy)}

CROWD

${renderCrowdMeter(crowdMood, crowdLabel)}

` : ''}

${renderSpellCastOverlay(combat)}

${renderBottle('p-en', pEn, pMaxEn, 'energy')} ${renderBottle('p-hp', pHP, pMaxHP, 'health')} ${renderShield('p-arm', pArm, pMaxArm)}

${renderBuffBars(combat)}

${playerName}

${renderBuffBars(combat, 'enemyBuffs')}

${renderShield('e-arm', eArm, eMaxArm)} ${renderBottle('e-hp', eHP, eMaxHP, 'health')} ${renderBottle('e-en', eEn, eMaxEn, 'energy')}

${enemyName}

${combat.phase === 'victory' && combat.goldEarned !== undefined && s.dngTournamentPhase !== 'celebration' ? (() => { var slots = s.dngSaveSlots || []; var saveSlot = slots[s.dngActiveSlot] || {}; var lvl = saveSlot.level || 1; var xpThreshold = lvl <= 1 ? 125 : 60 * lvl * lvl * lvl; var currentXP = saveSlot.xp || 0; var xpPct = combat.leveledUp ? 100 : Math.min(100, Math.round((currentXP / xpThreshold) * 100)); return `

VICTORY!

Gold Earned: ${combat.goldEarned}

XP Earned: ${combat.xpEarned || 0}

XP: ${currentXP} / ${xpThreshold}

${combat.leveledUp ? `

YOU HAVE LEVELLED UP TO ✨ LEVEL ${combat.newLevel || lvl} ! ✨

` : ''}

`; })() : ''} ${combat.phase === 'defeat' ? (() => { var tp = combat.tournamentPenalty; if (tp && tp.deleted) { // CHARACTER PERMANENTLY DELETED return `

💀

YOUR GLADIATOR

HAS FALLEN FOREVER

Three strikes. The arena claims another soul.
This character has been permanently deleted.

☠️ 3 / 3 STRIKES — DEATH

`; } else if (tp) { // TOURNAMENT DEFEAT WITH PENALTIES return `

DEFEAT

The tournament exacts its toll...

${tp.levelsLost > 0 ? '📉 Lost ' + tp.levelsLost + ' level' + (tp.levelsLost > 1 ? 's' : '') + ' → Now Level ' + tp.newLevel : '📉 Already at minimum level'}

💰 Lost ${tp.goldLost} gold → 0 gold

${tp.freeDeath ? '🛡️ First death is free — stuff happens, it\'s an RNG game after all' : '☠️ Strike ' + tp.newStrikes + ' / 3' + (tp.newStrikes === 2 ? '⚠ ONE STRIKE FROM DEATH' : '')}

`; } else { // NORMAL DEFEAT (duel) return `

DEFEAT

Better luck next time, gladiator.

`; } })() : ''}

`; } module.exports = { renderFightScreen };

Spawn