Compare commits
1 Commits
burn/fibon
...
sprint/iss
| Author | SHA1 | Date | |
|---|---|---|---|
|
89713dc867 |
@@ -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"
|
||||
|
||||
26
index.html
26
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}
|
||||
@@ -120,9 +114,22 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
|
||||
.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="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>
|
||||
@@ -266,7 +273,6 @@ The light is on. The room is empty."
|
||||
<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,12 +285,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>
|
||||
|
||||
63
js/data.js
63
js/data.js
@@ -158,16 +158,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 +757,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 +787,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);
|
||||
})();
|
||||
50
js/engine.js
50
js/engine.js
@@ -133,16 +133,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;
|
||||
@@ -220,16 +210,13 @@ function tick() {
|
||||
// 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 +235,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 +323,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) {
|
||||
@@ -1007,10 +964,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,12 +34,6 @@ 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.');
|
||||
}
|
||||
|
||||
38
js/render.js
38
js/render.js
@@ -13,7 +13,6 @@ function render() {
|
||||
renderPulse();
|
||||
renderStrategy();
|
||||
renderClickPower();
|
||||
renderTrustMilestone();
|
||||
Combat.renderCombatPanel();
|
||||
}
|
||||
|
||||
@@ -27,34 +26,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 +215,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 +246,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