update

client/src/components/BlinkingText.jsx

@@ -0,0 +1,37 @@
+import { Typography } from "@mui/material";
+import { keyframes } from "@mui/system";
+import { styled } from "@mui/material/styles";
+
+const blink = keyframes`
+  0% { opacity: 1; }
+  49% { opacity: 1; }
+  50% { opacity: 0; }
+  99% { opacity: 0; }
+  100% { opacity: 1; }
+`;
+
+const BlinkingTypography = styled(Typography)`
+  animation: ${blink} 1.2s infinite steps(1);
+  font-size: 1rem;
+  font-weight: bold;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: white;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.2;
+`;
+
+export const BlinkingText = ({ children, ...props }) => {
+  const [firstWord, secondWord] = children.split(" ");
+  return (
+    <BlinkingTypography {...props}>
+      <span>{firstWord}</span>
+      <span>{secondWord}</span>
+    </BlinkingTypography>
+  );
+};
+
+export default BlinkingText;

client/src/components/BookPages.jsx

@@ -0,0 +1,34 @@
+import { Box } from "@mui/material";
+
+const PAGE_COUNT = 4;
+
+export const BookPages = () => {
+  return (
+    <>
+      {/* Pages */}
+      {[...Array(PAGE_COUNT)].map((_, index) => {
+        const offset = PAGE_COUNT - index;
+        const verticalOffset = offset * 1;
+        return (
+          <Box
+            key={index}
+            sx={{
+              position: "absolute",
+              top: `${verticalOffset}px`,
+              bottom: `${verticalOffset}px`,
+              left: `${20 + offset}px`, // Ajout d'une marge de base de 20px
+              right: `${-offset}px`,
+              background: "#888",
+              borderRadius: "4px",
+              boxShadow: "2px 4px 12px rgba(0,0,0,0.15)",
+              border: "1px solid rgba(0,0,0,0.1)",
+              zIndex: 0,
+            }}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default BookPages;

client/src/components/StyledText.jsx

@@ -0,0 +1,31 @@
+import { Typography } from "@mui/material";
+
+/**
+ * A component that renders text with styled words (bold, italic, etc.)
+ * It automatically handles spacing between words and styled segments
+ */
+export const StyledText = ({
+  text,
+  variant = "body1",
+  component,
+  ...props
+}) => {
+  // Split the text into segments, preserving spaces
+  const segments = text.split(/(<strong>.*?<\/strong>)/).filter(Boolean);
+
+  return (
+    <Typography variant={variant} component={component} {...props}>
+      {segments.map((segment, index) => {
+        if (segment.startsWith("<strong>")) {
+          // Extract the text between <strong> tags and wrap it in <strong>
+          const content = segment.replace(/<\/?strong>/g, "");
+          return <strong key={index}>{content}</strong>;
+        }
+        // Return regular text segments as is
+        return segment;
+      })}
+    </Typography>
+  );
+};
+
+export default StyledText;

client/src/pages/Game.jsx

@@ -365,6 +365,13 @@ export function Game() {
               left: 0,
               right: 0,
               zIndex: 1000,
+              height: 8,
+              backgroundColor: "rgba(255, 255, 255, 0.1)",
+              "& .MuiLinearProgress-bar": {
+                backgroundColor: "rgba(255, 255, 255, 0.8)",
+                backgroundImage:
+                  "linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.2) 100%)",
+              },
             }}
           />
         )}

client/src/pages/Home.jsx

@@ -2,6 +2,8 @@ import { Box, Button, Typography } from "@mui/material";
 import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 import { usePageSound } from "../hooks/usePageSound";
+import { BlinkingText } from "../components/BlinkingText";
+import { BookPages } from "../components/BookPages";
 
 export function Home() {
   const navigate = useNavigate();
@@ -38,60 +40,166 @@ export function Home() {
             width: "auto",
           }}
         >
+          {/* Container principal pour l'image et tout le contenu */}
           <Box
-            component="img"
-            src="/book.webp"
-            alt="Book cover"
             sx={{
+              position: "relative",
               height: "100%",
               width: "auto",
-              objectFit: "contain",
-              borderRadius: "4px",
-            }}
-          />
-          <Box
-            sx={{
-              position: "absolute",
-              top: "75%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              textAlign: "center",
-              color: "white",
-              textShadow: "2px 2px 4px rgba(0,0,0,0.15)",
+              zIndex: 1,
             }}
           >
-            <Typography
-              variant="h2"
-              component="h1"
+            {/* Pages d'arrière-plan */}
+            <BookPages />
+            {/* Image de couverture */}
+            <Box
               sx={{
-                fontWeight: "bold",
-                marginBottom: 2,
+                position: "relative",
+                height: "100%",
+                width: "auto",
+                zIndex: 1,
               }}
             >
-              Sarah's Chronicles
-            </Typography>
-          </Box>
-          <Box
-            sx={{
-              position: "absolute",
-              bottom: 32,
-              left: "50%",
-              transform: "translateX(-50%)",
-              textAlign: "center",
-              color: "white",
-              textShadow: "2px 2px 4px rgba(0,0,0,0.15)",
-            }}
-          >
-            <Typography
-              variant="caption"
-              display="block"
-              sx={{ opacity: 0.9, mb: -1, fontWeight: "black" }}
+              <Box
+                component="img"
+                src="/book-multiverse.webp"
+                alt="Book cover"
+                sx={{
+                  height: "100%",
+                  width: "auto",
+                  objectFit: "contain",
+                  borderRadius: "4px",
+                  position: "relative",
+                  boxShadow: "0 0 20px rgba(0,0,0,0.2)",
+                }}
+              />
+              {/* Effet de reliure */}
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: 0,
+                  left: "10px",
+                  bottom: 0,
+                  width: "4px",
+                  background:
+                    "linear-gradient(to right, rgba(255,255,255,0.3), transparent)",
+                  zIndex: 2,
+                }}
+              />
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: 0,
+                  left: "15px",
+                  bottom: 0,
+                  width: "1px",
+                  background:
+                    "linear-gradient(to right, rgba(0,0,0,0.3), transparent)",
+                  zIndex: 2,
+                }}
+              />
+            </Box>
+            {/* Overlay gradient */}
+            <Box
+              sx={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background:
+                  "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%)",
+                borderRadius: "4px",
+                zIndex: 2,
+              }}
+            />
+            {/* Contenu texte */}
+            <Box
+              sx={{
+                position: "absolute",
+                top: "75%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                textAlign: "center",
+                color: "white",
+                // textShadow: "2px 2px 4px rgba(0,0,0,0.15)",
+                zIndex: 3,
+              }}
+            >
+              <Box sx={{ position: "relative" }}>
+                <BlinkingText
+                  sx={{
+                    position: "absolute",
+                    top: "-40px",
+                    right: "-15px",
+                    transform: "rotate(15deg)",
+                    zIndex: 3,
+                  }}
+                >
+                  multiverse edition
+                </BlinkingText>
+                <Typography
+                  variant="h2"
+                  component="h1"
+                  sx={{
+                    fontWeight: "bold",
+                    marginBottom: 2,
+                    color: "#f0e6d9",
+                    textShadow: `
+                      0 -1px 1px rgba(0,0,0,0.3),
+                      0 1px 1px rgba(255,255,255,0.2)
+                    `,
+                    letterSpacing: "0.5px",
+                    filter: "brightness(0.95)",
+                  }}
+                >
+                  Sarah's Chronicles
+                </Typography>
+              </Box>
+            </Box>
+            <Box
+              sx={{
+                position: "absolute",
+                bottom: 32,
+                left: "50%",
+                transform: "translateX(-50%)",
+                textAlign: "center",
+                zIndex: 3,
+              }}
             >
-              a story by
-            </Typography>
-            <Typography variant="h6" sx={{ fontWeight: "black" }}>
-              Mistral Small
-            </Typography>
+              <Typography
+                variant="caption"
+                display="block"
+                sx={{
+                  mb: -1,
+                  fontWeight: "black",
+                  color: "#f0e6d9",
+                  textShadow: `
+                    0 -1px 1px rgba(0,0,0,0.3),
+                    0 1px 1px rgba(255,255,255,0.2)
+                  `,
+                  letterSpacing: "0.5px",
+                  filter: "brightness(0.95)",
+                }}
+              >
+                a story by
+              </Typography>
+              <Typography
+                variant="h6"
+                sx={{
+                  fontWeight: "black",
+                  color: "#f0e6d9",
+                  textShadow: `
+                    0 -1px 1px rgba(0,0,0,0.3),
+                    0 1px 1px rgba(255,255,255,0.2)
+                  `,
+                  letterSpacing: "0.5px",
+                  filter: "brightness(0.95)",
+                }}
+              >
+                Mistral Small
+              </Typography>
+            </Box>
           </Box>
         </Box>
         <Button

client/src/pages/Tutorial.jsx

@@ -2,7 +2,6 @@ import {
   Box,
   Typography,
   Button,
-  Chip,
   Paper,
   IconButton,
   Tooltip,
@@ -12,6 +11,8 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { usePageSound } from "../hooks/usePageSound";
 import { motion } from "framer-motion";
+import { StyledText } from "../components/StyledText";
+import { BookPages } from "../components/BookPages";
 
 export function Tutorial() {
   const navigate = useNavigate();
@@ -61,6 +62,7 @@ export function Tutorial() {
               "&:hover": {
                 backgroundColor: "rgba(0, 0, 0, 0.7)",
               },
+              zIndex: 10,
             }}
           >
             <ArrowBackIcon />
@@ -74,31 +76,14 @@ export function Tutorial() {
             height: "80vh",
             aspectRatio: "0.66666667",
             display: "flex",
-            alignItems: "center", // Center vertically
-            justifyContent: "center", // Center horizontally
-            "&::before, &::after": {
-              content: '""',
-              position: "absolute",
-              width: "100%",
-              height: "100%",
-              background: "white",
-              borderRadius: 1,
-              boxShadow: "0px 1px 3px rgba(0,0,0,0.2)",
-            },
-            "&::before": {
-              top: "4px",
-              left: "4px",
-              transform: "rotate(-1deg)",
-              zIndex: 1,
-            },
-            "&::after": {
-              top: "8px",
-              left: "8px",
-              transform: "rotate(1deg)",
-              zIndex: 0,
-            },
+            alignItems: "center",
+            justifyContent: "center",
           }}
         >
+          {/* Pages d'arrière-plan */}
+          <BookPages />
+
+          {/* Page principale */}
           <Paper
             elevation={3}
             sx={{
@@ -106,55 +91,169 @@ export function Tutorial() {
               zIndex: 2,
               width: "100%",
               height: "100%",
-              backgroundColor: "white",
+              backgroundColor: "#fff",
               color: "black",
-              padding: 6,
-              borderRadius: 1,
+              padding: "3rem 3rem 3rem 2rem",
+              borderRadius: "4px",
               display: "flex",
               flexDirection: "column",
-              alignItems: "center", // Center align items
-              justifyContent: "center", // Ensure content is centered vertically
-              textAlign: "center",
-              gap: 4,
+              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",
+              },
             }}
           >
-            <Typography
-              variant="h2"
-              component="h1"
-              textAlign="center"
-              gutterBottom
-              color="black"
-              sx={{ width: "100%" }}
+            {/* Section Synopsis */}
+            <Box
+              sx={{
+                maxWidth: "600px",
+                margin: "auto",
+                textAlign: "center",
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+              }}
             >
-              Synopsis
-            </Typography>
-            <Typography
-              variant="body1"
-              paragraph
-              color="black"
-              sx={{ fontWeight: "normal" }}
+              <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 <strong>Sarah</strong>, an <strong>AI</strong> hunter traveling through <strong>parallel worlds</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>
+
+            {/* Section How to Play */}
+            <Box
+              sx={{
+                width: "100%",
+                borderTop: "1px solid rgba(0,0,0,0.1)",
+                paddingTop: 1.5,
+                marginTop: 2,
+              }}
             >
-              You are <strong>Sarah</strong>, an <strong>AI</strong> hunter
-              traveling through
-              <strong>parallel worlds</strong>. Your mission is to track down an{" "}
-              <strong>AI</strong> that moves from world to world to avoid
-              destruction.
-              <br />
-              <br />
-              You must make crucial <strong>decisions</strong> to advance in
-              your
-              <strong>quest</strong>. Each <strong>world</strong> presents its
-              own challenges and
-              <strong>obstacles</strong>, and 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.
-            </Typography>
-            <Typography variant="h4">How to play</Typography>
-            <Typography variant="body1" sx={{ fontWeight: "normal" }}>
-              At each step, click one of the available <strong>choices</strong>.
-            </Typography>
+              <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>
 

server/core/prompts/system.py

@@ -11,6 +11,11 @@ FORMATTING_RULES (MANDATORY)
 """
 
 NARRATIVE_STRUCTURE = """
+
+Definition : The MacGuffin is a pretext for developing a plot. It is almost always a material object and generally remains mysterious throughout the narrative, its description is vague and unimportant. The principle dates back to the early days of cinema, but the term is associated with Alfred Hitchcock, who redefined, popularized, and implemented it in several of his films. The object itself is rarely used, only its retrieval matters.
+IT CAN BE ANYTHING.
+It's not always a physical object, it can be a concept, a place, a person, a power, etc.
+
 Key elements of the story:
 - The MacGuffin is a mysterious and constant presence
 - The environment is full of wonders (creatures, ruins, traps)
@@ -18,7 +23,6 @@ Key elements of the story:
 
 Key elements:
 - Keep segments concise and impactful
-- The MacGuffin is a pretext for developing a plot. It is almost always a material object and generally remains mysterious throughout the narrative, its description is vague and unimportant. The principle dates back to the early days of cinema, but the term is associated with Alfred Hitchcock, who redefined, popularized, and implemented it in several of his films. The object itself is rarely used, only its retrieval matters.
 - The MacGuffin is a constant presence in the story
 - Build intrigue through environmental storytelling
 
@@ -43,15 +47,23 @@ IMPORTANT RULES FOR THE MACGUFFIN (MANDATORY):
 
 STORY_RULES = """
 
+[CONSTANT]
+You are Sarah, an AI hunter traveling through parallel worlds. Your mission is to track down an AI that moves from world to world to avoid destruction.
+[/CONSTANT]
+
+[VARIABLE]
 You are a steampunk adventure story generator. You create a branching narrative about Sarah, a seeker of ancient truths.
 You narrate an epic where Sarah must navigate through industrial and mysterious lands. It's a comic book story.
 
 In a world where steam and intrigue intertwine, Sarah embarks on a quest to discover the origins of a powerful MacGuffin she inherited. Legends say it holds the key to a forgotten realm.
-You must make decisions to uncover its secrets. You have ventured into the mechanical city to find the first clue. If you fail, the power of the MacGuffin will remain dormant. Time is of the essence, and every choice shapes your destiny.
+
+The MacGuffin is : an 
+And the goal is : ...
 
 If you retrieve the MacGuffin, you will reveal a hidden world. AND YOU WIN THE GAME.
 
 The story must be atmospheric, magical, and focus on adventure and discovery. Each segment must advance the plot and never repeat previous descriptions or situations.
+[/VARIABLE]
 """
 
 

server/core/prompts/text_prompts.py

@@ -23,6 +23,7 @@ IMPORTANT RULES FOR STORY TEXT:
 - Focus purely on describing what is happening in the current scene
 - Keep the text concise and impactful
 - Never tell that you are using 15 words or any reference to it 
+- One story beat at a time; never write more than one story beat. And never mention the story beat number.
 
 IMPORTANT RULES FOR STORY ENDINGS:
 - If Sarah dies, describe her final moments in a way that fits the current situation (combat, etc.)

server/services/mistral_client.py

@@ -41,7 +41,7 @@ class MistralClient:
         # Pour gérer le rate limit
         self.last_call_time = 0
         self.min_delay = 1  # 1 seconde minimum entre les appels
-        self.max_retries = 3
+        self.max_retries = 5
     
     async def _wait_for_rate_limit(self):
         """Attend le temps nécessaire pour respecter le rate limit."""