feat(iter-4): Doubloon XP float, +XP modal badge, levels 60-61 (LEAD + window median)

[martinl5]

[UI/UX Improvements]

Doubloon XP reward float animation (SQLPanel.tsx, globals.css)

• On every correct query submission, a +N ⬡ XP badge floats upward from the Run button with a gold glow (text-shadow) and cubic-bezier easing, then fades out over 1.6 s.
• Amount is epoch-based: Foundational=+10, Intermediate=+15, Advanced=+20, Expert=+30.
• Implemented via new @keyframes doubloonFloat + .doubloon-float CSS class in globals.css.
• doubloonAmt React state cleared on animationend — re-submissions always trigger a fresh animation.
• Run button wrapped in position: relative container; float element positioned bottom: 110% so it emerges above the button.

"+N XP Earned" badge in LevelUpModal (LevelUpModal.tsx)

• A gold-bordered badge (⬡ icon + "+N XP Earned") appears in the completion modal between the Career Level and Next Level Hint sections.
• Spring-bounce entrance animation (scale: 0.75 → 1, delay 0.48 s, damping: 14, stiffness: 280).
• epochXpEarned() pure helper (file-scope) derives XP from the completed level — mirrors store thresholds without coupling to Zustand.

Level count + breadcrumb updated (GameProvider.tsx)

• Header level counter: /59 → /61.
• Epoch breadcrumb Expert max: 59 → 61.

---

[Game Design Tweaks]

Level 60 — Vessel Maintenance Window Planner (LEAD) (Expert, difficulty 4)

Teaches LEAD() as the partner to last iteration's LAG():

• CTE: LEAD(departure_date) OVER (PARTITION BY vessel_id ORDER BY departure_date) AS next_departure
• Outer query: CAST(JULIANDAY(next_departure) - JULIANDAY(departure_date) AS INTEGER) AS idle_days; filter WHERE next_departure IS NOT NULL
• Returns 13 rows across 10 vessels (vessels 1–3 each have 3 voyages → 2 gap rows; vessels 4–10 have 2 voyages → 1 gap row each)
• Mirrors the LEAD look-ahead pattern used in: product-analytics sessionization, trade-settlement gap detection, and operational scheduling at FAANG/sovereign-fund DS roles
• No new DB rows needed — uses existing cargo_shipments + vessels data

Level 61 — Segment Balance Median (Window-Based) (Expert, difficulty 4)

Implements the canonical window-based median for SQLite dialects lacking PERCENTILE_CONT:

• CTE: ROW_NUMBER() OVER (PARTITION BY c.segment ORDER BY a.balance) AS rn + COUNT(*) OVER (PARTITION BY c.segment) AS cnt
• Outer: WHERE rn IN ((cnt+1)/2, (cnt+2)/2), GROUP BY segment, ROUND(AVG(balance), 2) AS median_balance
• Returns median balance per segment: Private, Priority, SME, Mass (ordered by median DESC)
• Works for both odd and even group sizes — the exact pattern senior DS interviewers ask at FAANG/quant shops when specifying SQLite or Spark SQL dialects without built-in percentile aggregates

---

[Database & Code Optimizations]

• epochXp() helper in SQLPanel.tsx (file-scope pure function) — feeds doubloon animation; currentLevel added to useCallback dependency array (removes pre-existing missing-dep lint warning, reducing warning count from 12 → 11).
• epochXpEarned() helper in LevelUpModal.tsx (file-scope pure function) — single source of truth for XP display in modal; avoids importing from store.
• LevelUpModal hint map extended: entry 59 → LEAD look-ahead hint; entry 61 → "all levels complete" sentinel (moved from 59).
• nextHintKey sentinel array updated: [10,20,30,40,50,57,59,61]; completion check currentLevel < 59 → < 61.
• No new DB tables or seed rows — both levels run cleanly against existing data.

---

Test Results

Check	Result
npm ci	✅ Pass
npx tsc --noEmit	✅ 0 errors
npm run build	✅ Compiled successfully in 3.9 s, 4/4 static pages
npm run lint	⚠️ 2 pre-existing errors (db.ts no-explicit-any, SchemaViewer.tsx no-unused-expressions); warning count reduced 12 → 11 — 0 new errors introduced

https://claude.ai/code/session_01UQzdvQs6ESPgDLrFKc3gtx

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sqlwak	Ready	Preview, Comment	Jun 7, 2026 5:12pm