Add Word Wrangler demos

examples/word-wrangler-gemini-live/client/src/components/Game/GameWord.tsx

@@ -0,0 +1,79 @@
+import { GAME_TEXT } from "@/constants/gameConstants";
+import React from "react";
+import styles from "./WordWrangler.module.css";
+
+interface GameWordProps {
+  word: string;
+  showAutoDetected: boolean;
+  showIncorrect: boolean;
+}
+
+export const GameWord: React.FC<GameWordProps> = ({
+  word,
+  showAutoDetected,
+  showIncorrect,
+}) => {
+  return (
+    <div
+      className={`${styles.currentWord} ${
+        showAutoDetected ? styles.correctWordDetected : ""
+      } ${showIncorrect ? styles.incorrectWordDetected : ""}`}
+    >
+      <span className={styles.helpText}>{GAME_TEXT.describeWord}</span>
+      <span className={styles.word}>{word}</span>
+
+      {showAutoDetected && <CorrectOverlay />}
+      {showIncorrect && <IncorrectOverlay />}
+    </div>
+  );
+};
+
+const CorrectOverlay: React.FC = () => (
+  <div className={styles.autoDetectedOverlay}>
+    <div className={styles.checkmarkContainer}>
+      <svg
+        className={styles.checkmarkSvg}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+      >
+        <circle
+          className={styles.checkmarkCircle}
+          cx="26"
+          cy="26"
+          r="25"
+          fill="none"
+        />
+        <path
+          className={styles.checkmarkCheck}
+          fill="none"
+          d="M14.1 27.2l7.1 7.2 16.7-16.8"
+        />
+      </svg>
+    </div>
+  </div>
+);
+
+const IncorrectOverlay: React.FC = () => (
+  <div className={styles.incorrectOverlay}>
+    <div className={styles.xmarkContainer}>
+      <svg
+        className={styles.xmarkSvg}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+      >
+        <circle
+          className={styles.xmarkCircle}
+          cx="26"
+          cy="26"
+          r="25"
+          fill="none"
+        />
+        <path
+          className={styles.xmarkX}
+          fill="none"
+          d="M16 16 L36 36 M36 16 L16 36"
+        />
+      </svg>
+    </div>
+  </div>
+);