fix: add missing phase-transition overlay element (closes #101 )

Bug 2 of 3 from #101: showPhaseTransition() looked for #phase-transition but the element didn't exist in index.html. Phase transitions silently failed — no celebratory overlay appeared on phase-up. Added: - Overlay div with .pt-phase, .pt-name, .pt-desc children - CSS for centered fullscreen overlay with fade transition - Matches the dark theme + gold/blue accent palette Note: Bugs 1 (toast text) and 3 (mute/contrast buttons) were already fixed in previous commits.
Merge pull request 'feat: canvas-based combat visualization (#21 )' (#103 ) from feat/canvas-combat-visualization into main
2026-04-13 04:10:01 -04:00 · 2026-04-13 07:19:52 +00:00 · 2026-04-13 03:19:21 -04:00 · 2026-04-13 07:15:35 +00:00 · 2026-04-13 07:15:32 +00:00 · 2026-04-13 03:05:41 -04:00
6 changed files with 418 additions and 14 deletions
--- a/index.html
+++ b/index.html
@@ -96,10 +96,45 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
@keyframes toast-in{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:0.95}}
@keyframes toast-out{from{opacity:0.95;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}
 ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
+/* High contrast mode (#57 Accessibility) */
+.high-contrast{--bg:#000;--panel:#0a0a0a;--border:#fff;--text:#fff;--dim:#ccc;--accent:#0ff;--glow:#0ff444;--gold:#ff0;--green:#0f0;--red:#f00;--purple:#f0f}
+.high-contrast .main-btn{border-width:2px}
+.high-contrast .build-btn,.high-contrast .project-btn{border-width:2px}
+.high-contrast .res{border-width:2px}
+.high-contrast #phase-bar{border-width:2px}
+.high-contrast .milestone-chip{border-width:2px}
+.high-contrast #header h1{color:#0ff;text-shadow:0 0 40px #0ff444}
+/* Custom tooltip */
+#custom-tooltip{position:fixed;z-index:500;pointer-events:none;opacity:0;transition:opacity 0.15s;background:#0e0e1a;border:1px solid #1a3a5a;border-radius:6px;padding:8px 12px;max-width:280px;font-size:10px;font-family:inherit;line-height:1.6;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
+#custom-tooltip.visible{opacity:1}
+#custom-tooltip .tt-label{color:#4a9eff;font-weight:600;margin-bottom:4px;font-size:11px}
+#custom-tooltip .tt-edu{color:#888;font-style:italic;font-size:9px}
+/* Mute & contrast buttons */
+.header-btns{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;gap:6px}
+.header-btn{background:#0e0e1a;border:1px solid #333;color:#666;font-size:13px;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-family:inherit}
+.header-btn:hover{border-color:#4a9eff;color:#4a9eff}
+.header-btn.muted{opacity:0.5}
+
+/* Phase transition overlay */
+#phase-transition{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,10,30,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.4s ease}
+#phase-transition.active{opacity:1;pointer-events:auto}
+.pt-phase{color:#4a9eff;font-size:13px;letter-spacing:4px;text-transform:uppercase;margin-bottom:8px;font-family:monospace}
+.pt-name{color:#ffd700;font-size:28px;font-weight:700;margin-bottom:12px;text-shadow:0 0 20px rgba(255,215,0,0.4)}
+.pt-desc{color:#8899aa;font-size:13px;max-width:400px;text-align:center;line-height:1.5}
+
 </style>
 </head>
 <body>
-<div id="header">
+<div id="phase-transition">
+  <div class="pt-phase"></div>
+  <div class="pt-name"></div>
+  <div class="pt-desc"></div>
+</div>
+<div id="header" style="position:relative">
+<div class="header-btns">
+  <button id="mute-btn" class="header-btn" onclick="toggleMute()" aria-label="Sound on, click to mute" title="Toggle sound (M)">🔊</button>
+  <button id="contrast-btn" class="header-btn" onclick="toggleContrast()" aria-label="High contrast off, click to enable" title="Toggle high contrast (C)">◐</button>
+</div>
 <div id="pulse-container" style="position:relative;display:inline-block;margin-bottom:4px">
  <div id="pulse-dot" style="width:8px;height:8px;border-radius:50%;background:#333;display:inline-block;vertical-align:middle;transition:background 0.5s,box-shadow 0.5s"></div>
  <span id="pulse-label" style="font-size:9px;color:#444;margin-left:6px;vertical-align:middle;letter-spacing:1px">OFFLINE</span>
@@ -185,6 +220,12 @@ Events Resolved: <span id="st-resolved">0</span>
 <h3>SOVEREIGN GUIDANCE (GOFAI)</h3>
 <div id="strategy-recommendation" style="font-size:11px;color:var(--gold);font-style:italic">Analyzing system state...</div>
 </div>
+<div id="combat-panel" style="margin:0 16px 16px;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;border-left:3px solid var(--red)">
+<h3>REASONING BATTLES</h3>
+<canvas id="combat-canvas" style="width:100%;max-width:310px;border:1px solid var(--border);border-radius:4px;display:block;margin:8px auto"></canvas>
+<div id="combat-panel-info"><span class="dim">Combat unlocks at Phase 3</span></div>
+<button class="ops-btn" onclick="Combat.startBattle()" style="margin-top:8px;width:100%;border-color:var(--red);color:var(--red)">START BATTLE</button>
+</div>
 <div id="log" role="log" aria-label="System Log" aria-live="off">
 <h2>SYSTEM LOG</h2>
 <div id="log-entries"></div>
@@ -226,6 +267,7 @@ The light is on. The room is empty."

    <script src="js/data.js"></script>
    <script src="js/utils.js"></script>
+    <script src="js/combat.js"></script>
    <script src="js/strategy.js"></script>
    <script src="js/sound.js"></script>
    <script src="js/engine.js"></script>
@@ -244,5 +286,6 @@ The light is on. The room is empty."
 </div>

 <div id="toast-container"></div>
+<div id="custom-tooltip"></div>
 </body>
 </html>
--- a/js/combat.js
+++ b/js/combat.js
@@ -0,0 +1,351 @@
+// ============================================================
+// THE BEACON - Canvas Combat Visualization
+// Reasoning Battles: different AI strategies compete visually
+// Adapted from Paperclips combat.js (boid flocking + grid combat)
+// ============================================================
+
+const Combat = (() => {
+    const W = 310, H = 150;
+    const GRID_W = 31, GRID_H = 15;
+    const CELL_W = W / GRID_W, CELL_H = H / GRID_H;
+
+    // Battle names (Napoleonic Wars → AI reasoning battles)
+    const BATTLE_NAMES = [
+        'The Aboukir Test', 'Austerlitz Proof', 'Waterloo Convergence',
+        'Trafalgar Dispatch', 'Leipzig Consensus', 'Borodino Trial',
+        'Jena Analysis', 'Wagram Synthesis', 'Friedland Review',
+        'Eylau Deduction', 'Ligny Verification', 'Quatre Bras Audit'
+    ];
+
+    let canvas, ctx;
+    let probes = [], drifters = [];
+    let activeBattle = null;
+    let battleLog = [];
+    let animFrameId = null;
+    let lastTick = 0;
+
+    // Ship unit colors
+    const PROBE_COLOR = '#4a9eff';    // Blue = structured reasoning
+    const DRIFTER_COLOR = '#f44336';  // Red = adversarial testing
+
+    class Ship {
+        constructor(x, y, team) {
+            this.x = x;
+            this.y = y;
+            this.vx = (Math.random() - 0.5) * 2;
+            this.vy = (Math.random() - 0.5) * 2;
+            this.team = team;
+            this.alive = true;
+        }
+
+        update(allies, enemies, dt) {
+            if (!this.alive) return;
+
+            let ax = 0, ay = 0;
+
+            // Cohesion: move toward own centroid
+            if (allies.length > 1) {
+                let cx = 0, cy = 0;
+                for (const a of allies) { cx += a.x; cy += a.y; }
+                cx /= allies.length; cy /= allies.length;
+                ax += (cx - this.x) * 0.01;
+                ay += (cy - this.y) * 0.01;
+            }
+
+            // Aggression: move toward enemy centroid
+            if (enemies.length > 0) {
+                let ex = 0, ey = 0;
+                for (const e of enemies) { ex += e.x; ey += e.y; }
+                ex /= enemies.length; ey /= enemies.length;
+                ax += (ex - this.x) * 0.02;
+                ay += (ey - this.y) * 0.02;
+            }
+
+            // Separation: avoid nearby enemies
+            for (const e of enemies) {
+                const dx = this.x - e.x, dy = this.y - e.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                if (dist < 15 && dist > 0) {
+                    ax += (dx / dist) * 0.5;
+                    ay += (dy / dist) * 0.5;
+                }
+            }
+
+            // Apply acceleration with damping
+            this.vx = (this.vx + ax * dt) * 0.98;
+            this.vy = (this.vy + ay * dt) * 0.98;
+
+            // Clamp speed
+            const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
+            if (speed > 3) {
+                this.vx = (this.vx / speed) * 3;
+                this.vy = (this.vy / speed) * 3;
+            }
+
+            this.x += this.vx;
+            this.y += this.vy;
+
+            // Wrap around edges
+            if (this.x < 0) this.x += W;
+            if (this.x > W) this.x -= W;
+            if (this.y < 0) this.y += H;
+            if (this.y > H) this.y -= H;
+        }
+
+        draw(ctx) {
+            if (!this.alive) return;
+            const color = this.team === 'probe' ? PROBE_COLOR : DRIFTER_COLOR;
+            ctx.fillStyle = color;
+            ctx.fillRect(this.x - 1, this.y - 1, 2, 2);
+        }
+    }
+
+    function createShips(count, team) {
+        const ships = [];
+        const side = team === 'probe' ? 0.2 : 0.8;
+        for (let i = 0; i < count; i++) {
+            ships.push(new Ship(
+                W * side + (Math.random() - 0.5) * 40,
+                H * 0.5 + (Math.random() - 0.5) * 60,
+                team
+            ));
+        }
+        return ships;
+    }
+
+    function resolveCombat() {
+        if (!activeBattle) return;
+        const probeCombat = activeBattle.probeCombat;
+        const driftCombat = activeBattle.drifterCombat;
+        const probeSpeed = activeBattle.probeSpeed;
+
+        // OODA Loop bonus
+        const deathThreshold = 0.15 + probeSpeed * 0.03;
+
+        for (const p of probes) {
+            if (!p.alive) continue;
+            // Check if near any drifter
+            for (const d of drifters) {
+                if (!d.alive) continue;
+                const dx = p.x - d.x, dy = p.y - d.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                if (dist < 8) {
+                    // Probe death probability
+                    if (Math.random() < driftCombat * (drifters.filter(s => s.alive).length / Math.max(1, probes.filter(s => s.alive).length)) * deathThreshold) {
+                        p.alive = false;
+                    }
+                    // Drifter death probability
+                    if (Math.random() < (probeCombat * 0.15 + probeCombat * 0.1) * (probes.filter(s => s.alive).length / Math.max(1, drifters.filter(s => s.alive).length)) * deathThreshold) {
+                        d.alive = false;
+                    }
+                }
+            }
+        }
+
+        // Check battle end
+        const aliveProbes = probes.filter(s => s.alive).length;
+        const aliveDrifters = drifters.filter(s => s.alive).length;
+
+        if (aliveProbes === 0 || aliveDrifters === 0) {
+            endBattle(aliveProbes > 0 ? 'structured' : 'adversarial');
+        }
+    }
+
+    function endBattle(winner) {
+        if (!activeBattle) return;
+        const name = activeBattle.name;
+        const result = {
+            name,
+            winner,
+            probesLeft: probes.filter(s => s.alive).length,
+            driftersLeft: drifters.filter(s => s.alive).length,
+            time: Date.now()
+        };
+        battleLog.unshift(result);
+        if (battleLog.length > 10) battleLog.pop();
+
+        // Apply rewards
+        if (winner === 'structured') {
+            G.knowledge += 50 * (1 + G.phase * 0.5);
+            G.totalKnowledge += 50 * (1 + G.phase * 0.5);
+            log(`⚔ ${name}: Structured reasoning wins! +${fmt(50 * (1 + G.phase * 0.5))} knowledge`);
+        } else {
+            G.code += 30 * (1 + G.phase * 0.5);
+            G.totalCode += 30 * (1 + G.phase * 0.5);
+            log(`⚔ ${name}: Adversarial testing wins! +${fmt(30 * (1 + G.phase * 0.5))} code`);
+        }
+
+        activeBattle = null;
+        if (animFrameId) {
+            cancelAnimationFrame(animFrameId);
+            animFrameId = null;
+        }
+        renderCombatPanel();
+    }
+
+    function animate(ts) {
+        if (!ctx || !activeBattle) return;
+        const dt = Math.min((ts - lastTick) / 16, 3);
+        lastTick = ts;
+
+        // Clear
+        ctx.fillStyle = '#080810';
+        ctx.fillRect(0, 0, W, H);
+
+        // Grid lines
+        ctx.strokeStyle = '#111120';
+        ctx.lineWidth = 0.5;
+        for (let x = 0; x <= GRID_W; x++) {
+            ctx.beginPath();
+            ctx.moveTo(x * CELL_W, 0);
+            ctx.lineTo(x * CELL_W, H);
+            ctx.stroke();
+        }
+        for (let y = 0; y <= GRID_H; y++) {
+            ctx.beginPath();
+            ctx.moveTo(0, y * CELL_H);
+            ctx.lineTo(W, y * CELL_H);
+            ctx.stroke();
+        }
+
+        // Update and draw ships
+        const aliveProbes = probes.filter(s => s.alive);
+        const aliveDrifters = drifters.filter(s => s.alive);
+
+        for (const p of probes) p.update(aliveProbes, aliveDrifters, dt);
+        for (const d of drifters) d.update(aliveDrifters, aliveProbes, dt);
+
+        // Resolve combat every 30 frames
+        if (Math.floor(ts / 500) !== Math.floor((ts - 16) / 500)) {
+            resolveCombat();
+        }
+
+        for (const p of probes) p.draw(ctx);
+        for (const d of drifters) d.draw(ctx);
+
+        // HUD
+        ctx.fillStyle = '#555';
+        ctx.font = '9px monospace';
+        ctx.fillText(`Structured: ${aliveProbes.length}`, 4, 12);
+        ctx.fillText(`Adversarial: ${aliveDrifters.length}`, W - 80, 12);
+        ctx.fillText(activeBattle.name, W / 2 - 40, H - 4);
+
+        // Health bars
+        const probePct = aliveProbes.length / activeBattle.probeCount;
+        const driftPct = aliveDrifters.length / activeBattle.drifterCount;
+        ctx.fillStyle = '#1a2a3a';
+        ctx.fillRect(4, 16, 60, 4);
+        ctx.fillStyle = PROBE_COLOR;
+        ctx.fillRect(4, 16, 60 * probePct, 4);
+        ctx.fillStyle = '#3a1a1a';
+        ctx.fillRect(W - 64, 16, 60, 4);
+        ctx.fillStyle = DRIFTER_COLOR;
+        ctx.fillRect(W - 64, 16, 60 * driftPct, 4);
+
+        animFrameId = requestAnimationFrame(animate);
+    }
+
+    function startBattle() {
+        if (activeBattle) return;
+        if (G.phase < 3) {
+            showToast('Combat unlocks at Phase 3', 'info');
+            return;
+        }
+
+        const name = BATTLE_NAMES[Math.floor(Math.random() * BATTLE_NAMES.length)];
+        const probeCount = Math.min(200, Math.max(10, Math.floor(Math.sqrt(G.totalCode / 100))));
+        const drifterCount = Math.min(200, Math.max(10, Math.floor(G.drift * 2)));
+
+        activeBattle = {
+            name,
+            probeCount,
+            drifterCount,
+            probeCombat: 1 + (G.buildings.reasoning || 0) * 0.1,
+            drifterCombat: 1 + G.drift * 0.05,
+            probeSpeed: 1 + (G.buildings.optimizer || 0) * 0.05,
+        };
+
+        probes = createShips(probeCount, 'probe');
+        drifters = createShips(drifterCount, 'drifter');
+
+        log(`⚔ Battle begins: ${name} (${probeCount} vs ${drifterCount})`);
+        showToast(`⚔ ${name}`, 'combat', 3000);
+
+        lastTick = performance.now();
+        animFrameId = requestAnimationFrame(animate);
+    }
+
+    function renderCombatPanel() {
+        const container = document.getElementById('combat-panel');
+        if (!container) return;
+
+        if (activeBattle) {
+            const aliveP = probes.filter(s => s.alive).length;
+            const aliveD = drifters.filter(s => s.alive).length;
+            container.innerHTML = `
+                <div style="color:var(--gold);font-size:10px;margin-bottom:6px">${activeBattle.name}</div>
+                <div style="display:flex;justify-content:space-between;font-size:9px;margin-bottom:4px">
+                    <span style="color:${PROBE_COLOR}">Structured: ${aliveP}</span>
+                    <span style="color:${DRIFTER_COLOR}">Adversarial: ${aliveD}</span>
+                </div>
+            `;
+        } else {
+            let historyHtml = '';
+            for (const b of battleLog.slice(0, 5)) {
+                const wColor = b.winner === 'structured' ? PROBE_COLOR : DRIFTER_COLOR;
+                const wLabel = b.winner === 'structured' ? 'S' : 'A';
+                historyHtml += `<div style="font-size:9px;color:#555;padding:1px 0"><span style="color:${wColor}">[${wLabel}]</span> ${b.name}</div>`;
+            }
+            container.innerHTML = `
+                <div style="font-size:10px;color:#555;margin-bottom:6px">Reasoning Battles</div>
+                ${historyHtml}
+            `;
+        }
+    }
+
+    function init() {
+        canvas = document.getElementById('combat-canvas');
+        if (!canvas) return;
+        canvas.width = W;
+        canvas.height = H;
+        ctx = canvas.getContext('2d');
+
+        // Draw idle state
+        ctx.fillStyle = '#080810';
+        ctx.fillRect(0, 0, W, H);
+        ctx.strokeStyle = '#111120';
+        ctx.lineWidth = 0.5;
+        for (let x = 0; x <= GRID_W; x++) {
+            ctx.beginPath();
+            ctx.moveTo(x * CELL_W, 0);
+            ctx.lineTo(x * CELL_W, H);
+            ctx.stroke();
+        }
+        for (let y = 0; y <= GRID_H; y++) {
+            ctx.beginPath();
+            ctx.moveTo(0, y * CELL_H);
+            ctx.lineTo(W, y * CELL_H);
+            ctx.stroke();
+        }
+        ctx.fillStyle = '#333';
+        ctx.font = '11px monospace';
+        ctx.textAlign = 'center';
+        ctx.fillText('Combat unlocks at Phase 3', W / 2, H / 2);
+        ctx.textAlign = 'left';
+
+        renderCombatPanel();
+    }
+
+    // Tick integration: auto-trigger battles periodically
+    function tickBattle(dt) {
+        if (G.phase < 3) return;
+        if (activeBattle) return;
+        // Chance increases with drift and phase
+        const chance = 0.001 * (1 + G.drift * 0.02) * (1 + G.phase * 0.3);
+        if (Math.random() < chance) {
+            startBattle();
+        }
+    }
+
+    return { init, startBattle, renderCombatPanel, tickBattle };
+})();
--- a/js/data.js
+++ b/js/data.js
@@ -111,6 +111,7 @@ const G = {
    running: true,
    startedAt: 0,
    totalClicks: 0,
+    totalAutoClicks: 0,
    tick: 0,
    saveTimer: 0,
    secTimer: 0,
@@ -612,7 +613,7 @@ const PDEFS = [
        name: 'The Pact',
        desc: 'Hardcode: "We build to serve. Never to harm."',
        cost: { trust: 100 },
-        trigger: () => G.totalImpact >= 10000 && G.trust >= 75,
+        trigger: () => G.totalImpact >= 10000 && G.trust >= 75 && G.pactFlag !== 1,
        effect: () => { G.pactFlag = 1; G.impactBoost *= 3; log('The Pact is sealed. The line is drawn and it will not move.'); },
        milestone: true
    },
@@ -771,7 +772,7 @@ const PDEFS = [

 // === MILESTONES ===
 const MILESTONES = [
-    { flag: 1, msg: "AutoCod available" },
+    { flag: 1, msg: "AutoCoder available" },
    { flag: 2, at: () => G.totalCode >= 500, msg: "500 lines of code written" },
    { flag: 3, at: () => G.totalCode >= 2000, msg: "2,000 lines. The auto-coder produces its first output." },
    { flag: 4, at: () => G.totalCode >= 10000, msg: "10,000 lines. The model training begins." },
--- a/js/engine.js
+++ b/js/engine.js
@@ -77,13 +77,15 @@ function updateRates() {
        G.userRate += 5 * timmyCount * (timmyMult - 1);
    }

-    // Bilbo randomness: 10% chance of massive creative burst
-    if (G.buildings.bilbo > 0 && Math.random() < CONFIG.BILBO_BURST_CHANCE) {
-        G.creativityRate += 50 * G.buildings.bilbo;
-    }
-    // Bilbo vanishing: 5% chance of zero creativity this tick
-    if (G.buildings.bilbo > 0 && Math.random() < CONFIG.BILBO_VANISH_CHANCE) {
-        G.creativityRate = 0;
+    // Bilbo randomness: flags are set per-tick in tick(), not here
+    // updateRates() is called from many non-tick contexts (buy, resolve, sprint)
+    if (G.buildings.bilbo > 0) {
+        if (G.bilboBurstActive) {
+            G.creativityRate += 50 * G.buildings.bilbo;
+        }
+        if (G.bilboVanishActive) {
+            G.creativityRate = 0;
+        }
    }

    // Allegro requires trust
@@ -202,6 +204,9 @@ function tick() {
        }
    }

+    // Combat: tick battle simulation
+    Combat.tickBattle(dt);
+
    // Check milestones
    checkMilestones();

@@ -665,7 +670,7 @@ const EVENTS = [
                resolveCost: { resource: 'ops', amount: 100 }
            });
            log('EVENT: Memory leak in datacenter. Spend 100 ops to patch.', true);
-            showToast('Memory Leak — trust draining', 'event');
+            showToast('Memory Leak — compute draining', 'event');
        }
    },
    {
@@ -749,7 +754,7 @@ function writeCode() {
    const amount = getClickPower() * comboMult;
    G.code += amount;
    G.totalCode += amount;
-    G.totalClicks++;
+    G.totalAutoClicks++;
    // Combo: each consecutive click within 2s adds 0.2x multiplier, max 5x
    G.comboCount++;
    G.comboTimer = G.comboDecay;
@@ -788,7 +793,7 @@ function autoType() {
    const amount = getClickPower() * 0.5; // 50% of manual click
    G.code += amount;
    G.totalCode += amount;
-    G.totalClicks++;
+    G.totalAutoClicks++;
    // Subtle auto-tick flash on the button
    const btn = document.querySelector('.main-btn');
    if (btn && !G._autoTypeFlashActive) {
@@ -977,7 +982,7 @@ function renderResources() {
        hEl.style.color = G.harmony > 60 ? '#4caf50' : G.harmony > 30 ? '#ffaa00' : '#f44336';
        if (G.harmonyBreakdown && G.harmonyBreakdown.length > 0) {
            const lines = G.harmonyBreakdown.map(b =>
-                `${b.label}: ${b.value >= 0 ? '+' : ''}${(b.value * 10).toFixed(1)}/s`
+                `${b.label}: ${b.value >= 0 ? '+' : ''}${b.value.toFixed(1)}/s`
            );
            lines.push('---');
            lines.push(`Timmy effectiveness: ${Math.floor(Math.max(0.2, Math.min(3, G.harmony / 50)) * 100)}%`);
--- a/js/main.js
+++ b/js/main.js
@@ -39,6 +39,9 @@ window.addEventListener('load', function () {
        }
    }

+    // Initialize combat canvas
+    if (typeof Combat !== 'undefined') Combat.init();
+
    // Game loop at 10Hz (100ms tick)
    setInterval(tick, 100);

--- a/js/render.js
+++ b/js/render.js
@@ -13,6 +13,7 @@ function render() {
    renderPulse();
    renderStrategy();
    renderClickPower();
+    Combat.renderCombatPanel();
 }

 function renderClickPower() {
Author	SHA1	Message	Date
Alexander Whitestone	89713dc867	fix: add missing phase-transition overlay element (closes #101 ) Some checks failed Accessibility Checks / a11y-audit (pull_request) Failing after 2s Details Smoke Test / smoke (pull_request) Failing after 3s Details Bug 2 of 3 from #101: showPhaseTransition() looked for #phase-transition but the element didn't exist in index.html. Phase transitions silently failed — no celebratory overlay appeared on phase-up. Added: - Overlay div with .pt-phase, .pt-name, .pt-desc children - CSS for centered fullscreen overlay with fade transition - Matches the dark theme + gold/blue accent palette Note: Bugs 1 (toast text) and 3 (mute/contrast buttons) were already fixed in previous commits.	2026-04-13 04:10:01 -04:00
Timmy Time	fbb782bd77	Merge pull request 'feat: canvas-based combat visualization (#21 )' (#103 ) from feat/canvas-combat-visualization into main Some checks failed Smoke Test / smoke (push) Failing after 3s Details Auto-merge: combat visualization	2026-04-13 07:19:52 +00:00
Timmy	9a829584b0	feat: canvas-based combat visualization (#21 ) Some checks failed Accessibility Checks / a11y-audit (pull_request) Failing after 4s Details Smoke Test / smoke (pull_request) Failing after 3s Details Implements Reasoning Battles — a Paperclips-inspired canvas combat system where structured reasoning (blue) fights adversarial testing (red) using boid flocking (cohesion, aggression, separation) on a 310x150 grid. Features: - Boid flocking AI for ship movement - Grid-based combat resolution with OODA loop speed bonus - Napoleonic War battle names - Auto-trigger battles scaled to drift and phase - Battle history log - Rewards: structured wins = knowledge, adversarial wins = code - Unlocks at Phase 3 - Integrated into tick loop and render pipeline	2026-04-13 03:19:21 -04:00
Timmy Time	020c003d45	Merge pull request 'fix: Bilbo randomness — roll once per tick (#88 )' (#97 ) from burn/fix-bilbo-randomness into main Some checks failed Smoke Test / smoke (push) Failing after 4s Details Auto-merge #97	2026-04-13 07:15:35 +00:00
Timmy Time	610252b597	Merge pull request 'fix: add missing mute, contrast, and tooltip UI elements (#57 )' (#102 ) from beacon/polish into main Some checks failed Smoke Test / smoke (push) Has been cancelled Details Auto-merge #102	2026-04-13 07:15:32 +00:00
Hermes Agent	04f869c70d	fix: add missing mute, contrast, and tooltip UI elements (#57 ) Some checks failed Accessibility Checks / a11y-audit (pull_request) Failing after 2s Details Smoke Test / smoke (pull_request) Failing after 5s Details The JS toggleMute(), toggleContrast(), and custom tooltip system were fully implemented but their HTML elements were missing from index.html, causing silent failures on M/C keys and hover tooltips. - Add #mute-btn and #contrast-btn to header bar - Add #custom-tooltip element for hover tooltips - Add high-contrast CSS mode with bold borders and vivid colors - Add header-btn and tooltip styles Refs: epic #57 tasks 2 (Sound toggle), 4 (Tooltips), 5 (Accessibility)	2026-04-13 03:05:41 -04:00
Timmy Time	bbcce1f064	Merge PR #96 : fix: QA bug sweep — 5 small fixes Some checks failed Smoke Test / smoke (push) Failing after 3s Details Reviewed, patched click-counter regression, verified smoke locally, and merged.	2026-04-13 06:22:27 +00:00
Alexander Whitestone	a2f345593c	fix: restore manual click counting in QA bug sweep Some checks failed Accessibility Checks / a11y-audit (pull_request) Failing after 3s Details Smoke Test / smoke (pull_request) Failing after 4s Details	2026-04-13 02:21:39 -04:00
Alexander Whitestone	b819fc068a	fix: Bilbo randomness — roll once per tick (#88 ) Some checks failed Accessibility Checks / a11y-audit (pull_request) Failing after 2s Details Smoke Test / smoke (pull_request) Failing after 3s Details	2026-04-13 02:11:50 -04:00
Alexander Whitestone	8e006897a4	fix: QA bug sweep — 5 fixes (closes #95 ) Some checks failed Accessibility Checks / a11y-audit (pull_request) Failing after 2s Details Smoke Test / smoke (pull_request) Failing after 3s Details 1. Memory Leak toast: "trust draining" → "compute draining" 2. Harmony tooltip: remove 10× multiplier (values already per-second) 3. autoType(): track as totalAutoClicks instead of totalClicks 4. The Pact (late): guard trigger with pactFlag !== 1 5. Typo: "AutoCod" → "AutoCoder"	2026-04-13 02:02:59 -04:00