super-claudio-brothers: Instructions file for Claude Code

Super Claudio Brothers — Claude Code Handoff

What this is

A Claude-themed Mario-style platformer built as a single HTML file. It's a playable metaphor for how Claude actually works: tokens as currency, hallucinations as enemies, context limits as the timer, system prompts as power-ups.

The game is complete and playable. The main outstanding task is replacing the in-memory/artifact leaderboard with a real Supabase-backed global leaderboard.

---

Project structure

super-claudio-brothers/
├── CLAUDE.md          ← you are here
├── README.md          ← player-facing docs
├── public/
│   └── index.html     ← the entire game (self-contained, no dependencies)
└── supabase/
    └── schema.sql     ← run this in Supabase to set up the scores table

No build step. No bundler. The game is vanilla JS + Canvas 2D in a single HTML file.

---

The Supabase leaderboard task

What to do

1. Create a free Supabase project at supabase.com
2. Run supabase/schema.sql in the Supabase SQL editor
3. Copy your project URL and anon key
4. In public/index.html, find the // ── Storage section at the top of the script
5. Replace the three storage functions (getLeaderboard, saveLeaderboard, submitScore) with Supabase fetch calls (see below)

Current storage functions to replace

// Currently using artifact window.storage — replace these three:
async function getLeaderboard() { ... }
async function saveLeaderboard(lb) { ... }
async function submitScore(initials, score) { ... }

Supabase replacements

const SUPABASE_URL  = 'https://YOUR_PROJECT.supabase.co';
const SUPABASE_ANON = 'YOUR_ANON_KEY';

async function getLeaderboard() {
  const res = await fetch(
    `${SUPABASE_URL}/rest/v1/scores?order=score.desc&limit=10`,
    { headers: { apikey: SUPABASE_ANON, Authorization: `Bearer ${SUPABASE_ANON}` } }
  );
  return res.ok ? await res.json() : [];
}

async function submitScore(initials, score) {
  // Insert the new score
  await fetch(`${SUPABASE_URL}/rest/v1/scores`, {
    method: 'POST',
    headers: {
      apikey: SUPABASE_ANON,
      Authorization: `Bearer ${SUPABASE_ANON}`,
      'Content-Type': 'application/json',
      Prefer: 'return=minimal',
    },
    body: JSON.stringify({ initials: initials.toUpperCase().slice(0,3), score }),
  });

  // Fetch updated top 10
  const top10 = await getLeaderboard();

  // Calculate rank
  const allRes = await fetch(
    `${SUPABASE_URL}/rest/v1/scores?order=score.desc`,
    { headers: { apikey: SUPABASE_ANON, Authorization: `Bearer ${SUPABASE_ANON}` } }
  );
  const all = allRes.ok ? await allRes.json() : [];
  const rank = all.findIndex(e => e.initials === initials.toUpperCase().slice(0,3) && e.score === score) + 1;

  return { rank: rank || all.length, top10 };
}