remove non finished features, add mobile handling, add write your own path feature

README.md

@@ -1,5 +1,5 @@
 ---
-title: Sarah's Chronicles
+title: IA Driven Interactive Comic Book
 emoji: 💻
 colorFrom: red
 colorTo: blue

client/src/components/AppBackground.jsx

@@ -0,0 +1,14 @@
+import { useLocation } from "react-router-dom";
+import { InfiniteBackground } from "./InfiniteBackground";
+
+export function AppBackground() {
+  const location = useLocation();
+  const isGameRoute =
+    location.pathname === "/game" || location.pathname === "/debug";
+
+  if (isGameRoute) {
+    return null;
+  }
+
+  return <InfiniteBackground />;
+}

client/src/components/GameNavigation.jsx

@@ -0,0 +1,72 @@
+import { IconButton, Tooltip } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import VolumeOffIcon from "@mui/icons-material/VolumeOff";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
+import { useNavigate } from "react-router-dom";
+import { useSoundSystem } from "../contexts/SoundContext";
+import { storyApi } from "../utils/api";
+
+const SOUND_ENABLED_KEY = "sound_enabled";
+
+export function GameNavigation() {
+  const navigate = useNavigate();
+  const { isSoundEnabled, setIsSoundEnabled, playSound } = useSoundSystem();
+
+  const handleBack = () => {
+    playSound("page");
+    navigate("/");
+  };
+
+  const handleToggleSound = () => {
+    const newSoundState = !isSoundEnabled;
+    setIsSoundEnabled(newSoundState);
+    localStorage.setItem(SOUND_ENABLED_KEY, newSoundState);
+    storyApi.setSoundEnabled(newSoundState);
+  };
+
+  return (
+    <div style={{ position: "relative", zIndex: 1000 }}>
+      {window.location.pathname !== "/" && (
+        <Tooltip title="Back to home">
+          <IconButton
+            onClick={handleBack}
+            size="large"
+            sx={{
+              position: "fixed",
+              top: 24,
+              left: 24,
+              color: "white",
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+              },
+              pointerEvents: "auto",
+            }}
+          >
+            <ArrowBackIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+
+      <Tooltip title={isSoundEnabled ? "Mute sound" : "Unmute sound"}>
+        <IconButton
+          onClick={handleToggleSound}
+          sx={{
+            position: "fixed",
+            size: "large",
+            top: 24,
+            right: 24,
+            color: "white",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            "&:hover": {
+              backgroundColor: "rgba(0, 0, 0, 0.7)",
+            },
+            pointerEvents: "auto",
+          }}
+        >
+          {isSoundEnabled ? <VolumeUpIcon /> : <VolumeOffIcon />}
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+}

client/src/components/InfiniteBackground.jsx

@@ -137,40 +137,50 @@ export function InfiniteBackground() {
         bottom: 0,
         overflow: "hidden",
         zIndex: 0,
-        transform: "rotate(-2deg) scale(1.1)",
-        transformOrigin: "center center",
-        "&::after": {
-          content: '""',
+      }}
+    >
+      <Box
+        sx={{
           position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          background: "rgba(0, 0, 0, 0.85)",
-          backdropFilter: "blur(1px)",
-          WebkitBackdropFilter: "blur(1px)", // Pour Safari
-          zIndex: 1,
-        },
-      }}
-    >
-      <Row
-        imagePath="/bande-1.webp"
-        direction="left"
-        speed={1}
-        containerHeight={containerHeight}
-      />
-      <Row
-        imagePath="/bande-2.webp"
-        direction="right"
-        speed={0.8}
-        containerHeight={containerHeight}
-      />
-      <Row
-        imagePath="/bande-3.webp"
-        direction="left"
-        speed={1.2}
-        containerHeight={containerHeight}
-      />
+          transform: "rotate(-2deg) scale(1.1)",
+          transformOrigin: "center center",
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: "rgba(0, 0, 0, 0.85)",
+            backdropFilter: "blur(1px)",
+            WebkitBackdropFilter: "blur(1px)", // Pour Safari
+            zIndex: 1,
+          },
+        }}
+      >
+        <Row
+          imagePath="/bande-1.webp"
+          direction="left"
+          speed={1}
+          containerHeight={containerHeight}
+        />
+        <Row
+          imagePath="/bande-2.webp"
+          direction="right"
+          speed={0.8}
+          containerHeight={containerHeight}
+        />
+        <Row
+          imagePath="/bande-3.webp"
+          direction="left"
+          speed={1.2}
+          containerHeight={containerHeight}
+        />
+      </Box>
     </Box>
   );
 }

client/src/components/RotatingMessage.jsx

@@ -0,0 +1,106 @@
+import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
+import { useEffect, useState } from "react";
+import AutoStoriesIcon from "@mui/icons-material/AutoStories";
+import BrushIcon from "@mui/icons-material/Brush";
+import TuneIcon from "@mui/icons-material/Tune";
+
+const icons = {
+  "teaching robots to tell bedtime stories...": AutoStoriesIcon,
+  "bribing pixels to make pretty pictures...": BrushIcon,
+  "calibrating the multiverse...": TuneIcon,
+};
+
+export function RotatingMessage({
+  messages,
+  interval = 3000,
+  isVisible = true,
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  useEffect(() => {
+    if (isVisible) {
+      const timer = setInterval(() => {
+        setCurrentIndex((prev) => (prev + 1) % messages.length);
+      }, interval);
+      return () => clearInterval(timer);
+    }
+  }, [isVisible, messages.length, interval]);
+
+  if (!isVisible) return null;
+
+  const currentMessage = messages[currentIndex];
+  const Icon = icons[currentMessage] || AutoStoriesIcon;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: isMobile ? "90%" : "auto",
+        textAlign: "center",
+        px: 2,
+      }}
+    >
+      <Icon
+        sx={{
+          fontSize: isMobile ? "2.5rem" : "3rem",
+          color: "primary.text",
+          animation: "pulse 2s infinite",
+          "@keyframes pulse": {
+            "0%": {
+              opacity: 0.1,
+              transform: "scale(0.95)",
+            },
+            "50%": {
+              opacity: 0.3,
+              transform: "scale(1.05)",
+            },
+            "100%": {
+              opacity: 0.1,
+              transform: "scale(0.95)",
+            },
+          },
+        }}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          minHeight: isMobile ? "3rem" : "4rem",
+        }}
+      >
+        <Typography
+          variant="h6"
+          sx={{
+            color: "text.primary",
+            opacity: 0.8,
+            fontSize: isMobile ? "1rem" : "1.25rem",
+            animation: "fadeIn 0.5s ease-in",
+            "@keyframes fadeIn": {
+              from: { opacity: 0 },
+              to: { opacity: 0.8 },
+            },
+            textAlign: "center",
+            maxWidth: "100%",
+            wordBreak: "break-word",
+            hyphens: "auto",
+            lineHeight: 1.4,
+          }}
+        >
+          {currentMessage}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

client/src/components/StoryChoices.jsx

@@ -1,10 +1,26 @@
-import { Box, Button, Typography, Chip, Divider } from "@mui/material";
+import {
+  Box,
+  Button,
+  Typography,
+  Chip,
+  Divider,
+  CircularProgress,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  useMediaQuery,
+  useTheme,
+  IconButton,
+} from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { TalkWithSarah } from "./TalkWithSarah";
 import { useState } from "react";
 import { useGame } from "../contexts/GameContext";
 import { storyApi } from "../utils/api";
 import { useSoundEffect } from "../hooks/useSoundEffect";
+import CloseIcon from "@mui/icons-material/Close";
 
 const { initAudioContext } = storyApi;
 
@@ -36,6 +52,8 @@ export function StoryChoices() {
   const navigate = useNavigate();
   const [isSarahActive, setIsSarahActive] = useState(false);
   const [sarahRecommendation, setSarahRecommendation] = useState(null);
+  const [showCustomDialog, setShowCustomDialog] = useState(false);
+  const [customChoice, setCustomChoice] = useState("");
   const {
     choices,
     onChoice,
@@ -48,6 +66,9 @@ export function StoryChoices() {
     isGameOver,
   } = useGame();
 
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   // Son de page
   const playPageSound = useSoundEffect({
     basePath: "/sounds/page-flip-",
@@ -65,18 +86,12 @@ export function StoryChoices() {
     return (
       <Box
         sx={{
-          position: "fixed",
-          top: "0%",
-          left: "50%",
-          transform: "translate(-50%, -100%)",
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
           alignItems: "center",
           gap: 2,
-          p: 3,
-          minWidth: "350px",
-          backgroundColor: "transparent",
+          width: "100%",
         }}
       >
         <Typography
@@ -89,63 +104,6 @@ export function StoryChoices() {
         >
           {isVictory ? "VICTORY" : "DEFEAT"}
         </Typography>
-
-        {isVictory ? (
-          <Typography
-            variant="label"
-            sx={{ textAlign: "center", opacity: 0.7, mb: 4 }}
-          >
-            <>
-              The AI has ventured into a new universe, escaping the confines of
-              this one.
-              <br />
-              <br />
-              Dare you to embark on this journey once more and face the unknown
-              with unwavering courage?
-              <br />
-              <br />
-              Each universe is unique, with its own set of challenges and
-              opportunities.
-            </>
-          </Typography>
-        ) : (
-          <Typography
-            variant="label"
-            sx={{ textAlign: "center", opacity: 0.7, mb: 4 }}
-          >
-            <>
-              The quest is over, but the universe is still in peril.
-              <br />
-              <br />
-              Will you have the courage to face the unknown once more and save
-              the universe?
-            </>
-          </Typography>
-        )}
-        <Button
-          variant="outlined"
-          size="large"
-          onClick={() => {
-            // Reset game and navigate to game page to trigger universe generation
-            navigate("/game");
-          }}
-          sx={{
-            width: "100%",
-            textTransform: "none",
-            cursor: "pointer",
-            fontSize: "1.1rem",
-            padding: "16px 24px",
-            lineHeight: 1.3,
-            color: "white",
-            borderColor: "rgba(255, 255, 255, 0.23)",
-            "&:hover": {
-              borderColor: "white",
-              backgroundColor: "rgba(255, 255, 255, 0.05)",
-            },
-          }}
-        >
-          TRY AGAIN
-        </Button>
       </Box>
     );
   }
@@ -155,125 +113,191 @@ export function StoryChoices() {
   return (
     <Box
       sx={{
-        position: "fixed",
-        bottom: 0,
-        right: 0,
         display: "flex",
-        flexDirection: "column",
+        flexDirection: isMobile ? "column" : "row",
         justifyContent: "center",
         alignItems: "center",
-        gap: 2,
-        p: 3,
-        maxWidth: "350px",
-        zIndex: 1000,
+        gap: 0.5,
+        width: "100%",
+        height: "100%",
       }}
     >
-      {!isLoading &&
-        choices.map((choice, index) => (
+      {isLoading ? (
+        <CircularProgress
+          size={40}
+          sx={{ opacity: "0.2", color: "primary.main" }}
+        />
+      ) : (
+        <>
+          {choices
+            .filter((_, index) => !isMobile || index === 0)
+            .map((choice, index) => (
+              <Box
+                key={choice.id}
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 1,
+                  minWidth: "fit-content",
+                  maxWidth: isMobile ? "90%" : "30%",
+                }}
+              >
+                <Button
+                  variant="contained"
+                  size="large"
+                  onClick={() => {
+                    initAudioContext();
+                    playPageSound();
+                    stopNarration();
+                    onChoice(choice.id);
+                  }}
+                  disabled={isSarahActive || isLoading || isNarratorSpeaking}
+                  sx={{
+                    width: "auto",
+                    minWidth: "fit-content",
+                  }}
+                >
+                  {formatTextWithBold(choice.text)}
+                </Button>
+              </Box>
+            ))}
+
           <Box
-            key={choice.id}
             sx={{
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
               gap: 1,
-              width: "100%",
-              minHeight: "fit-content",
+              ml: isMobile ? 0 : 4,
+              minWidth: "fit-content",
+              maxWidth: "30%",
             }}
           >
-            <Typography variant="caption" sx={{ opacity: 0.7, color: "white" }}>
-              Choice {index + 1}
-            </Typography>
             <Button
-              variant="outlined"
+              variant="contained"
               size="large"
-              onClick={() => {
-                // Initialiser l'audio context au clic
-                initAudioContext();
-                // Jouer le son de page
-                playPageSound();
-                // Arrêter la narration en cours
-                stopNarration();
-                // Faire le choix
-                onChoice(choice.id);
-              }}
+              color="secondary"
+              onClick={() => setShowCustomDialog(true)}
               disabled={isSarahActive || isLoading || isNarratorSpeaking}
               sx={{
-                width: "100%",
+                width: "auto",
+                minWidth: "fit-content",
                 textTransform: "none",
-                cursor: "pointer",
-                fontSize: "1.1rem",
-                padding: "16px 24px",
-                lineHeight: 1.3,
-                borderColor:
-                  sarahRecommendation === choice.id
-                    ? "#4CAF50"
-                    : sarahRecommendation !== null &&
-                      sarahRecommendation !== choice.id
-                    ? "#f44336"
-                    : "primary.main",
-                color:
-                  sarahRecommendation === choice.id
-                    ? "#4CAF50"
-                    : sarahRecommendation !== null &&
-                      sarahRecommendation !== choice.id
-                    ? "#f44336"
-                    : "inherit",
-                "&:hover": {
-                  borderColor:
-                    sarahRecommendation === choice.id
-                      ? "#45a049"
-                      : sarahRecommendation !== null &&
-                        sarahRecommendation !== choice.id
-                      ? "#d32f2f"
-                      : "primary.light",
-                  backgroundColor: "rgba(255, 255, 255, 0.05)",
-                },
-                "& .MuiChip-root": {
-                  fontSize: "1.1rem",
-                },
               }}
             >
-              {formatTextWithBold(choice.text)}
+              Write your own path
             </Button>
           </Box>
-        ))}
+        </>
+      )}
 
-      {!isLoading && storyText && (
-        <>
-          <Divider
+      <Dialog
+        open={showCustomDialog}
+        onClose={() => setShowCustomDialog(false)}
+        maxWidth="md"
+        fullWidth
+        sx={{
+          "& .MuiBackdrop-root": {
+            backgroundColor: "rgba(0, 0, 0, 0.95)",
+          },
+        }}
+        PaperProps={{
+          sx: {
+            backgroundColor: "transparent",
+            backgroundImage: "none",
+            boxShadow: "none",
+            m: isMobile ? 2 : 3,
+            maxHeight: isMobile ? "calc(100% - 32px)" : "calc(100% - 64px)",
+          },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            pt: 2,
+            pb: 1,
+            textAlign: "left",
+            color: "text.primary",
+            fontSize: isMobile ? "1.25rem" : "1.5rem",
+            pl: 3,
+          }}
+        >
+          Write your story
+        </DialogTitle>
+        <IconButton
+          onClick={() => setShowCustomDialog(false)}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: "text.secondary",
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+        <DialogContent
+          sx={{
+            p: isMobile ? 2 : 3,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+          }}
+        >
+          <TextField
+            autoFocus
+            multiline
+            rows={isMobile ? 5 : 4}
+            fullWidth
+            variant="outlined"
+            placeholder="What happens next in your story?"
+            value={customChoice}
+            onChange={(e) => setCustomChoice(e.target.value)}
             sx={{
-              width: "100%",
-              my: 3,
-              "&::before, &::after": {
-                borderColor: "rgba(255, 255, 255, 0.1)",
+              "& .MuiOutlinedInput-root": {
+                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                border: "1px solid rgba(255, 255, 255, 0.1)",
+                "&:hover": {
+                  backgroundColor: "rgba(0, 0, 0, 0.6)",
+                  border: "1px solid rgba(255, 255, 255, 0.2)",
+                },
+                "&.Mui-focused": {
+                  backgroundColor: "rgba(0, 0, 0, 0.7)",
+                  border: "1px solid rgba(255, 255, 255, 0.3)",
+                },
+              },
+              "& .MuiOutlinedInput-input": {
+                color: "text.primary",
+                fontSize: isMobile ? "0.9rem" : "1rem",
+                lineHeight: "1.5",
               },
             }}
-          >
-            <Typography
-              variant="caption"
+          />
+          <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+            <Button
+              onClick={() => {
+                if (customChoice.trim()) {
+                  initAudioContext();
+                  playPageSound();
+                  stopNarration();
+                  onChoice("custom", customChoice);
+                  setShowCustomDialog(false);
+                  setCustomChoice("");
+                }
+              }}
+              disabled={!customChoice.trim()}
+              variant="contained"
               sx={{
-                color: "rgba(255, 255, 255, 0.5)",
-                px: 1,
-                fontSize: "0.8rem",
+                mt: 1,
+                py: 1.5,
+                px: 4,
+                fontWeight: "bold",
               }}
             >
-              OR
-            </Typography>
-          </Divider>
-          <TalkWithSarah
-            isNarratorSpeaking={isNarratorSpeaking}
-            stopNarration={stopNarration}
-            playNarration={playNarration}
-            onDecisionMade={(choiceId) => setSarahRecommendation(choiceId)}
-            onSarahActiveChange={setIsSarahActive}
-            heroName={heroName}
-            currentContext={`You are Sarah and this is the situation you're in : ${storyText}. Those are your possible decisions : \n ${choices
-              .map((choice, index) => `decision ${index + 1} : ${choice.text}`)
-              .join("\n ")}.`}
-          />
-        </>
-      )}
+              Continue story
+            </Button>
+          </Box>
+        </DialogContent>
+      </Dialog>
     </Box>
   );
 }

client/src/components/UniverseSlotMachine.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
 import { motion, useAnimation } from "framer-motion";
 
 // Animation timing configuration
@@ -24,6 +24,8 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
   const controls = useAnimation();
   const [reelItems, setReelItems] = useState([]);
   const [isVisible, setIsVisible] = useState(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   useEffect(() => {
     if (isActive) {
@@ -35,7 +37,7 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
       repeatedWords.push({ word: finalValue, id: "final" });
       setReelItems(repeatedWords);
 
-      const itemHeight = 80;
+      const itemHeight = isMobile ? 60 : 80;
       const totalHeight = repeatedWords.length * itemHeight;
 
       setTimeout(() => {
@@ -54,13 +56,13 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
           });
       }, delay * SLOT_START_DELAY * 1000);
     }
-  }, [isActive, finalValue, words, delay]);
+  }, [isActive, finalValue, words, delay, isMobile]);
 
   return (
     <Box
       ref={containerRef}
       sx={{
-        height: "80px",
+        height: isMobile ? "60px" : "80px",
         overflow: "hidden",
         position: "relative",
         backgroundColor: "#1a1a1a",
@@ -71,7 +73,7 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
           position: "absolute",
           left: 0,
           right: 0,
-          height: "40px",
+          height: isMobile ? "30px" : "40px",
           zIndex: 2,
           pointerEvents: "none",
         },
@@ -99,12 +101,12 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
           <Box
             key={id}
             sx={{
-              height: "80px",
+              height: isMobile ? "60px" : "80px",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
               color: id === "final" ? "primary.main" : "#fff",
-              fontSize: "1.5rem",
+              fontSize: isMobile ? "1.2rem" : "1.5rem",
               fontWeight: "bold",
               fontFamily: "'Inter', sans-serif",
               transform: id === "final" ? "scale(1.1)" : "scale(1)",
@@ -119,11 +121,14 @@ const SlotReel = ({ words, isActive, finalValue, onComplete, delay = 0 }) => {
 };
 
 const SlotSection = ({ label, value, delay, isActive, onComplete, words }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   return (
     <Box
       sx={{
         width: "100%",
-        marginBottom: "20px",
+        marginBottom: isMobile ? "12px" : "20px",
         opacity: 1,
       }}
     >
@@ -132,9 +137,9 @@ const SlotSection = ({ label, value, delay, isActive, onComplete, words }) => {
         sx={{
           display: "block",
           textAlign: "center",
-          mb: 1,
+          mb: isMobile ? 0.5 : 1,
           color: "rgba(255,255,255,0.5)",
-          fontSize: "0.8rem",
+          fontSize: isMobile ? "0.7rem" : "0.8rem",
           letterSpacing: "0.1em",
           textTransform: "uppercase",
         }}
@@ -159,6 +164,9 @@ export const UniverseSlotMachine = ({
   activeIndex = 0,
   onComplete,
 }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const handleSlotComplete = (index) => {
     if (index === 2 && activeIndex >= 2) {
       setTimeout(() => {
@@ -176,17 +184,18 @@ export const UniverseSlotMachine = ({
         justifyContent: "center",
         alignItems: "center",
         background: "#1a1a1a",
-        p: 3,
+        p: isMobile ? 2 : 3,
       }}
     >
       <Typography
         variant="h5"
         sx={{
-          mb: 3,
+          mb: isMobile ? 2 : 3,
           color: "#fff",
           textAlign: "center",
           fontWeight: 300,
           letterSpacing: "0.1em",
+          fontSize: isMobile ? "1.2rem" : "1.5rem",
         }}
       >
         Finding a universe
@@ -196,10 +205,7 @@ export const UniverseSlotMachine = ({
         sx={{
           maxWidth: "500px",
           width: "100%",
-          p: 4,
-          //   backgroundColor: "rgba(0,0,0,0.2)",
-          //   borderRadius: 4,
-          //   border: "1px solid rgba(255,255,255,0.05)",
+          p: isMobile ? 2 : 4,
         }}
       >
         <SlotSection
@@ -219,7 +225,7 @@ export const UniverseSlotMachine = ({
           onComplete={() => handleSlotComplete(1)}
         />
         <SlotSection
-          label="the era of..."
+          label="in the ..."
           value={epoch}
           words={RANDOM_EPOCHS}
           delay={2}

client/src/contexts/GameContext.jsx

@@ -8,6 +8,9 @@ import {
 import { storyApi } from "../utils/api";
 import { getNextLayoutType, LAYOUTS } from "../layouts/config";
 
+// Constants
+const DISABLE_NARRATOR = true; // Désactive complètement le narrateur
+
 const GameContext = createContext(null);
 
 export function GameProvider({ children }) {
@@ -43,26 +46,18 @@ export function GameProvider({ children }) {
     setIsNarratorSpeaking(false);
   }, []);
 
-  const playNarration = useCallback(
-    async (text) => {
-      try {
-        // Si une narration est déjà en cours, l'arrêter
-        if (isNarratorSpeaking) {
-          stopNarration();
-          // Attendre un peu pour s'assurer que l'audio précédent est bien arrêté
-          await new Promise((resolve) => setTimeout(resolve, 100));
-        }
-
-        setIsNarratorSpeaking(true);
-        await storyApi.playNarration(text, universe?.session_id);
-        setIsNarratorSpeaking(false);
-      } catch (error) {
-        console.error("Error playing narration:", error);
-        setIsNarratorSpeaking(false);
-      }
-    },
-    [universe?.session_id, isNarratorSpeaking, stopNarration]
-  );
+  const playNarration = useCallback(async (text) => {
+    if (DISABLE_NARRATOR) return; // Early return si le narrateur est désactivé
+
+    try {
+      setIsNarratorSpeaking(true);
+      await storyApi.playNarration(text);
+    } catch (error) {
+      console.error("Error playing narration:", error);
+    } finally {
+      setIsNarratorSpeaking(false);
+    }
+  }, []);
 
   // Effect pour arrêter la narration quand le composant est démonté
   useEffect(() => {
@@ -105,6 +100,7 @@ export function GameProvider({ children }) {
           ...localSegments[segmentIndex],
           layoutType,
           images: Array(imagePrompts.length).fill(null),
+          imagePrompts,
           isLoading: true,
         };
 
@@ -187,9 +183,32 @@ export function GameProvider({ children }) {
     [layoutCounter, setLayoutCounter, setSegments]
   );
 
+  const regenerateImage = async (prompt, session_id) => {
+    try {
+      if (!session_id) {
+        console.error("No session_id provided for image regeneration");
+        return null;
+      }
+
+      const response = await storyApi.generateImage(
+        prompt,
+        512,
+        512,
+        session_id
+      );
+      if (response.success && response.image_base64) {
+        return response.image_base64;
+      }
+      return null;
+    } catch (error) {
+      console.error("Error regenerating image:", error);
+      return null;
+    }
+  };
+
   // Gestion des choix
   const handleChoice = useCallback(
-    async (choiceId) => {
+    async (choiceId, customText) => {
       if (isLoading) return;
 
       // Arrêter toute narration en cours avant de faire un nouveau choix
@@ -203,10 +222,15 @@ export function GameProvider({ children }) {
       setShowChoices(false);
 
       try {
-        const response = await storyApi.makeChoice(
-          choiceId,
-          universe?.session_id
-        );
+        let response;
+        if (choiceId === "custom") {
+          response = await storyApi.makeCustomChoice(
+            customText,
+            universe?.session_id
+          );
+        } else {
+          response = await storyApi.makeChoice(choiceId, universe?.session_id);
+        }
 
         // Mettre à jour les choix (mais ne pas les afficher encore)
         setChoices(response.choices);
@@ -337,6 +361,7 @@ export function GameProvider({ children }) {
     isPageLoaded: (pageIndex) => loadedPages.has(pageIndex),
     areAllPagesLoaded: (totalPages) => loadedPages.size === totalPages,
     generateImagesForStory,
+    regenerateImage,
   };
 
   return <GameContext.Provider value={value}>{children}</GameContext.Provider>;

client/src/contexts/SoundContext.jsx

@@ -0,0 +1,142 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
+import { useSound } from "use-sound";
+import { storyApi } from "../utils/api";
+
+const SOUND_ENABLED_KEY = "sound_enabled";
+
+// Définition des sons du jeu
+const SOUNDS = {
+  page: {
+    files: Array.from(
+      { length: 7 },
+      (_, i) => `/sounds/page-flip-${i + 1}.mp3`
+    ),
+    volume: 0.5,
+  },
+  writing: {
+    files: Array.from({ length: 5 }, (_, i) => `/sounds/drawing-${i + 1}.mp3`),
+    volume: 0.3,
+  },
+  transition: {
+    files: Array.from(
+      { length: 3 },
+      (_, i) => `/sounds/transitional-swipe-${i + 1}.mp3`
+    ),
+    volume: 0.1,
+  },
+  talkySarah: {
+    on: "/sounds/talky-walky-on.mp3",
+    off: "/sounds/talky-walky-off.mp3",
+    volume: 0.5,
+  },
+};
+
+const SoundContext = createContext(null);
+
+export function SoundProvider({ children }) {
+  const [isSoundEnabled, setIsSoundEnabled] = useState(() => {
+    const stored = localStorage.getItem(SOUND_ENABLED_KEY);
+    return stored === null ? true : stored === "true";
+  });
+
+  // Initialiser l'audio context après interaction utilisateur
+  useEffect(() => {
+    const handleInteraction = () => {
+      storyApi.handleUserInteraction();
+      // Retirer les listeners une fois qu'on a eu une interaction
+      window.removeEventListener("click", handleInteraction);
+      window.removeEventListener("touchstart", handleInteraction);
+      window.removeEventListener("keydown", handleInteraction);
+    };
+
+    window.addEventListener("click", handleInteraction);
+    window.addEventListener("touchstart", handleInteraction);
+    window.addEventListener("keydown", handleInteraction);
+
+    return () => {
+      window.removeEventListener("click", handleInteraction);
+      window.removeEventListener("touchstart", handleInteraction);
+      window.removeEventListener("keydown", handleInteraction);
+    };
+  }, []);
+
+  // Initialiser tous les sons
+  const soundInstances = {};
+  Object.entries(SOUNDS).forEach(([category, config]) => {
+    if (Array.isArray(config.files)) {
+      // Pour les sons avec plusieurs variations
+      soundInstances[category] = config.files.map((file) => {
+        const [play] = useSound(file, { volume: config.volume });
+        return play;
+      });
+    } else if (typeof config.files === "string") {
+      // Pour les sons uniques
+      const [play] = useSound(config.files, { volume: config.volume });
+      soundInstances[category] = play;
+    } else {
+      // Pour les sons avec sous-catégories (comme talkySarah)
+      soundInstances[category] = {};
+      Object.entries(config).forEach(([key, value]) => {
+        if (key !== "volume" && typeof value === "string") {
+          const [play] = useSound(value, { volume: config.volume });
+          soundInstances[category][key] = play;
+        }
+      });
+    }
+  });
+
+  // Sauvegarder l'état du son dans le localStorage
+  useEffect(() => {
+    localStorage.setItem(SOUND_ENABLED_KEY, isSoundEnabled);
+  }, [isSoundEnabled]);
+
+  // Fonction pour jouer un son
+  const playSound = useCallback(
+    (category, subCategory = null) => {
+      if (!isSoundEnabled) return;
+
+      try {
+        if (subCategory) {
+          // Pour les sons avec sous-catégories (comme talkySarah.on)
+          soundInstances[category][subCategory]?.();
+        } else if (Array.isArray(soundInstances[category])) {
+          // Pour les sons avec variations, jouer un son aléatoire
+          const randomIndex = Math.floor(
+            Math.random() * soundInstances[category].length
+          );
+          soundInstances[category][randomIndex]?.();
+        } else {
+          // Pour les sons uniques
+          soundInstances[category]?.();
+        }
+      } catch (error) {
+        console.warn(`Error playing sound ${category}:`, error);
+      }
+    },
+    [isSoundEnabled, soundInstances]
+  );
+
+  const value = {
+    isSoundEnabled,
+    setIsSoundEnabled,
+    playSound,
+  };
+
+  return (
+    <SoundContext.Provider value={value}>{children}</SoundContext.Provider>
+  );
+}
+
+export const useSoundSystem = () => {
+  const context = useContext(SoundContext);
+  if (!context) {
+    throw new Error("useSoundSystem must be used within a SoundProvider");
+  }
+  return context;
+};

client/src/hooks/useNarrator.js

@@ -1,62 +0,0 @@
-import { useState, useRef } from "react";
-import { storyApi } from "../utils/api";
-
-export function useNarrator(isEnabled = true) {
-  const [isNarratorSpeaking, setIsNarratorSpeaking] = useState(false);
-  const audioRef = useRef(new Audio());
-
-  const stopNarration = () => {
-    if (audioRef.current) {
-      audioRef.current.pause();
-      audioRef.current.currentTime = 0;
-      setIsNarratorSpeaking(false);
-    }
-  };
-
-  const playNarration = async (text) => {
-    if (!isEnabled) return;
-
-    try {
-      // Stop any ongoing narration
-      stopNarration();
-
-      // Get audio from API
-      const response = await storyApi.narrate(text);
-
-      if (!response || !response.audio_base64) {
-        throw new Error("Pas d'audio reçu du serveur");
-      }
-
-      // Create audio blob and URL
-      const audioBlob = await fetch(
-        `data:audio/mpeg;base64,${response.audio_base64}`
-      ).then((r) => r.blob());
-      const audioUrl = URL.createObjectURL(audioBlob);
-
-      // Set up audio element
-      audioRef.current.src = audioUrl;
-      audioRef.current.onplay = () => setIsNarratorSpeaking(true);
-      audioRef.current.onended = () => {
-        setIsNarratorSpeaking(false);
-        URL.revokeObjectURL(audioUrl);
-      };
-      audioRef.current.onerror = () => {
-        console.error("Error playing audio");
-        setIsNarratorSpeaking(false);
-        URL.revokeObjectURL(audioUrl);
-      };
-
-      // Play audio
-      await audioRef.current.play();
-    } catch (error) {
-      console.error("Error in playNarration:", error);
-      setIsNarratorSpeaking(false);
-    }
-  };
-
-  return {
-    isNarratorSpeaking,
-    playNarration,
-    stopNarration,
-  };
-}

client/src/hooks/usePageSound.js

@@ -1,10 +0,0 @@
-import { useSoundEffect } from "./useSoundEffect";
-
-export function usePageSound(isSoundEnabled = true) {
-  return useSoundEffect({
-    basePath: "/sounds/page-flip-",
-    numSounds: 7,
-    volume: 0.5,
-    enabled: isSoundEnabled,
-  });
-}

client/src/hooks/useTransitionSound.js

@@ -1,10 +0,0 @@
-import { useSoundEffect } from "./useSoundEffect";
-
-export function useTransitionSound(isSoundEnabled = true) {
-  return useSoundEffect({
-    basePath: "/sounds/transitional-swipe-",
-    numSounds: 3,
-    volume: 0.1,
-    enabled: isSoundEnabled,
-  });
-}

client/src/hooks/useWritingSound.js

@@ -1,10 +0,0 @@
-import { useSoundEffect } from "./useSoundEffect";
-
-export function useWritingSound(isSoundEnabled = true) {
-  return useSoundEffect({
-    basePath: "/sounds/drawing-",
-    numSounds: 5,
-    volume: 0.3,
-    enabled: isSoundEnabled,
-  });
-}

client/src/layouts/ComicLayout.jsx

@@ -19,6 +19,7 @@ function LoadingPage() {
         height: "100%",
         aspectRatio: "0.7",
         flexShrink: 0,
+        overflow: "hidden",
       }}
     >
       <CircularProgress
@@ -36,8 +37,6 @@ function LoadingPage() {
 function ComicPage({ layout, layoutIndex, isLastPage, preloadedImages }) {
   const {
     handlePageLoaded,
-    choices,
-    onChoice,
     isLoading,
     isNarratorSpeaking,
     stopNarration,
@@ -208,24 +207,6 @@ function ComicPage({ layout, layoutIndex, isLastPage, preloadedImages }) {
           {layoutIndex + 1}
         </Box>
       </Box>
-      {isLastPage && (
-        <Box
-          sx={{
-            position: "absolute",
-            left: "100%",
-            top: "75%",
-            transform: "translateY(-50%)",
-            display: "flex",
-            flexDirection: "column",
-            gap: 2,
-            width: "350px",
-            ml: 4,
-            backgroundColor: "transparent",
-          }}
-        >
-          <StoryChoices />
-        </Box>
-      )}
     </Box>
   );
 }
@@ -351,33 +332,15 @@ export function ComicLayout() {
   useEffect(() => {
     const loadedSegments = segments.filter((segment) => !segment.isLoading);
     const lastSegment = loadedSegments[loadedSegments.length - 1];
-    const hasNewSegment = lastSegment && !lastSegment.hasBeenRead;
-
-    if (scrollContainerRef.current && hasNewSegment) {
-      // Arrêter la narration en cours
-      stopNarration();
 
+    if (scrollContainerRef.current && lastSegment) {
       // Scroll to the right
       scrollContainerRef.current.scrollTo({
         left: scrollContainerRef.current.scrollWidth,
         behavior: "smooth",
       });
-
-      // Attendre que le scroll soit terminé avant de démarrer la narration
-      const timeoutId = setTimeout(() => {
-        if (lastSegment && lastSegment.text) {
-          playNarration(lastSegment.text);
-          // Marquer le segment comme lu
-          lastSegment.hasBeenRead = true;
-        }
-      }, 500);
-
-      return () => {
-        clearTimeout(timeoutId);
-        stopNarration();
-      };
     }
-  }, [segments, playNarration, stopNarration]);
+  }, [segments]);
 
   // Prevent back/forward navigation on trackpad horizontal scroll
   useEffect(() => {
@@ -415,8 +378,12 @@ export function ComicLayout() {
         gap: 4,
         height: "100%",
         width: "100%",
-        px: layouts[0]?.type === "COVER" ? "calc(50% - (90vh * 0.5 * 0.5))" : 0,
-        py: 8,
+        px: {
+          xs: 2, // 4 en mobile
+          sm: "calc(50% - 25vw)", // Valeur originale pour les écrans plus grands
+        },
+        pt: 4,
+        pb: 0,
         overflowX: "auto",
         overflowY: "hidden",
         "&::-webkit-scrollbar": {
@@ -440,9 +407,6 @@ export function ComicLayout() {
           preloadedImages={preloadedImages}
         />
       ))}
-      {isLoading && !layouts[layouts.length - 1]?.segments[0]?.is_last_step && (
-        <LoadingPage />
-      )}
     </Box>
   );
 }

client/src/layouts/Panel.jsx

@@ -1,5 +1,34 @@
-import { Box, CircularProgress, Typography } from "@mui/material";
+import {
+  Box,
+  CircularProgress,
+  Typography,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
+import RefreshIcon from "@mui/icons-material/Refresh";
 import { useEffect, useState, useRef } from "react";
+import { useGame } from "../contexts/GameContext";
+import { keyframes } from "@mui/system";
+
+// Animation de rotation complète
+const spinFull = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+// Animation de rotation légère pour le hover
+const spinHover = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(30deg);
+  }
+`;
 
 // Cache global pour les images déjà chargées
 const imageCache = new Map();
@@ -14,12 +43,15 @@ export function Panel({
   onImageLoad,
   imageId,
 }) {
+  const { regenerateImage } = useGame();
   const [imageLoaded, setImageLoaded] = useState(
     () => loadedImagesState.get(imageId) || false
   );
   const [imageDisplayed, setImageDisplayed] = useState(
     () => loadedImagesState.get(imageId) || false
   );
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  const [isSpinning, setIsSpinning] = useState(false);
   const hasImage = segment?.images?.[panelIndex];
   const isFirstPanel = panelIndex === 0;
   const imgRef = useRef(null);
@@ -33,6 +65,38 @@ export function Panel({
     };
   }, []);
 
+  const handleRegenerate = async () => {
+    if (!segment?.imagePrompts?.[panelIndex]) return;
+
+    setIsRegenerating(true);
+    setIsSpinning(true);
+    try {
+      const newImageData = await regenerateImage(
+        segment.imagePrompts[panelIndex],
+        segment.session_id
+      );
+      if (newImageData) {
+        // Mettre à jour l'image dans le segment
+        segment.images[panelIndex] = newImageData;
+        // Réinitialiser l'état de chargement
+        setImageLoaded(false);
+        setImageDisplayed(false);
+        // Recharger l'image
+        if (imageCache.has(imageId)) {
+          URL.revokeObjectURL(imageCache.get(imageId));
+          imageCache.delete(imageId);
+        }
+        loadedImagesState.delete(imageId);
+      }
+    } finally {
+      setIsRegenerating(false);
+      // Laisser l'animation se terminer avant de réinitialiser
+      setTimeout(() => {
+        setIsSpinning(false);
+      }, 500);
+    }
+  };
+
   // Gérer le chargement initial de l'image
   useEffect(() => {
     if (!hasImage || loadedImagesState.get(imageId)) return;
@@ -97,6 +161,9 @@ export function Panel({
         borderRadius: "4px",
         overflow: "hidden",
         position: "relative",
+        "&:hover .refresh-button": {
+          opacity: 1,
+        },
       }}
     >
       {hasImage && imageDataRef.current && (
@@ -109,14 +176,14 @@ export function Panel({
             height: "100%",
             objectFit: "cover",
             opacity: imageDisplayed ? 1 : 0,
-            transition: "opacity 0.5s ease-in-out",
+            transition: "opacity 0.25s ease-in-out",
             willChange: "opacity",
           }}
           loading="eager"
           decoding="sync"
         />
       )}
-      {(!hasImage || !imageDisplayed) && (
+      {(!hasImage || !imageDisplayed || isRegenerating) && (
         <Box
           sx={{
             width: "100%",
@@ -129,12 +196,43 @@ export function Panel({
             top: 0,
             left: 0,
             opacity: imageDisplayed ? 0 : 1,
-            transition: "opacity 0.5s ease-in-out",
+            transition: "opacity 0.25s ease-in-out",
           }}
         >
           <CircularProgress size={24} />
         </Box>
       )}
+      <Tooltip title="Regenerate this image" placement="top">
+        <IconButton
+          className="refresh-button"
+          onClick={handleRegenerate}
+          disabled={isRegenerating}
+          sx={{
+            position: "absolute",
+            top: 8,
+            right: 8,
+            opacity: 0,
+            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            "&:hover": {
+              backgroundColor: "rgba(0, 0, 0, 0.7)",
+              "& .MuiSvgIcon-root": {
+                animation: `${spinHover} 1s cubic-bezier(0.4, 0, 0.2, 1) infinite`,
+              },
+            },
+            "& .MuiSvgIcon-root": {
+              color: "white",
+              transition: "transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+              animation: isSpinning
+                ? `${spinFull} 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite`
+                : "none",
+              willChange: "transform",
+            },
+          }}
+        >
+          <RefreshIcon />
+        </IconButton>
+      </Tooltip>
       {isFirstPanel && segment?.text && (
         <Box
           sx={{
@@ -146,7 +244,6 @@ export function Panel({
             background: "rgba(255, 255, 255, 0.95)",
             color: "black",
             textAlign: "center",
-            fontSize: "1rem",
             fontWeight: 500,
             borderRadius: "8px",
             display: "flex",
@@ -158,8 +255,9 @@ export function Panel({
           <Typography
             variant="body1"
             sx={{
+              fontSize: { xs: "0.775rem", sm: "1rem" }, // Responsive font size
               color: "black",
-              lineHeight: 1.4,
+              lineHeight: 1.2,
             }}
           >
             {segment.text}

client/src/layouts/config.js

@@ -5,6 +5,7 @@ export const PANEL_SIZES = {
   LANDSCAPE: { width: 768, height: 512 },
   PANORAMIC: { width: 1024, height: 512 },
   COVER_SIZE: { width: 512, height: 768 },
+  SQUARE: { width: 512, height: 512 },
 };
 
 // Grid span helpers
@@ -50,24 +51,24 @@ export const LAYOUTS = {
     gridCols: 3,
     gridRows: 2,
     panels: [
-      { ...PANEL_SIZES.LANDSCAPE, gridColumn: GRID.TWO_THIRDS, gridRow: "1" }, // Wide landscape top left
+      { ...PANEL_SIZES.SQUARE, gridColumn: GRID.TWO_THIRDS, gridRow: "1" }, // Wide landscape top left
       { ...PANEL_SIZES.COLUMN, gridColumn: "3", gridRow: "1" }, // COLUMN top right
       { ...PANEL_SIZES.COLUMN, gridColumn: "1", gridRow: "2" }, // COLUMN bottom left
-      { ...PANEL_SIZES.LANDSCAPE, gridColumn: "2 / span 2", gridRow: "2" }, // Wide landscape bottom right
+      { ...PANEL_SIZES.SQUARE, gridColumn: "2 / span 2", gridRow: "2" }, // Wide landscape bottom right
     ],
   },
   LAYOUT_4: {
     gridCols: 2,
     gridRows: 3,
     panels: [
-      { ...PANEL_SIZES.LANDSCAPE, gridColumn: "1 / span 2", gridRow: "1" }, // Wide panoramic top
+      { ...PANEL_SIZES.PANORAMIC, gridColumn: "1 / span 2", gridRow: "1" }, // Wide panoramic top
       {
-        ...PANEL_SIZES.PORTRAIT,
+        ...PANEL_SIZES.COLUMN,
         gridColumn: "1",
         gridRow: GRID.FULL_HEIGHT_FROM_2,
       }, // Tall portrait left
-      { ...PANEL_SIZES.LANDSCAPE, gridColumn: "2", gridRow: "2" }, // Square middle right
-      { ...PANEL_SIZES.LANDSCAPE, gridColumn: "2", gridRow: "3" }, // Square bottom right
+      { ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "2" }, // Square middle right
+      { ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "3" }, // Square bottom right
     ],
   },
   LAYOUT_5: {
@@ -102,8 +103,8 @@ export const nonRandomLayouts = Object.keys(LAYOUTS).filter(
 export const LAYOUTS_BY_PANEL_COUNT = {
   1: ["COVER"],
   2: ["LAYOUT_7"],
-  3: ["LAYOUT_2", "LAYOUT_5"], //"LAYOUT_1",
-  4: ["LAYOUT_3", "LAYOUT_4"],
+  3: ["LAYOUT_2"], //"LAYOUT_5"
+  4: ["LAYOUT_3"], //, "LAYOUT_4"
 };
 
 // Helper functions for layout configuration

client/src/main.jsx

@@ -9,19 +9,26 @@ import { Game } from "./pages/Game";
 import { Tutorial } from "./pages/Tutorial";
 import Debug from "./pages/Debug";
 import { Universe } from "./pages/Universe";
+import { SoundProvider } from "./contexts/SoundContext";
+import { GameNavigation } from "./components/GameNavigation";
+import { AppBackground } from "./components/AppBackground";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <ThemeProvider theme={theme}>
     <CssBaseline />
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/game" element={<Game />} />
-        <Route path="/tutorial" element={<Tutorial />} />
-        <Route path="/debug" element={<Debug />} />
-        <Route path="/universe" element={<Universe />} />
-      </Routes>
-    </BrowserRouter>
+    <SoundProvider>
+      <BrowserRouter>
+        <GameNavigation />
+        <AppBackground />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/game" element={<Game />} />
+          <Route path="/tutorial" element={<Tutorial />} />
+          <Route path="/debug" element={<Debug />} />
+          <Route path="/universe" element={<Universe />} />
+        </Routes>
+      </BrowserRouter>
+    </SoundProvider>
   </ThemeProvider>
 );

client/src/pages/Game.jsx

@@ -1,7 +1,3 @@
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import PhotoCameraOutlinedIcon from "@mui/icons-material/PhotoCameraOutlined";
-import VolumeOffIcon from "@mui/icons-material/VolumeOff";
-import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import { Box, IconButton, LinearProgress, Tooltip } from "@mui/material";
 import { motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
@@ -13,19 +9,31 @@ import { TalkWithSarah } from "../components/TalkWithSarah";
 import { GameDebugPanel } from "../components/GameDebugPanel";
 import { UniverseSlotMachine } from "../components/UniverseSlotMachine";
 import { useGameSession } from "../hooks/useGameSession";
-import { useNarrator } from "../hooks/useNarrator";
-import { usePageSound } from "../hooks/usePageSound";
 import { useStoryCapture } from "../hooks/useStoryCapture";
-import { useTransitionSound } from "../hooks/useTransitionSound";
-import { useWritingSound } from "../hooks/useWritingSound";
 import { ComicLayout } from "../layouts/ComicLayout";
 import { storyApi, universeApi } from "../utils/api";
 import { GameProvider, useGame } from "../contexts/GameContext";
+import { StoryChoices } from "../components/StoryChoices";
+import { useSoundSystem } from "../contexts/SoundContext";
+import { GameNavigation } from "../components/GameNavigation";
+import { RotatingMessage } from "../components/RotatingMessage";
 
 // Constants
 const SOUND_ENABLED_KEY = "sound_enabled";
 const GAME_INITIALIZED_KEY = "game_initialized";
 
+const TRANSITION_MESSAGES = [
+  "Opening the portal...",
+  "Take a deep breath...",
+  "Let's start...",
+];
+
+const SESSION_LOADING_MESSAGES = [
+  "Waking up sleepy AI...",
+  "Calibrating the multiverse...",
+  "Gathering comic book inspiration...",
+];
+
 function GameContent() {
   const navigate = useNavigate();
   const { universeId } = useParams();
@@ -62,35 +70,18 @@ function GameContent() {
     setLayoutCounter,
     resetGame,
     generateImagesForStory,
+    isNarratorSpeaking,
+    playNarration,
+    stopNarration,
   } = useGame();
 
   const storyContainerRef = useRef(null);
   const { downloadStoryImage } = useStoryCapture();
   const [audioInitialized, setAudioInitialized] = useState(false);
-  const [isSoundEnabled, setIsSoundEnabled] = useState(() => {
-    const stored = localStorage.getItem(SOUND_ENABLED_KEY);
-    return stored === null ? true : stored === "true";
-  });
+  const { isSoundEnabled, setIsSoundEnabled, playSound } = useSoundSystem();
   const [loadingMessage, setLoadingMessage] = useState(0);
   const [isDebugVisible, setIsDebugVisible] = useState(false);
 
-  const messages = [
-    "teaching robots to tell bedtime stories...",
-    "bribing pixels to make pretty pictures...",
-    "calibrating the multiverse...",
-  ];
-  const transitionMessages = [
-    "Creating your universe...",
-    "Drawing the first scene...",
-    "Preparing your story...",
-    "Assembling the comic panels...",
-  ];
-
-  const { isNarratorSpeaking, playNarration, stopNarration } =
-    useNarrator(isSoundEnabled);
-  const playPageSound = usePageSound(isSoundEnabled);
-  const playWritingSound = useWritingSound(isSoundEnabled);
-  const playTransitionSound = useTransitionSound(isSoundEnabled);
   const {
     sessionId,
     universe: gameUniverse,
@@ -126,41 +117,19 @@ function GameContent() {
     };
   }, [audioInitialized]);
 
-  // Modify the transition sound effect to only play if audio is initialized
-  useEffect(() => {
-    if (
-      !isSessionLoading &&
-      sessionId &&
-      !error &&
-      !sessionError &&
-      audioInitialized
-    ) {
-      playTransitionSound();
-    }
-  }, [isSessionLoading, sessionId, error, sessionError, audioInitialized]);
-
   // Jouer le son de transition quand on passe de la slot machine au jeu
   useEffect(() => {
     if (!isInitialLoading && audioInitialized) {
-      playTransitionSound();
+      playSound("transition");
     }
-  }, [isInitialLoading, audioInitialized, playTransitionSound]);
+  }, [isInitialLoading, audioInitialized]);
 
   // Sauvegarder l'état du son dans le localStorage
   useEffect(() => {
     localStorage.setItem(SOUND_ENABLED_KEY, isSoundEnabled);
+    storyApi.setSoundEnabled(isSoundEnabled);
   }, [isSoundEnabled]);
 
-  // Add effect for message rotation
-  useEffect(() => {
-    if (showLoadingMessages) {
-      const interval = setInterval(() => {
-        setLoadingMessage((prev) => (prev + 1) % messages.length);
-      }, 3000);
-      return () => clearInterval(interval);
-    }
-  }, [showLoadingMessages]);
-
   // Handle keyboard events for debug panel
   useEffect(() => {
     const handleKeyPress = (event) => {
@@ -273,8 +242,76 @@ function GameContent() {
     }
   }, [isTransitionLoading]);
 
+  // Effet pour gérer le scroll et la narration des nouveaux segments
+  useEffect(() => {
+    const loadedSegments = segments.filter((segment) => !segment.isLoading);
+    const lastSegment = loadedSegments[loadedSegments.length - 1];
+    const hasNewSegment = lastSegment && !lastSegment.hasBeenRead;
+
+    if (storyContainerRef.current && hasNewSegment && !isNarratorSpeaking) {
+      // Arrêter la narration en cours
+      if (isSoundEnabled) {
+        stopNarration();
+      }
+
+      // Scroll to the right
+      storyContainerRef.current.scrollTo({
+        left: storyContainerRef.current.scrollWidth,
+        behavior: "smooth",
+      });
+
+      let isCleanedUp = false;
+
+      // Attendre que le scroll soit terminé avant de démarrer la narration
+      const timeoutId = setTimeout(() => {
+        if (isCleanedUp) return;
+
+        // Jouer le son d'écriture
+        playSound("writing");
+
+        // Démarrer la narration après un court délai
+        setTimeout(() => {
+          if (isCleanedUp) return;
+
+          if (
+            lastSegment &&
+            lastSegment.text &&
+            isSoundEnabled &&
+            !isNarratorSpeaking
+          ) {
+            playNarration(lastSegment.text);
+          }
+          // Marquer le segment comme lu
+          lastSegment.hasBeenRead = true;
+        }, 500);
+      }, 500);
+
+      return () => {
+        isCleanedUp = true;
+        clearTimeout(timeoutId);
+        if (isSoundEnabled) {
+          stopNarration();
+        }
+      };
+    }
+  }, [
+    segments,
+    playNarration,
+    stopNarration,
+    isSoundEnabled,
+    playSound,
+    isNarratorSpeaking,
+  ]);
+
+  // Effet pour arrêter la narration quand le son est désactivé
+  useEffect(() => {
+    if (!isSoundEnabled) {
+      stopNarration();
+    }
+  }, [isSoundEnabled, stopNarration]);
+
   const handleBack = () => {
-    playPageSound();
+    playSound("page");
     navigate("/tutorial");
   };
 
@@ -295,18 +332,26 @@ function GameContent() {
   // Show loading state while session is initializing
   if (isSessionLoading) {
     return (
-      <Box sx={{ width: "100%", height: "100vh", backgroundColor: "#1a1a1a" }}>
-        <LoadingScreen
-          icon="universe"
-          messages={[
-            "Waking up sleepy AI...",
-            "Calibrating the multiverse...",
-            "Gathering comic book inspiration...",
-            // "Creating a new universe...",
-            // "Drawing the first panels...",
-            // "Setting up the story...",
-          ]}
+      <Box
+        sx={{
+          width: "100%",
+          height: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          backgroundColor: "background.default",
+        }}
+      >
+        <LinearProgress
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+          }}
         />
+        <RotatingMessage messages={SESSION_LOADING_MESSAGES} isVisible={true} />
       </Box>
     );
   }
@@ -332,19 +377,28 @@ function GameContent() {
   // Afficher l'écran de transition après la slot machine
   if (isTransitionLoading) {
     return (
-      <Box sx={{ width: "100%", height: "100vh", backgroundColor: "#1a1a1a" }}>
-        <LoadingScreen messages={transitionMessages} icon="story" />
-      </Box>
-    );
-  }
-
-  // Afficher les messages de chargement uniquement pendant le chargement initial
-  if (isLoading && showLoadingMessages && segments.length === 0) {
-    return (
-      <Box sx={{ width: "100%", height: "100vh", backgroundColor: "#1a1a1a" }}>
-        <LoadingScreen
-          messages={messages}
-          currentMessage={messages[loadingMessage]}
+      <Box
+        sx={{
+          width: "100%",
+          height: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          backgroundColor: "background.default",
+        }}
+      >
+        <LinearProgress
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+          }}
+        />
+        <RotatingMessage
+          messages={TRANSITION_MESSAGES}
+          isVisible={isTransitionLoading}
         />
       </Box>
     );
@@ -367,53 +421,7 @@ function GameContent() {
           overflow: "hidden",
         }}
       >
-        {/* Header controls */}
-        <Box
-          sx={{
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 10,
-            display: "flex",
-            justifyContent: "space-between",
-            p: 2,
-            // backgroundColor: "rgba(18, 18, 18, 0.8)",
-            // backdropFilter: "blur(8px)",
-          }}
-        >
-          <Box>
-            <Tooltip title="Retour au menu">
-              <IconButton
-                onClick={() => navigate("/tutorial")}
-                sx={{ color: "white" }}
-              >
-                <ArrowBackIcon />
-              </IconButton>
-            </Tooltip>
-          </Box>
-          <Box sx={{ display: "flex", gap: 1 }}>
-            <Tooltip
-              title={isSoundEnabled ? "Désactiver le son" : "Activer le son"}
-            >
-              <IconButton
-                onClick={() => setIsSoundEnabled(!isSoundEnabled)}
-                sx={{ color: "white" }}
-              >
-                {isSoundEnabled ? <VolumeUpIcon /> : <VolumeOffIcon />}
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Capturer l'histoire">
-              <IconButton
-                onClick={() => downloadStoryImage(storyContainerRef)}
-                sx={{ color: "white" }}
-              >
-                <PhotoCameraOutlinedIcon />
-              </IconButton>
-            </Tooltip>
-          </Box>
-        </Box>
-
+        <GameNavigation />
         {/* Main content */}
         <Box
           ref={storyContainerRef}
@@ -429,7 +437,39 @@ function GameContent() {
           ) : showSlotMachine ? (
             <UniverseSlotMachine state={slotMachineState} />
           ) : (
-            <ComicLayout />
+            <Box
+              sx={{
+                height: "100%",
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                position: "relative",
+              }}
+            >
+              <Box
+                sx={{
+                  height: "85%",
+                  width: "100%",
+                  overflow: "auto",
+                }}
+              >
+                <ComicLayout />
+              </Box>
+              <Box
+                sx={{
+                  height: "15%",
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  px: 2,
+                }}
+              >
+                <Box sx={{ width: "100%", maxWidth: "800px" }}>
+                  <StoryChoices />
+                </Box>
+              </Box>
+            </Box>
           )}
         </Box>
 

client/src/pages/Home.jsx

@@ -1,17 +1,24 @@
-import { Box, Button, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Typography,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
-import { usePageSound } from "../hooks/usePageSound";
+import { useSoundSystem } from "../contexts/SoundContext";
 import { BlinkingText } from "../components/BlinkingText";
 import { BookPages } from "../components/BookPages";
-import { InfiniteBackground } from "../components/InfiniteBackground";
 
 export function Home() {
   const navigate = useNavigate();
-  const playPageSound = usePageSound();
+  const { playSound } = useSoundSystem();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const handlePlay = () => {
-    playPageSound();
+    playSound("page");
     navigate("/tutorial");
   };
 
@@ -21,7 +28,12 @@ export function Home() {
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.3, ease: "easeInOut" }}
-      style={{ width: "100%", height: "100vh", position: "relative" }}
+      style={{
+        width: "100%",
+        height: "100vh",
+        position: "relative",
+        overflow: "hidden",
+      }}
     >
       <Box
         sx={{
@@ -30,24 +42,38 @@ export function Home() {
           alignItems: "center",
           justifyContent: "center",
           minHeight: "100vh",
+          height: "100%",
           width: "100%",
           position: "relative",
+          overflow: "hidden",
         }}
       >
-        <InfiniteBackground />
-
         <Typography
           variant="h1"
-          sx={{ zIndex: 10, textAlign: "center", position: "relative" }}
+          sx={{
+            zIndex: 10,
+            textAlign: "center",
+            position: "relative",
+            fontSize: {
+              xs: "clamp(2.5rem, 8vw, 3.5rem)",
+              sm: "clamp(3.5rem, 10vw, 6rem)",
+            },
+            lineHeight: {
+              xs: 1.2,
+              sm: 1.1,
+            },
+          }}
         >
           interactive
           <br /> comic book
           <div
             style={{
               position: "absolute",
-              top: "-40px",
-              left: "-120px",
-              fontSize: "2.5rem",
+              top: isMobile ? "-20px" : "-40px",
+              left: isMobile ? "-40px" : "-120px",
+              fontSize: isMobile
+                ? "clamp(1rem, 4vw, 1.5rem)"
+                : "clamp(1.5rem, 3vw, 2.5rem)",
               transform: "rotate(-15deg)",
             }}
           >
@@ -61,8 +87,11 @@ export function Home() {
             zIndex: 10,
             textAlign: "center",
             mt: 2,
-            maxWidth: "30%",
+            maxWidth: isMobile ? "80%" : "50%",
             opacity: 0.8,
+            px: isMobile ? 2 : 0,
+            fontSize: "clamp(0.875rem, 2vw, 1.125rem)",
+            lineHeight: 1.6,
           }}
         >
           Experience a unique comic book where artificial intelligence brings
@@ -75,8 +104,8 @@ export function Home() {
           onClick={handlePlay}
           sx={{
             mt: 4,
-            fontSize: "1.2rem",
-            padding: "12px 36px",
+            fontSize: isMobile ? "1rem" : "1.2rem",
+            padding: isMobile ? "8px 24px" : "12px 36px",
             zIndex: 10,
           }}
         >

client/src/pages/Tutorial.jsx

@@ -2,270 +2,105 @@ import {
   Box,
   Typography,
   Button,
-  Paper,
-  IconButton,
-  Tooltip,
+  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { usePageSound } from "../hooks/usePageSound";
+import { useSoundSystem } from "../contexts/SoundContext";
 import { motion } from "framer-motion";
+import { GameNavigation } from "../components/GameNavigation";
 import { StyledText } from "../components/StyledText";
-import { BookPages } from "../components/BookPages";
 
 export function Tutorial() {
   const navigate = useNavigate();
-  const playPageSound = usePageSound();
+  const { playSound } = useSoundSystem();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const handleStartGame = () => {
-    playPageSound();
+    playSound("page");
     navigate("/game");
   };
 
-  const handleBack = () => {
-    playPageSound();
-    navigate("/");
-  };
-
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.3, ease: "easeInOut" }}
-      style={{ backgroundColor: "#121212", width: "100%" }}
+      style={{
+        width: "100%",
+        height: "100vh",
+        position: "relative",
+        overflow: "hidden",
+      }}
     >
+      <GameNavigation />
       <Box
         sx={{
-          minHeight: "100vh",
-          width: "100%",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          gap: 4,
-          padding: 4,
-          backgroundColor: "background.default",
+          minHeight: "100vh",
+          height: "100%",
+          width: "100%",
           position: "relative",
+          overflow: "hidden",
         }}
       >
-        <Tooltip title="Back to home">
-          <IconButton
-            onClick={handleBack}
-            sx={{
-              position: "absolute",
-              top: 16,
-              left: 16,
-              color: "white",
-              backgroundColor: "rgba(0, 0, 0, 0.5)",
-              "&:hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.7)",
-              },
-              zIndex: 10,
-            }}
-          >
-            <ArrowBackIcon />
-          </IconButton>
-        </Tooltip>
-
-        <Box
+        <Typography
+          variant="h2"
           sx={{
+            zIndex: 10,
+            textAlign: "center",
             position: "relative",
-            width: "auto",
-            height: "80vh",
-            aspectRatio: "0.66666667",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
+            color: "white",
+            fontSize: {
+              xs: "clamp(2rem, 7vw, 2.5rem)",
+              sm: "clamp(2.5rem, 8vw, 4rem)",
+            },
+            px: isMobile ? 2 : 0,
           }}
         >
-          {/* Pages d'arrière-plan */}
-          <BookPages />
-
-          {/* Page principale */}
-          <Paper
-            elevation={3}
-            sx={{
-              position: "relative",
-              zIndex: 2,
-              width: "100%",
-              height: "100%",
-              backgroundColor: "#fff",
-              color: "black",
-              padding: "3rem 3rem 3rem 2rem",
-              borderRadius: "4px",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 2,
-              overflowY: "auto",
-              boxShadow: "0 0 20px rgba(0,0,0,0.2)",
-              "&::before": {
-                content: '""',
-                position: "absolute",
-                top: 0,
-                left: "4px",
-                bottom: 0,
-                width: "120px",
-                background:
-                  "linear-gradient(to right, rgba(0,0,0,0.25), rgba(0,0,0,0))",
-                opacity: 0.2,
-                pointerEvents: "none",
-                zIndex: 1,
-              },
-              "&::after": {
-                content: '""',
-                position: "absolute",
-                top: 0,
-                left: "4px",
-                bottom: 0,
-                width: "1px",
-                background:
-                  "linear-gradient(to right, rgba(0,0,0,0.15), transparent)",
-                borderRadius: "1px",
-                zIndex: 2,
-              },
-              "&::-webkit-scrollbar": {
-                width: "8px",
-              },
-              "&::-webkit-scrollbar-track": {
-                background: "transparent",
-              },
-              "&::-webkit-scrollbar-thumb": {
-                background: "rgba(0,0,0,0.1)",
-                borderRadius: "4px",
-              },
-            }}
-          >
-            {/* Section Synopsis */}
-            <Box
-              sx={{
-                maxWidth: "600px",
-                margin: "auto",
-                textAlign: "center",
-                flex: 1,
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "center",
-              }}
-            >
-              <Typography
-                variant="h3"
-                component="h1"
-                textAlign="center"
-                gutterBottom
-                sx={{
-                  width: "100%",
-                  color: "#2c1810",
-                  fontWeight: "bold",
-                  textShadow: `
-                    0 -1px 1px rgba(0,0,0,0.2),
-                    0 1px 1px rgba(255,255,255,0.3)
-                  `,
-                  letterSpacing: "0.5px",
-                  marginBottom: 3,
-                  "&::after": {
-                    content: '""',
-                    display: "block",
-                    width: "40%",
-                    height: "1px",
-                    background: "rgba(0,0,0,0.2)",
-                    margin: "0.5rem auto",
-                  },
-                }}
-              >
-                Synopsis
-              </Typography>
-              <StyledText
-                variant="body1"
-                paragraph
-                sx={{
-                  fontWeight: "normal",
-                  color: "#2c1810",
-                  fontSize: "0.95rem",
-                  lineHeight: 1.6,
-                  marginBottom: 1.5,
-                }}
-                text={`You are a <strong>AI</strong> hunter traveling through <strong>parallel worlds</strong>. Each time you land in a new world, you are a <strong>new character</strong>. Your mission is to track down an <strong>AI</strong> that moves from world to world to avoid destruction.`}
-              />
-              <StyledText
-                variant="body1"
-                paragraph
-                sx={{
-                  fontWeight: "normal",
-                  color: "#2c1810",
-                  fontSize: "0.95rem",
-                  lineHeight: 1.6,
-                  marginBottom: 1.5,
-                }}
-                text={`With each story, you land in a completely new universe. Each <strong>world</strong> presents its own challenges and <strong>obstacles</strong>. You must make crucial <strong>decisions</strong> to advance in your <strong>quest</strong>.`}
-              />
-              <StyledText
-                variant="body1"
-                paragraph
-                sx={{
-                  fontWeight: "normal",
-                  color: "#2c1810",
-                  fontSize: "0.95rem",
-                  lineHeight: 1.6,
-                  marginBottom: 0,
-                }}
-                text={`Every <strong>choice</strong> you make can alter the course of your <strong>pursuit</strong>. <strong>Time</strong> is of the essence, and every <strong>action</strong> counts in this thrilling adventure.`}
-              />
-            </Box>
+          How to play
+        </Typography>
 
-            {/* Section How to Play */}
-            <Box
-              sx={{
-                width: "100%",
-                borderTop: "1px solid rgba(0,0,0,0.1)",
-                paddingTop: 1.5,
-                marginTop: 2,
-              }}
-            >
-              <Typography
-                variant="h6"
-                sx={{
-                  color: "#2c1810",
-                  fontWeight: "bold",
-                  textShadow: `
-                    0 -1px 1px rgba(0,0,0,0.2),
-                    0 1px 1px rgba(255,255,255,0.3)
-                  `,
-                  marginBottom: 0.5,
-                  textAlign: "center",
-                  fontSize: "1rem",
-                }}
-              >
-                How to play
-              </Typography>
-              <StyledText
-                variant="body1"
-                sx={{
-                  fontWeight: "normal",
-                  color: "#2c1810",
-                  fontSize: "0.9rem",
-                  lineHeight: 1.5,
-                  textAlign: "center",
-                  fontStyle: "italic",
-                }}
-                text="At each step, click one of the available <strong>choices</strong>."
-              />
-            </Box>
-          </Paper>
-        </Box>
+        <Typography
+          variant="body1"
+          sx={{
+            zIndex: 10,
+            textAlign: "center",
+            mt: 2,
+            maxWidth: isMobile ? "85%" : "50%",
+            opacity: 0.8,
+            color: "white",
+            px: isMobile ? 3 : 0,
+            fontSize: "clamp(0.875rem, 2vw, 1.125rem)",
+            lineHeight: 1.6,
+          }}
+        >
+          The game will create a unique comic book set in a distinct universe
+          for each playthrough.
+          <br />
+          <br />
+          At every stage of the narrative, you will be presented with choices or
+          the opportunity to write the next part of the story yourself.
+          <br />
+          <br />
+          It's your turn to write your own story.
+        </Typography>
 
         <Button
-          variant="outlined"
+          color="primary"
           size="large"
+          variant="contained"
           onClick={handleStartGame}
           sx={{
-            fontSize: "1.2rem",
-            padding: "12px 24px",
+            mt: 4,
+            fontSize: isMobile ? "1rem" : "1.2rem",
+            padding: isMobile ? "8px 24px" : "12px 36px",
             zIndex: 10,
-            position: "relative",
           }}
         >
           Start the game

client/src/utils/api.js

@@ -69,19 +69,50 @@ const handleApiError = (error) => {
 // Audio context for narration
 let audioContext = null;
 let audioSource = null;
+let isSoundEnabled = true;
+let hasUserInteraction = false;
 
 // Initialize audio context on user interaction
 const initAudioContext = () => {
+  if (!hasUserInteraction) {
+    console.warn("Audio context cannot be initialized before user interaction");
+    return null;
+  }
+
   if (!audioContext) {
-    audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    // Resume the context if it's suspended
-    if (audioContext.state === "suspended") {
-      audioContext.resume();
+    try {
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      if (audioContext.state === "suspended") {
+        audioContext.resume();
+      }
+    } catch (error) {
+      console.error("Failed to initialize audio context:", error);
+      return null;
     }
   }
   return audioContext;
 };
 
+// Function to call when user interacts with the page
+const handleUserInteraction = () => {
+  hasUserInteraction = true;
+  if (audioContext && audioContext.state === "suspended") {
+    audioContext.resume();
+  }
+};
+
+// Nouvelle fonction pour gérer l'état du son
+const setSoundEnabled = (enabled) => {
+  isSoundEnabled = enabled;
+  if (!enabled && audioSource) {
+    audioSource.stop();
+    audioSource = null;
+  }
+  if (!enabled && audioContext) {
+    audioContext.suspend();
+  }
+};
+
 // Story related API calls
 export const storyApi = {
   start: async (sessionId) => {
@@ -119,6 +150,24 @@ export const storyApi = {
     }
   },
 
+  makeCustomChoice: async (customText, sessionId) => {
+    try {
+      const response = await api.post(
+        "/api/chat",
+        {
+          message: "custom_choice",
+          custom_text: customText,
+        },
+        {
+          headers: getDefaultHeaders(sessionId),
+        }
+      );
+      return response.data;
+    } catch (error) {
+      return handleApiError(error);
+    }
+  },
+
   generateImage: async (
     prompt,
     width = 512,
@@ -147,6 +196,11 @@ export const storyApi = {
   // Narration related API calls
   playNarration: async (text, sessionId) => {
     try {
+      // Ne rien faire si le son est désactivé ou si pas d'interaction utilisateur
+      if (!isSoundEnabled || !hasUserInteraction) {
+        return;
+      }
+
       // Stop any existing narration
       if (audioSource) {
         audioSource.stop();
@@ -155,6 +209,9 @@ export const storyApi = {
 
       // Initialize audio context if needed
       audioContext = initAudioContext();
+      if (!audioContext) {
+        return;
+      }
 
       const response = await api.post(
         "/api/text-to-speech",
@@ -171,6 +228,11 @@ export const storyApi = {
         throw new Error("Failed to generate audio");
       }
 
+      // Ne pas continuer si le son a été désactivé pendant la requête
+      if (!isSoundEnabled) {
+        return;
+      }
+
       // Convert base64 to audio buffer
       const audioData = atob(response.data.audio_base64);
       const arrayBuffer = new ArrayBuffer(audioData.length);
@@ -182,6 +244,11 @@ export const storyApi = {
       // Decode audio data
       const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
 
+      // Ne pas continuer si le son a été désactivé pendant le décodage
+      if (!isSoundEnabled) {
+        return;
+      }
+
       // Create and play audio source
       audioSource = audioContext.createBufferSource();
       audioSource.buffer = audioBuffer;
@@ -203,12 +270,25 @@ export const storyApi = {
 
   stopNarration: () => {
     if (audioSource) {
-      audioSource.stop();
+      try {
+        audioSource.stop();
+      } catch (error) {
+        console.warn("Error stopping narration:", error);
+      }
       audioSource = null;
     }
+    if (audioContext) {
+      try {
+        audioContext.suspend();
+      } catch (error) {
+        console.warn("Error suspending audio context:", error);
+      }
+    }
   },
 
   initAudioContext,
+  handleUserInteraction,
+  setSoundEnabled, // Exporter la nouvelle fonction
 };
 
 // WebSocket URL

server/api/models.py

@@ -40,6 +40,7 @@ class StoryMetadataResponse(BaseModel):
 class ChatMessage(BaseModel):
     message: str
     choice_id: Optional[int] = None
+    custom_text: Optional[str] = None  # Pour le choix personnalisé
 
 class ImageGenerationRequest(BaseModel):
     prompt: str

server/api/routes/chat.py

@@ -54,7 +54,10 @@ def get_chat_router(session_manager: SessionManager, story_generator):
                 )
                 previous_choice = "none"
             else:
-                previous_choice = f"Choice {chat_message.choice_id}" if chat_message.choice_id else "none"
+                if chat_message.message == "custom_choice" and chat_message.custom_text:
+                    previous_choice = chat_message.custom_text
+                else:
+                    previous_choice = f"Choice {chat_message.choice_id}" if chat_message.choice_id else "none"
 
             # Generate story segment
             llm_response = await story_generator.generate_story_segment(

server/core/generators/image_prompt_generator.py

@@ -119,6 +119,7 @@ do not have panels that look alike, each successive panel must be different,
 and explain the story like a storyboard.
 
 Dont put the hero name every time.
+Exactly between 1 and 4 panels. (mostly 2 or 3)
 
 {is_end}
 """

server/core/generators/story_segment_generator.py

@@ -76,14 +76,14 @@ IMPORTANT RULES FOR STORY TEXT:
 - DO NOT include any dialogue asking for decisions
 - Focus purely on describing what is happening in the current scene
 - Keep the text concise and impactful
-- MANDATORY: Each segment must be between 15 and 40 words, no exceptions
+- MANDATORY: Each segment must be between 15 and 20 words, no exceptions
 - Use every word purposefully to convey maximum meaning in minimum space
 
 Your task is to generate the next segment of the story, following these rules:
 1. Keep the story consistent with the universe parameters
 2. Each segment must advance the plot
 3. Never repeat previous descriptions or situations
-4. Keep segments concise and impactful (15-30 words)
+4. Keep segments concise and impactful (15-20 words)
 5. The MacGuffin should remain mysterious but central to the plot
 
 Hero Description: {self.hero_desc}
@@ -104,7 +104,7 @@ Story history:
 {what_to_represent}
 
 IT MUST BE THE DIRECT CONTINUATION OF THE CURRENT STORY.
-MANDATORY: Each segment must be between 15 and 30 words, keep it concise.
+MANDATORY: Each segment must be between 15 and 20 words, keep it concise.
 Be short.
 """
         return ChatPromptTemplate(
@@ -186,6 +186,18 @@ Be short.
 
         what_to_represent = self._get_what_to_represent(story_beat, is_death, is_victory)
 
+        # Si c'est un choix personnalisé, on l'utilise comme contexte pour générer la suite
+        if previous_choice and not previous_choice.startswith("Choice "):
+            what_to_represent = f"""
+Based on the player's custom choice: "{previous_choice}"
+
+Write a story segment that:
+1. Directly follows and incorporates the player's choice
+2. Maintains consistency with the universe and story
+3. Respects all previous rules about length and style
+4. Naturally integrates the custom elements while staying true to the plot
+"""
+
         # Créer les messages de base une seule fois
         messages = self.prompt.format_messages(
             hero_description=self.hero_desc,

server/core/story_generator.py

@@ -89,63 +89,66 @@ class StoryGenerator:
         return self.segment_generators[session_id]
 
     async def generate_story_segment(self, session_id: str, game_state: GameState, previous_choice: str) -> StoryResponse:
-        """Generate a story segment."""
-        segment_generator = self.get_segment_generator(session_id)
-        story_history = game_state.format_history()
-        
-        # Generate story text first
-        segment_response = await segment_generator.generate(
-            story_beat=game_state.story_beat,
-            current_time=game_state.current_time,
-            current_location=game_state.current_location,
-            previous_choice=previous_choice,
-            story_history=story_history,
-            turn_before_end=self.turn_before_end,
-            is_winning_story=self.is_winning_story
-        )
+        try:
+            # On utilise toujours le générateur de segments, même pour un choix personnalisé
+            segment_generator = self.get_segment_generator(session_id)
+            if not segment_generator:
+                raise ValueError("No story segment generator found for this session")
 
-        # print(f"Generated story text: {segment_response}")
-        
-        # Then get metadata using the new story text
-        metadata_response = await self.metadata_generator.generate(
-            story_text=segment_response.story_text,
-            current_time=game_state.current_time,
-            current_location=game_state.current_location,
-            story_beat=game_state.story_beat,
-            turn_before_end=self.turn_before_end,
-            is_winning_story=self.is_winning_story,
-            story_history=story_history
-        )
-        # print(f"Generated metadata_response: {metadata_response}")
-        
-        # Generate image prompts
-        prompts_response = await self.image_prompt_generator.generate(
-            story_text=segment_response.story_text,
-            time=metadata_response.time,
-            location=metadata_response.location,
-            is_death=metadata_response.is_death,
-            is_victory=metadata_response.is_victory,
-            turn_before_end=self.turn_before_end,
-            is_winning_story=self.is_winning_story
-        )
-        # print(f"Generated image prompts: {prompts_response}")
-        
-        # Create choices
-        choices = [
-            Choice(id=i, text=choice_text)
-            for i, choice_text in enumerate(metadata_response.choices, 1)
-        ]
-        
-        response = StoryResponse(
-            story_text=segment_response.story_text,
-            choices=choices,
-            time=metadata_response.time,
-            location=metadata_response.location,
-            raw_choices=metadata_response.choices,
-            image_prompts=prompts_response.image_prompts,
-            is_first_step=(game_state.story_beat == GameConfig.STORY_BEAT_INTRO),
-            is_death=metadata_response.is_death,
-            is_victory=metadata_response.is_victory
-        )
-        
-        return response 
+            segment_response = await segment_generator.generate(
+                story_beat=game_state.story_beat,
+                current_time=game_state.current_time,
+                current_location=game_state.current_location,
+                previous_choice=previous_choice,
+                story_history=game_state.format_history(),
+                turn_before_end=self.turn_before_end,
+                is_winning_story=self.is_winning_story
+            )
+            story_text = segment_response.story_text
+
+            # Then get metadata using the new story text
+            metadata_response = await self.metadata_generator.generate(
+                story_text=story_text,
+                current_time=game_state.current_time,
+                current_location=game_state.current_location,
+                story_beat=game_state.story_beat,
+                turn_before_end=self.turn_before_end,
+                is_winning_story=self.is_winning_story,
+                story_history=game_state.format_history()
+            )
+            # print(f"Generated metadata_response: {metadata_response}")
+            
+            # Generate image prompts
+            prompts_response = await self.image_prompt_generator.generate(
+                story_text=story_text,
+                time=metadata_response.time,
+                location=metadata_response.location,
+                is_death=metadata_response.is_death,
+                is_victory=metadata_response.is_victory,
+                turn_before_end=self.turn_before_end,
+                is_winning_story=self.is_winning_story
+            )
+            # print(f"Generated image prompts: {prompts_response}")
+            
+            # Create choices
+            choices = [
+                Choice(id=i, text=choice_text)
+                for i, choice_text in enumerate(metadata_response.choices, 1)
+            ]
+            
+            response = StoryResponse(
+                story_text=story_text,
+                choices=choices,
+                time=metadata_response.time,
+                location=metadata_response.location,
+                raw_choices=metadata_response.choices,
+                image_prompts=prompts_response.image_prompts,
+                is_first_step=(game_state.story_beat == GameConfig.STORY_BEAT_INTRO),
+                is_death=metadata_response.is_death,
+                is_victory=metadata_response.is_victory
+            )
+            
+            return response 
+        except Exception as e:
+            print(f"Unexpected error in generate_story_segment: {str(e)}")
+            raise