update sound / add random feature

client/src/components/StoryChoices.jsx

@@ -13,6 +13,7 @@ import {
   useMediaQuery,
   useTheme,
   IconButton,
+  Tooltip,
 } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { TalkWithSarah } from "./TalkWithSarah";
@@ -21,9 +22,24 @@ import { useGame } from "../contexts/GameContext";
 import { storyApi } from "../utils/api";
 import { useSoundEffect } from "../hooks/useSoundEffect";
 import CloseIcon from "@mui/icons-material/Close";
+import CasinoOutlinedIcon from "@mui/icons-material/CasinoOutlined";
 
 const { initAudioContext } = storyApi;
 
+// Phrases aléatoires WTF pour le placeholder
+const RANDOM_PLACEHOLDERS = [
+  "A dragon appears right above the hero...",
+  "Suddenly, all the trees start dancing the macarena...",
+  "A time-traveling pizza delivery guy shows up with a mysterious package...",
+  "The ground turns into jello and starts wobbling menacingly...",
+  "A choir of singing cats descends from the sky...",
+  "The hero's shadow detaches itself and starts doing stand-up comedy...",
+  "All the nearby rocks transform into vintage toasters...",
+  "A portal opens, and out steps the hero's evil twin made entirely of cheese...",
+  "The moon starts beatboxing an ominous rhythm...",
+  "Every nearby plant suddenly develops a British accent and starts having tea...",
+];
+
 // Function to convert text with ** to Chip elements
 const formatTextWithBold = (text) => {
   if (!text) return "";
@@ -54,6 +70,12 @@ export function StoryChoices() {
   const [sarahRecommendation, setSarahRecommendation] = useState(null);
   const [showCustomDialog, setShowCustomDialog] = useState(false);
   const [customChoice, setCustomChoice] = useState("");
+  const [currentPlaceholder] = useState(
+    () =>
+      RANDOM_PLACEHOLDERS[
+        Math.floor(Math.random() * RANDOM_PLACEHOLDERS.length)
+      ]
+  );
   const {
     choices,
     onChoice,
@@ -76,12 +98,26 @@ export function StoryChoices() {
     volume: 0.5,
   });
 
+  // Son de dé
+  const playDiceSound = useSoundEffect({
+    basePath: "/sounds/dice-",
+    numSounds: 3,
+    volume: 0.1,
+    enabled: true,
+  });
+
   const lastSegment = getLastSegment();
   const isLastStep = lastSegment?.is_last_step;
   const isDeath = lastSegment?.isDeath;
   const isVictory = lastSegment?.isVictory;
   const storyText = lastSegment?.rawText || "";
 
+  const getRandomPlaceholder = () => {
+    return RANDOM_PLACEHOLDERS[
+      Math.floor(Math.random() * RANDOM_PLACEHOLDERS.length)
+    ];
+  };
+
   if (isGameOver()) {
     return (
       <Box
@@ -193,13 +229,26 @@ export function StoryChoices() {
             </Button>
           </Box>
 
+          <Typography
+            variant="h6"
+            sx={{
+              display: { xs: "none", sm: "block" },
+              color: "rgba(255,255,255,0.5)",
+              fontWeight: "bold",
+              fontSize: "1.2rem",
+              mx: 2,
+            }}
+          >
+            OR
+          </Typography>
+
           <Box
             sx={{
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
               gap: 1,
-              ml: isMobile ? 0 : 4,
+              // ml: isMobile ? 0 : 4,
               minWidth: "fit-content",
               maxWidth: "30%",
             }}
@@ -216,7 +265,7 @@ export function StoryChoices() {
                 textTransform: "none",
               }}
             >
-              Write your own path
+              Write your own choice...
             </Button>
           </Box>
         </>
@@ -279,7 +328,7 @@ export function StoryChoices() {
             rows={isMobile ? 5 : 4}
             fullWidth
             variant="outlined"
-            placeholder="A dragon appears right above the hero...."
+            placeholder={currentPlaceholder}
             value={customChoice}
             onChange={(e) => setCustomChoice(e.target.value)}
             sx={{
@@ -302,7 +351,31 @@ export function StoryChoices() {
               },
             }}
           />
-          <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+          <Box
+            sx={{ display: "flex", justifyContent: "flex-end", gap: 1, mt: 1 }}
+          >
+            <Button
+              onClick={() => {
+                const randomChoice = getRandomPlaceholder();
+                setCustomChoice(randomChoice.slice(0, -3));
+                playDiceSound();
+              }}
+              variant="outlined"
+              sx={{
+                minWidth: "48px",
+                width: "48px",
+                height: "48px",
+                p: 0,
+                borderColor: "rgba(255, 255, 255, 0.23)",
+                color: "white",
+                "&:hover": {
+                  borderColor: "white",
+                  backgroundColor: "rgba(255, 255, 255, 0.08)",
+                },
+              }}
+            >
+              <CasinoOutlinedIcon />
+            </Button>
             <Button
               onClick={() => {
                 if (customChoice.trim()) {
@@ -317,7 +390,6 @@ export function StoryChoices() {
               disabled={!customChoice.trim()}
               variant="contained"
               sx={{
-                mt: 1,
                 py: 1.5,
                 px: 4,
                 fontWeight: "bold",

client/src/components/UniverseSlotMachine.jsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
 import { motion, useAnimation } from "framer-motion";
+import { useSoundSystem } from "../contexts/SoundContext";
 
 // Animation timing configuration
 const SLOT_ANIMATION_DURATION = 2; // Duration of each slot animation
-const SLOT_SPEED = 0.5; // Base speed of the slot animation (higher = faster)
+const SLOT_SPEED = 1; // Base speed of the slot animation (higher = faster)
 const TOTAL_ANIMATION_DURATION = 1; // Total duration for each slot reel in seconds
 const SLOT_START_DELAY = 2; // Delay between each slot start in seconds
 
@@ -26,6 +27,9 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
   const [isVisible, setIsVisible] = useState(false);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const { playSound } = useSoundSystem();
+  const lastPositionRef = useRef(0);
+  const itemHeightRef = useRef(0);
 
   useEffect(() => {
     if (isActive) {
@@ -38,6 +42,7 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
       setReelItems(repeatedWords);
 
       const itemHeight = isMobile ? 60 : 80;
+      itemHeightRef.current = itemHeight;
       const totalHeight = repeatedWords.length * itemHeight;
 
       setTimeout(() => {
@@ -49,6 +54,28 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
               duration: TOTAL_ANIMATION_DURATION / SLOT_SPEED,
               ease: [0.25, 0.1, 0.25, 1.0],
               times: [0, 1],
+              onUpdate: (latest) => {
+                // Calculer l'index du mot actuel basé sur la position
+                const currentPosition = Math.abs(latest);
+                const currentIndex = Math.floor(currentPosition / itemHeight);
+
+                // Si on a changé de mot, jouer le son
+                if (
+                  Math.floor(lastPositionRef.current / itemHeight) !==
+                  currentIndex
+                ) {
+                  // Vérifier si c'est le dernier mot (final)
+                  const isFinalWord = currentIndex === repeatedWords.length - 1;
+                  // Jouer le son approprié
+                  if (isFinalWord) {
+                    playSound("lock");
+                  } else {
+                    playSound("tick", "normal");
+                  }
+                }
+
+                lastPositionRef.current = currentPosition;
+              },
             },
           })
           .then(() => {
@@ -56,7 +83,11 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
           });
       }, delay * SLOT_START_DELAY * 1000);
     }
-  }, [isActive, finalValue, words, delay, isMobile]);
+
+    return () => {
+      lastPositionRef.current = 0;
+    };
+  }, [isActive, finalValue, words, delay, isMobile, playSound]);
 
   return (
     <Box

client/src/contexts/SoundContext.jsx

@@ -35,6 +35,17 @@ const SOUNDS = {
     off: "/sounds/talky-walky-off.mp3",
     volume: 0.5,
   },
+  tick: {
+    files: Array.from({ length: 4 }, (_, i) => `/sounds/tick-${i + 1}.mp3`),
+    volume: {
+      normal: 0.05, // Volume normal à 50% du volume final
+      final: 0.4, // Volume final (comme avant)
+    },
+  },
+  lock: {
+    files: ["/sounds/lock-1.mp3"],
+    volume: 0.025,
+  },
 };
 
 const SoundContext = createContext(null);
@@ -69,7 +80,19 @@ export function SoundProvider({ children }) {
   // Initialiser tous les sons
   const soundInstances = {};
   Object.entries(SOUNDS).forEach(([category, config]) => {
-    if (Array.isArray(config.files)) {
+    if (category === "tick") {
+      // Initialisation spéciale pour les ticks avec volumes différents
+      soundInstances[category] = {
+        normal: config.files.map((file) => {
+          const [play] = useSound(file, { volume: config.volume.normal });
+          return play;
+        }),
+        final: config.files.map((file) => {
+          const [play] = useSound(file, { volume: config.volume.final });
+          return play;
+        }),
+      };
+    } else if (Array.isArray(config.files)) {
       // Pour les sons avec plusieurs variations
       soundInstances[category] = config.files.map((file) => {
         const [play] = useSound(file, { volume: config.volume });
@@ -102,7 +125,13 @@ export function SoundProvider({ children }) {
       if (!isSoundEnabled) return;
 
       try {
-        if (subCategory) {
+        if (category === "tick") {
+          // Pour les ticks avec volumes différents
+          const type = subCategory || "normal";
+          const sounds = soundInstances[category][type];
+          const randomIndex = Math.floor(Math.random() * sounds.length);
+          sounds[randomIndex]?.();
+        } else if (subCategory) {
           // Pour les sons avec sous-catégories (comme talkySarah.on)
           soundInstances[category][subCategory]?.();
         } else if (Array.isArray(soundInstances[category])) {

client/src/pages/Tutorial.jsx

@@ -93,17 +93,20 @@ export function Tutorial() {
           <Box
             sx={{
               display: "flex",
-              gap: 4,
+              gap: { xs: 1, sm: 4 },
               justifyContent: "center",
-              mb: 2,
+              mb: { xs: 1, sm: 2 },
               alignItems: "center",
+              flexDirection: { xs: "column", sm: "row" },
+              width: "100%",
             }}
           >
             <Box
               sx={{
                 position: "relative",
-                flex: 1,
-                maxWidth: "200px",
+                flex: { xs: "none", sm: 1 },
+                width: { xs: "50%", sm: "auto" },
+                maxWidth: { xs: "160px", sm: "200px" },
                 "&::before": {
                   content: '""',
                   position: "absolute",
@@ -113,32 +116,39 @@ export function Tutorial() {
                   bottom: 0,
                   background: "rgba(255, 255, 255, 0.05)",
                   backdropFilter: "blur(10px)",
-                  WebkitBackdropFilter: "blur(10px)", // Pour Safari
+                  WebkitBackdropFilter: "blur(10px)",
                   borderRadius: "8px",
-                  border: "1px solid rgba(255,255,255,0.3)",
+                  border: "1px solid",
+                  borderColor: "primary.main",
                 },
               }}
             >
               <Box
                 sx={{
                   position: "relative",
-                  p: 2,
+                  p: { xs: 1.5, sm: 2 },
                   display: "flex",
                   flexDirection: "column",
                   alignItems: "center",
-                  gap: 1,
+                  gap: 0.5,
                   zIndex: 1,
                 }}
               >
                 <CallSplitOutlinedIcon
                   sx={{
-                    fontSize: 40,
-                    color: "primary.text",
-                    mb: 1,
-                    transform: "rotate(90deg)", // Pour que la bifurcation soit horizontale
+                    fontSize: { xs: 28, sm: 40 },
+                    color: "primary.main",
+                    mb: 0.5,
+                    transform: "rotate(90deg)",
                   }}
                 />
-                <Typography variant="subtitle1" sx={{ color: "primary.text" }}>
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    color: "primary.main",
+                    fontSize: { xs: "0.875rem", sm: "1rem" },
+                  }}
+                >
                   Make a choice
                 </Typography>
               </Box>
@@ -149,6 +159,8 @@ export function Tutorial() {
               sx={{
                 color: "rgba(255,255,255,0.5)",
                 fontWeight: "bold",
+                fontSize: { xs: "1rem", sm: "1.2rem" },
+                my: { xs: 0.25, sm: 0 },
               }}
             >
               OR
@@ -157,8 +169,9 @@ export function Tutorial() {
             <Box
               sx={{
                 position: "relative",
-                flex: 1,
-                maxWidth: "200px",
+                flex: { xs: "none", sm: 1 },
+                width: { xs: "50%", sm: "auto" },
+                maxWidth: { xs: "160px", sm: "200px" },
                 "&::before": {
                   content: '""',
                   position: "absolute",
@@ -168,27 +181,38 @@ export function Tutorial() {
                   bottom: 0,
                   background: "rgba(255, 255, 255, 0.05)",
                   backdropFilter: "blur(10px)",
-                  WebkitBackdropFilter: "blur(10px)", // Pour Safari
+                  WebkitBackdropFilter: "blur(10px)",
                   borderRadius: "8px",
-                  border: "1px solid rgba(255,255,255,0.3)",
+                  border: "1px solid",
+                  borderColor: "secondary.main",
                 },
               }}
             >
               <Box
                 sx={{
                   position: "relative",
-                  p: 2,
+                  p: { xs: 1.5, sm: 2 },
                   display: "flex",
                   flexDirection: "column",
                   alignItems: "center",
-                  gap: 1,
+                  gap: 0.5,
                   zIndex: 1,
                 }}
               >
                 <CreateOutlinedIcon
-                  sx={{ fontSize: 40, color: "primary.text", mb: 1 }}
+                  sx={{
+                    fontSize: { xs: 28, sm: 40 },
+                    color: "secondary.main",
+                    mb: 0.5,
+                  }}
                 />
-                <Typography variant="subtitle1" sx={{ color: "primary.text" }}>
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    color: "secondary.main",
+                    fontSize: { xs: "0.875rem", sm: "1rem" },
+                  }}
+                >
                   Write your own
                 </Typography>
               </Box>