Technical Resources

Stack overview, folder structure reference, and useful links.

Technical Stack

Rendering Three.js (WebGL)
Language JavaScript (ES6+)
Structure HTML5
Styling CSS3
Persistence localStorage (browser-local, no backend)
Hosting Static (GitHub Pages, Cloudflare Pages, Netlify)
Backend None
Multiplayer None (single-player only)

Shared Folder Structure

project-root/
  index.html            ← Main page (loads the game)
  style.css             ← Visual styling
  main.js               ← Entry point, animation loop
  game/
    state.js            ← gameState object, save/load
    loop.js             ← Core loop logic, event triggers

Key Concepts Reference

The gameState Object

Single source of truth. Every system reads from and writes to this one object.

// Ami's gameState
const gameState = {
  xp: 0,
  banked: 0,
  riskLevel: 1,
  zone: "safe",
  tier: 1,
  unlockedTier: 1
};

// Ida's gameState
const gameState = {
  karma: 0,
  debt: 0,
  tier: 1,
  zone: "off-lot",
  unlockedTier: 1,
  activeJob: null,
  hasCar: false
};

The Animation Loop

Runs 60 times per second. Updates state, checks zones, renders the scene.

function animate() {
  requestAnimationFrame(animate);

  // Update player position
  // Check zone detection
  // Update risk/debt
  // Check for events

  renderer.render(scene, camera);
}
animate();

LocalStorage Pattern

// Save
function saveGame() {
  localStorage.setItem("gameState",
    JSON.stringify(gameState));
}

// Load
function loadGame() {
  const saved = localStorage.getItem("gameState");
  if (saved) {
    Object.assign(gameState, JSON.parse(saved));
  }
}

Useful Links