add animations

Author: cathoderay

client/src/App.css

@@ -75,7 +75,7 @@ h1 {
 #definition {
   height: 20vh;
 
-  font-size: 20px;
+  font-size: 24px;
   padding-left: 5%;
   padding-right: 5%;
   border-radius: 20px;
@@ -172,4 +172,5 @@ h1 {
 .word {
   font-weight: bold;
   background-color: light-dark(#ccc, #666);
-}
+}
+

client/src/App.tsx

@@ -3,6 +3,7 @@ import "./App.css";
 import { pick_random_word } from "./main.ts";
 import { get_definition } from "./main.ts";
 import { is_valid } from "./main.ts";
+import "animate.css";
 
 
 function Square( { letter, colors, onSquareClick } ) {
@@ -13,18 +14,39 @@ function Square( { letter, colors, onSquareClick } ) {
 
 function Word( { current_attempt, success}) {
   let color = "";
-  if (success) color = "square-attempted-present"; 
+  let success_animation = "";
+  if (success) {
+    color = "square-attempted-present"; 
+    success_animation = "animate__animated animate__flip";
+  }
   return <>
-    <button key="0" className={`square word ${color}`}>{current_attempt.length > 0 ? current_attempt[0]: ''}</button>
-    <button key="1" className={`square word ${color}`}>{current_attempt.length > 1 ? current_attempt[1]: ''}</button>
-    <button key="2" className={`square word ${color}`}>{current_attempt.length > 2 ? current_attempt[2]: ''}</button>
-    <button key="3" className={`square word ${color}`}>{current_attempt.length > 3 ? current_attempt[3]: ''}</button>
-    <button key="4" className={`square word ${color}`}>{current_attempt.length > 4 ? current_attempt[4]: ''}</button>
+    <button key="0" className={`square word ${color} ${success_animation}`}>{current_attempt.length > 0 ? current_attempt[0]: ''}</button>
+    <button key="1" className={`square word ${color} ${success_animation}`}>{current_attempt.length > 1 ? current_attempt[1]: ''}</button>
+    <button key="2" className={`square word ${color} ${success_animation}`}>{current_attempt.length > 2 ? current_attempt[2]: ''}</button>
+    <button key="3" className={`square word ${color} ${success_animation}`}>{current_attempt.length > 3 ? current_attempt[3]: ''}</button>
+    <button key="4" className={`square word ${color} ${success_animation}`}>{current_attempt.length > 4 ? current_attempt[4]: ''}</button>
+  </>
+}
+
+function Logo() {
+  return <>
+    <div id="logo" className="animate__animated animate__slideInDown">
+      <h1>ERUDITE</h1>
+    </div>
+  </>
+}
+
+function Definition( { word, definition }) {
+  return <>
+    <div id="definition" key={word} >
+      <p className="animate__animated animate__fadeInDown">{ definition }</p>
+    </div>
   </>
 }
 
 function App() {
   const [current_word, setCurrentWord] = useState(pick_random_word(5).toUpperCase());
+  const [current_definition, setCurrentDefinition] = useState(get_definition(current_word.toLowerCase()));
   const [score, setScore] = useState(0);
   const [success, setSuccess] = useState(false);
   const [current_attempt, setCurrentAttempt] = useState('');
@@ -63,7 +85,10 @@ function App() {
 
     if (current_attempt != current_word) {
       setMessage("Incorrect");
-      setTimeout(() => { setMessage(""); }, 3000);
+    
+      setTimeout(() => { 
+        setMessage("");
+      }, 3000);
 
       setAttempts([
         ...attempts,
@@ -96,7 +121,9 @@ function App() {
     setSuccess(false);
     setMessage("");
     setTimeout(() => { setMessage(""); }, 3000);
-    setCurrentWord(pick_random_word(5).toUpperCase());
+    const new_word = pick_random_word(5).toUpperCase();
+    setCurrentWord(new_word);
+    setCurrentDefinition(get_definition(new_word.toLowerCase()));
     setCurrentAttempt("");
     setKeyboardColors(Array(26).fill("square-unattempted"));
   }
@@ -111,13 +138,8 @@ function App() {
           <span>version: 0.1 - Game developed by <a href="https://github.com/cathoderay">Ronald Kaiser</a></span>
         </div>
 
-        <div id="logo">
-          <h1>ERUDITE</h1>
-        </div>
-
-        <div id="definition">
-          <p>{ get_definition(current_word.toLowerCase()) }</p>
-        </div>
+        <Logo />
+        <Definition word={current_word} definition={current_definition} /> 
 
         <div id="word-container">
           <Word current_attempt={ current_attempt } current_word={ current_word } success = { success } />

client/src/index.css

@@ -11,6 +11,10 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  --animate-duration: 100ms;
+  --animate-delay: 0.1s;
+
 }
 
 a {

deno.json

@@ -11,6 +11,7 @@
     "@std/assert": "jsr:@std/assert@1",
     "@types/react": "npm:@types/react@^18.3.12",
     "@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-dom": "npm:react-dom@^18.3.1",
     "react-router-dom": "npm:react-router-dom@^6.28.0",