Prevent thought bubbles from overlapping on spawn

[Copilot]

Thought bubbles were spawning at random positions without collision detection, causing overlaps that made individual bubbles difficult to dismiss.

Changes

Added collision detection to src/hooks/useThoughtBubbles.js:

• calculateDistance() - Euclidean distance between bubble positions (viewport %)
• isPositionValid() - Validates 25% minimum separation from existing bubbles
• Modified spawnBubble() to attempt up to 20 positions before fallback to vertical staggering

// Try to find non-overlapping position
for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
  const candidatePosition = {
    x: Math.random() * 70 + 10, // 10-80% from left
    y: Math.random() * 35 + 20, // 20-55% from top
  };
  
  if (isPositionValid(candidatePosition, prev)) {
    position = candidatePosition;
    break;
  }
}

Result

Bubbles maintain clear separation (25% viewport distance) for reliable tap/swipe interactions:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Thought bubbles should not spawn on top of each other</issue_title>
<issue_description>Thought bubbles should not spawn on top of each other</issue_description>

Comments on the Issue (you are Copilot in this section)

• Fixes Thought bubbles should not spawn on top of each other #31

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[cloudflare-workers-and-pages]

Deploying criticalmassgame with    Cloudflare Pages

Latest commit:	d49e81c
Status:	✅  Deploy successful!
Preview URL:	https://e5ae233d.criticalmassgame.pages.dev
Branch Preview URL:	https://copilot-fix-thought-bubbles-n28n.criticalmassgame.pages.dev

View logs