home-shuffler

Status, 2026-08-04: built and live. Everything below the "Plan" heading shipped, and then some.

piece	where
Wheel + spin animation	src/components/HomeLayoutSelector/, WheelAnimation.jsx
Layout pool, no-repeat logic	getNextLayout() — sessionStorage under seenLayouts, exactly as sketched below
"Spin Again" / seen-them-all state	seenAll in HomeLayoutSelector
Server-side spin tracking	postSilent(.../api/spin) → live endpoint
Layout dispatch	src/components/layouts/LayoutRenderer.jsx, LAYOUT_MAP
Standalone routes per layout	/explorer, /popular, /guide, /growth via LayoutPage — added 2026-08, not in the original plan

Beyond the plan: a revealedLayouts key alongside seenLayouts, and a confetti + sound celebration when the wheel lands on Explorer.

Active layouts are four: explorer, popular, guide, growth. GameLayout.jsx and ChatbotLayout.jsx exist but are commented out of LAYOUT_MAP — "hidden until ready". Those two are the only unbuilt part.

The layout list in the sketch below (game, bubble, chatbot, popular, guide) is superseded: the bubble chart became TagBubbleChart inside ExplorerLayout rather than a layout of its own, and growth was added later.

LayoutRenderer.jsx calls itself the single source of truth for layout keys and labels. It is — read it before trusting this page.

Ideas: Switch between different "home" components. A visual of a wheel of fortune or roulette type thing where each section is a homepage style.

Layouts:

• The Game placeholder
• A bubble chart of notes... by tag, folder structure, whatever... maybe just give the user a group by filter
• A chatbot style assistant to direct people
• Long Term: A ranking of the most visited pages
• Simple boxes "Let me suggest a starting point. You are a... (recruiter, SWE, etc.)

---

🎯 Plan: “Spin-Only, No Overrides”

✅ Behavior

• On first load:

  • Wheel spins for 3–5s
  • Lands on a random layout from the pool

• After load:

  • Show a “Spin Again” button
  • When clicked, it spins and picks a layout you haven’t seen this session

• Once all layouts have been shown:

  • Reset the pool (optionally show a “You've seen them all!” message)
  • Keep spinning forever if they want

---

💾 Session Tracking (Client-Side)

Use sessionStorage:

const layouts = ["game", "bubble", "chatbot", "popular", "guide"];
const seenKey = "seenLayouts";

function getNextLayout() {
  let seen = JSON.parse(sessionStorage.getItem(seenKey)) || [];
  let remaining = layouts.filter((l) => !seen.includes(l));

  if (remaining.length === 0) {
    seen = [];
    remaining = [...layouts];
  }

  const next = remaining[Math.floor(Math.random() * remaining.length)];
  seen.push(next);
  sessionStorage.setItem(seenKey, JSON.stringify(seen));

  return next;
}

💾 Session Tracking (Server-Side)

For now just send the spin with:

Field	Purpose
timestamp	When the spin occurred (session activity pattern)
is_first	Helps track how often the wheel shows up as an intro
current_selection	What layout the user is leaving (if applicable)
next_selection	What layout was chosen (where the wheel landed)
session_id	Allows for grouping spins per user session

---

🧠 Bonus UX Details

• Add a subtle “🎲 Spin Again” button below the layout

• You can fade in the next layout rather than doing a full page reload

• After spinning through all:

  “You’ve now seen all 5 homepage layouts — want to shuffle again?”

---

📦 Component Breakdown

You might structure it like this:

<HomeLayoutSelector />
  ├── <WheelAnimation onComplete={handleResult} />
  ├── <LayoutRenderer type={layoutName} />
  └── <SpinAgainButton onClick={spinAgain} />

---