SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/arcade/games/builder2.html

<?php
declare(strict_types=1);

/**
 * /multiverse_lab/index.php
 * SIMON Multiverse Lab — 4-in-1 PHP Prototype
 *
 * Includes:
 * 1) Full HTML game engine shell for your website
 * 2) 3D space civilization builder
 * 3) Playable Wicked Game simulation
 * 4) AI-driven evolving universe game simulation
 *
 * Single-file PHP build for Apache/PHP hosting.
 */

header('Content-Type: text/html; charset=utf-8');

$TITLE = 'SIMON Multiverse Lab — Game Engine + Civilization + Wicked Game + Universe AI';
$DESCRIPTION = 'A single-file PHP prototype featuring a website game engine shell, 3D civilization builder, Wicked Game simulation, and evolving universe simulator.';
$CANONICAL = 'https://www.gaylordsinclair.com/multiverse_lab/';

#bgfx,#worldfx{position:fixed; inset:0; width:100%; height:100%; display:block}
  #bgfx{z-index:0}
  #worldfx{z-index:1; pointer-events:none}

.scene{position:fixed; inset:0; z-index:2; perspective:1400px; overflow:hidden}
  .space,.world-wrap,.mesh-wrap,.entity-wrap,.ring-wrap,.grid-wrap{position:absolute; inset:-18%; transform-style:preserve-3d}

.star{
    position:absolute; left:50%; top:50%; width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%;
    background:
      radial-gradient(circle at 35% 35%, rgba(255,255,255,.95) 0 8%, rgba(255,229,155,.98) 8%, rgba(255,179,77,.95) 24%, rgba(255,110,49,.78) 48%, rgba(255,79,214,.16) 68%, rgba(255,79,214,0) 74%),
      radial-gradient(circle at center, rgba(255,204,77,.42), rgba(255,110,49,.18), transparent 72%);
    box-shadow:0 0 60px rgba(255,179,77,.5),0 0 120px rgba(255,179,77,.28),0 0 220px rgba(255,110,49,.16),inset 0 0 40px rgba(255,255,255,.16);
    transform-style:preserve-3d;
  }
  .star::before,.star::after{
    content:""; position:absolute; inset:-40px; border-radius:50%; border:1px solid rgba(255,179,77,.14);
  }
  .star::before{transform:rotateX(76deg) rotateY(18deg)}
  .star::after{transform:rotateY(78deg) rotateZ(22deg); border-color:rgba(106,224,255,.12)}

.planet{
    position:absolute; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.92), rgba(106,224,255,.55), rgba(123,98,255,.30), rgba(255,79,214,.08) 78%, transparent 82%);
    box-shadow:0 0 24px rgba(106,224,255,.35), inset 0 0 18px rgba(255,255,255,.14);
  }

.ring{
    position:absolute; left:50%; top:50%; border-radius:50%; border:1px solid rgba(106,224,255,.16);
    box-shadow:0 0 18px rgba(106,224,255,.08), inset 0 0 18px rgba(123,98,255,.05);
    transform-style:preserve-3d;
  }

.node{
    position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(106,224,255,.62), rgba(123,98,255,.18), transparent 76%);
    box-shadow:0 0 18px rgba(106,224,255,.32), 0 0 32px rgba(123,98,255,.12);
  }
  .node.city{background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(68,209,138,.62), rgba(106,224,255,.18), transparent 76%)}
  .node.hazard{background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,95,122,.62), rgba(255,79,214,.18), transparent 76%)}
  .node.exit{background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,204,77,.72), rgba(68,209,138,.22), transparent 76%)}
  .node.life{background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,204,77,.70), rgba(255,79,214,.22), transparent 76%)}

.beam{
    position:absolute; left:50%; top:50%; width:4px; height:220px; margin:-110px 0 0 -2px; border-radius:999px;
    background:linear-gradient(180deg, rgba(106,224,255,0), rgba(106,224,255,.82), rgba(255,79,214,.18), rgba(106,224,255,0));
    box-shadow:0 0 20px rgba(106,224,255,.28);
    transform-origin:center center;
  }

.cube{
    position:absolute; left:50%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 16px 40px rgba(0,0,0,.22), inset 0 0 18px rgba(106,224,255,.06);
  }

.hud{
    position:fixed; inset:16px 16px auto 16px; z-index:5;
    display:grid; grid-template-columns:minmax(320px,440px) minmax(480px,1fr); gap:12px; align-items:start;
  }
  .panel{
    border:1px solid var(--edge);
    background:linear-gradient(180deg, var(--panel), var(--panel2));
    border-radius:24px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px) saturate(130%);
  }
  .hero{padding:18px}
  .brand{display:inline-flex; gap:10px; align-items:center; margin-bottom:12px; color:var(--mut); font-size:12px; letter-spacing:.2em; text-transform:uppercase}
  .dot{width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 8px rgba(106,224,255,.12), 0 0 18px rgba(106,224,255,.35)}
  .hero h1{margin:0 0 8px; font-size:clamp(28px,4vw,52px); line-height:.95}
  .hero p{margin:0; color:var(--mut); max-width:58ch}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
  .chip{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--edge); font-size:12px; color:var(--mut)}

.controls{padding:14px; display:grid; gap:10px}
  .modeTabs{display:flex; flex-wrap:wrap; gap:10px}
  .tab.active{background:linear-gradient(180deg, rgba(123,98,255,.42), rgba(106,224,255,.14)); border-color:rgba(106,224,255,.28)}
  .stats{display:grid; grid-template-columns:repeat(4,minmax(90px,1fr)); gap:10px}
  .stat{padding:12px; border-radius:16px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10)}
  .stat b{display:block; font-size:11px; color:var(--mut); margin-bottom:4px; text-transform:uppercase; letter-spacing:.12em}
  .stat span{font-size:20px; font-weight:800}
  .actions{display:flex; flex-wrap:wrap; gap:10px}
  button{
    appearance:none; border:1px solid var(--edge); background:rgba(255,255,255,.06); color:var(--txt); cursor:pointer;
    padding:12px 14px; border-radius:15px; font-weight:800; letter-spacing:.02em; box-shadow:0 10px 24px rgba(0,0,0,.18);
  }
  button.primary{background:linear-gradient(180deg, rgba(123,98,255,.42), rgba(106,224,255,.16)); border-color:rgba(106,224,255,.28)}
  button.good{border-color:rgba(68,209,138,.35)}
  button.warn{border-color:rgba(255,204,77,.35)}
  button.bad{border-color:rgba(255,95,122,.35)}

.statusbar{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:5;
    display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px;
  }
  .log,.meters,.legend{padding:14px}
  .section-title{display:block; margin-bottom:10px; color:var(--mut); font-size:11px; letter-spacing:.14em; text-transform:uppercase}
  .logText{font-size:15px; line-height:1.38}
  .meter{margin:10px 0}
  .meter label{display:flex; justify-content:space-between; font-size:12px; color:var(--mut); margin-bottom:6px}
  .bar{height:12px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08)}
  .fill{height:100%; width:0%; background:linear-gradient(90deg, var(--cyan), var(--indigo), var(--pink)); box-shadow:0 0 18px rgba(106,224,255,.25)}
  .fill.good{background:linear-gradient(90deg, #44d18a, #6ae0ff, #ffcc4d)}
  .fill.warn{background:linear-gradient(90deg, #ffd36a, #ff9c54, #ff4fd6)}
  .legend ul{margin:0; padding-left:18px; color:var(--txt)}
  .legend li{margin:6px 0}

.overlay{position:fixed; inset:0; display:none; place-items:center; z-index:8; background:rgba(4,8,18,.76); backdrop-filter:blur(10px)}
  .overlay.on{display:grid}
  .card{width:min(760px,92vw); padding:26px; border-radius:26px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow:var(--shadow)}
  .card h2{margin:0 0 8px; font-size:clamp(28px,4vw,46px)}
  .card p{color:var(--mut); font-size:16px; line-height:1.42}
  .card .rowbtns{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}

@media (max-width:1100px){
    .hud{grid-template-columns:1fr}
    .statusbar{grid-template-columns:1fr}
  }
  @media (max-width:700px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .hero p{font-size:14px}
    button{padding:11px 12px}
  }
</style>
</head>
<body>
<canvas id="bgfx"></canvas>
<canvas id="worldfx"></canvas>
<div class="scene" id="scene">
  <div class="ring-wrap" id="ringWrap"></div>
  <div class="mesh-wrap" id="meshWrap"></div>
  <div class="entity-wrap" id="entityWrap"></div>
  <div class="grid-wrap" id="gridWrap"></div>
</div>

<section class="hud">
  <div class="panel hero">
    <div class="brand"><span class="dot"></span> SIMON Multiverse Lab // 4 in 1 PHP Prototype</div>
    <h1>Build engines.<br>Create worlds.<br>Break systems.</h1>
    <p>This single PHP file combines a website-ready game engine shell, a 3D civilization builder, a playable Wicked Game simulation, and an AI-style evolving universe simulator. Switch modes instantly and use it as a foundation for separate sections of your site.</p>
    <div class="chips">
      <span class="chip">full HTML game engine</span>
      <span class="chip">3D civilization builder</span>
      <span class="chip">Wicked Game simulation</span>
      <span class="chip">evolving universe AI</span>
      <span class="chip">single-file PHP</span>
    </div>
  </div>

<div class="panel controls">
    <div class="modeTabs">
      <button class="tab active" data-mode="engine">1. Engine</button>
      <button class="tab" data-mode="civilization">2. Civilization</button>
      <button class="tab" data-mode="wicked">3. Wicked Game</button>
      <button class="tab" data-mode="universe">4. Universe AI</button>
    </div>
    <div class="stats">
      <div class="stat"><b>Mode</b><span id="modeName">Engine</span></div>
      <div class="stat"><b>Score</b><span id="scoreNum">0</span></div>
      <div class="stat"><b>Power</b><span id="powerNum">100</span></div>
      <div class="stat"><b>Stability</b><span id="stabilityNum">88%</span></div>
    </div>
    <div class="actions">
      <button class="primary" id="startBtn">Start Simulation</button>
      <button id="actionABtn">Primary Action</button>
      <button class="good" id="actionBBtn">Secondary Action</button>
      <button class="warn" id="actionCBtn">Scan / Evolve</button>
      <button class="bad" id="resetBtn">Reset Mode</button>
    </div>
  </div>
</section>

<section class="statusbar">
  <div class="panel log">
    <span class="section-title">System Feed</span>
    <div class="logText" id="logText">SIMON: Choose a mode. Each one is a different game architecture that can later become its own full section of your website.</div>
  </div>

<div class="panel meters">
    <span class="section-title">Metrics</span>
    <div class="meter">
      <label><span>Progress</span><span id="progressValue">0%</span></label>
      <div class="bar"><div class="fill" id="progressFill" style="width:0%"></div></div>
    </div>
    <div class="meter">
      <label><span>Resource / Signal</span><span id="resourceValue">100</span></label>
      <div class="bar"><div class="fill warn" id="resourceFill" style="width:50%"></div></div>
    </div>
    <div class="meter">
      <label><span>World Stability</span><span id="stabilityValue">88%</span></label>
      <div class="bar"><div class="fill good" id="stabilityFill" style="width:88%"></div></div>
    </div>
  </div>

<div class="panel legend">
    <span class="section-title">Mode Controls</span>
    <ul id="legendList">
      <li><strong>Engine:</strong> create nodes, connect systems, deploy modules</li>
      <li><strong>Civilization:</strong> grow cities, raise energy, stabilize society</li>
      <li><strong>Wicked Game:</strong> reveal layers, evade hazards, reach the exit</li>
      <li><strong>Universe AI:</strong> seed stars, grow life, evolve intelligence</li>
    </ul>
  </div>
</section>

<div class="overlay" id="resultOverlay">
  <div class="card">
    <h2 id="overlayTitle">Simulation Complete</h2>
    <p id="overlayText">You pushed the prototype to its threshold.</p>
    <div class="rowbtns">
      <button class="primary" id="overlayRestartBtn">Restart</button>
      <button id="overlayCloseBtn">Keep Viewing</button>
    </div>
  </div>
</div>

const modeName = document.getElementById('modeName');
  const scoreNum = document.getElementById('scoreNum');
  const powerNum = document.getElementById('powerNum');
  const stabilityNum = document.getElementById('stabilityNum');
  const progressValue = document.getElementById('progressValue');
  const progressFill = document.getElementById('progressFill');
  const resourceValue = document.getElementById('resourceValue');
  const resourceFill = document.getElementById('resourceFill');
  const stabilityValue = document.getElementById('stabilityValue');
  const stabilityFill = document.getElementById('stabilityFill');
  const logText = document.getElementById('logText');
  const legendList = document.getElementById('legendList');
  const resultOverlay = document.getElementById('resultOverlay');
  const overlayTitle = document.getElementById('overlayTitle');
  const overlayText = document.getElementById('overlayText');

const startBtn = document.getElementById('startBtn');
  const actionABtn = document.getElementById('actionABtn');
  const actionBBtn = document.getElementById('actionBBtn');
  const actionCBtn = document.getElementById('actionCBtn');
  const resetBtn = document.getElementById('resetBtn');
  const overlayRestartBtn = document.getElementById('overlayRestartBtn');
  const overlayCloseBtn = document.getElementById('overlayCloseBtn');
  const tabs = [...document.querySelectorAll('.tab')];

const clamp = (n,min,max) => Math.max(min, Math.min(max, n));
  const rnd = (a,b) => a + Math.random() * (b - a);

const state = {
    mode:'engine',
    started:false,
    t:0,
    tiltX:0,
    tiltY:0,
    score:0,
    power:100,
    resource:100,
    stability:88,
    progress:0,
    complete:false,
    stars:[],
    rings:[],
    nodes:[],
    beams:[],
    cubes:[]
  };

const universeDust = [];

function setLog(msg){ logText.textContent = msg; }

function clearWorld(){
    ringWrap.innerHTML=''; meshWrap.innerHTML=''; entityWrap.innerHTML=''; gridWrap.innerHTML='';
    state.rings=[]; state.nodes=[]; state.beams=[]; state.cubes=[];
  }

function setupEngine(){
    clearWorld();
    state.rings.push(makeRing(260,72,18), makeRing(360,14,76));
    for(let i=0;i<12;i++) state.nodes.push(makeNode(i < 4 ? 'city' : ''));
    for(let i=0;i<6;i++) state.cubes.push(makeCube());
    setLog('SIMON: Engine mode loaded. This is the base HTML game engine shell for your site. Build nodes, add systems, and deploy modular content.');
    actionABtn.textContent='Create Node';
    actionBBtn.textContent='Connect System';
    actionCBtn.textContent='Deploy Module';
    legendList.innerHTML = '<li><strong>Primary:</strong> create interactive engine nodes</li><li><strong>Secondary:</strong> connect site systems and gameplay logic</li><li><strong>Scan:</strong> deploy a module shell for future sections</li>';
  }

function setupCivilization(){
    clearWorld();
    state.rings.push(makeRing(320,64,34));
    const planet = document.createElement('div'); planet.className='planet'; entityWrap.appendChild(planet);
    state.nodes.push({ el:planet, x:0, y:0, z:0, rx:0, ry:0, speed:0, cls:'planet' });
    for(let i=0;i<10;i++) state.nodes.push(makeNode('city'));
    for(let i=0;i<4;i++) state.beams.push(makeBeam());
    setLog('SIMON: Civilization mode loaded. Grow cities, manage energy, and raise a stable spacefaring society.');
    actionABtn.textContent='Found City';
    actionBBtn.textContent='Raise Energy';
    actionCBtn.textContent='Stabilize Society';
    legendList.innerHTML = '<li><strong>Primary:</strong> add a new city node</li><li><strong>Secondary:</strong> increase power infrastructure</li><li><strong>Scan:</strong> improve social stability</li>';
  }

function setupWicked(){
    clearWorld();
    state.rings.push(makeRing(260,78,12), makeRing(420,12,82));
    for(let i=0;i<7;i++) state.nodes.push(makeNode(i===0 ? 'exit' : 'hazard'));
    for(let i=0;i<5;i++) state.cubes.push(makeCube());
    setLog('SIMON: Wicked Game mode loaded. Reveal hidden layers, avoid system hazards, and push toward the exit node.');
    actionABtn.textContent='Reveal Layer';
    actionBBtn.textContent='Shift Gravity';
    actionCBtn.textContent='Scan Exit';
    legendList.innerHTML = '<li><strong>Primary:</strong> reveal more hidden geometry</li><li><strong>Secondary:</strong> destabilize hazard patterns</li><li><strong>Scan:</strong> strengthen exit signal</li>';
  }

function setupUniverse(){
    clearWorld();
    state.rings.push(makeRing(220,72,8), makeRing(340,22,76), makeRing(460,60,44));
    const star = document.createElement('div'); star.className='star'; entityWrap.appendChild(star);
    state.nodes.push({ el:star, x:0, y:0, z:0, rx:0, ry:0, speed:0, cls:'star' });
    for(let i=0;i<8;i++) state.nodes.push(makeNode(i<2 ? 'life' : ''));
    for(let i=0;i<6;i++) state.beams.push(makeBeam());
    setLog('SIMON: Universe AI mode loaded. Seed stars, trigger life, and evolve intelligence through simulated cosmic time.');
    actionABtn.textContent='Seed Star';
    actionBBtn.textContent='Create Life';
    actionCBtn.textContent='Evolve Intelligence';
    legendList.innerHTML = '<li><strong>Primary:</strong> create or intensify stellar bodies</li><li><strong>Secondary:</strong> seed biological emergence</li><li><strong>Scan:</strong> accelerate intelligence evolution</li>';
  }

function applyMode(){
    state.started=false; state.complete=false; state.score=0; state.power=100; state.resource=100; state.stability=88; state.progress=0;
    modeName.textContent = state.mode === 'engine' ? 'Engine' : state.mode === 'civilization' ? 'Civilization' : state.mode === 'wicked' ? 'Wicked' : 'Universe';
    tabs.forEach(t => t.classList.toggle('active', t.dataset.mode === state.mode));
    if(state.mode==='engine') setupEngine();
    if(state.mode==='civilization') setupCivilization();
    if(state.mode==='wicked') setupWicked();
    if(state.mode==='universe') setupUniverse();
    updateHUD();
  }

function updateHUD(){
    scoreNum.textContent = Math.round(state.score);
    powerNum.textContent = Math.round(state.power);
    stabilityNum.textContent = Math.round(state.stability) + '%';
    progressValue.textContent = Math.round(state.progress) + '%';
    progressFill.style.width = clamp(state.progress,0,100) + '%';
    resourceValue.textContent = Math.round(state.resource);
    resourceFill.style.width = clamp(state.resource,0,200) / 2 + '%';
    stabilityValue.textContent = Math.round(state.stability) + '%';
    stabilityFill.style.width = clamp(state.stability,0,100) + '%';
  }

function startSimulation(){
    state.started=true;
    setLog('SIMON: Simulation started. Push the system, but keep it stable enough to complete the mode objective.');
  }

function drawBackground(){
    bgCtx.clearRect(0,0,innerWidth,innerHeight);
    const g = bgCtx.createRadialGradient(innerWidth/2, innerHeight/2, 20, innerWidth/2, innerHeight/2, Math.max(innerWidth, innerHeight) * .7);
    g.addColorStop(0, 'rgba(106,224,255,.05)');
    g.addColorStop(.45, 'rgba(123,98,255,.04)');
    g.addColorStop(.8, 'rgba(255,79,214,.03)');
    g.addColorStop(1, 'rgba(0,0,0,0)');
    bgCtx.fillStyle = g;
    bgCtx.fillRect(0,0,innerWidth,innerHeight);

bgCtx.save();
    bgCtx.globalCompositeOperation = 'lighter';
    for(const d of universeDust){
      d.y += d.z * .08;
      if(d.y > innerHeight + 10) d.y = -10;
      bgCtx.fillStyle = `rgba(255,255,255,${d.o})`;
      bgCtx.beginPath();
      bgCtx.arc(d.x, d.y, d.s, 0, Math.PI * 2);
      bgCtx.fill();
    }
    bgCtx.restore();
  }

function updateScene(dt){
    state.t += dt;
    scene.style.transform = `perspective(1400px) rotateX(${state.tiltX * .55}deg) rotateY(${state.tiltY * .7}deg)`;

state.rings.forEach((ring,i) => {
      const rot = state.t * (ring.spin + i * 4);
      ring.el.style.transform = `translate3d(-50%,-50%,0) rotateX(${ring.tiltX}deg) rotateY(${ring.tiltY + rot}deg) rotateZ(${rot * .4}deg)`;
      ring.el.style.opacity = .34 + i * .14;
    });

state.nodes.forEach((node,i) => {
      if(node.cls === 'star' || node.cls === 'planet'){
        node.el.style.transform = `translate3d(calc(50vw - ${node.cls==='star'?110:44}px), calc(50vh - ${node.cls==='star'?110:44}px), 0) rotate(${state.t * 10}deg)`;
        return;
      }
      node.rx += node.speed * 20 * dt;
      node.ry += node.speed * 32 * dt;
      const ox = node.x + Math.sin(state.t * node.speed + i) * 22;
      const oy = node.y + Math.cos(state.t * .8 * node.speed + i) * 16;
      node.el.style.transform = `translate3d(calc(50vw + ${ox}px - 10px), calc(50vh + ${oy}px - 10px), ${node.z}px) rotateX(${node.rx}deg) rotateY(${node.ry}deg)`;
      node.el.style.opacity = .75 + Math.sin(state.t * 2 + i) * .16;
    });

state.beams.forEach((beam,i) => {
      beam.angle += beam.speed * dt;
      beam.el.style.transform = `translate3d(-50%,-50%,0) rotateZ(${beam.angle}deg) rotateX(${beam.tilt}deg) scaleY(${1 + Math.sin(state.t * 2 + i) * .12})`;
      beam.el.style.opacity = .26 + Math.sin(state.t * 3 + i) * .18;
    });

state.cubes.forEach((cube,i) => {
      cube.rx += cube.drift * 26 * dt; cube.ry += cube.drift * 38 * dt; cube.rz += cube.drift * 18 * dt;
      const ox = cube.x + Math.sin(state.t * cube.drift + i) * 18;
      const oy = cube.y + Math.cos(state.t * .8 * cube.drift + i) * 12;
      cube.el.style.transform = `translate3d(calc(50vw + ${ox}px - 35px), calc(50vh + ${oy}px - 35px), ${cube.z}px) rotateX(${cube.rx}deg) rotateY(${cube.ry}deg) rotateZ(${cube.rz}deg)`;
      cube.el.style.opacity = .7 + Math.sin(state.t * 2 + i) * .12;
    });

if(state.started && !state.complete){
      if(state.mode === 'engine'){ state.power = clamp(state.power + dt * 1.2, 0, 200); }
      if(state.mode === 'civilization'){ state.resource = clamp(state.resource + dt * 1.4, 0, 200); state.stability = clamp(state.stability - dt * .4, 0, 100); }
      if(state.mode === 'wicked'){ state.stability = clamp(state.stability - dt * .55, 0, 100); }
      if(state.mode === 'universe'){ state.progress = clamp(state.progress + dt * .6, 0, 100); state.resource = clamp(state.resource - dt * .3, 0, 200); }
      updateHUD();
      if(state.stability <= 0 || state.power <= 0) postAction();
    }
  }

let last = performance.now();
  function frame(now){
    const dt = Math.min(.033, (now - last) / 1000);
    last = now;
    updateScene(dt);
    drawBackground();
    drawWorldFX();
    requestAnimationFrame(frame);
  }

tabs.forEach(tab => tab.addEventListener('click', () => { state.mode = tab.dataset.mode; applyMode(); }));
  startBtn.addEventListener('click', startSimulation);
  actionABtn.addEventListener('click', primaryAction);
  actionBBtn.addEventListener('click', secondaryAction);
  actionCBtn.addEventListener('click', tertiaryAction);
  resetBtn.addEventListener('click', applyMode);
  overlayRestartBtn.addEventListener('click', () => { resultOverlay.classList.remove('on'); applyMode(); startSimulation(); });
  overlayCloseBtn.addEventListener('click', () => resultOverlay.classList.remove('on'));

addEventListener('pointermove', (e) => {
    const px = (e.clientX / innerWidth) * 2 - 1;
    const py = (e.clientY / innerHeight) * 2 - 1;
    state.tiltY = px * 16;
    state.tiltX = -py * 10;
  }, { passive:true });

addEventListener('keydown', (e) => {
    const k = e.key.toLowerCase();
    if(k === '1'){ state.mode='engine'; applyMode(); }
    if(k === '2'){ state.mode='civilization'; applyMode(); }
    if(k === '3'){ state.mode='wicked'; applyMode(); }
    if(k === '4'){ state.mode='universe'; applyMode(); }
    if(k === 'enter'){ startSimulation(); }
    if(k === 'q'){ primaryAction(); }
    if(k === 'w'){ secondaryAction(); }
    if(k === 'e'){ tertiaryAction(); }
  });

buildDust();
  applyMode();
  requestAnimationFrame(frame);
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump