kaltaquise-gamification/sys_digger/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Running the game

Open index.html directly in a browser — no build step, no server required.

open index.html

There are no tests, no linter, and no package manager.

Architecture

Pure vanilla JS/HTML/CSS game. No frameworks, no modules — all files are loaded as classic <script> tags and share a single global scope. Load order matters:

constants.js  →  atom.js  →  render.js  →  game.js

File responsibilities

File	Role
constants.js	Single source of truth for every tunable value (speeds, counts, radii, timing). Edit here first when tweaking gameplay feel.
atom.js	IncomingAtom class — construction, per-frame movement, docking logic, self-draw. Reads globals from game.js (canvas, CX, CY, anchorPoints, docks, gameOver) and calls burst(), updateCystinstein(), triggerGameOver() from render.js/game.js.
render.js	All canvas drawing: background, central molecule, anchor points, particles, click effects, and the Cystinstein side-panel. Also owns burst() (particle spawner) and updateCystinstein(). Reads ctx, cysCtx, CX, CY, anchorPoints, particles, clickEffects, docks from game.js.
game.js	Game state, requestAnimationFrame loop, input handling, leaderboard (localStorage), screen transitions (intro → game → game-over → intro). Declares all shared mutable globals consumed by the other files.
index.html	CSS + HTML structure only. Houses the intro screen, attract screen, game-over overlay, leaderboard table, and the kidney-shaped Cystinstein side panel (inline SVG border).

Global state (declared in game.js, used everywhere)

canvas, ctx, cysCanvas, cysCtx, CX, CY, score, docks, gameOver, gameStarted, incomingAtoms, anchorPoints, particles, clickEffects, stars.

Screen flow

Boot → Intro  ──(30 s idle)──→  Attract (highscore)
              ←─(any key/click)─
  │
  └─(START clicked)──→  Game loop
                            │
                        (6 docks)──→  Game-over overlay
                                          │
                                      (Play Again)──→  Intro

Leaderboard persistence

Stored in localStorage under key sysdigger_leaderboard as a JSON array of {name, score} objects, capped at 10 entries, sorted descending by score.

Key design constraints

• Anchor points activate (turn red) only when the incoming atom enters the visible viewport, not at spawn time — see IncomingAtom.update() in atom.js.
• Difficulty ramps automatically: spawnInterval decreases by SPAWN_DIFFICULTY_STEP each spawn, floored at SPAWN_INTERVAL_MIN.
• The custom cursor is a data-URL SVG pill embedded directly in CSS on the canvas selector.
• The Cystinstein side panel uses an inline SVG with a bezier kidney path for its border; the interior atom-cluster is drawn on a separate <canvas id="cystinstein-canvas"> by updateCystinstein() in render.js.