added bouncy image

backend/entities/game.ts

@@ -311,6 +311,6 @@ export const game = {
     const { finished, stage } = serverGame;
     if (finished == 0) return 0;
     if (stage < 2) return 0;
-    return Math.floor(Math.pow(2, stage * 0.92));
+    return Math.floor(Math.pow(2, stage * 0.93) + stage * 4 + 5);
   },
 };

src/components/BounceImg.tsx

@@ -0,0 +1,27 @@
+import { animate, motion } from "framer-motion";
+import { useRef } from "react";
+
+const BounceImg = ({ src, className }: { src: string; className?: string }) => {
+  const ref = useRef<HTMLImageElement>(null);
+  return (
+    <motion.img
+      ref={ref}
+      src={src}
+      onClick={() => {
+        if (ref.current) {
+          animate(ref.current, { scale: 1.2 }, { duration: 0.3 });
+          setTimeout(() => {
+            if (ref.current)
+              animate(ref.current, { scale: 1 }, { duration: 0.3 });
+          }, 300);
+        }
+      }}
+      transition={{
+        type: "spring",
+      }}
+      className={className}
+    />
+  );
+};
+
+export default BounceImg;

src/components/Feed/Feed.tsx

@@ -45,7 +45,7 @@ const Feed: React.FC = () => {
         newItems.push({
           type: "gemsEarned",
           id: crypto.randomUUID(),
-          decay: Date.now() + 1000 * 3 + data.gems * 500,
+          decay: Date.now() + 1000 * 3 + data.stage * 1500,
           stage: data.stage,
           gems: data.gems,
         });

src/views/endless/Endless.tsx

@@ -15,7 +15,7 @@ const Endless: React.FC<EndlessProps> = (props) => {
   const { data: game } = useWSQuery("game.getGameState", gameId!, !!gameId);
   const { data: settings } = useWSQuery("user.getSettings", null);
   const startGame = useWSMutation("game.createGame");
-  const { data: leaderboard } = useWSQuery("scoreboard.getScoreBoard", 10);
+  const { data: leaderboard } = useWSQuery("scoreboard.getScoreBoard", 100);
   const reveal = useWSMutation("game.reveal");
   const placeFlag = useWSMutation("game.placeFlag");
   const placeQuestionMark = useWSMutation("game.placeQuestionMark");

src/views/store/Store.tsx

@@ -19,6 +19,7 @@ import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 import { loadSeaAnemonePreset } from "@tsparticles/preset-sea-anemone";
 import { motion } from "framer-motion";
+import BounceImg from "../../components/BounceImg";
 
 const Store = () => {
   const openLootbox = useWSMutation("user.openLootbox");
@@ -112,7 +113,7 @@ const Store = () => {
                       </DialogHeader>
                       <div className="flex gap-4 flex-wrap flex-row">
                         <div className="flex flex-col gap-4 basis-md">
-                          <img
+                          <BounceImg
                             src={lootbox.image}
                             className="max-w-[360px] w-[min(360px,100%)]"
                           />
@@ -178,7 +179,7 @@ const Store = () => {
                     </DialogContent>
                   </Dialog>
                 </div>
-                <img src={lootbox.image} className="w-[360px]" />
+                <BounceImg src={lootbox.image} className="w-[360px]" />
                 <Button
                   variant="outline"
                   size="default"

src/wsClient.ts

@@ -1,5 +1,5 @@
 import type { Routes } from "../backend/router";
-import { Events } from "../shared/events";
+import type { Events } from "../shared/events";
 import { queryClient } from "./queryClient";
 
 const connectionString = import.meta.env.DEV