Redesign game screen with bubble graph visualization

[Copilot]

Replace grid-based synonym display with an animated bubble graph showing word relationships: previous word (top), current word (center), and synonym options (bottom arc).

Changes

New BubbleGraph.tsx

• Three-tier bubble layout with SVG connection lines
• Arc positioning for synonym options using trigonometric calculation
• Transition animations on word selection with proper timeout cleanup
• Target word highlighted with green gradient and pulse effect

Updated GameScreen.tsx

• Replaced grid synonym display with BubbleGraph component
• Passes previousWord from path history (path[path.length - 2])

Bug fixes

• Fixed unused useMemo import in WordGraph.tsx
• Fixed useRef<number>() initialization requiring initial value in useTimer.ts

Screenshots

Initial state - Six synonym bubbles in arc pattern with connecting lines:

After selection - Previous word animates to top, selected word becomes center, new synonyms appear:

Implementation details

Arc positioning for N bubbles:

const getSynonymPosition = (index: number, total: number) => {
  const angle = -30 + (60 * index) / Math.max(total - 1, 1);
  const radians = (angle * Math.PI) / 180;
  return {
    x: 50 + Math.sin(radians) * 35,
    y: 70 + Math.cos(radians) * 30
  };
};

Timeout cleanup prevents state updates on unmounted components:

const clickTimeoutRef = useRef<number | undefined>(undefined);

useEffect(() => {
  return () => {
    if (clickTimeoutRef.current) {
      clearTimeout(clickTimeoutRef.current);
    }
  };
}, []);

Original prompt

Summary

Redesign the game screen UI to display a bubble graph visualization as shown in the reference image.

Reference Design

Requirements

Layout Structure

1. Top Area (Previous Word): A small bubble showing the previously chosen word, positioned at the top to create a "distant view" perspective
2. Center Area (Current Word): A large main bubble displaying the current active word
3. Bottom Area (Next Words): Multiple clickable bubbles showing synonym options to choose from
4. Connections: Lines connecting all bubbles to create a graph-like appearance

Interaction Flow

1. When a user clicks a synonym bubble (next word):
   • The non-selected synonym bubbles should disappear
   • The selected word moves to become the new center bubble
   • The previous center word animates upward and becomes smaller (the new "previous word" bubble)
   • New synonym options appear at the bottom as new bubbles

Visual Design

• Use gradient backgrounds for bubbles (purple/pink theme matching current design)
• Add smooth animations for transitions between states
• Include connection lines between bubbles (SVG)
• Highlight the target word if it appears in the synonyms
• Show loading state while fetching new synonyms

Components to Create/Modify

1. Create new BubbleGraph.tsx component with:

   • Previous word bubble (small, top, semi-transparent)
   • Current word bubble (large, center)
   • Synonym bubbles (medium, bottom, spread in arc pattern)
   • SVG connection lines
   • Smooth transition animations

2. Update GameScreen.tsx to:

   • Use the new BubbleGraph component
   • Pass previous word from path history
   • Maintain header with player info, target, time, and moves
   • Keep path tracker at bottom

Technical Notes

• The project uses React + TypeScript + Vite
• Tailwind CSS is used for styling
• ReactFlow is currently installed but the new design uses custom SVG/CSS instead
• Target branch: frontend

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.