some details

beeracademy · Jul 28, 2024 · 0f1f4c8 · 0f1f4c8
1 parent 119178d
commit 0f1f4c8
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "axios": "^1.7.1",
     "detect-browser": "^5.3.0",
     "focus-trap-react": "^10.2.3",
+    "framer-motion": "^11.3.19",
     "howler": "^2.2.4",
     "random-js": "^2.1.0",
     "react": "^18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/sounds/wilhelm_scream.mp3 b/public/sounds/wilhelm_scream.mp3
diff --git a/public/sounds/wilhelm_scream.ogg b/public/sounds/wilhelm_scream.ogg
diff --git a/src/hooks/sounds.ts b/src/hooks/sounds.ts
@@ -37,6 +37,7 @@ const SoundNames = [
   "wicked",
   "firework",
   "camera_shutter",
+  "wilhelm_scream",
 ] as const;
 
 type SoundName = (typeof SoundNames)[number];

diff --git a/src/views/Game/components/CardInventory.tsx b/src/views/Game/components/CardInventory.tsx
@@ -1,4 +1,5 @@
-import { Box, Card, darken, Stack, Typography } from "@mui/material";
+import { Box, Card, darken, Stack, Typography, useTheme } from "@mui/material";
+import { AnimatePresence, motion } from "framer-motion";
 import { FunctionComponent, memo } from "react";
 import { useCardFlash } from "../../../components/CardFlash";
 import useGame from "../../../stores/game";
@@ -75,70 +76,90 @@ interface CardInventoryCardProps {
 const CardInventoryCard: FunctionComponent<CardInventoryCardProps> = (
   props,
 ) => {
+  const theme = useTheme();
+
   return (
     <Box
       sx={{
         position: "relative",
       }}
     >
-      <Card
-        variant="outlined"
-        onClick={props.onClick}
-        sx={{
-          zIndex: 1,
-          width: 78,
-          height: 106,
-          flexShrink: 0,
-          textAlign: "center",
-          position: "relative",
-          userSelect: "none",
-          cursor: "pointer",
-
-          ...(props.value <= 0 && {
-            opacity: 0.5,
-            background: (t) =>
-              t.palette.mode === "dark"
-                ? "url('/whiteheart.svg')"
-                : "url('/blackheart.svg')",
-            backgroundSize: "36px",
-            backgroundRepeat: "no-repeat",
-            backgroundPosition: "center",
-          }),
-        }}
-      >
-        {props.value > 0 && (
-          <>
-            <Typography
-              fontSize={14}
-              fontWeight={800}
-              textAlign="left"
-              paddingLeft="8px"
-              paddingTop="8px"
-              zIndex={989}
-            >
-              {props.kind}
-            </Typography>
-
-            <Typography fontSize={32}>{props.value}</Typography>
-
-            <Typography
-              fontSize={14}
-              fontWeight={800}
-              textAlign="left"
-              paddingLeft="8px"
-              paddingTop="8px"
-              sx={{
-                transform: "rotate(180deg)",
-                color: "primary.main",
-              }}
-            >
-              {props.kind}
-            </Typography>
-          </>
-        )}
-      </Card>
-
-      <CardStack size={props.value} />
+      <AnimatePresence initial={false}>
+        <Card
+          variant="outlined"
+          onClick={props.onClick}
+          sx={{
+            zIndex: 1,
+            width: 78,
+            height: 106,
+            flexShrink: 0,
+            textAlign: "center",
+            position: "relative",
+            userSelect: "none",
+            cursor: "pointer",
+
+            ...(props.value <= 0 && {
+              opacity: 0.5,
+              background: (t) =>
+                t.palette.mode === "dark"
+                  ? "url('/whiteheart.svg')"
+                  : "url('/blackheart.svg')",
+              backgroundSize: "36px",
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "center",
+            }),
+          }}
+        >
+          {props.value > 0 && (
+            <>
+              <Typography
+                fontSize={14}
+                fontWeight={800}
+                textAlign="left"
+                paddingLeft="8px"
+                paddingTop="8px"
+                zIndex={989}
+              >
+                {props.kind}
+              </Typography>
+
+              <motion.div
+                animate={{
+                  scale: [1, 1.5, 1],
+                  color: [
+                    theme.palette.text.primary,
+                    theme.palette.primary.light,
+                    theme.palette.text.primary,
+                  ],
+                }}
+                key={props.value}
+                transition={{
+                  duration: 0.5,
+                  ease: "easeInOut",
+                }}
+              >
+                <Typography fontSize={32}>{props.value}</Typography>
+              </motion.div>
+
+              <Typography
+                fontSize={14}
+                fontWeight={800}
+                textAlign="left"
+                paddingLeft="8px"
+                paddingTop="8px"
+                sx={{
+                  transform: "rotate(180deg)",
+                  color: "primary.main",
+                }}
+              >
+                {props.kind}
+              </Typography>
+            </>
+          )}
+        </Card>
+
+        <CardStack size={props.value} />
+      </AnimatePresence>
     </Box>
   );
 };

diff --git a/src/views/Game/components/DNFDialog.tsx b/src/views/Game/components/DNFDialog.tsx
@@ -28,11 +28,13 @@ const DNFDialog: FunctionComponent<DNFDialogProps> = (props) => {
   const sound = useSounds();
 
   const toggle = (index: number) => {
-    sound.play("click");
+    const isDNF = !dnf_player_indexes.includes(index);
 
-    const isDNF = dnf_player_indexes.includes(index);
+    if (isDNF) {
+      sound.play("wilhelm_scream");
+    }
 
-    SetPlayerDNF(index, !isDNF);
+    SetPlayerDNF(index, isDNF);
   };
 
   return (

diff --git a/src/views/Game/components/Table.tsx b/src/views/Game/components/Table.tsx
@@ -1,4 +1,6 @@
 import {
+  Box,
+  Grow,
   Stack,
   Table,
   TableBody,
@@ -168,26 +170,26 @@ const GameTable: FunctionComponent<GameTableProps> = () => {
                       }}
                     >
                       {card && (
-                        <>
-                          <Typography
-                            color={getCardSuitColor(card, theme.palette.mode)}
-                            sx={{
-                              width: 25,
-                              textAlign: "left",
-                            }}
-                          >
-                            {getCardASCIISymbol(card)}
-                          </Typography>
-
-                          <Typography
-                            sx={{
-                              width: 25,
-                              textAlign: "right",
-                            }}
-                          >
-                            {card?.value}
-                          </Typography>
-                        </>
+                        <Grow in={true}>
+                          <Box sx={{ display: "flex" }}>
+                            <Typography
+                              color={getCardSuitColor(card, theme.palette.mode)}
+                              sx={{
+                                width: 25,
+                              }}
+                            >
+                              {getCardASCIISymbol(card)}
+                            </Typography>
+
+                            <Typography
+                              sx={{
+                                width: 25,
+                              }}
+                            >
+                              {card?.value}
+                            </Typography>
+                          </Box>
+                        </Grow>
                       )}
                     </Stack>
                   </TableCell>