add more epic animations

dannybunschoten · Aug 29, 2024 · 239c2cd · 239c2cd
1 parent a4fb765
commit 239c2cd
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/app/commons/actions.ts b/app/commons/actions.ts
@@ -43,5 +43,5 @@ export async function updateHighScores(HighScores: unknown, Name: unknown) {
       data: { score: highScore.score, name: name.data },
     });
   });
-  revalidatePath("");
+  revalidatePath("/");
 }
diff --git a/app/components/Game.tsx b/app/components/Game.tsx
@@ -13,11 +13,14 @@ import { getNewGame, updateHighScores } from "../commons/actions";
 
 const ITEMS: Fruit[] = [
   "cherries",
-  "clover",
-  "diamond",
-  "grapes",
-  "horseshoe",
-  "lemon",
+  //"clover",
+  //"diamond",
+  //"grapes",
+  //"horseshoe",
+  //"lemon",
+  //"orange",
+  //"seven",
+  //"watermelon",
 ];
 const NUMBER_OF_ITEMS_PER_WHEEL = 180;
 const NUMBER_OF_WHEELS = 3;
@@ -210,8 +213,7 @@ export default function Game({ children }: { children: React.ReactNode }) {
         }),
       );
     }
-    setMultiplier(Math.min(multiplier, points));
-  }, [points, isWinningPosition, multiplier]);
+  }, [points, isWinningPosition]);
 
   const handleClick = () => {
     if (points === 0) {
@@ -273,7 +275,14 @@ export default function Game({ children }: { children: React.ReactNode }) {
         rollWheelItems: shiftedRollWheels,
         rollWheelOffsets: allZeroOffsets,
       });
-      setPoints((p) => p + additionalPoints);
+      setPoints((p) => {
+        const newPoints = p + additionalPoints;
+        if (additionalPoints > 0) {
+          displayUserMessage(`You won ${additionalPoints} points!`);
+        }
+        setMultiplier(Math.min(multiplier, newPoints));
+        return newPoints;
+      });
       setLockedWheels((locks) =>
         locks.map((value) => {
           if (additionalPoints > 0) {
@@ -282,9 +291,6 @@ export default function Game({ children }: { children: React.ReactNode }) {
           return value === "disabledClicked" ? "disabledNotClicked" : value;
         }),
       );
-      if (additionalPoints > 0) {
-        displayUserMessage(`You won ${additionalPoints} points!`);
-      }
     }, 4000);
   };
   return (

diff --git a/app/components/Item.tsx b/app/components/Item.tsx
@@ -28,7 +28,7 @@ export function Item({ item, isWinning }: { item: Fruit; isWinning: boolean }) {
   };
   return (
     <div
-      className={`flex items-center justify-center p-2 lg:p-4 ${isWinning ? "animate-[glow_0.7s_alternate_infinite]" : ""}`}
+      className={`flex items-center justify-center p-2 lg:p-4 ${isWinning ? "animate-winningZoom" : ""}`}
     >
       <Image
         src={map[item] || seven}

diff --git a/app/components/Winningline.ts b/app/components/Winningline.ts
@@ -1,3 +1,4 @@
+import { never } from "zod";
 import { Fruit } from "../commons/fruits";
 import Position from "./Position";
 
@@ -36,15 +37,18 @@ export function calculateScore(
     case "watermelon":
     case "grapes":
     case "horseshoe":
-      return multiplier * 1;
+    case "orange":
+      return multiplier * 3;
     case "clover":
     case "lemon":
     case "seven":
-      return multiplier * 3;
-    case "diamond":
       return multiplier * 5;
+    case "diamond":
+      return multiplier * 10;
     default:
       console.error(`Unhandled character: ${winning_char}`);
+      // add compiler error if we forget to handle a case
+      never;
       return 0;
   }
 }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -36,9 +36,13 @@ const config: Config = {
             filter:
               "drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 4px #f0edcc) drop-shadow(0px 0px 6px #e1d89e)",
           },
+          "50%": {
+            filter:
+              "drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 6px #f0edcc) drop-shadow(0px 0px 10px #e1d89e) drop-shadow(0px 0px 15px #f0e467) drop-shadow(0px 0px 25px #ebdd4b)",
+          },
           "100%": {
             filter:
-              "drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 4px #f0edcc) drop-shadow(0px 0px 6px #e1d89e) drop-shadow(0px 0px 8px #f0e467) drop-shadow(0px 0px 15px #ebdd4b)",
+              "drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 4px #f0edcc) drop-shadow(0px 0px 6px #e1d89e)",
           },
         },
         winning: {
@@ -55,6 +59,11 @@ const config: Config = {
           "0%": { transform: "translate(100%, 0)" },
           "100%": { transform: "translate(-300%, 0)" },
         },
+        winningZoom: {
+          "0%": { transform: "scale(1)" },
+          "50%": { transform: "scale(1.1)" },
+          "100%": { transform: "scale(1)" },
+        },
       },
       animation: {
         roll3: "marquee 4s ease-in-out forwards",
@@ -63,6 +72,8 @@ const config: Config = {
         flash: "flashing 1s ease-in-out infinite",
         winning: "winning 0.7s infinite alternate linear",
         scrolling: "scroll 5s linear infinite",
+        winningZoom:
+          "glow 1.5s ease-in-out infinite, winningZoom 1.5s ease-in-out infinite",
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",