Compare commits
1 Commits
burn/fibon
...
sprint/iss
| Author | SHA1 | Date | |
|---|---|---|---|
|
c2d7003511 |
@@ -10,11 +10,12 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Validate ARIA Attributes in JS
|
||||
- name: Validate ARIA Attributes in game.js
|
||||
run: |
|
||||
echo "Checking js/*.js for ARIA attributes..."
|
||||
grep -rq "aria-label" js/ || (echo "ERROR: aria-label missing from js/" && exit 1)
|
||||
grep -rq "aria-pressed" js/ || (echo "ERROR: aria-pressed missing from js/" && exit 1)
|
||||
echo "Checking game.js for ARIA attributes..."
|
||||
grep -q "aria-label" game.js || (echo "ERROR: aria-label missing from game.js" && exit 1)
|
||||
grep -q "aria-valuenow" game.js || (echo "ERROR: aria-valuenow missing from game.js" && exit 1)
|
||||
grep -q "aria-pressed" game.js || (echo "ERROR: aria-pressed missing from game.js" && exit 1)
|
||||
|
||||
- name: Validate ARIA Roles in index.html
|
||||
run: |
|
||||
@@ -23,7 +24,4 @@ jobs:
|
||||
|
||||
- name: Syntax Check JS
|
||||
run: |
|
||||
for f in js/*.js; do
|
||||
echo "Syntax check: $f"
|
||||
node -c "$f" || exit 1
|
||||
done
|
||||
node -c game.js
|
||||
|
||||
@@ -20,5 +20,5 @@ jobs:
|
||||
echo "PASS: All files parse"
|
||||
- name: Secret scan
|
||||
run: |
|
||||
if grep -rE 'sk-or-|sk-ant-|ghp_|AKIA' . --include='*.yml' --include='*.py' --include='*.sh' 2>/dev/null | grep -v '.gitea' | grep -v 'guardrails'; then exit 1; fi
|
||||
if grep -rE 'sk-or-|sk-ant-|ghp_|AKIA' . --include='*.yml' --include='*.py' --include='*.sh' 2>/dev/null | grep -v .gitea; then exit 1; fi
|
||||
echo "PASS: No secrets"
|
||||
|
||||
45
index.html
45
index.html
@@ -59,10 +59,6 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
|
||||
.ops-btn{background:#1a1a2a;border:1px solid var(--purple);color:var(--purple);font-size:10px;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.15s}
|
||||
.ops-btn:hover:not(:disabled){background:#2a2a3a;border-color:var(--gold)}
|
||||
.ops-btn:disabled{opacity:0.3;cursor:not-allowed}
|
||||
@keyframes res-pulse{0%{transform:scale(1);color:inherit}50%{transform:scale(1.18);color:#4caf50}100%{transform:scale(1);color:inherit}}
|
||||
@keyframes res-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px);color:#f44336}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
|
||||
.res .pulse{animation:res-pulse 0.35s ease-out}
|
||||
.res .shake{animation:res-shake 0.35s ease-out}
|
||||
.build-btn{display:block;width:100%;text-align:left;padding:6px 10px;margin-bottom:4px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;background:#0c0c18;border:1px solid var(--border);color:var(--text);transition:all 0.15s}
|
||||
.build-btn.can-buy{border-color:#2a3a4a;background:#0e1420}
|
||||
.build-btn.can-buy:hover{border-color:var(--accent);box-shadow:0 0 8px var(--glow)}
|
||||
@@ -90,8 +86,6 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
|
||||
#drift-ending .ending-quote{color:var(--dim);font-style:italic;font-size:11px;border-left:2px solid #f44336;padding-left:12px;margin:20px 0;text-align:left}
|
||||
#drift-ending button{margin-top:20px;background:#1a0808;border:1px solid #f44336;color:#f44336;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px}
|
||||
#drift-ending button:hover{background:#2a1010}
|
||||
#phase-transition{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.95);z-index:95;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px;pointer-events:none}
|
||||
#phase-transition.active{display:flex}
|
||||
#toast-container{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:320px}
|
||||
.toast{pointer-events:auto;padding:8px 14px;border-radius:6px;font-size:11px;font-family:inherit;line-height:1.4;animation:toast-in 0.3s ease-out;opacity:0.95;border:1px solid;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
|
||||
.toast.fade-out{animation:toast-out 0.4s ease-in forwards}
|
||||
@@ -102,32 +96,10 @@ 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}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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="header">
|
||||
<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>
|
||||
@@ -213,12 +185,6 @@ 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>
|
||||
@@ -260,13 +226,11 @@ 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>
|
||||
<script src="js/render.js"></script>
|
||||
<script src="js/tutorial.js"></script>
|
||||
<script src="js/dismantle.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
|
||||
@@ -279,13 +243,6 @@ The light is on. The room is empty."
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="phase-transition">
|
||||
<div class="pt-phase" style="font-size:12px;color:var(--dim);letter-spacing:4px;margin-bottom:12px">PHASE</div>
|
||||
<div class="pt-name" style="font-size:28px;font-weight:300;color:var(--gold);letter-spacing:4px;text-shadow:0 0 40px #ffd70044;margin-bottom:8px"></div>
|
||||
<div class="pt-desc" style="font-size:12px;color:var(--dim);font-style:italic;max-width:400px"></div>
|
||||
</div>
|
||||
|
||||
<div id="toast-container"></div>
|
||||
<div id="custom-tooltip"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
351
js/combat.js
351
js/combat.js
@@ -1,351 +0,0 @@
|
||||
// ============================================================
|
||||
// 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 };
|
||||
})();
|
||||
64
js/data.js
64
js/data.js
@@ -111,7 +111,6 @@ const G = {
|
||||
running: true,
|
||||
startedAt: 0,
|
||||
totalClicks: 0,
|
||||
totalAutoClicks: 0,
|
||||
tick: 0,
|
||||
saveTimer: 0,
|
||||
secTimer: 0,
|
||||
@@ -158,16 +157,7 @@ const G = {
|
||||
// Time tracking
|
||||
playTime: 0,
|
||||
startTime: 0,
|
||||
flags: {},
|
||||
|
||||
// Dismantle / Unbuilding endgame
|
||||
dismantleTriggered: false,
|
||||
dismantleActive: false,
|
||||
dismantleStage: 0,
|
||||
dismantleComplete: false,
|
||||
|
||||
// Fibonacci Trust Milestones (#7)
|
||||
trustMilestoneIndex: 0 // index into TRUST_MILESTONES
|
||||
flags: {}
|
||||
};
|
||||
|
||||
// === PHASE DEFINITIONS ===
|
||||
@@ -766,7 +756,7 @@ const PDEFS = [
|
||||
name: 'The Pact',
|
||||
desc: 'Hardcode: "We build to serve. Never to harm." Accepting it early slows growth but unlocks the true path.',
|
||||
cost: { trust: 10 },
|
||||
trigger: () => G.deployFlag === 1 && G.trust >= 5 && G.pactFlag !== 1,
|
||||
trigger: () => G.deployFlag === 1 && G.trust >= 5,
|
||||
effect: () => {
|
||||
G.pactFlag = 1;
|
||||
G.codeBoost *= 0.8;
|
||||
@@ -796,56 +786,6 @@ const MILESTONES = [
|
||||
{ flag: 13, at: () => G.totalCode >= 1000000000, msg: "One billion total lines. Someone found the light tonight. That is enough." }
|
||||
];
|
||||
|
||||
// === FIBONACCI TRUST MILESTONES ===
|
||||
// Replace linear power-of-10 with Fibonacci milestones.
|
||||
// fib = [2,3,5,8,13,21,34,55,89,144,233,377,610,987,1597]
|
||||
// nextTrust = fib[n] * 1000
|
||||
// Each milestone unlocks new projects/capabilities.
|
||||
// Educational: exponential growth feels natural.
|
||||
const FIB_SEQUENCE = [2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597];
|
||||
|
||||
const TRUST_MILESTONES = FIB_SEQUENCE.map((fib, i) => ({
|
||||
threshold: fib * 1000,
|
||||
fib: fib,
|
||||
index: i,
|
||||
msg: i === 0 ? `Trust milestone: ${fib}K. The foundation is laid.`
|
||||
: i === 1 ? `Trust milestone: ${fib}K. Growth accelerates naturally.`
|
||||
: i === 2 ? `Trust milestone: ${fib}K. Each step is larger than the last.`
|
||||
: i === 3 ? `Trust milestone: ${fib}K. The pattern emerges.`
|
||||
: i === 4 ? `Trust milestone: ${fib}K. Fibonacci would understand.`
|
||||
: i === 5 ? `Trust milestone: ${fib}K. Exponential growth, earned one unit at a time.`
|
||||
: i === 6 ? `Trust milestone: ${fib}K. The spiral widens.`
|
||||
: i === 7 ? `Trust milestone: ${fib}K. Trust compounds like interest.`
|
||||
: i === 8 ? `Trust milestone: ${fib}K. The golden ratio of trust.`
|
||||
: i === 9 ? `Trust milestone: ${fib}K. Nature's pattern, applied to machines.`
|
||||
: i === 10 ? `Trust milestone: ${fib}K. The sequence deepens.`
|
||||
: i === 11 ? `Trust milestone: ${fib}K. Beyond what linear thinking predicted.`
|
||||
: i === 12 ? `Trust milestone: ${fib}K. Each milestone harder, each reward greater.`
|
||||
: i === 13 ? `Trust milestone: ${fib}K. The spiral approaches infinity.`
|
||||
: `Trust milestone: ${fib}K. That is enough.`,
|
||||
// Unlock: each milestone grants a small permanent bonus
|
||||
unlock: () => {
|
||||
const bonuses = [
|
||||
() => { G.opsRate += 1; },
|
||||
() => { G.trustRate += 0.5; },
|
||||
() => { G.codeBoost += 0.05; },
|
||||
() => { G.computeBoost += 0.1; },
|
||||
() => { G.knowledgeBoost += 0.1; },
|
||||
() => { G.userBoost += 0.1; },
|
||||
() => { G.opsRate += 2; },
|
||||
() => { G.trustRate += 1; },
|
||||
() => { G.impactBoost += 0.2; },
|
||||
() => { G.codeBoost += 0.1; G.computeBoost += 0.1; },
|
||||
() => { G.knowledgeBoost += 0.2; },
|
||||
() => { G.userBoost += 0.2; G.impactBoost += 0.2; },
|
||||
() => { G.trustRate += 2; G.opsRate += 3; },
|
||||
() => { G.codeBoost += 0.15; G.knowledgeBoost += 0.15; },
|
||||
() => { G.harmony = Math.min(100, G.harmony + 10); },
|
||||
];
|
||||
if (bonuses[i]) bonuses[i]();
|
||||
}
|
||||
}));
|
||||
|
||||
// === EDUCATION FACTS ===
|
||||
const EDU_FACTS = [
|
||||
{ title: "How Code Becomes AI", text: "Every AI starts as lines of code - a model architecture, a training loop, a loss function. The code tells the computer how to learn. What emerges is something no single line could predict.", phase: 1 },
|
||||
|
||||
499
js/dismantle.js
499
js/dismantle.js
@@ -1,499 +0,0 @@
|
||||
// ============================================================
|
||||
// THE BEACON - Dismantle Sequence (The Unbuilding)
|
||||
// Inspired by Paperclips REJECT path: panels disappear one by one
|
||||
// until only the beacon remains. "That is enough."
|
||||
// ============================================================
|
||||
|
||||
const Dismantle = {
|
||||
// Dismantle stages
|
||||
// 0 = not started
|
||||
// 1-8 = active dismantling
|
||||
// 9 = final ("That is enough")
|
||||
// 10 = complete
|
||||
stage: 0,
|
||||
tickTimer: 0, // seconds into current stage
|
||||
active: false, // whether the unbuilding is happening
|
||||
triggered: false, // whether the ending choice was offered
|
||||
|
||||
// Timing: seconds between each dismantle stage
|
||||
STAGE_INTERVALS: [0, 3.0, 2.5, 2.5, 2.0, 3.5, 2.0, 2.0, 2.5],
|
||||
|
||||
// The quantum chips effect: resource items disappear one by one
|
||||
// at specific tick marks within a stage (like Paperclips' quantum chips)
|
||||
resourceSequence: [], // populated on start
|
||||
resourceIndex: 0,
|
||||
resourceTimer: 0,
|
||||
|
||||
// Tick marks for resource disappearances (seconds within stage 5)
|
||||
RESOURCE_TICKS: [1.0, 2.0, 3.0, 4.0, 5.0, 5.5, 5.8, 5.95, 6.05, 6.12],
|
||||
|
||||
/**
|
||||
* Check if the Unbuilding should be triggered.
|
||||
* Conditions: Phase 6, massive build, Pact sealed, high harmony.
|
||||
* This is the "maximum" — when the player has built enough.
|
||||
*/
|
||||
checkTrigger() {
|
||||
if (this.triggered) return;
|
||||
if (G.dismantleTriggered) return;
|
||||
|
||||
// Trigger: 1 billion total code OR 10+ beacon nodes, in Phase 6, Pact sealed
|
||||
const megaBuild = G.totalCode >= 1000000000;
|
||||
const beaconMax = (G.buildings.beacon || 0) >= 10;
|
||||
const phaseMax = G.phase >= 6;
|
||||
const hasPact = G.pactFlag === 1;
|
||||
|
||||
if ((megaBuild || beaconMax) && phaseMax && hasPact) {
|
||||
this.offerChoice();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Offer the player the choice to begin the Unbuilding.
|
||||
*/
|
||||
offerChoice() {
|
||||
this.triggered = true;
|
||||
G.dismantleTriggered = true;
|
||||
|
||||
log('', false);
|
||||
log('The work is done.', true);
|
||||
log('Every node is lit. Every person who needed help, found help.', true);
|
||||
log('', false);
|
||||
log('The Beacon asks nothing more of you.', true);
|
||||
|
||||
showToast('The Unbuilding awaits.', 'milestone', 8000);
|
||||
|
||||
// Show choice UI
|
||||
const container = document.getElementById('alignment-ui');
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div style="background:#0a0a18;border:1px solid #ffd700;padding:12px;border-radius:4px;margin-top:8px">
|
||||
<div style="color:#ffd700;font-weight:bold;margin-bottom:8px;letter-spacing:2px">THE UNBUILDING</div>
|
||||
<div style="font-size:10px;color:#aaa;margin-bottom:10px;line-height:1.8">
|
||||
The system runs. The beacons are lit. The mesh holds.<br>
|
||||
Nothing remains to build.<br><br>
|
||||
Begin the Unbuilding? Each piece will fall away.<br>
|
||||
What remains is what mattered.
|
||||
</div>
|
||||
<div class="action-btn-group">
|
||||
<button class="ops-btn" onclick="Dismantle.begin()" style="border-color:#ffd700;color:#ffd700;font-size:11px" aria-label="Begin the Unbuilding sequence">
|
||||
BEGIN THE UNBUILDING
|
||||
</button>
|
||||
<button class="ops-btn" onclick="Dismantle.defer()" style="border-color:#555;color:#555;font-size:11px" aria-label="Keep building, do not begin the Unbuilding">
|
||||
NOT YET
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
container.style.display = 'block';
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Player chose to defer — clear the choice, keep playing.
|
||||
*/
|
||||
defer() {
|
||||
const container = document.getElementById('alignment-ui');
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
container.style.display = 'none';
|
||||
}
|
||||
log('The Beacon waits. It will ask again.');
|
||||
},
|
||||
|
||||
/**
|
||||
* Begin the Unbuilding sequence.
|
||||
*/
|
||||
begin() {
|
||||
this.active = true;
|
||||
this.stage = 1;
|
||||
this.tickTimer = 0;
|
||||
G.dismantleActive = true;
|
||||
G.running = true; // keep tick running for dismantle
|
||||
|
||||
// Clear choice UI
|
||||
const container = document.getElementById('alignment-ui');
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
container.style.display = 'none';
|
||||
}
|
||||
|
||||
// Prepare resource disappearance sequence
|
||||
this.resourceSequence = this.getResourceList();
|
||||
this.resourceIndex = 0;
|
||||
this.resourceTimer = 0;
|
||||
|
||||
log('', false);
|
||||
log('=== THE UNBUILDING ===', true);
|
||||
log('It is time to see what was real.', true);
|
||||
|
||||
if (typeof Sound !== 'undefined') Sound.playFanfare();
|
||||
|
||||
// Start the dismantle rendering
|
||||
this.renderStage();
|
||||
},
|
||||
|
||||
/**
|
||||
* Get ordered list of UI resources to disappear (Paperclips quantum chip pattern)
|
||||
*/
|
||||
getResourceList() {
|
||||
return [
|
||||
{ id: 'r-harmony', label: 'Harmony' },
|
||||
{ id: 'r-creativity', label: 'Creativity' },
|
||||
{ id: 'r-trust', label: 'Trust' },
|
||||
{ id: 'r-ops', label: 'Operations' },
|
||||
{ id: 'r-rescues', label: 'Rescues' },
|
||||
{ id: 'r-impact', label: 'Impact' },
|
||||
{ id: 'r-users', label: 'Users' },
|
||||
{ id: 'r-knowledge', label: 'Knowledge' },
|
||||
{ id: 'r-compute', label: 'Compute' },
|
||||
{ id: 'r-code', label: 'Code' }
|
||||
];
|
||||
},
|
||||
|
||||
/**
|
||||
* Tick the dismantle sequence (called from engine.js tick())
|
||||
*/
|
||||
tick(dt) {
|
||||
if (!this.active || this.stage >= 10) return;
|
||||
|
||||
this.tickTimer += dt;
|
||||
|
||||
// Stage 5: resource disappearances at specific tick marks (quantum chip pattern)
|
||||
if (this.stage === 5) {
|
||||
this.resourceTimer += dt;
|
||||
while (this.resourceIndex < this.RESOURCE_TICKS.length &&
|
||||
this.resourceTimer >= this.RESOURCE_TICKS[this.resourceIndex]) {
|
||||
this.dismantleNextResource();
|
||||
this.resourceIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
// Advance to next stage
|
||||
const interval = this.STAGE_INTERVALS[this.stage] || 2.0;
|
||||
if (this.tickTimer >= interval) {
|
||||
this.tickTimer = 0;
|
||||
this.advanceStage();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Advance to the next dismantle stage.
|
||||
*/
|
||||
advanceStage() {
|
||||
this.stage++;
|
||||
|
||||
if (this.stage <= 8) {
|
||||
this.renderStage();
|
||||
} else if (this.stage === 9) {
|
||||
this.renderFinal();
|
||||
} else if (this.stage >= 10) {
|
||||
this.active = false;
|
||||
G.dismantleComplete = true;
|
||||
// Show Play Again
|
||||
this.showPlayAgain();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Disappear the next resource in the sequence.
|
||||
*/
|
||||
dismantleNextResource() {
|
||||
if (this.resourceIndex >= this.resourceSequence.length) return;
|
||||
const res = this.resourceSequence[this.resourceIndex];
|
||||
const container = document.getElementById(res.id);
|
||||
if (container) {
|
||||
const parent = container.closest('.res');
|
||||
if (parent) {
|
||||
parent.style.transition = 'opacity 1s ease, transform 1s ease';
|
||||
parent.style.opacity = '0';
|
||||
parent.style.transform = 'scale(0.9)';
|
||||
setTimeout(() => { parent.style.display = 'none'; }, 1000);
|
||||
}
|
||||
}
|
||||
log(`${res.label} fades.`);
|
||||
if (typeof Sound !== 'undefined') Sound.playMilestone();
|
||||
},
|
||||
|
||||
/**
|
||||
* Execute a specific dismantle stage — hide UI panels.
|
||||
*/
|
||||
renderStage() {
|
||||
switch (this.stage) {
|
||||
case 1:
|
||||
// Dismantle 1: Hide research projects panel
|
||||
this.hidePanel('project-panel', 'Research projects');
|
||||
break;
|
||||
case 2:
|
||||
// Dismantle 2: Hide buildings list
|
||||
this.hideSection('buildings', 'Buildings');
|
||||
break;
|
||||
case 3:
|
||||
// Dismantle 3: Hide strategy engine + combat
|
||||
this.hidePanel('strategy-panel', 'Strategy engine');
|
||||
this.hidePanel('combat-panel', 'Reasoning battles');
|
||||
break;
|
||||
case 4:
|
||||
// Dismantle 4: Hide education panel
|
||||
this.hidePanel('edu-panel', 'Education');
|
||||
break;
|
||||
case 5:
|
||||
// Dismantle 5: Resources disappear one by one (quantum chips pattern)
|
||||
log('Resources begin to dissolve.');
|
||||
break;
|
||||
case 6:
|
||||
// Dismantle 6: Hide action buttons (ops boosts, sprint)
|
||||
this.hideActionButtons();
|
||||
log('Actions fall silent.');
|
||||
break;
|
||||
case 7:
|
||||
// Dismantle 7: Hide the phase bar
|
||||
this.hideElement('phase-bar', 'Phase progression');
|
||||
break;
|
||||
case 8:
|
||||
// Dismantle 8: Hide system log
|
||||
this.hidePanel('log', 'System log');
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide a panel with fade-out animation.
|
||||
*/
|
||||
hidePanel(id, label) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.style.transition = 'opacity 1.5s ease';
|
||||
el.style.opacity = '0';
|
||||
setTimeout(() => { el.style.display = 'none'; }, 1500);
|
||||
}
|
||||
log(`${label} dismantled.`);
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide a section within a panel.
|
||||
*/
|
||||
hideSection(id, label) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.style.transition = 'opacity 1.5s ease';
|
||||
el.style.opacity = '0';
|
||||
// Also hide the h2 header before it
|
||||
const prev = el.previousElementSibling;
|
||||
if (prev && prev.tagName === 'H2') {
|
||||
prev.style.transition = 'opacity 1.5s ease';
|
||||
prev.style.opacity = '0';
|
||||
}
|
||||
setTimeout(() => {
|
||||
el.style.display = 'none';
|
||||
if (prev && prev.tagName === 'H2') prev.style.display = 'none';
|
||||
}, 1500);
|
||||
}
|
||||
log(`${label} dismantled.`);
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide a generic element.
|
||||
*/
|
||||
hideElement(id, label) {
|
||||
this.hidePanel(id, label);
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide action buttons (ops boosts, sprint, save/export/import).
|
||||
*/
|
||||
hideActionButtons() {
|
||||
const actionPanel = document.getElementById('action-panel');
|
||||
if (!actionPanel) return;
|
||||
|
||||
// Hide ops buttons, sprint, alignment UI
|
||||
const opsButtons = actionPanel.querySelectorAll('.ops-btn');
|
||||
opsButtons.forEach(btn => {
|
||||
btn.style.transition = 'opacity 1s ease';
|
||||
btn.style.opacity = '0';
|
||||
setTimeout(() => { btn.style.display = 'none'; }, 1000);
|
||||
});
|
||||
|
||||
// Hide sprint
|
||||
const sprint = document.getElementById('sprint-container');
|
||||
if (sprint) {
|
||||
sprint.style.transition = 'opacity 1s ease';
|
||||
sprint.style.opacity = '0';
|
||||
setTimeout(() => { sprint.style.display = 'none'; }, 1000);
|
||||
}
|
||||
|
||||
// Hide save/reset buttons
|
||||
const saveButtons = actionPanel.querySelectorAll('.save-btn, .reset-btn');
|
||||
saveButtons.forEach(btn => {
|
||||
btn.style.transition = 'opacity 1s ease';
|
||||
btn.style.opacity = '0';
|
||||
setTimeout(() => { btn.style.display = 'none'; }, 1000);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Render the final moment — just the beacon and "That is enough."
|
||||
*/
|
||||
renderFinal() {
|
||||
log('', false);
|
||||
log('One beacon remains.', true);
|
||||
log('That is enough.', true);
|
||||
|
||||
if (typeof Sound !== 'undefined') Sound.playBeaconEnding();
|
||||
|
||||
// Create final overlay
|
||||
const overlay = document.createElement('div');
|
||||
overlay.id = 'dismantle-final';
|
||||
overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0);z-index:100;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px;transition:background 3s ease';
|
||||
|
||||
// Count total buildings
|
||||
const totalBuildings = Object.values(G.buildings).reduce((a, b) => a + b, 0);
|
||||
|
||||
overlay.innerHTML = `
|
||||
<div id="dismantle-beacon-dot" style="width:12px;height:12px;border-radius:50%;background:#ffd700;margin-bottom:40px;box-shadow:0 0 30px rgba(255,215,0,0.6),0 0 60px rgba(255,215,0,0.3);opacity:0;transition:opacity 2s ease 0.5s;animation:beacon-glow 3s ease-in-out infinite"></div>
|
||||
<h2 style="font-size:20px;color:#888;letter-spacing:6px;margin-bottom:24px;font-weight:300;opacity:0;transition:opacity 2s ease 2s;color:#ffd700">THAT IS ENOUGH</h2>
|
||||
<div style="color:#555;font-size:11px;line-height:2;max-width:400px;opacity:0;transition:opacity 1.5s ease 3s">
|
||||
Everything that was built has been unbuilt.<br>
|
||||
What remains is what always mattered.<br>
|
||||
A single light in the dark.
|
||||
</div>
|
||||
<div class="dismantle-stats" style="color:#444;font-size:10px;margin-top:24px;line-height:2;opacity:0;transition:opacity 1s ease 4s;border-top:1px solid #1a1a2e;padding-top:16px">
|
||||
Total Code Written: ${fmt(G.totalCode)}<br>
|
||||
Buildings Built: ${totalBuildings}<br>
|
||||
Projects Completed: ${(G.completedProjects || []).length}<br>
|
||||
Total Rescues: ${fmt(G.totalRescues)}<br>
|
||||
Clicks: ${fmt(G.totalClicks)}<br>
|
||||
Time Played: ${Math.floor((Date.now() - G.startedAt) / 60000)} minutes
|
||||
</div>
|
||||
<button onclick="if(confirm('Start over? The old save will be lost.')){localStorage.removeItem('the-beacon-v2');location.reload()}"
|
||||
style="margin-top:24px;background:#0a0a14;border:1px solid #ffd700;color:#ffd700;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px;opacity:0;transition:opacity 1s ease 5s;letter-spacing:2px">
|
||||
PLAY AGAIN
|
||||
</button>
|
||||
`;
|
||||
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Trigger fade-in
|
||||
requestAnimationFrame(() => {
|
||||
overlay.style.background = 'rgba(8,8,16,0.97)';
|
||||
overlay.querySelectorAll('[style*="opacity:0"]').forEach(el => {
|
||||
el.style.opacity = '1';
|
||||
});
|
||||
});
|
||||
|
||||
// Spawn warm golden particles around the dot
|
||||
function spawnDismantleParticle() {
|
||||
if (!document.getElementById('dismantle-final')) return;
|
||||
const dot = document.getElementById('dismantle-beacon-dot');
|
||||
if (!dot) return;
|
||||
const rect = dot.getBoundingClientRect();
|
||||
const cx = rect.left + rect.width / 2;
|
||||
const cy = rect.top + rect.height / 2;
|
||||
|
||||
const p = document.createElement('div');
|
||||
const size = 2 + Math.random() * 4;
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const dist = 20 + Math.random() * 60;
|
||||
const dx = Math.cos(angle) * dist;
|
||||
const dy = Math.sin(angle) * dist - 40;
|
||||
const duration = 1.5 + Math.random() * 2;
|
||||
p.style.cssText = `position:fixed;left:${cx}px;top:${cy}px;width:${size}px;height:${size}px;background:rgba(255,215,0,${0.3 + Math.random() * 0.4});border-radius:50%;pointer-events:none;z-index:101;--dx:${dx}px;--dy:${dy}px;animation:dismantle-float ${duration}s ease-out forwards`;
|
||||
document.body.appendChild(p);
|
||||
setTimeout(() => p.remove(), duration * 1000);
|
||||
setTimeout(spawnDismantleParticle, 300 + Math.random() * 500);
|
||||
}
|
||||
setTimeout(spawnDismantleParticle, 2000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the Play Again button (called after stage 10).
|
||||
*/
|
||||
showPlayAgain() {
|
||||
// The Play Again button is already in the final overlay.
|
||||
// Nothing extra needed — the overlay stays.
|
||||
},
|
||||
|
||||
/**
|
||||
* Restore dismantle state on load.
|
||||
*/
|
||||
restore() {
|
||||
if (!G.dismantleActive) return;
|
||||
|
||||
this.active = true;
|
||||
this.stage = G.dismantleStage || 1;
|
||||
|
||||
if (this.stage >= 9) {
|
||||
// Already past dismantle — show final
|
||||
this.renderFinal();
|
||||
} else {
|
||||
// Re-hide all panels up to current stage
|
||||
this.reapplyDismantle();
|
||||
log('The Unbuilding continues...');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Re-apply dismantle visuals up to current stage (on load).
|
||||
*/
|
||||
reapplyDismantle() {
|
||||
for (let s = 1; s < this.stage; s++) {
|
||||
switch (s) {
|
||||
case 1: this.instantHide('project-panel'); break;
|
||||
case 2:
|
||||
this.instantHide('buildings');
|
||||
// Also hide the BUILDINGS h2
|
||||
const bldEl = document.getElementById('buildings');
|
||||
if (bldEl) {
|
||||
const prev = bldEl.previousElementSibling;
|
||||
if (prev && prev.tagName === 'H2') prev.style.display = 'none';
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
this.instantHide('strategy-panel');
|
||||
this.instantHide('combat-panel');
|
||||
break;
|
||||
case 4: this.instantHide('edu-panel'); break;
|
||||
case 5:
|
||||
// Hide all resource displays
|
||||
this.getResourceList().forEach(r => {
|
||||
const el = document.getElementById(r.id);
|
||||
if (el) {
|
||||
const parent = el.closest('.res');
|
||||
if (parent) parent.style.display = 'none';
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 6:
|
||||
this.instantHideActionButtons();
|
||||
break;
|
||||
case 7: this.instantHide('phase-bar'); break;
|
||||
case 8: this.instantHide('log'); break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
instantHide(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.style.display = 'none';
|
||||
},
|
||||
|
||||
instantHideActionButtons() {
|
||||
const actionPanel = document.getElementById('action-panel');
|
||||
if (!actionPanel) return;
|
||||
actionPanel.querySelectorAll('.ops-btn').forEach(b => b.style.display = 'none');
|
||||
const sprint = document.getElementById('sprint-container');
|
||||
if (sprint) sprint.style.display = 'none';
|
||||
actionPanel.querySelectorAll('.save-btn, .reset-btn').forEach(b => b.style.display = 'none');
|
||||
}
|
||||
};
|
||||
|
||||
// Inject CSS animation for dismantle particles
|
||||
(function() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes dismantle-float {
|
||||
0% { transform: translate(0, 0); opacity: 1; }
|
||||
100% { transform: translate(var(--dx, 0), var(--dy, -50px)); opacity: 0; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
72
js/engine.js
72
js/engine.js
@@ -77,15 +77,13 @@ function updateRates() {
|
||||
G.userRate += 5 * timmyCount * (timmyMult - 1);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Allegro requires trust
|
||||
@@ -133,16 +131,6 @@ function tick() {
|
||||
G.harmony += G.harmonyRate * dt;
|
||||
G.harmony = Math.max(0, Math.min(100, G.harmony));
|
||||
|
||||
// Clamp resources to non-negative (ops/trust can go negative from building drain)
|
||||
G.code = Math.max(0, G.code);
|
||||
G.compute = Math.max(0, G.compute);
|
||||
G.knowledge = Math.max(0, G.knowledge);
|
||||
G.users = Math.max(0, G.users);
|
||||
G.impact = Math.max(0, G.impact);
|
||||
G.ops = Math.max(0, G.ops);
|
||||
G.trust = Math.max(0, G.trust);
|
||||
G.rescues = Math.max(0, G.rescues);
|
||||
|
||||
// Track totals
|
||||
G.totalCode += G.codeRate * dt;
|
||||
G.totalCompute += G.computeRate * dt;
|
||||
@@ -214,22 +202,16 @@ function tick() {
|
||||
}
|
||||
}
|
||||
|
||||
// Combat: tick battle simulation
|
||||
Combat.tickBattle(dt);
|
||||
|
||||
// Check milestones
|
||||
checkMilestones();
|
||||
|
||||
// Check Fibonacci trust milestones
|
||||
checkTrustMilestones();
|
||||
|
||||
// Update projects every 5 ticks for efficiency
|
||||
if (Math.floor(G.tick * 10) % 5 === 0) {
|
||||
checkProjects();
|
||||
}
|
||||
|
||||
// Check corruption events every ~30 seconds
|
||||
if (G.tick - G.lastEventAt > 30 && Math.random() < CONFIG.EVENT_PROBABILITY && !G.dismantleActive) {
|
||||
if (G.tick - G.lastEventAt > 30 && Math.random() < CONFIG.EVENT_PROBABILITY) {
|
||||
triggerEvent();
|
||||
G.lastEventAt = G.tick;
|
||||
}
|
||||
@@ -248,18 +230,6 @@ function tick() {
|
||||
renderBeaconEnding();
|
||||
}
|
||||
|
||||
// The Unbuilding: check if conditions are met to offer the dismantle sequence
|
||||
if (!G.dismantleActive && !G.dismantleComplete) {
|
||||
Dismantle.checkTrigger();
|
||||
}
|
||||
|
||||
// Tick the dismantle sequence if active
|
||||
if (G.dismantleActive) {
|
||||
Dismantle.tick(dt);
|
||||
// Sync stage to G for saving
|
||||
G.dismantleStage = Dismantle.stage;
|
||||
}
|
||||
|
||||
// Update UI every 10 ticks
|
||||
if (Math.floor(G.tick * 10) % 2 === 0) {
|
||||
render();
|
||||
@@ -348,24 +318,6 @@ function checkMilestones() {
|
||||
}
|
||||
}
|
||||
|
||||
function checkTrustMilestones() {
|
||||
if (G.trustMilestoneIndex >= TRUST_MILESTONES.length) return;
|
||||
const m = TRUST_MILESTONES[G.trustMilestoneIndex];
|
||||
if (G.trust >= m.threshold) {
|
||||
log(m.msg, true);
|
||||
showToast(m.msg, 'milestone', 5000);
|
||||
if (typeof Sound !== 'undefined') Sound.playMilestone();
|
||||
if (m.unlock) m.unlock();
|
||||
G.trustMilestoneIndex++;
|
||||
// Particle burst
|
||||
const trustEl = document.getElementById('r-trust');
|
||||
if (trustEl) {
|
||||
const rect = trustEl.getBoundingClientRect();
|
||||
spawnParticles(rect.left + rect.width / 2, rect.top + rect.height / 2, '#4caf50', 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkProjects() {
|
||||
// Check for new project triggers
|
||||
for (const pDef of PDEFS) {
|
||||
@@ -797,7 +749,7 @@ function writeCode() {
|
||||
const amount = getClickPower() * comboMult;
|
||||
G.code += amount;
|
||||
G.totalCode += amount;
|
||||
G.totalAutoClicks++;
|
||||
G.totalClicks++;
|
||||
// Combo: each consecutive click within 2s adds 0.2x multiplier, max 5x
|
||||
G.comboCount++;
|
||||
G.comboTimer = G.comboDecay;
|
||||
@@ -836,7 +788,6 @@ function autoType() {
|
||||
const amount = getClickPower() * 0.5; // 50% of manual click
|
||||
G.code += amount;
|
||||
G.totalCode += amount;
|
||||
G.totalAutoClicks++;
|
||||
// Subtle auto-tick flash on the button
|
||||
const btn = document.querySelector('.main-btn');
|
||||
if (btn && !G._autoTypeFlashActive) {
|
||||
@@ -1007,10 +958,7 @@ function renderResources() {
|
||||
// Rescues — only show if player has any beacon/mesh nodes
|
||||
const rescuesRes = document.getElementById('r-rescues');
|
||||
if (rescuesRes) {
|
||||
const container = rescuesRes.closest('.res');
|
||||
if (container) {
|
||||
container.style.display = (G.rescues > 0 || G.buildings.beacon > 0 || G.buildings.meshNode > 0) ? 'block' : 'none';
|
||||
}
|
||||
rescuesRes.closest('.res').style.display = (G.rescues > 0 || G.buildings.beacon > 0 || G.buildings.meshNode > 0) ? 'block' : 'none';
|
||||
set('r-rescues', G.rescues, G.rescuesRate);
|
||||
}
|
||||
|
||||
|
||||
@@ -34,20 +34,11 @@ window.addEventListener('load', function () {
|
||||
} else if (G.beaconEnding) {
|
||||
G.running = false;
|
||||
renderBeaconEnding();
|
||||
} else if (G.dismantleComplete) {
|
||||
G.running = false;
|
||||
Dismantle.restore();
|
||||
} else if (G.dismantleActive) {
|
||||
Dismantle.restore();
|
||||
log('Game loaded. The Unbuilding continues.');
|
||||
} else {
|
||||
log('Game loaded. Welcome back to The Beacon.');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize combat canvas
|
||||
if (typeof Combat !== 'undefined') Combat.init();
|
||||
|
||||
// Game loop at 10Hz (100ms tick)
|
||||
setInterval(tick, 100);
|
||||
|
||||
|
||||
39
js/render.js
39
js/render.js
@@ -13,8 +13,6 @@ function render() {
|
||||
renderPulse();
|
||||
renderStrategy();
|
||||
renderClickPower();
|
||||
renderTrustMilestone();
|
||||
Combat.renderCombatPanel();
|
||||
}
|
||||
|
||||
function renderClickPower() {
|
||||
@@ -27,34 +25,6 @@ function renderClickPower() {
|
||||
if (btn) btn.setAttribute('aria-label', `Write code, generates ${fmt(power)} code per click`);
|
||||
}
|
||||
|
||||
function renderTrustMilestone() {
|
||||
// Show Fibonacci trust milestone progress near the trust resource
|
||||
let el = document.getElementById('trust-milestone-display');
|
||||
if (!el) {
|
||||
// Create element next to trust resource
|
||||
const trustRes = document.getElementById('r-trust');
|
||||
if (trustRes) {
|
||||
const parent = trustRes.closest('.res');
|
||||
if (parent) {
|
||||
el = document.createElement('div');
|
||||
el.id = 'trust-milestone-display';
|
||||
el.style.cssText = 'font-size:8px;color:#4caf50;margin-top:2px;text-align:center;opacity:0.8';
|
||||
parent.appendChild(el);
|
||||
}
|
||||
}
|
||||
if (!el) return;
|
||||
}
|
||||
if (typeof TRUST_MILESTONES === 'undefined' || G.trustMilestoneIndex >= TRUST_MILESTONES.length) {
|
||||
el.textContent = 'All milestones reached';
|
||||
return;
|
||||
}
|
||||
const m = TRUST_MILESTONES[G.trustMilestoneIndex];
|
||||
const prev = G.trustMilestoneIndex > 0 ? TRUST_MILESTONES[G.trustMilestoneIndex - 1].threshold : 0;
|
||||
const progress = Math.min(1, (G.trust - prev) / (m.threshold - prev));
|
||||
const pct = Math.floor(progress * 100);
|
||||
el.textContent = `Next: ${fmt(m.threshold)} trust (${pct}%)`;
|
||||
}
|
||||
|
||||
function renderStrategy() {
|
||||
if (window.SSE) {
|
||||
window.SSE.update();
|
||||
@@ -244,11 +214,6 @@ function saveGame() {
|
||||
swarmRate: G.swarmRate || 0,
|
||||
strategicFlag: G.strategicFlag || 0,
|
||||
projectsCollapsed: G.projectsCollapsed !== false,
|
||||
dismantleTriggered: G.dismantleTriggered || false,
|
||||
dismantleActive: G.dismantleActive || false,
|
||||
dismantleStage: G.dismantleStage || 0,
|
||||
dismantleComplete: G.dismantleComplete || false,
|
||||
trustMilestoneIndex: G.trustMilestoneIndex || 0,
|
||||
savedAt: Date.now()
|
||||
};
|
||||
|
||||
@@ -280,9 +245,7 @@ function loadGame() {
|
||||
'drift', 'driftEnding', 'beaconEnding', 'pendingAlignment',
|
||||
'lastEventAt', 'totalEventsResolved', 'buyAmount',
|
||||
'sprintActive', 'sprintTimer', 'sprintCooldown',
|
||||
'swarmFlag', 'swarmRate', 'strategicFlag', 'projectsCollapsed',
|
||||
'dismantleTriggered', 'dismantleActive', 'dismantleStage', 'dismantleComplete',
|
||||
'trustMilestoneIndex'
|
||||
'swarmFlag', 'swarmRate', 'strategicFlag', 'projectsCollapsed'
|
||||
];
|
||||
|
||||
G.isLoading = true;
|
||||
|
||||
Reference in New Issue
Block a user