feat: implement game modes system with letters and words support

- Add GameMode type: 'letters' | 'words' | 'sentences' | 'paragraphs'
- Add gameMode option to GameOptions (defaults to 'letters')
- Create wordLists.ts with curated word lists for each mode
- Update FallingLetter type to track:
  - fullText: complete word/sentence/paragraph
  - charIndex: current character progress in word
- Modify word spawning to pick from mode-specific word list
- Update handleTypedLetter to support multi-character typed sequences:
  - Track progress through word (charIndex)
  - Advance to next character when correct
  - Show complete word only when fully typed
- Enhanced canvas rendering with color-coded progress:
  - Green: completed characters
  - Yellow: current character being typed
  - White: remaining characters
- Add mode selector buttons to example app
- Default to 'words' mode in example for testing
- Full TypeScript support for all modes

src/useBoard/useBoard.ts

@@ -178,7 +178,10 @@ export function useBoard() {
         ctx.shadowBlur = 20;
         ctx.shadowColor = "#ff0000";
         ctx.fillStyle = "#ff4444";
-        ctx.fillText(letter.letter, letter.x, letter.y);
+        
+        // Draw full text or just current letter
+        const displayText = letter.fullText || letter.letter;
+        ctx.fillText(displayText, letter.x, letter.y);
         ctx.shadowBlur = 0;
       } else if (letter.state === 'exploding') {
         // Explosion effect
@@ -205,15 +208,32 @@ export function useBoard() {
           ctx.fill();
         }
         
-        // Letter fading
+        // Full text fading
         ctx.fillStyle = "#ffffff";
-        ctx.fillText(letter.letter, 0, 0);
+        const displayText = letter.fullText || letter.letter;
+        ctx.fillText(displayText, 0, 0);
         
         ctx.restore();
       } else {
-        // Normal state
-        ctx.fillStyle = "#ffffff";
-        ctx.fillText(letter.letter, letter.x, letter.y);
+        // Normal state - show full text with progress indication
+        const fullText = letter.fullText || letter.letter;
+        const charIndex = letter.charIndex ?? 0;
+        
+        // Draw completed characters in green
+        if (charIndex > 0) {
+          ctx.fillStyle = "#00ff00";
+          ctx.fillText(fullText.substring(0, charIndex), letter.x, letter.y);
+        }
+        
+        // Draw current character in yellow
+        ctx.fillStyle = "#ffff00";
+        ctx.fillText(fullText[charIndex], letter.x, letter.y);
+        
+        // Draw remaining characters in white
+        if (charIndex + 1 < fullText.length) {
+          ctx.fillStyle = "#ffffff";
+          ctx.fillText(fullText.substring(charIndex + 1), letter.x, letter.y);
+        }
       }
     });
   };