add confetti when guess is correct

Author: cathoderay

client/src/App.css

@@ -95,7 +95,6 @@ p {
 
 #definition {
   height: 7em;
-  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   font-weight: 600;
   font-size: 1.4em;
   padding-left: 2em;

client/src/App.tsx

@@ -1,4 +1,6 @@
 import { useState, useRef, useEffect } from "react";
+import { useWindowSize } from "npm:react-use";
+import Confetti from "npm:react-confetti";
 
 import "./App.css";
 import { is_valid } from "./main.ts";
@@ -7,6 +9,19 @@ import { get_random_term } from "./main.ts";
 import "animate.css";
 
 
+function MyConfetti( { confetti } ) {
+  const { width, height } = useWindowSize();
+  if (!confetti)
+    return <>
+    </>
+
+  return <>
+    <Confetti key={ confetti } width={ width } height={ height } gravity="0.4" numberOfPieces="100" />
+  </>
+}
+
+
+
 function Square( { letter, colors, onSquareClick } ) {
   let color = letter.length > 0 && colors != null ? colors[letter.charCodeAt(0) - "A".charCodeAt(0)] : "";
   return <button key={letter} className={`square ${color}`} onClick={onSquareClick}>{letter}</ button>;
@@ -107,6 +122,7 @@ function App() {
   const [keyboard_colors, setKeyboardColors] = useState(Array(26).fill("square-unattempted"));
   const [status, setStatus] = useState('');
   const [attempts, setAttempts] = useState([]);
+  const [confetti, setConfetti] = useState(false);
   const letters: string[] = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split("");
 
   function addLetter(letter: string) {
@@ -167,6 +183,9 @@ function App() {
 
     if (attempt.toLowerCase() == term.word) {
       if (!success) setScore(score + 100);
+
+      setConfetti(true);
+      setTimeout(() => { setConfetti(false); }, 5000);
       setSuccess(true);
       setStatusWithTimeout("correct!");
     }
@@ -199,6 +218,7 @@ function App() {
     setTerm(get_random_term(5));
     setAttempt("");
     setAttempts([]);
+    setConfetti(false);
     setKeyboardColors(Array(26).fill("square-unattempted"));
   }
 
@@ -229,6 +249,7 @@ function App() {
   return (
     <>
       <div>
+        <MyConfetti confetti={ confetti } />
         <Credits />
         <Logo />
         <Definition term={ term } />

client/src/index.css

@@ -9,6 +9,7 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
 }
 
 a {

deno.json

@@ -13,8 +13,10 @@
     "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.3",
     "animate.css": "npm:animate.css@^4.1.1",
     "react": "npm:react@^18.3.1",
+    "react-confetti": "npm:react-confetti@^6.4.0",
     "react-dom": "npm:react-dom@^18.3.1",
     "react-router-dom": "npm:react-router-dom@^6.28.0",
+    "react-use": "npm:react-use@^17.6.0",
     "vite": "npm:vite@^5.4.11"
   },
   "compilerOptions": {