// scripts/lib/ui-arcomage.js // Full Arcomage board renderer with VFX const { getCard, canAfford, CFG } = require('lib/arcomage.js'); var FACES = require('lib/data/faces.json'); var ENEMY_NAMES = [ 'Graveclaw','Ashenveil','Thornmire','Duskfang','Hexshade','Voidthorn','Brimstone','Cindervex', 'Gloomfang','Nighthollow','Felspine','Rothand','Darkwither','Ironshade','Wraithclaw','Emberveil', 'Dreadmoss','Pestilent','Gorefist','Netherscourge','Blackhollow','Singethorn','Vilecraw','Boneshade', 'Crimsonmaw','Doomspore','Shadowvex','Mirkveil','Deathbloom','Plaguefang','Blightvein','Ashmire', 'Scourgethorn','Fellbloom','Darkspore','Grimhollow','Venomshade','Rustveil','Hexmire','Charfang', 'Soulrender','Blightmaw','Netherveil','Grimclaw','Ashfang','Dreadspine','Voidmaw' ]; var THORN_FRAME = '/cdn/ui-gothic-thorn-circular-frame-xvqnloa5.webp'; function renderVsIntro(playerGif, enemyGif, playerName, enemyFace) { var eName = (enemyFace != null && enemyFace >= 0 && enemyFace < ENEMY_NAMES.length) ? ENEMY_NAMES[enemyFace] : 'Unknown'; var portraitSize = 140; var frameSize = portraitSize + 40; function portraitCircle(gif, name) { return '

' + '

' + '' + name + '' + '

'; } var vsText = '

'; return '' + '

' + '

' + portraitCircle(playerGif, playerName) + '

' + '

' + vsText + '

' + '

' + portraitCircle(enemyGif, eName) + '

' + '

'; } var COST_SCHEME = { bricks: { bg: '#3A1010', border: '#CD853F', glow: 'rgba(205,133,63,0.6)', text: '#FFDEAD', label: 'Bricks', cardBg: 'url(/cdn/texture-solid-pink-matte-surface-skg-56z2.webp) center/cover', icon: '' }, gems: { bg: '#1B1464', border: '#7C6CFF', glow: 'rgba(124,108,255,0.6)', text: '#C4BBFF', label: 'Gems', cardBg: 'url(/cdn/texture-smooth-blue-gradient-background-c1cgb6bd.webp) center/cover', icon: '' }, recruits: { bg: '#1A3A1A', border: '#4ADE80', glow: 'rgba(74,222,128,0.6)', text: '#A7F3D0', label: 'Recruits', cardBg: 'url(/cdn/texture-solid-light-green-background-mvnzshuu.webp) center/cover', cardText: '#000', icon: '' } }; var CARD_FRAME_URLS = { bricks: '/cdn/frame-gothic-skull-card-background-k4gddefb.webp', gems: '/cdn/ui-gothic-skull-ornate-frame-0lzx6pbf.webp', recruits: '/cdn/gothic-green-skull-card-template-czwpwjkl.webp' }; var CARD_FRAME_FALLBACK = '/cdn/ui-gothic-skull-card-background-frame-kbdb99gx.webp'; function getCardFrameUrl(costType) { return CARD_FRAME_URLS[costType] || CARD_FRAME_FALLBACK; } // Renders a card face with the frame image — used by all animated/static card renders function renderCardFace(card, extraStyle) { var frameUrl = getCardFrameUrl(card.costType); var cs = COST_SCHEME[card.costType] || COST_SCHEME.bricks; return '

' + '

' + '' + card.name + '' + '

' + '

' + '' + card.desc + '' + '

' + '

' + '' + card.cost + '' + '

' + '

'; } function renderResourceRow(who, side, deltas, tick) { var rows = [ { gen: 'Mines', gv: who.quarry, res: 'Grimstone', rv: who.bricks, c: '#6B3030', ic: '/cdn/statue-ancient-stone-gargoyle-cathedral-wu-bmwj.webp', dRes: deltas ? (deltas.bricks || 0) : 0, dGen: deltas ? (deltas.quarry || 0) : 0, frame: '/cdn/ui-gothic-skull-frame-border-847-ss4n.webp' }, { gen: 'Channelers', gv: who.magic, res: 'Sigils', rv: who.gems, c: '#4A4080', ic: '/cdn/staff-green-lightning-magic-effect-zhto2jfb.webp', dRes: deltas ? (deltas.gems || 0) : 0, dGen: deltas ? (deltas.magic || 0) : 0, frame: '/cdn/ui-dark-gothic-skull-frame-border-cysew-ce.webp' }, { gen: 'Crypts', gv: who.dungeon, res: 'Thralls', rv: who.recruits, c: '#3A6B4A', ic: '/cdn/undead-skeleton-warrior-glowing-sword-n6b69e7k.webp', dRes: deltas ? (deltas.recruits || 0) : 0, dGen: deltas ? (deltas.dungeon || 0) : 0, frame: '/cdn/ui-gothic-green-skull-frame-mborp1bh.webp' } ]; var RF = 'Cinzel,serif'; var t = tick || 0; return rows.map(function(r, idx) { var floatHtml = ''; if (r.dRes !== 0) { var sign = r.dRes > 0 ? '+' : ''; var fc = r.dRes > 0 ? '#4ADE80' : '#EF4444'; var aName = 'rf' + t + side + idx; floatHtml += '' + '

' + '' + sign + r.dRes + '' + '

'; } if (r.dGen !== 0) { var gsign = r.dGen > 0 ? '+' : ''; var gc = r.dGen > 0 ? '#4ADE80' : '#EF4444'; var gName = 'rg' + t + side + idx; floatHtml += '' + '

' + '' + gsign + r.dGen + '' + '

'; } return '

' + // Per-resource frame image — generous overlap on all sides '

' + '

' + '' + r.gv + '' + '

' + '

' + '' + r.gen + '' + '

' + '

' + '' + r.rv + '' + '' + r.res + '' + '

' + floatHtml + '

' + '

'; }).join(''); } function renderExplosion(tick, prefix) { var t = tick || 0; var html = ''; var img = '/cdn/effect-purple-magical-explosion-burst-dzoqr89l.webp?t=' + t + prefix; // Main explosion sprite — burst in, hold, fade out var fn = 'exfl' + t + prefix; html += '' + '

' + '

'; // Secondary offset explosions — staggered for spread var offsets = [ {x:-45,y:5,sz:110,dl:0.08,d:0.9}, {x:50,y:0,sz:100,dl:0.15,d:0.85}, {x:-15,y:-25,sz:90,dl:0.22,d:0.8}, {x:30,y:10,sz:80,dl:0.3,d:0.7} ]; for (var i = 0; i < offsets.length; i++) { var o = offsets[i]; var an = 'exs' + t + prefix + i; var subImg = '/cdn/effect-purple-magical-explosion-burst-dzoqr89l.webp?t=' + t + prefix + i; html += '' + '

' + '

'; } return '

' + html + '

'; } function renderTowerVis(tower, wall, maxT, maxW, side, animClass, tick, towerDmg, wallDmg, oldTower, oldWall) { var tRatio = Math.max(0.05, Math.min(1, tower / maxT)); var wRatio = Math.max(0, Math.min(1, wall / maxW)); var maxTowerH = 750; var maxWallH = 540; var tH = Math.round(maxTowerH * tRatio); var wH = Math.round(maxWallH * wRatio); var isPlayer = side === 'left'; var t = tick || 0; // Compute old heights for smooth transition keyframes var oldTRatio = (oldTower != null) ? Math.max(0.05, Math.min(1, oldTower / maxT)) : tRatio; var oldWRatio = (oldWall != null) ? Math.max(0, Math.min(1, oldWall / maxW)) : wRatio; var oldTH = Math.round(maxTowerH * oldTRatio); var oldWH = Math.round(maxWallH * oldWRatio); // Only animate if values actually changed var tChanged = oldTH !== tH; var wChanged = oldWH !== wH; var tAnimName = 'th' + side + t; var wAnimName = 'wh' + side + t; var tAnimCss = tChanged ? '' : ''; var wAnimCss = wChanged ? '' : ''; // CDN tiling textures — tower is cold dark stone, wall is dark masonry var towerTex = '/cdn/texture-dark-gothic-ashlar-stone-block-seamless-tileable.png'; var wallTex = '/cdn/texture-dark-medieval-brick-masonry-seamless-tileable.png'; // Solid conical spire — cold gothic stone with 3D shading var isBlue = side === 'left'; var spireH = 195; var spireW = 180; // Tint overlays: purple for player, green for enemy — deeper and moodier var tintColor = isBlue ? 'rgba(40,30,60,0.35)' : 'rgba(35,50,30,0.35)'; var darkSide = isBlue ? 'rgba(10,8,18,0.85)' : 'rgba(8,14,8,0.85)'; var highlightSide = isBlue ? 'rgba(90,75,130,0.18)' : 'rgba(80,110,70,0.18)'; var capColor = isBlue ? '#2e1a4a' : '#2a4a20'; var capHighlight = isBlue ? '#6a38a8' : '#509838'; var flagSvg = '

' + // Main cone body — tower texture clipped to triangle with strong 3D '

' + // Base darkening — pull the whole thing darker '

' + // Primary color tint — stronger '

' + // Secondary color variation — darker shade pooling at bottom and right '

' + // Left highlight — cold moonlight, sharper '

' + // Right shadow — near black for strong 3D '

' + // Vertical darkening — bright apex, deep black base '

' + // Center ridge highlight for 3D cone roundness '

' + // Mottled color variation — patches of lighter and darker tone '

' + // Cold grime and weathering '

' + '

' + // Iron tip '

' + '

'; // Tower div — retro fantasy painted lighting, upper-left light source var towerDiv = tAnimCss + '

' + '

' + // Battlements — individual stone merlons protruding above tower top // 6 merlons, each 13px wide, with 4px crenel gaps, on a strip wider than tower (function() { var merlonW = 35, count = 4; var totalW = 200; // wider than 180px tower so edges protrude var overhang = Math.round((totalW - 180) / 2); var merlonH = 30; var html = '

'; for (var mi = 0; mi < count; mi++) { html += '

'; } html += '

'; // Shadow strip under merlons html += '

'; return html; })() + // Gothic arched window — higher up, with balcony '

' + // Window arch '

' + '

' + // Balcony ledge '

' + // Balcony railing — tiny posts '

' + '

' + // Railing bar '

' + '

' + // Small gothic door at base '

' + // Left highlight strip — bright upper-left light '

' + // Right shadow strip — deep dark edge '

' + // Top highlight band — cold light catching top stones '

' + // Bottom darkening '

' + // Cold grime / dark variation overlay '

' + // Desaturation + cold contrast overlay '

' + // Strong overall contrast — bright highlights, deep black shadows '

' + // Gothic wall torches — small iron brackets with flickering flames (function() { var torchKey1 = 'tflk1' + side + t; var torchKey2 = 'tflk2' + side + t; var torchStyle = ''; // Left torch — 35% from top, on the left edge var torch1 = '

' + // Iron bracket '

' + '

' + // Flame — layered lime green glow '

' + // Green glow on wall '

' + '

'; // Right torch — 55% from top, on the right edge var torch2 = '

' + '

'; return torchStyle + torch1 + torch2; })() + flagSvg + '

' + '

' + tower + '

' + '

'; // Brazier div — gothic iron brazier with living flame scaled to wall value var flameColor1 = isPlayer ? 'rgba(140,80,255,' : 'rgba(60,220,90,'; var flameColor2 = isPlayer ? 'rgba(100,40,200,' : 'rgba(40,180,60,'; var flameCore = isPlayer ? 'rgba(200,160,255,' : 'rgba(140,255,160,'; var flameGlow = isPlayer ? 'rgba(124,108,255,' : 'rgba(74,222,128,'; var flameTip = isPlayer ? 'rgba(60,20,120,' : 'rgba(20,80,30,'; var bS = side + (tick || 0); // Flame height scales with wall ratio — bigger, wilder flames var flameH = Math.max(50, Math.round(wH * 1.2)); var flameW = Math.round(80 + (flameH / 5)); var brazierH = 65; // fixed bowl height var wallDiv = wall > 0 ? ( wAnimCss + '' + '

' + // Outer container — total height = flame + brazier '

' + // === FLAME ZONE === sits above the brazier bowl '

' + // Core flame — brightest inner, tall and tapered '

' + // Outer flame — wider envelope '

' + // Ghost flame — faint wispy outer '

' + // Left tendril — licking flame tongue '

' + // Right tendril '

' + // Hot core glow at base — bright pool of light '

' + // Embers — 5 rising sparks, varied paths and sizes '

' + '

' + // Ambient glow on surroundings — larger, brighter '

' + // === BRAZIER BOWL === black gothic iron brazier '

' + '

' + // Inner rim glow from fire '

' + '

' + wall + '

' + '

' ) : '

' + '

' + wall + '

' + '

'; // Tooltip style — appears above on hover, gothic Cinzel font var ttBase = 'position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:8px;' + 'padding:6px 12px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:50;' + 'font-family:Cinzel,serif;font-size:12px;font-weight:700;text-align:center;line-height:1.4;' + 'background:rgba(10,8,18,0.92);border:1px solid rgba(124,108,255,0.4);' + 'color:#d4c9a8;text-shadow:0 1px 3px rgba(0,0,0,0.9);'; var ttShow = 'opacity:1'; var spireLabel = 'Spire'; var rampartLabel = 'Brazier'; var spireTip = '

' + spireLabel + '
Reaches ' + maxT + ' to win

'; var rampartTip = '

' + rampartLabel + '
Shields your spire

'; // Hover parent style injects a rule that shows tooltip on hover var ttHoverStyle = ''; // Left side: tower then wall. Right side: wall then tower (wall faces center). // Wrap each in relative container for per-structure explosion positioning + tooltip var towerWithVfx = '

' + towerDiv + spireTip + (towerDmg ? renderExplosion(tick || 0, side + 'T') : '') + '

'; var wallWithVfx = '

' + wallDiv + rampartTip + (wallDmg ? renderExplosion(tick || 0, side + 'W') : '') + '

'; var pieces = ttHoverStyle + (side === 'left' ? (towerWithVfx + wallWithVfx) : (wallWithVfx + towerWithVfx)); return '

' + '

' + pieces + '

' + '

'; } function renderCard(cardId, index, playerData, isPlayerTurn, pendingDiscard, hideIndex) { var card = getCard(cardId); if (!card) return ''; var s = COST_SCHEME[card.costType] || COST_SCHEME.bricks; var affordable = canAfford(playerData, card); var playable = affordable && isPlayerTurn && !pendingDiscard; var opacity = (playable || pendingDiscard) ? '1' : '0.55'; var greyFilter = (playable || pendingDiscard) ? '' : 'filter:saturate(0.3);'; var hoverScale = (playable || pendingDiscard) ? 'hover:scale-105' : ''; var discardGlow = pendingDiscard ? 'box-shadow:0 0 12px rgba(124,108,255,0.6),0 4px 16px rgba(0,0,0,0.7);border:2px solid #7C6CFF;' : 'border:2px solid #1a1a1a;box-shadow:0 4px 16px rgba(0,0,0,0.7);'; var hiddenStyle = (index === hideIndex) ? 'visibility:hidden;' : ''; var cardBgUrl = getCardFrameUrl(card.costType); return '

' + '

' + // Card frame background — single image covers entire card '

' + // Name — dark upper skull area '

' + '' + card.name + '' + '

' + // Art — behind frame, fills transparent window '

' + '

' + // Description — parchment lower area '

' + '' + card.desc + '' + '

' + // Cost badge — bottom right, no circle '

' + '' + card.cost + '' + '

' + '

'; } function renderBoard(gs, playerPortrait, showBg, settingsOpen, selectedFace, playerName, enemyFace, vsIntroStart, worldTime, tutorialMode) { if (!gs || !gs.player) { gs = { player: { tower: 20, wall: 5, bricks: 5, gems: 5, recruits: 5, brickGen: 2, gemGen: 2, recruitGen: 2, hand: [] }, enemy: { tower: 20, wall: 5, bricks: 5, gems: 5, recruits: 5, brickGen: 2, gemGen: 2, recruitGen: 2, hand: [] }, phase: 'playerTurn', turnNumber: 1 }; } if (showBg === undefined) showBg = true; if (settingsOpen === undefined) settingsOpen = false; var enemyPortrait = 'https://raw.githubusercontent.com/rooibosteadrinker/gifs/main/high_elf_male.gif'; if (enemyFace != null && enemyFace >= 0 && enemyFace < FACES.length && FACES[enemyFace].gif) { enemyPortrait = FACES[enemyFace].gif; } var playerGif = 'https://raw.githubusercontent.com/rooibosteadrinker/gifs/main/human_male.gif'; if (selectedFace != null && selectedFace >= 0 && selectedFace < FACES.length && FACES[selectedFace].gif) { playerGif = FACES[selectedFace].gif; } var enemyDisplayName = (enemyFace != null && enemyFace >= 0 && enemyFace < ENEMY_NAMES.length) ? ENEMY_NAMES[enemyFace] : 'Enemy'; var p = gs.player; var e = gs.enemy; var isPlayerTurn = gs.turn === 'player' && gs.phase !== 'gameOver'; var ae = gs.animEvent; // If enemy card hasn't reached center yet, show pre-enemy snapshot values var snap = gs.preEnemySnapshot; var dp = snap ? { tower: snap.player.tower, wall: snap.player.wall, bricks: snap.player.bricks, gems: snap.player.gems, recruits: snap.player.recruits, quarry: snap.player.quarry, magic: snap.player.magic, dungeon: snap.player.dungeon, hand: p.hand } : p; var de = snap ? { tower: snap.enemy.tower, wall: snap.enemy.wall, bricks: snap.enemy.bricks, gems: snap.enemy.gems, recruits: snap.enemy.recruits, quarry: snap.enemy.quarry, magic: snap.enemy.magic, dungeon: snap.enemy.dungeon, hand: e.hand } : e; // VFX classes var dmgVfx = ''; if (ae && ae.type === 'play' && ae.by === 'enemy' && (ae.enemyTowerDelta < 0 || ae.enemyWallDelta < 0)) { dmgVfx = 'anim-damage-flash'; } var enemyDmgVfx = ''; if (ae && ae.type === 'play' && ae.by === 'player' && ae.enemyTowerDelta < 0) { enemyDmgVfx = 'anim-damage-flash'; } // Explosion VFX flags — detect tower or wall damage on each side separately var pae = gs.playerAnimEvent || null; var playerTowerDmg = false, playerWallDmg = false; var enemyTowerDmg = false, enemyWallDmg = false; // Player side damage: from enemy card (via animEvent after snap clears) or from player's own card (playerAnimEvent) if (!snap && ae && ae.by === 'enemy' && ae.type === 'play') { if (ae.selfTowerDelta < 0) playerTowerDmg = true; if (ae.selfWallDelta < 0) playerWallDmg = true; } if (pae) { if (pae.selfTowerDelta < 0) playerTowerDmg = true; if (pae.selfWallDelta < 0) playerWallDmg = true; } // Enemy side damage: from player card (playerAnimEvent or animEvent) if (pae) { if (pae.enemyTowerDelta < 0) enemyTowerDmg = true; if (pae.enemyWallDelta < 0) enemyWallDmg = true; } if (!snap && ae && ae.by === 'player' && ae.type === 'play') { if (ae.enemyTowerDelta < 0) enemyTowerDmg = true; if (ae.enemyWallDelta < 0) enemyWallDmg = true; } // Discard pile — last played card shown to the right of the draw deck var discardPileHtml = ''; var dpCard = (gs.lastAction && gs.discardPileCard) ? getCard(gs.discardPileCard) : null; var prevDpCard = (gs.lastAction && gs.prevDiscardPileCard) ? getCard(gs.prevDiscardPileCard) : null; var dpTick = gs.discardPileTick || 0; var cardBack = '/cdn/card-gothic-skull-ornate-back-design-udjfl9oc.webp'; if (dpCard || prevDpCard) { var dpAnimStyles = ''; var prevCardHtml = ''; // Animate old card flipping to back and sliding onto deck if (prevDpCard && dpTick > 0) { var prevCs = COST_SCHEME[prevDpCard.costType] || COST_SCHEME.bricks; var flipKey = 'dpflip' + dpTick; dpAnimStyles = ''; // Front face for first half, card back for second half (CSS backface trick via two layers) prevCardHtml = '

' + // Front face — visible 0-40% '

' + renderCardFace(prevDpCard) + '

' + // Back face — visible after flip past 90deg '

' + '

'; } // Current discard pile card — face up, fade in after old card animates away var currentCardHtml = ''; if (dpCard) { var dcs = COST_SCHEME[dpCard.costType] || COST_SCHEME.bricks; var fadeKey = 'dpfade' + dpTick; var fadeDelay = prevDpCard ? '1s' : '0s'; dpAnimStyles += ''; currentCardHtml = '

' + renderCardFace(dpCard) + '

'; } discardPileHtml = dpAnimStyles + currentCardHtml + prevCardHtml; } var handLocked = !!(snap && gs.snapshotClearTick) || !!gs.playerUnlockTick; var isPendingDiscard = !!gs.pendingDiscard; var isPlayAgain = isPlayerTurn && !handLocked && !isPendingDiscard && gs.message && gs.message.indexOf('Play again') === 0; // Check if player can't afford ANY card in hand var canPlayAny = false; if (isPlayerTurn && !handLocked && !isPendingDiscard && !isPlayAgain) { for (var cfi = 0; cfi < gs.player.hand.length; cfi++) { var cfc = getCard(gs.player.hand[cfi]); if (cfc && canAfford(gs.player, cfc)) { canPlayAny = true; break; } } } else { canPlayAny = true; } var showForfeit = isPlayerTurn && !handLocked && !isPendingDiscard && !isPlayAgain && !canPlayAny; // Determine if a draw animation is active — hide leftmost card slot while animating // Also hide during snapshot phase since the drawn card is in the hand but animation hasn't played yet // Wait until the played card has finished flying to the last-card-played position var drawAnimActive = gs.lastDrawnCard && (gs.drawTick || 0) > 0 && !gs.discardAnimUntilTick; // Hide the drawn card in the hand from the moment it's drawn until the draw animation completes var hideIdx = (gs.lastDrawnCard && (gs.drawTick || 0) > 0) ? 0 : -1; var handCards = p.hand.map(function(cid, i) { return renderCard(cid, i, p, isPlayerTurn && !handLocked, isPendingDiscard, hideIdx); }).join(''); return '' + '

' + // BG '

' + (showBg ? '

' : '') + // Animated light glow on top-right light source (showBg ? ( '' + // Lantern glow — top-right '

' + // Outer soft halo — warm white '

' + // Core bright center — warm cream '

' + // Wandering highlight — soft warm drift '

' + '

' ) : '') + // (top message bar removed) // (old card notifications removed — discard pile replaces them) // Board area — towers pushed to screen edges '

' + // Player side — tower on left (function() { // Compute previous tower/wall values from deltas var ptOld = null, pwOld = null, etOld = null, ewOld = null; // Player side: use enemy animEvent deltas (selfTower/selfWall = player's tower/wall from enemy's perspective) if (!snap && ae && ae.by === 'enemy' && ae.type === 'play') { if (ae.selfTowerDelta) ptOld = dp.tower - ae.selfTowerDelta; if (ae.selfWallDelta) pwOld = dp.wall - ae.selfWallDelta; } // Player side: also check playerAnimEvent for self-harm cards if (pae) { if (pae.selfTowerDelta && ptOld == null) ptOld = dp.tower - pae.selfTowerDelta; if (pae.selfWallDelta && pwOld == null) pwOld = dp.wall - pae.selfWallDelta; } // Enemy side: use playerAnimEvent or animEvent enemyTower/enemyWall deltas if (pae) { if (pae.enemyTowerDelta) etOld = de.tower - pae.enemyTowerDelta; if (pae.enemyWallDelta) ewOld = de.wall - pae.enemyWallDelta; } if (!snap && ae && ae.by === 'player' && ae.type === 'play') { if (ae.enemyTowerDelta && etOld == null) etOld = de.tower - ae.enemyTowerDelta; if (ae.enemyWallDelta && ewOld == null) ewOld = de.wall - ae.enemyWallDelta; } return '

' + '

' + renderTowerVis(dp.tower, dp.wall, CFG.maxTower, CFG.maxWall, 'left', '', gs.playTick, playerTowerDmg, playerWallDmg, ptOld, pwOld) + '

' + '

' + // Enemy side — tower on right '

' + '

' + renderTowerVis(de.tower, de.wall, CFG.maxTower, CFG.maxWall, 'right', '', gs.playTick, enemyTowerDmg, enemyWallDmg, etOld, ewOld) + '

' + '

'; })() + '

' + // Resource tiles — left side (player) '

' + '

' + renderResourceRow(dp, 'left', gs.playerAnimEvent ? gs.playerAnimEvent.selfRes : (!snap && ae && ae.selfRes ? ae.selfRes : null), gs.playTick) + '

' + '

' + // Draw deck — to the right of player resources (function() { var deckCount = gs.deck ? gs.deck.length : 0; var cardBack = '/cdn/card-gothic-skull-ornate-back-design-udjfl9oc.webp'; var dt = gs.drawTick || 0; var drawnId = gs.lastDrawnCard || null; var drawnCard = drawnId ? getCard(drawnId) : null; // Show draw animation when a card was drawn and discard fly has finished var showDrawAnim = drawnCard && dt > 0 && !gs.discardAnimUntilTick; var animKey = 'draw' + dt; // Deck pile — stacked cards visual var deckHtml = '

' + // Stacked card pile '

' + // Shadow cards underneath for depth '

' + '

' + // Top card — the card back '

' + '

'; // Draw animation: card back slides from deck to left edge of hand at full size var drawAnimHtml = ''; if (showDrawAnim) { // Keyframes: full size, card back only, straight path from deck to hand left edge drawAnimHtml = '' + '

' + '

'; } // Discard pile — last played card, to the right of draw deck var dpHtml = ''; // Guard: if no card has been played yet this game, never render the discard pile // This prevents stale data from a previous game leaking through persistence var dpCardId = gs.lastAction ? gs.discardPileCard : null; var prevDpCardId = gs.lastAction ? gs.prevDiscardPileCard : null; var dpCardObj = dpCardId ? getCard(dpCardId) : null; var prevDpCardObj = prevDpCardId ? getCard(prevDpCardId) : null; var dpTick = gs.discardPileTick || 0; var dpFrom = gs.discardPileFrom || 'player'; var dpFromIdx = gs.discardPileFromIndex || 0; // Destination: left:425px, top:12% (translateY -50% so center is at 12%) var dpDestLeft = '575px'; var dpDestTop = '16%'; if (dpCardObj || prevDpCardObj) { var dpStyles = ''; var prevDpHtml = ''; // Old card flips to back and slides left onto deck if (prevDpCardObj && dpTick > 0) { var prevDpCs = COST_SCHEME[prevDpCardObj.costType] || COST_SCHEME.bricks; var flipKey = 'dpflip' + dpTick; dpStyles += ''; prevDpHtml = '

' + '

' + renderCardFace(prevDpCardObj) + '

' + '

'; } // Current card — flies from origin (hand or enemy side) to discard pile var curDpHtml = ''; var flyHtml = ''; if (dpCardObj) { var dpCs = COST_SCHEME[dpCardObj.costType] || COST_SCHEME.bricks; // Compute origin for flight animation var flyKey = 'dpfly' + dpTick; var startLeft, startTop; if (dpFrom === 'player') { // Player hand: cards centered, ~180px per slot, hand starts at calc(50% - 515px) startLeft = 'calc(50% - 515px + ' + (dpFromIdx * 180) + 'px)'; startTop = 'calc(100% - 355px)'; } else { // Enemy: fly from right side of screen startLeft = 'calc(100% - 200px)'; startTop = '16%'; } dpStyles += ''; // Static card sitting in the pile (appears after flight ends) var flyDelay = '0s'; var staticDelay = '0.8s'; if (prevDpCardObj) { flyDelay = '0s'; staticDelay = '0.8s'; } // Flying card overlay (absolute, full-screen positioned) flyHtml = '

' + renderCardFace(dpCardObj, 'box-shadow:0 8px 40px rgba(0,0,0,0.9);') + '

'; // Static card in the pile — full opacity when fly is done, delayed fade when fly is active var curDpStyle; if (gs.discardAnimUntilTick) { var fadeKey = 'dpfade' + dpTick; dpStyles += ''; curDpStyle = 'width:230px;height:360px;opacity:0;animation:' + fadeKey + ' 0.15s ease-in ' + staticDelay + ' forwards;'; } else { curDpStyle = 'width:230px;height:360px;opacity:1;'; } curDpHtml = '

' + renderCardFace(dpCardObj) + '

'; } dpHtml = dpStyles + (gs.discardAnimUntilTick ? flyHtml : '') + '

' + '

' + curDpHtml + prevDpHtml + '

' + '

'; } return deckHtml + drawAnimHtml + dpHtml; })() + // Resource tiles — right side (enemy) '

' + renderResourceRow(de, 'right', gs.playerAnimEvent ? gs.playerAnimEvent.enemyRes : (!snap && ae && ae.enemyRes ? ae.enemyRes : null), gs.playTick) + '

' + // Victory conditions — top center '

' + '

Victory Conditions

' + '

Spire reaches ' + CFG.towerTarget + '

' + '

Enemy spire reaches 0

' + '

' + CFG.resourceTarget + ' of any resource

' + '

' + // Top right buttons — Settings & Main Menu '

' + // Settings gear with tooltip '

' + '' + '

Settings

' + '

' + // Main menu house icon with tooltip '

' + '' + '

Main Menu

' + '

' + // Gothic settings panel — centered on screen (settingsOpen ? ( '

' + // Title '

⚙ Settings

' + // Divider '

' + // Background toggle row '

' + 'Background' + '' + '

' + // Divider '

' + // Identity button '' + '

' ) : '') + '

' + // Player hand with full-width background + portraits on top (isPendingDiscard ? '

' + '

' + 'Choose a card to discard' + '

' : isPlayAgain ? '

' + '

' + 'Play Again!' + '

' : showForfeit ? '

' + '

' : '') + '

' + '

' + // Gothic ornate frame behind cards '

' + handCards + '

' + '

' + // Ambient moving lights — large soft patches drifting across scene '' + '

' + '

' + // Screen damage VFX overlay (dmgVfx ? '

' : '') + // VS Intro overlay — show for ~3 seconds after game start, not in tutorial (vsIntroStart && worldTime && !tutorialMode && (worldTime - vsIntroStart) < 180 ? renderVsIntro(playerGif, enemyPortrait, playerName, enemyFace) : '') + // Game over (gs.phase === 'gameOver' ? renderGameOver(gs) : '') + '

' + // Portrait frames — OUTSIDE arco-board so zoom doesn't affect them '

' + '

' + '

' + '' + (playerName || 'Player') + '' + '

' + '

' + '

' + '' + enemyDisplayName + '' + '

' + '

'; } function renderGameOver(gs) { var isWin = gs.winner === 'player'; var borderColor = isWin ? 'rgba(124,108,255,0.6)' : 'rgba(74,222,128,0.6)'; var glowColor = isWin ? 'rgba(124,108,255,0.25)' : 'rgba(74,222,128,0.25)'; var textColor = isWin ? '#7C6CFF' : '#4ADE80'; var title = isWin ? '⚔ VICTORY ⚔' : '☠ DEFEAT ☠'; return '

' + '

' + title + '

' + '

' + (gs.message || '') + '

' + '

Turns played: ' + (gs.turnNumber || 1) + '

' + '' + '

' + '

'; } module.exports = { renderBoard };

Spawn