update

.gitignore

@@ -1,4 +1,5 @@
 /client/node_modules
 .env
 /node_modules
+node_modules
 ai-comic-factory/

README.md

@@ -1,5 +1,5 @@
 ---
-title: team-10
+title: Sarah's Chronicles
 emoji: 💻
 colorFrom: red
 colorTo: blue

client/package.json

@@ -20,7 +20,9 @@
     "html2canvas": "^1.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.3"
+    "react-router-dom": "^7.1.3",
+    "use-react-screenshot": "^4.0.0",
+    "use-sound": "^4.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

client/src/components/ErrorDisplay.jsx

@@ -0,0 +1,43 @@
+import { Box, Typography, Button } from "@mui/material";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+
+export function ErrorDisplay({ message, onRetry }) {
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(0, 0, 0, 0.9)",
+        color: "white",
+        zIndex: 1000,
+        gap: 3,
+        p: 4,
+        textAlign: "center",
+      }}
+    >
+      <ErrorOutlineIcon sx={{ fontSize: 64, color: "error.main" }} />
+      <Typography variant="h5" component="h2">
+        An error occurred
+      </Typography>
+      <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 600 }}>
+        {message ||
+          "The storyteller is temporarily unavailable. Please try again in a few moments..."}
+      </Typography>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={onRetry}
+        sx={{ mt: 2 }}
+      >
+        Retry
+      </Button>
+    </Box>
+  );
+}

client/src/components/StoryChoices.jsx

@@ -1,4 +1,5 @@
 import { Box, Button, Typography, Chip } from "@mui/material";
+import { useStoryCapture } from "../hooks/useStoryCapture";
 
 // Function to convert text with ** to Chip elements
 const formatTextWithBold = (text) => {
@@ -24,7 +25,90 @@ const formatTextWithBold = (text) => {
   });
 };
 
-export function StoryChoices({ choices = [], onChoice, disabled = false }) {
+export function StoryChoices({
+  choices = [],
+  onChoice,
+  disabled = false,
+  isLastStep = false,
+  isGameOver = false,
+  containerRef,
+}) {
+  const { captureStory } = useStoryCapture();
+
+  console.log("ICI", isLastStep, isGameOver);
+  if (isGameOver) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 2,
+          p: 3,
+          minWidth: "150px",
+          height: "100%",
+          backgroundColor: "transparent",
+        }}
+      >
+        <Typography
+          variant="h3"
+          sx={{
+            color: "white",
+            textAlign: "center",
+            mb: 2,
+            textTransform: "uppercase",
+          }}
+        >
+          The End
+        </Typography>
+        <Button
+          variant="outlined"
+          size="large"
+          onClick={() => captureStory(containerRef)}
+          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)",
+            },
+            mb: 2,
+          }}
+        >
+          Save your story
+        </Button>
+        <Button
+          variant="outlined"
+          size="large"
+          onClick={() => window.location.reload()}
+          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)",
+            },
+          }}
+        >
+          Restart
+        </Button>
+      </Box>
+    );
+  }
+
   if (!choices || choices.length === 0) return null;
 
   return (

client/src/components/StoryManager.jsx

@@ -1,182 +0,0 @@
-import { useEffect } from "react";
-import { useComic } from "../context/ComicContext";
-import { useImageGeneration } from "../hooks/useImageGeneration";
-import { groupSegmentsIntoLayouts } from "../layouts/utils";
-import { LAYOUTS } from "../layouts/config";
-import axios from "axios";
-
-const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000";
-
-// Create axios instance with default config
-const api = axios.create({
-  headers: {
-    "x-client-id": `client_${Math.random().toString(36).substring(2)}`,
-  },
-});
-
-// Function to convert text with ** to bold elements
-const formatTextWithBold = (text) => {
-  if (!text) return "";
-  const parts = text.split(/(\*\*.*?\*\*)/g);
-  return parts.map((part, index) => {
-    if (part.startsWith("**") && part.endsWith("**")) {
-      return <strong key={index}>{part.slice(2, -2)}</strong>;
-    }
-    return part;
-  });
-};
-
-export function StoryManager() {
-  const { state, updateSegments, updateSegment, setChoices, setLoading } =
-    useComic();
-  const { generateImagesForSegment } = useImageGeneration();
-
-  const handleStoryAction = async (action, choiceId = null) => {
-    setLoading(true);
-    try {
-      // 1. Obtenir l'histoire
-      const response = await api.post(`${API_URL}/api/chat`, {
-        message: action,
-        choice_id: choiceId,
-      });
-
-      // 2. Créer le nouveau segment
-      const newSegment = {
-        text: formatTextWithBold(response.data.story_text),
-        isChoice: false,
-        isDeath: response.data.is_death,
-        isVictory: response.data.is_victory,
-        radiationLevel: response.data.radiation_level,
-        is_first_step: response.data.is_first_step,
-        is_last_step: response.data.is_last_step,
-        images: response.data.image_prompts
-          ? Array(response.data.image_prompts.length).fill(null)
-          : [],
-      };
-
-      // 3. Mettre à jour les segments
-      const segmentIndex = action === "restart" ? 0 : state.segments.length;
-      const updatedSegments =
-        action === "restart" ? [newSegment] : [...state.segments, newSegment];
-
-      updateSegments(updatedSegments);
-
-      // 4. Mettre à jour les choix
-      setChoices(response.data.choices);
-      setLoading(false);
-
-      // 5. Générer les images si nécessaire
-      if (response.data.image_prompts?.length > 0) {
-        const prompts = response.data.image_prompts;
-        let currentPromptIndex = 0;
-        let currentSegmentIndex = segmentIndex;
-
-        while (currentPromptIndex < prompts.length) {
-          // Recalculer les layouts avec les segments actuels
-          const layouts = groupSegmentsIntoLayouts(updatedSegments);
-          let currentLayout = layouts[layouts.length - 1];
-
-          // Pour un layout COVER, ne prendre que le premier prompt
-          if (currentLayout.type === "COVER") {
-            const promptsToUse = [prompts[0]];
-            console.log("COVER layout: using only first prompt");
-
-            const images = await generateImagesForSegment(
-              promptsToUse,
-              currentLayout
-            );
-
-            if (images && images.length > 0) {
-              const currentSegment = updatedSegments[currentSegmentIndex];
-              const updatedSegment = {
-                ...currentSegment,
-                images: [images[0]], // Ne garder que la première image
-              };
-              updatedSegments[currentSegmentIndex] = updatedSegment;
-              updateSegments(updatedSegments);
-            }
-            break; // Sortir de la boucle car nous n'avons besoin que d'une image
-          }
-
-          // Pour les autres layouts, continuer normalement
-          const remainingPanels =
-            LAYOUTS[currentLayout.type].panels.length -
-            (currentLayout.segments[currentLayout.segments.length - 1].images
-              ?.length || 0);
-
-          if (remainingPanels === 0) {
-            // Créer un nouveau segment pour la nouvelle page
-            const newPageSegment = {
-              ...newSegment,
-              images: Array(prompts.length - currentPromptIndex).fill(null),
-            };
-            updatedSegments.push(newPageSegment);
-            currentSegmentIndex = updatedSegments.length - 1;
-            updateSegments(updatedSegments);
-            continue;
-          }
-
-          // Générer les images pour ce layout
-          const promptsForCurrentLayout = prompts.slice(
-            currentPromptIndex,
-            currentPromptIndex + remainingPanels
-          );
-
-          console.log("Generating images for layout:", {
-            segmentIndex: currentSegmentIndex,
-            layoutType: currentLayout.type,
-            prompts: promptsForCurrentLayout,
-            remainingPanels,
-          });
-
-          // Générer les images
-          const images = await generateImagesForSegment(
-            promptsForCurrentLayout,
-            currentLayout
-          );
-
-          // Mettre à jour le segment avec les nouvelles images
-          if (images && images.length > 0) {
-            const currentSegment = updatedSegments[currentSegmentIndex];
-            const updatedSegment = {
-              ...currentSegment,
-              images: [...(currentSegment.images || []), ...images],
-            };
-            updatedSegments[currentSegmentIndex] = updatedSegment;
-            updateSegments(updatedSegments);
-          }
-
-          currentPromptIndex += promptsForCurrentLayout.length;
-        }
-      }
-    } catch (error) {
-      console.error("Error:", error);
-      const errorSegment = {
-        text: "Le conteur d'histoires est temporairement indisponible. Veuillez réessayer dans quelques instants...",
-        isChoice: false,
-        isDeath: false,
-        isVictory: false,
-        radiationLevel:
-          state.segments.length > 0
-            ? state.segments[state.segments.length - 1].radiationLevel
-            : 0,
-        images: [],
-      };
-
-      updateSegments(
-        action === "restart"
-          ? [errorSegment]
-          : [...state.segments, errorSegment]
-      );
-      setChoices([{ id: 1, text: "Réessayer" }]);
-      setLoading(false);
-    }
-  };
-
-  // Démarrer l'histoire au montage
-  useEffect(() => {
-    handleStoryAction("restart");
-  }, []);
-
-  return null; // Ce composant ne rend rien, il gère juste la logique
-}

client/src/hooks/useImageGeneration.js

@@ -1,64 +0,0 @@
-import axios from "axios";
-import { getDefaultHeaders } from "../utils/session";
-
-const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000";
-
-// Create axios instance with default config
-const api = axios.create({
-  headers: getDefaultHeaders(),
-});
-
-export function useImageGeneration() {
-  const generateImage = async (prompt, dimensions) => {
-    try {
-      console.log("Generating image with dimensions:", dimensions);
-
-      const result = await api.post(`${API_URL}/api/generate-image-direct`, {
-        prompt,
-        width: dimensions.width,
-        height: dimensions.height,
-      });
-
-      if (result.data.success) {
-        return result.data.image_base64;
-      }
-      return null;
-    } catch (error) {
-      console.error("Error generating image:", error);
-      return null;
-    }
-  };
-
-  const generateImagesForSegment = async (prompts, currentLayout) => {
-    try {
-      if (!currentLayout) {
-        console.error("No valid layout found");
-        return null;
-      }
-
-      const layoutType = currentLayout.type;
-      console.log("Generating images for layout type:", layoutType);
-
-      // Pour chaque prompt, générer une image avec les dimensions appropriées
-      const results = [];
-      for (let i = 0; i < prompts.length; i++) {
-        const panelDimensions = currentLayout.panels[i];
-        if (!panelDimensions) {
-          console.error(`No dimensions for panel ${i} in layout ${layoutType}`);
-          continue;
-        }
-
-        const image = await generateImage(prompts[i], panelDimensions);
-        if (image) {
-          results.push(image);
-        }
-      }
-      return results;
-    } catch (error) {
-      console.error("Error in generateImagesForSegment:", error);
-      return [];
-    }
-  };
-
-  return { generateImagesForSegment };
-}

client/src/hooks/usePageSound.js

@@ -0,0 +1,46 @@
+import { useSound } from "use-sound";
+import { useState, useEffect } from "react";
+
+const PAGE_SOUNDS = Array.from(
+  { length: 7 },
+  (_, i) => `/sounds/page-flip-${i + 1}.mp3`
+);
+
+export function usePageSound() {
+  const [soundsLoaded, setSoundsLoaded] = useState(false);
+
+  // Créer un tableau de hooks useSound pour chaque son
+  const sounds = PAGE_SOUNDS.map((soundPath) => {
+    const [play, { sound }] = useSound(soundPath, {
+      volume: 0.5,
+      interrupt: true,
+    });
+    return { play, sound };
+  });
+
+  // Vérifier quand tous les sons sont chargés
+  useEffect(() => {
+    const allSoundsLoaded = sounds.every(
+      ({ sound }) => sound && sound.state() === "loaded"
+    );
+    if (allSoundsLoaded) {
+      setSoundsLoaded(true);
+    }
+  }, [sounds]);
+
+  const playRandomPageSound = () => {
+    if (!soundsLoaded) {
+      console.warn("Page sounds not loaded yet");
+      return;
+    }
+
+    const randomIndex = Math.floor(Math.random() * sounds.length);
+    try {
+      sounds[randomIndex].play();
+    } catch (error) {
+      console.error("Error playing page sound:", error);
+    }
+  };
+
+  return playRandomPageSound;
+}

client/src/hooks/useStoryCapture.js

@@ -1,143 +1,74 @@
 import { useCallback } from "react";
-import html2canvas from "html2canvas";
+import { useScreenshot } from "use-react-screenshot";
 
 export function useStoryCapture() {
-  const captureStory = useCallback(async (containerRef) => {
-    if (!containerRef.current) return null;
+  const [image, takeScreenshot] = useScreenshot({
+    type: "image/png",
+    quality: 1.0,
+  });
 
-    try {
-      // Trouver le conteneur scrollable (ComicLayout)
-      const scrollContainer = containerRef.current.querySelector(
-        "[data-comic-layout]"
-      );
-      if (!scrollContainer) {
+  const captureStory = useCallback(
+    async (containerRef) => {
+      if (!containerRef.current) return null;
+
+      const element = containerRef.current.querySelector("[data-comic-layout]");
+      if (!element) {
         console.error("Comic layout container not found");
         return null;
       }
 
-      // Sauvegarder les styles et positions originaux
-      const originalStyles = new Map();
-      const elementsToRestore = [
-        containerRef.current,
-        scrollContainer,
-        ...Array.from(scrollContainer.children),
-      ];
-
-      // Sauvegarder les styles originaux
-      elementsToRestore.forEach((el) => {
-        originalStyles.set(el, {
-          style: el.style.cssText,
-          scroll: { left: el.scrollLeft, top: el.scrollTop },
+      try {
+        // Save original styles
+        const originalStyle = element.style.cssText;
+        const originalScroll = element.scrollLeft;
+
+        // Reset scroll and padding temporarily for the screenshot
+        Object.assign(element.style, {
+          paddingLeft: "0",
+          paddingRight: "0",
+          width: `${element.scrollWidth - 350}px`, // Reduce width by choices panel
+          display: "flex",
+          flexDirection: "row",
+          gap: "32px",
+          padding: "32px",
+          overflow: "hidden",
+        });
+        element.scrollLeft = 0;
+
+        // Force reflow
+        element.offsetHeight;
+
+        // Take screenshot
+        const result = await takeScreenshot(element, {
+          backgroundColor: "#242424",
+          width: element.offsetWidth,
+          height: element.scrollHeight,
+          style: {
+            transform: "none",
+            transition: "none",
+          },
         });
-      });
-
-      // Obtenir les dimensions totales (sans le padding)
-      const children = Array.from(scrollContainer.children);
-      const lastChild = children[children.length - 1];
-      const lastChildRect = lastChild.getBoundingClientRect();
-      const containerRect = scrollContainer.getBoundingClientRect();
-
-      // Calculer la largeur totale en incluant la position et la largeur complète du dernier élément
-      const totalWidth =
-        lastChildRect.x + lastChildRect.width - containerRect.x + 32; // Ajouter un petit padding de sécurité
-
-      const totalHeight = scrollContainer.scrollHeight;
-
-      // Préparer le conteneur pour la capture
-      Object.assign(containerRef.current.style, {
-        width: "auto",
-        height: "auto",
-        overflow: "visible",
-      });
-
-      // Préparer le conteneur scrollable
-      Object.assign(scrollContainer.style, {
-        width: `${totalWidth}px`,
-        height: `${totalHeight}px`,
-        position: "relative",
-        overflow: "visible",
-        display: "flex",
-        transform: "none",
-        transition: "none",
-        padding: "0",
-        justifyContent: "flex-start", // Forcer l'alignement à gauche
-      });
-
-      // Forcer un reflow
-      scrollContainer.offsetHeight;
-
-      // Capturer l'image
-      const canvas = await html2canvas(scrollContainer, {
-        scale: 2,
-        useCORS: true,
-        allowTaint: true,
-        backgroundColor: "#242424",
-        width: totalWidth,
-        height: totalHeight,
-        x: 0,
-        y: 0,
-        scrollX: 0,
-        scrollY: 0,
-        windowWidth: totalWidth,
-        windowHeight: totalHeight,
-        logging: true,
-        onclone: (clonedDoc) => {
-          const clonedContainer = clonedDoc.querySelector(
-            "[data-comic-layout]"
-          );
-          if (clonedContainer) {
-            Object.assign(clonedContainer.style, {
-              width: `${totalWidth}px`,
-              height: `${totalHeight}px`,
-              position: "relative",
-              overflow: "visible",
-              display: "flex",
-              transform: "none",
-              transition: "none",
-              padding: "0",
-              justifyContent: "flex-start",
-            });
-
-            // S'assurer que tous les enfants sont visibles et alignés
-            Array.from(clonedContainer.children).forEach(
-              (child, index, arr) => {
-                Object.assign(child.style, {
-                  position: "relative",
-                  transform: "none",
-                  transition: "none",
-                  marginLeft: "0",
-                  marginRight: index < arr.length - 1 ? "16px" : "16px", // Garder une marge à droite même pour le dernier
-                });
-              }
-            );
-          }
-        },
-      });
 
-      // Restaurer tous les styles originaux
-      elementsToRestore.forEach((el) => {
-        const original = originalStyles.get(el);
-        if (original) {
-          el.style.cssText = original.style;
-          el.scrollLeft = original.scroll.left;
-          el.scrollTop = original.scroll.top;
-        }
-      });
+        // Restore original styles
+        element.style.cssText = originalStyle;
+        element.scrollLeft = originalScroll;
 
-      return canvas.toDataURL("image/png", 1.0);
-    } catch (error) {
-      console.error("Error capturing story:", error);
-      return null;
-    }
-  }, []);
+        return result;
+      } catch (error) {
+        console.error("Error capturing story:", error);
+        return null;
+      }
+    },
+    [takeScreenshot]
+  );
 
   const downloadStoryImage = useCallback(
     async (containerRef, filename = "my-story.png") => {
-      const imageUrl = await captureStory(containerRef);
-      if (!imageUrl) return;
+      const image = await captureStory(containerRef);
+      if (!image) return;
 
       const link = document.createElement("a");
-      link.href = imageUrl;
+      link.href = image;
       link.download = filename;
       document.body.appendChild(link);
       link.click();

client/src/hooks/useWritingSound.js

@@ -0,0 +1,46 @@
+import { useSound } from "use-sound";
+import { useState, useEffect } from "react";
+
+const PAGE_SOUNDS = Array.from(
+  { length: 5 },
+  (_, i) => `/sounds/drawing-${i + 1}.mp3`
+);
+
+export function useWritingSound() {
+  const [soundsLoaded, setSoundsLoaded] = useState(false);
+
+  // Créer un tableau de hooks useSound pour chaque son
+  const sounds = PAGE_SOUNDS.map((soundPath) => {
+    const [play, { sound }] = useSound(soundPath, {
+      volume: 1,
+      interrupt: true,
+    });
+    return { play, sound };
+  });
+
+  // Vérifier quand tous les sons sont chargés
+  useEffect(() => {
+    const allSoundsLoaded = sounds.every(
+      ({ sound }) => sound && sound.state() === "loaded"
+    );
+    if (allSoundsLoaded) {
+      setSoundsLoaded(true);
+    }
+  }, [sounds]);
+
+  const playRandomPageSound = () => {
+    if (!soundsLoaded) {
+      console.warn("Page sounds not loaded yet");
+      return;
+    }
+
+    const randomIndex = Math.floor(Math.random() * sounds.length);
+    try {
+      sounds[randomIndex].play();
+    } catch (error) {
+      console.error("Error playing page sound:", error);
+    }
+  };
+
+  return playRandomPageSound;
+}

client/src/layouts/ComicLayout.jsx

@@ -22,6 +22,15 @@ function ComicPage({
     return total + (segment.images?.length || 0);
   }, 0);
 
+  console.log("ComicPage layout:", {
+    type: layout.type,
+    totalImages,
+    segments: layout.segments,
+    isLastPage,
+    hasChoices: choices?.length > 0,
+    showScreenshot,
+  });
+
   return (
     <Box
       sx={{
@@ -29,6 +38,7 @@ function ComicPage({
         flexDirection: "row",
         gap: 2,
         height: "100%",
+        position: "relative",
       }}
     >
       <Box
@@ -90,36 +100,32 @@ function ComicPage({
           {layoutIndex + 1}
         </Box>
       </Box>
-      {isLastPage && (choices?.length > 0 || showScreenshot) && (
-        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-          {showScreenshot && (
-            <Box sx={{ display: "flex", justifyContent: "center", p: 2 }}>
-              <Tooltip title="Capturer l'histoire">
-                <IconButton
-                  onClick={onScreenshot}
-                  sx={{
-                    border: "1px solid",
-                    borderColor: "rgba(255, 255, 255, 0.23)",
-                    color: "white",
-                    p: 2,
-                    "&:hover": {
-                      borderColor: "white",
-                      backgroundColor: "rgba(255, 255, 255, 0.05)",
-                    },
-                  }}
-                >
-                  <PhotoCameraIcon />
-                </IconButton>
-              </Tooltip>
-            </Box>
-          )}
-          {choices?.length > 0 && (
-            <StoryChoices
-              choices={choices}
-              onChoice={onChoice}
-              disabled={isLoading}
-            />
-          )}
+      {isLastPage && (
+        <Box
+          sx={{
+            position: "absolute",
+            left: "100%",
+            top: "50%",
+            transform: "translateY(-50%)",
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            width: "350px",
+            ml: 4,
+          }}
+        >
+          <StoryChoices
+            choices={choices}
+            onChoice={onChoice}
+            disabled={isLoading}
+            isLastStep={
+              layout.segments[layout.segments.length - 1]?.is_last_step
+            }
+            isGameOver={
+              layout.segments[layout.segments.length - 1]?.isDeath ||
+              layout.segments[layout.segments.length - 1]?.isVictory
+            }
+          />
         </Box>
       )}
     </Box>
@@ -137,15 +143,40 @@ export function ComicLayout({
 }) {
   const scrollContainerRef = useRef(null);
 
-  // Effect to scroll to the right when new layouts are added
+  // Effect to scroll to the right when segments are loaded
   useEffect(() => {
-    if (scrollContainerRef.current) {
+    const loadedSegments = segments.filter((segment) => !segment.isLoading);
+    // Scroll à droite seulement si on a au moins un segment chargé
+    if (scrollContainerRef.current && loadedSegments.length > 0) {
       scrollContainerRef.current.scrollTo({
         left: scrollContainerRef.current.scrollWidth,
         behavior: "smooth",
       });
     }
-  }, [segments.length]);
+  }, [segments]); // Se déclenche à chaque modification des segments
+
+  // Prevent back/forward navigation on trackpad horizontal scroll
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e) => {
+      const max = container.scrollWidth - container.offsetWidth;
+      if (
+        container.scrollLeft + e.deltaX < 0 ||
+        container.scrollLeft + e.deltaX > max
+      ) {
+        e.preventDefault();
+        container.scrollLeft = Math.max(
+          0,
+          Math.min(max, container.scrollLeft + e.deltaX)
+        );
+      }
+    };
+
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => container.removeEventListener("wheel", handleWheel);
+  }, []);
 
   // Filtrer les segments qui sont en cours de chargement
   const loadedSegments = segments.filter((segment) => !segment.isLoading);
@@ -162,6 +193,7 @@ export function ComicLayout({
         height: "100%",
         width: "100%",
         px: layouts[0]?.type === "COVER" ? "calc(50% - (90vh * 0.5 * 0.5))" : 0,
+        py: 8, // 24px de padding vertical
         overflowX: "auto",
         overflowY: "hidden",
         "&::-webkit-scrollbar": {

client/src/layouts/config.js

@@ -1,50 +1,7 @@
-// Layout settings for different types
-// export const LAYOUTS = {
-//   COVER: {
-//     gridCols: 1,
-//     gridRows: 1,
-//     panels: [
-//       { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
-//     ],
-//   },
-//   LAYOUT_1: {
-//     gridCols: 1,
-//     gridRows: 1,
-//     panels: [
-//       { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
-//     ],
-//   },
-//   LAYOUT_2: {
-//     gridCols: 1,
-//     gridRows: 1,
-//     panels: [
-//       { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
-//     ],
-//   },
-//   LAYOUT_3: {
-//     gridCols: 1,
-//     gridRows: 1,
-//     panels: [
-//       { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
-//     ],
-//   },
-//   LAYOUT_4: {
-//     gridCols: 1,
-//     gridRows: 1,
-//     panels: [
-//       { width: 512, height: 1024, gridColumn: "1", gridRow: "1" }, // Format pleine page (1:1 ratio)
-//     ],
-//   },
-// };
-
 // Panel size constants
-const PANEL_SIZES = {
-  PORTRAIT: { width: 512, height: 1024 },
-  PORTRAIT_MEDIUM: { width: 768, height: 1024 },
-  LANDSCAPE: { width: 1024, height: 768 },
-  SQUARE: { width: 512, height: 512 },
-  SQUARE_LARGE: { width: 1024, height: 1024 },
-  PANORAMIC: { width: 1024, height: 512 },
+export const PANEL_SIZES = {
+  PORTRAIT: { width: 512, height: 768 },
+  LANDSCAPE: { width: 768, height: 512 },
   COVER_SIZE: { width: 512, height: 768 },
 };
 
@@ -69,9 +26,9 @@ export const LAYOUTS = {
     gridRows: 2,
     panels: [
       { ...PANEL_SIZES.LANDSCAPE, gridColumn: "1", gridRow: "1" }, // Landscape top left
-      { ...PANEL_SIZES.PORTRAIT_MEDIUM, gridColumn: "2", gridRow: "1" }, // Portrait top right
+      { ...PANEL_SIZES.PORTRAIT, gridColumn: "2", gridRow: "1" }, // Portrait top right
       { ...PANEL_SIZES.LANDSCAPE, gridColumn: "1", gridRow: "2" }, // Landscape middle left
-      { ...PANEL_SIZES.PORTRAIT_MEDIUM, gridColumn: "2", gridRow: "2" }, // Portrait right
+      { ...PANEL_SIZES.PORTRAIT, gridColumn: "2", gridRow: "2" }, // Portrait right
     ],
   },
   LAYOUT_2: {
@@ -79,7 +36,7 @@ export const LAYOUTS = {
     gridRows: 2,
     panels: [
       {
-        ...PANEL_SIZES.SQUARE_LARGE,
+        ...PANEL_SIZES.LANDSCAPE,
         gridColumn: GRID.TWO_THIRDS,
         gridRow: "1",
       }, // Large square top left
@@ -101,37 +58,35 @@ export const LAYOUTS = {
     gridCols: 2,
     gridRows: 3,
     panels: [
-      { ...PANEL_SIZES.PANORAMIC, gridColumn: "1 / span 2", gridRow: "1" }, // Wide panoramic top
+      { ...PANEL_SIZES.LANDSCAPE, gridColumn: "1 / span 2", gridRow: "1" }, // Wide panoramic top
       {
         ...PANEL_SIZES.PORTRAIT,
         gridColumn: "1",
         gridRow: GRID.FULL_HEIGHT_FROM_2,
       }, // Tall portrait left
-      { ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "2" }, // Square middle right
-      { ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "3" }, // Square bottom right
+      { ...PANEL_SIZES.LANDSCAPE, gridColumn: "2", gridRow: "2" }, // Square middle right
+      { ...PANEL_SIZES.LANDSCAPE, gridColumn: "2", gridRow: "3" }, // Square bottom right
     ],
   },
   LAYOUT_5: {
     gridCols: 3,
     gridRows: 3,
     panels: [
-      { ...PANEL_SIZES.PANORAMIC, gridColumn: GRID.FULL_WIDTH, gridRow: "1" }, // Wide panoramic top
+      { ...PANEL_SIZES.LANDSCAPE, gridColumn: GRID.FULL_WIDTH, gridRow: "1" }, // Wide panoramic top
       { ...PANEL_SIZES.PORTRAIT, gridColumn: "1", gridRow: "2 / span 2" }, // Tall portrait left
       {
-        ...PANEL_SIZES.SQUARE_LARGE,
+        ...PANEL_SIZES.LANDSCAPE,
         gridColumn: "2 / span 2",
         gridRow: "2 / span 2",
       }, // Large square right
     ],
   },
-  LAYOUT_6: {
-    gridCols: 3,
+  LAYOUT_7: {
+    gridCols: 1,
     gridRows: 2,
     panels: [
-      { ...PANEL_SIZES.PORTRAIT, gridColumn: "1", gridRow: GRID.FULL_HEIGHT }, // Tall portrait left
-      { ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "1" }, // Square top middle
-      { ...PANEL_SIZES.PORTRAIT, gridColumn: "3", gridRow: GRID.FULL_HEIGHT }, // Tall portrait right
-      { ...PANEL_SIZES.SQUARE, gridColumn: "2", gridRow: "2" }, // Square bottom middle
+      { ...PANEL_SIZES.LANDSCAPE, gridColumn: GRID.FULL_WIDTH, gridRow: "1" }, // Portrait top right
+      { ...PANEL_SIZES.LANDSCAPE, gridColumn: GRID.FULL_WIDTH, gridRow: "2" }, // Full width landscape bottom
     ],
   },
 };
@@ -144,9 +99,9 @@ export const nonRandomLayouts = Object.keys(LAYOUTS).filter(
 // Grouper les layouts par nombre de panneaux
 export const LAYOUTS_BY_PANEL_COUNT = {
   1: ["COVER"],
-  2: ["LAYOUT_2"], // Layouts avec exactement 2 panneaux
+  2: ["LAYOUT_7"], // Layouts avec exactement 2 panneaux
   3: ["LAYOUT_5"], // Layouts avec exactement 3 panneaux
-  4: ["LAYOUT_3", "LAYOUT_4", "LAYOUT_6"], // Layouts avec exactement 4 panneaux
+  4: ["LAYOUT_3"], // Layouts avec exactement 4 panneaux
 };
 
 // Helper functions for layout configuration

client/src/main.jsx

@@ -6,7 +6,7 @@ import CssBaseline from "@mui/material/CssBaseline";
 import { theme } from "./theme";
 import { Home } from "./pages/Home";
 import { Game } from "./pages/Game";
-import { Tutorial } from "./pages/tutorial/Tutorial";
+import { Tutorial } from "./pages/Tutorial";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(

client/src/pages/Game.jsx

@@ -4,10 +4,14 @@ import { ComicLayout } from "../layouts/ComicLayout";
 import { storyApi } from "../utils/api";
 import { useNarrator } from "../hooks/useNarrator";
 import { useStoryCapture } from "../hooks/useStoryCapture";
+import { usePageSound } from "../hooks/usePageSound";
+import { useWritingSound } from "../hooks/useWritingSound";
 import { StoryChoices } from "../components/StoryChoices";
+import { ErrorDisplay } from "../components/ErrorDisplay";
 import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import VolumeOffIcon from "@mui/icons-material/VolumeOff";
 import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
+import { getNextLayoutType, LAYOUTS } from "../layouts/config";
 
 // Constants
 const NARRATION_ENABLED_KEY = "narration_enabled";
@@ -35,6 +39,8 @@ export function Game() {
   const [storySegments, setStorySegments] = useState([]);
   const [currentChoices, setCurrentChoices] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [showChoices, setShowChoices] = useState(true);
+  const [error, setError] = useState(null);
   const [isNarrationEnabled, setIsNarrationEnabled] = useState(() => {
     // Initialiser depuis le localStorage avec true comme valeur par défaut
     const stored = localStorage.getItem(NARRATION_ENABLED_KEY);
@@ -42,6 +48,8 @@ export function Game() {
   });
   const { isNarratorSpeaking, playNarration, stopNarration } =
     useNarrator(isNarrationEnabled);
+  const playPageSound = usePageSound();
+  const playWritingSound = useWritingSound();
 
   // Sauvegarder l'état de la narration dans le localStorage
   useEffect(() => {
@@ -54,6 +62,9 @@ export function Game() {
   }, []);
 
   const handleChoice = async (choiceId) => {
+    playPageSound();
+
+    setShowChoices(false); // Cacher les choix dès qu'on clique
     // Si c'est l'option "Réessayer", on relance la dernière action
     if (currentChoices.length === 1 && currentChoices[0].text === "Réessayer") {
       // Supprimer le segment d'erreur
@@ -84,6 +95,8 @@ export function Game() {
 
   const handleStoryAction = async (action, choiceId = null) => {
     setIsLoading(true);
+    setShowChoices(false);
+    setError(null); // Reset error state
     try {
       // Stop any ongoing narration
       if (isNarratorSpeaking) {
@@ -114,6 +127,8 @@ export function Game() {
         isLoading: true, // Ajout d'un flag pour indiquer que le segment est en cours de chargement
       };
 
+      playWritingSound();
+
       // 3. Update segments
       if (action === "restart") {
         setStorySegments([newSegment]);
@@ -133,7 +148,7 @@ export function Game() {
           "Starting image generation for prompts:",
           storyData.image_prompts
         );
-        generateImagesForStory(
+        await generateImagesForStory(
           storyData.image_prompts,
           action === "restart" ? 0 : storySegments.length,
           action === "restart" ? [newSegment] : [...storySegments, newSegment]
@@ -147,6 +162,9 @@ export function Game() {
           setStorySegments((prev) => [...prev.slice(0, -1), updatedSegment]);
         }
       }
+
+      // Réafficher les choix une fois tout chargé
+      setShowChoices(true);
     } catch (error) {
       console.error("Error in handleStoryAction:", error);
       const errorMessage =
@@ -154,32 +172,8 @@ export function Game() {
         error.message ||
         "Le conteur d'histoires est temporairement indisponible. Veuillez réessayer dans quelques instants...";
 
-      const errorSegment = {
-        text: errorMessage,
-        rawText: errorMessage,
-        isChoice: false,
-        isDeath: false,
-        isVictory: false,
-        radiationLevel:
-          storySegments.length > 0
-            ? storySegments[storySegments.length - 1].radiationLevel
-            : 0,
-        images: [],
-        isLoading: false,
-      };
-
-      if (action === "restart") {
-        setStorySegments([errorSegment]);
-      } else {
-        // En cas d'erreur sur un choix, on garde le segment précédent
-        setStorySegments((prev) => [...prev.slice(0, -1), errorSegment]);
-      }
-
-      // Set retry choice
-      setCurrentChoices([{ id: "retry", text: "Réessayer" }]);
-
-      // Play error message
-      await playNarration(errorSegment.rawText);
+      setError(errorMessage);
+      await playNarration(errorMessage);
     } finally {
       setIsLoading(false);
     }
@@ -195,6 +189,12 @@ export function Game() {
       const images = Array(imagePrompts.length).fill(null);
       let allImagesGenerated = false;
 
+      // Déterminer le layout en fonction du nombre d'images
+      const layoutType = getNextLayoutType(0, imagePrompts.length);
+      console.log(
+        `Using layout ${layoutType} for ${imagePrompts.length} images`
+      );
+
       for (
         let promptIndex = 0;
         promptIndex < imagePrompts.length;
@@ -204,13 +204,19 @@ export function Game() {
         const maxRetries = 3;
         let success = false;
 
+        // Obtenir les dimensions pour ce panneau
+        const panelDimensions = LAYOUTS[layoutType].panels[promptIndex];
+        console.log(`Panel ${promptIndex} dimensions:`, panelDimensions);
+
         while (retryCount < maxRetries && !success) {
           try {
             console.log(
               `Generating image ${promptIndex + 1}/${imagePrompts.length}`
             );
             const result = await storyApi.generateImage(
-              imagePrompts[promptIndex]
+              imagePrompts[promptIndex],
+              panelDimensions.width,
+              panelDimensions.height
             );
 
             if (!result) {
@@ -261,11 +267,6 @@ export function Game() {
     }
   };
 
-  // Filter out choice segments for display
-  const nonChoiceSegments = storySegments.filter(
-    (segment) => !segment.isChoice
-  );
-
   const handleCaptureStory = async () => {
     await downloadStoryImage(
       storyContainerRef,
@@ -275,94 +276,112 @@ export function Game() {
 
   return (
     <Box
+      ref={storyContainerRef}
       sx={{
         height: "100vh",
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: "background.paper",
+        width: "100vw",
+        backgroundColor: "#1a1a1a",
+        position: "relative",
+        overflow: "hidden",
       }}
     >
-      <Box
-        sx={{
-          position: "relative",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          backgroundColor: "#121212",
-        }}
-      >
-        {/* Narration control - always visible in top right */}
-        <Box
+      {isLoading && (
+        <LinearProgress
           sx={{
-            position: "fixed",
-            top: 16,
-            right: 16,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
             zIndex: 1000,
           }}
-        >
-          <Tooltip
-            title={
-              isNarrationEnabled
-                ? "Désactiver la narration"
-                : "Activer la narration"
+        />
+      )}
+
+      {error ? (
+        <ErrorDisplay
+          message={error}
+          onRetry={() => {
+            if (storySegments.length === 0) {
+              handleStoryAction("restart");
+            } else {
+              handleStoryAction(
+                "choice",
+                storySegments[storySegments.length - 1]?.choiceId || null
+              );
             }
-          >
-            <IconButton
-              onClick={() => setIsNarrationEnabled(!isNarrationEnabled)}
-              sx={{
-                backgroundColor: isNarrationEnabled
-                  ? "primary.main"
-                  : "rgba(255, 255, 255, 0.1)",
-                color: "white",
-                "&:hover": {
-                  backgroundColor: isNarrationEnabled
-                    ? "primary.dark"
-                    : "rgba(255, 255, 255, 0.2)",
-                },
-              }}
-            >
-              {isNarrationEnabled ? <VolumeUpIcon /> : <VolumeOffIcon />}
-            </IconButton>
-          </Tooltip>
-        </Box>
-
-        {/* Progress bar */}
-        {isLoading && (
-          <LinearProgress
-            sx={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              zIndex: 1,
-            }}
-          />
-        )}
-
-        {/* Comic layout */}
-        <Box
-          ref={storyContainerRef}
-          sx={{
-            flex: 1,
-            overflow: "hidden",
-            position: "relative",
-            p: 4,
           }}
-        >
+        />
+      ) : (
+        <>
           <ComicLayout
             segments={storySegments}
-            choices={currentChoices}
+            choices={showChoices ? currentChoices : []}
             onChoice={handleChoice}
-            isLoading={isLoading || isNarratorSpeaking}
-            showScreenshot={
-              currentChoices.length === 1 &&
-              currentChoices[0].text === "Réessayer"
-            }
-            onScreenshot={() => downloadStoryImage(storyContainerRef)}
+            isLoading={isLoading}
+            showScreenshot={storySegments.length > 0}
+            onScreenshot={handleCaptureStory}
           />
-        </Box>
-      </Box>
+          {showChoices && (
+            <StoryChoices
+              choices={currentChoices}
+              onChoice={handleChoice}
+              disabled={isLoading}
+              isLastStep={
+                storySegments.length > 0 &&
+                storySegments[storySegments.length - 1].isLastStep
+              }
+              isGameOver={
+                storySegments.length > 0 &&
+                storySegments[storySegments.length - 1].isGameOver
+              }
+              containerRef={storyContainerRef}
+            />
+          )}
+          <Box
+            sx={{
+              position: "fixed",
+              top: 16,
+              right: 16,
+              display: "flex",
+              gap: 1,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              padding: 1,
+              borderRadius: 1,
+            }}
+          >
+            <Tooltip title="Take a screenshot">
+              <IconButton
+                onClick={handleCaptureStory}
+                sx={{
+                  color: "white",
+                  "&:hover": {
+                    backgroundColor: "rgba(0, 0, 0, 0.7)",
+                  },
+                }}
+              >
+                <PhotoCameraIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip
+              title={
+                isNarrationEnabled ? "Disable narration" : "Enable narration"
+              }
+            >
+              <IconButton
+                onClick={() => setIsNarrationEnabled(!isNarrationEnabled)}
+                sx={{
+                  color: "white",
+                  "&:hover": {
+                    backgroundColor: "rgba(0, 0, 0, 0.7)",
+                  },
+                }}
+              >
+                {isNarrationEnabled ? <VolumeUpIcon /> : <VolumeOffIcon />}
+              </IconButton>
+            </Tooltip>
+          </Box>
+        </>
+      )}
     </Box>
   );
 }

client/src/pages/{tutorial/Tutorial.jsx → Tutorial.jsx}

@@ -52,10 +52,6 @@ export function Tutorial() {
           tone to help her understand the urgency of climate change, while
           maintaining your close relationship.
         </Typography>
-        -
-        <Typography variant="body1" paragraph>
-          {"Oh and remember, be kind with the game, do not spam buttons. <3"}
-        </Typography>
       </Box>
 
       <Button

client/src/pages/game/App.jsx

@@ -1,794 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import {
-  Container,
-  Paper,
-  Button,
-  Box,
-  Typography,
-  LinearProgress,
-  Chip,
-  IconButton,
-  Tooltip,
-} from "@mui/material";
-import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
-import RestartAltIcon from "@mui/icons-material/RestartAlt";
-import axios from "axios";
-import { ComicLayout } from "../../layouts/ComicLayout";
-import {
-  getNextPanelDimensions,
-  groupSegmentsIntoLayouts,
-} from "../../layouts/utils";
-import { LAYOUTS } from "../../layouts/config";
-import html2canvas from "html2canvas";
-import { useConversation } from "@11labs/react";
-import { CLIENT_ID, getDefaultHeaders } from "../../utils/session";
-import { useNarrator } from "../../hooks/useNarrator";
-
-// Get API URL from environment or default to localhost in development
-const isHFSpace = window.location.hostname.includes("hf.space");
-const API_URL = isHFSpace
-  ? "" // URL relative pour HF Spaces
-  : import.meta.env.VITE_API_URL || "http://localhost:8000";
-
-// Constants
-const AGENT_ID = "2MF9st3s1mNFbX01Y106";
-
-const WS_URL = import.meta.env.VITE_WS_URL || "ws://localhost:8000/ws";
-
-// Create axios instance with default config
-const api = axios.create({
-  headers: getDefaultHeaders(),
-  // Ajouter baseURL pour HF Spaces
-  ...(isHFSpace && {
-    baseURL: window.location.origin,
-  }),
-});
-
-// Function to convert text with ** to Chip elements
-const formatTextWithBold = (text, isInPanel = false) => {
-  if (!text) return "";
-  const parts = text.split(/(\*\*.*?\*\*)/g);
-  return parts.map((part, index) => {
-    if (part.startsWith("**") && part.endsWith("**")) {
-      // Remove the ** and wrap in Chip
-      return (
-        <Chip
-          key={index}
-          label={part.slice(2, -2)}
-          size="small"
-          sx={{
-            mx: 0.5,
-            ...(isInPanel && {
-              backgroundColor: "rgba(0, 0, 0, 0)!important",
-              color: "black!important",
-              borderColor: "black!important",
-              borderRadius: "4px!important",
-            }),
-          }}
-        />
-      );
-    }
-    return part;
-  });
-};
-
-function App() {
-  const [storySegments, setStorySegments] = useState([]);
-  const [currentChoices, setCurrentChoices] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isDebugMode, setIsDebugMode] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
-  const [wsConnected, setWsConnected] = useState(false);
-
-  const comicContainerRef = useRef(null);
-  const mediaRecorderRef = useRef(null);
-  const audioChunksRef = useRef([]);
-  const wsRef = useRef(null);
-
-  const { isNarratorSpeaking, playNarration, stopNarration } = useNarrator();
-
-  // Start the story on first render
-  useEffect(() => {
-    handleStoryAction("restart");
-  }, []); // Empty dependency array for first render only
-
-  // Only setup WebSocket connection with server
-  useEffect(() => {
-    const setupWebSocket = () => {
-      wsRef.current = new WebSocket(WS_URL);
-
-      wsRef.current.onopen = () => {
-        console.log("Server WebSocket connected");
-        setWsConnected(true);
-      };
-
-      wsRef.current.onclose = (event) => {
-        const reason = event.reason || "No reason provided";
-        const code = event.code;
-        console.log(
-          `Server WebSocket disconnected - Code: ${code}, Reason: ${reason}`
-        );
-        console.log("Attempting to reconnect in 3 seconds...");
-        setWsConnected(false);
-        // Attempt to reconnect after 3 seconds
-        setTimeout(setupWebSocket, 3000);
-      };
-
-      wsRef.current.onmessage = async (event) => {
-        const data = JSON.parse(event.data);
-
-        if (data.type === "audio") {
-          // Stop any ongoing narration
-          if (isNarratorSpeaking) {
-            stopNarration();
-          }
-
-          // Play the conversation audio response
-          const audioBlob = await fetch(
-            `data:audio/mpeg;base64,${data.audio}`
-          ).then((r) => r.blob());
-          const audioUrl = URL.createObjectURL(audioBlob);
-          playNarration(audioUrl);
-        }
-      };
-    };
-
-    setupWebSocket();
-
-    return () => {
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-    };
-  }, []);
-
-  const conversation = useConversation({
-    agentId: AGENT_ID,
-    onResponse: async (response) => {
-      if (response.type === "audio") {
-        // Play the conversation audio response
-        const audioBlob = new Blob([response.audio], { type: "audio/mpeg" });
-        const audioUrl = URL.createObjectURL(audioBlob);
-        playNarration(audioUrl);
-      }
-    },
-    clientTools: {
-      make_decision: async ({ decision }) => {
-        console.log("AI made decision:", decision);
-        // End the ElevenLabs conversation
-        await conversation.endSession();
-        setIsRecording(false);
-        // Handle the choice and generate next story part
-        await handleChoice(parseInt(decision));
-      },
-    },
-  });
-  const { isSpeaking } = conversation;
-  const [isConversationMode, setIsConversationMode] = useState(false);
-
-  // Audio recording setup
-  const startRecording = async () => {
-    try {
-      // Stop narration audio if it's playing
-      if (isNarratorSpeaking) {
-        stopNarration();
-      }
-      // Also stop any conversation audio if playing
-      if (conversation.audioRef.current) {
-        conversation.audioRef.current.pause();
-        conversation.audioRef.current.currentTime = 0;
-      }
-
-      if (!isConversationMode) {
-        // If we're not in conversation mode, this is the first recording
-        setIsConversationMode(true);
-        // Initialize ElevenLabs WebSocket connection
-        try {
-          // Pass available choices to the conversation
-          const currentChoiceIds = currentChoices
-            .map((choice) => choice.id)
-            .join(",");
-          await conversation.startSession({
-            agentId: AGENT_ID,
-            initialContext: `This is the current situation : ${
-              storySegments[storySegments.length - 1].text
-            }. Those are the possible actions, ${currentChoices
-              .map((choice, index) => `decision ${index + 1} : ${choice.text}`)
-              .join(", ")}.`,
-          });
-          console.log("ElevenLabs WebSocket connected");
-        } catch (error) {
-          console.error("Error initializing ElevenLabs conversation:", error);
-          return;
-        }
-      } else if (isSpeaking) {
-        // Only handle stopping the agent if we're in conversation mode
-        await conversation.endSession();
-        const wsUrl = `wss://api.elevenlabs.io/v1/convai/conversation?agent_id=${AGENT_ID}`;
-        await conversation.startSession({ url: wsUrl });
-      }
-
-      // Only stop narration if it's actually playing
-      if (!isConversationMode && isNarratorSpeaking) {
-        stopNarration();
-      }
-
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      mediaRecorderRef.current = new MediaRecorder(stream);
-      audioChunksRef.current = [];
-
-      mediaRecorderRef.current.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          audioChunksRef.current.push(event.data);
-        }
-      };
-
-      mediaRecorderRef.current.onstop = async () => {
-        const audioBlob = new Blob(audioChunksRef.current, {
-          type: "audio/wav",
-        });
-        const reader = new FileReader();
-
-        reader.onload = async () => {
-          const base64Audio = reader.result.split(",")[1];
-          if (isConversationMode) {
-            try {
-              // Send audio to ElevenLabs conversation
-              await conversation.send({
-                type: "audio",
-                data: base64Audio,
-              });
-            } catch (error) {
-              console.error("Error sending audio to ElevenLabs:", error);
-            }
-          } else {
-            // Otherwise use the original WebSocket connection
-            if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-              console.log("Sending audio to server via WebSocket");
-              wsRef.current.send(
-                JSON.stringify({
-                  type: "audio_input",
-                  audio: base64Audio,
-                  client_id: CLIENT_ID,
-                })
-              );
-            }
-          }
-        };
-
-        reader.readAsDataURL(audioBlob);
-      };
-
-      mediaRecorderRef.current.start();
-      setIsRecording(true);
-    } catch (error) {
-      console.error("Error starting recording:", error);
-    }
-  };
-
-  const stopRecording = () => {
-    if (mediaRecorderRef.current && isRecording) {
-      mediaRecorderRef.current.stop();
-      setIsRecording(false);
-      mediaRecorderRef.current.stream
-        .getTracks()
-        .forEach((track) => track.stop());
-    }
-  };
-
-  const generateImagesForStory = async (
-    imagePrompts,
-    segmentIndex,
-    currentSegments
-  ) => {
-    try {
-      console.log("[generateImagesForStory] Starting with:", {
-        promptsCount: imagePrompts.length,
-        segmentIndex,
-        segmentsCount: currentSegments.length,
-      });
-      console.log("Image prompts:", imagePrompts);
-      console.log("Current segments:", currentSegments);
-
-      let localSegments = [...currentSegments];
-
-      // Traiter chaque prompt un par un
-      for (
-        let promptIndex = 0;
-        promptIndex < imagePrompts.length;
-        promptIndex++
-      ) {
-        // Recalculer le layout actuel pour chaque image
-        const layouts = groupSegmentsIntoLayouts(localSegments);
-        console.log("[Layout] Current layouts:", layouts);
-        const currentLayout = layouts[layouts.length - 1];
-        const layoutType = currentLayout?.type || "COVER";
-        console.log("[Layout] Current type:", layoutType);
-
-        // Vérifier si nous avons de la place dans le layout actuel
-        const currentSegmentImages =
-          currentLayout.segments[currentLayout.segments.length - 1].images ||
-          [];
-        const actualImagesCount = currentSegmentImages.filter(
-          (img) => img !== null
-        ).length;
-        console.log("[Layout] Current segment images:", {
-          total: currentSegmentImages.length,
-          actual: actualImagesCount,
-          hasImages: currentSegmentImages.some((img) => img !== null),
-          currentImages: currentSegmentImages.map((img) =>
-            img ? "image" : "null"
-          ),
-        });
-
-        const panelDimensions = LAYOUTS[layoutType].panels[promptIndex];
-        console.log(
-          "[Layout] Panel dimensions for prompt",
-          promptIndex,
-          ":",
-          panelDimensions
-        );
-
-        // Ne créer une nouvelle page que si nous avons encore des prompts à traiter
-        // et qu'il n'y a plus de place dans le layout actuel
-        if (!panelDimensions && promptIndex < imagePrompts.length - 1) {
-          console.log(
-            "[Layout] Creating new page - No space in current layout"
-          );
-          // Créer un nouveau segment pour la nouvelle page
-          const newSegment = {
-            ...localSegments[segmentIndex],
-            images: Array(imagePrompts.length - promptIndex).fill(null),
-          };
-          localSegments = [...localSegments, newSegment];
-          segmentIndex = localSegments.length - 1;
-          console.log("[Layout] New segment created:", {
-            segmentIndex,
-            totalSegments: localSegments.length,
-            imagesArray: newSegment.images,
-          });
-          // Mettre à jour l'état avec le nouveau segment
-          setStorySegments(localSegments);
-          continue; // Recommencer la boucle avec le nouveau segment
-        }
-
-        // Si nous n'avons pas de dimensions de panneau et c'est le dernier prompt,
-        // ne pas continuer
-        if (!panelDimensions) {
-          console.log(
-            "[Layout] Stopping - No more space and no more prompts to process"
-          );
-          break;
-        }
-
-        console.log(
-          `[Image] Generating image ${promptIndex + 1}/${imagePrompts.length}:`,
-          {
-            prompt: imagePrompts[promptIndex],
-            dimensions: panelDimensions,
-          }
-        );
-
-        let retryCount = 0;
-        const maxRetries = 3;
-        let success = false;
-
-        while (retryCount < maxRetries && !success) {
-          try {
-            if (retryCount > 0) {
-              console.log(
-                `[Image] Retry attempt ${retryCount} for image ${
-                  promptIndex + 1
-                }`
-              );
-            }
-
-            const result = await api.post(
-              `${API_URL}/api/generate-image-direct`,
-              {
-                prompt: imagePrompts[promptIndex],
-                width: panelDimensions.width,
-                height: panelDimensions.height,
-              }
-            );
-
-            console.log(`[Image] Response for image ${promptIndex + 1}:`, {
-              success: result.data.success,
-              hasImage: !!result.data.image_base64,
-              imageLength: result.data.image_base64?.length,
-            });
-
-            if (result.data.success) {
-              console.log(
-                `[Image] Image ${promptIndex + 1} generated successfully`
-              );
-              // Mettre à jour les segments locaux
-              const currentImages = [
-                ...(localSegments[segmentIndex].images || []),
-              ];
-              // Remplacer le null à l'index du prompt par la nouvelle image
-              currentImages[promptIndex] = result.data.image_base64;
-
-              localSegments[segmentIndex] = {
-                ...localSegments[segmentIndex],
-                images: currentImages,
-              };
-              console.log("[State] Updating segments with new image:", {
-                segmentIndex,
-                imageIndex: promptIndex,
-                imagesArray: currentImages.map((img) =>
-                  img ? "image" : "null"
-                ),
-              });
-              // Mettre à jour l'état avec les segments mis à jour
-              setStorySegments([...localSegments]);
-              success = true;
-            } else {
-              console.error(
-                `[Image] Generation failed for image ${promptIndex + 1}:`,
-                result.data.error
-              );
-              retryCount++;
-              if (retryCount < maxRetries) {
-                // Attendre un peu avant de réessayer (backoff exponentiel)
-                await new Promise((resolve) =>
-                  setTimeout(resolve, 1000 * Math.pow(2, retryCount))
-                );
-              }
-            }
-          } catch (error) {
-            console.error(
-              `[Image] Error generating image ${promptIndex + 1}:`,
-              error
-            );
-            retryCount++;
-            if (retryCount < maxRetries) {
-              // Attendre un peu avant de réessayer (backoff exponentiel)
-              await new Promise((resolve) =>
-                setTimeout(resolve, 1000 * Math.pow(2, retryCount))
-              );
-            }
-          }
-        }
-
-        if (!success) {
-          console.error(
-            `[Image] Failed to generate image ${
-              promptIndex + 1
-            } after ${maxRetries} attempts`
-          );
-        }
-      }
-
-      console.log(
-        "[generateImagesForStory] Completed. Final segments:",
-        localSegments.map((seg) => ({
-          ...seg,
-          images: seg.images?.map((img) => (img ? "image" : "null")),
-        }))
-      );
-      return localSegments[segmentIndex]?.images || [];
-    } catch (error) {
-      console.error("[generateImagesForStory] Error:", error);
-      return [];
-    }
-  };
-
-  const handleStoryAction = async (action, choiceId = null) => {
-    setIsLoading(true);
-    try {
-      // 1. D'abord, obtenir l'histoire
-      const response = await api.post(
-        `${API_URL}/api/${isDebugMode ? "test/" : ""}chat`,
-        {
-          message: action,
-          choice_id: choiceId,
-        }
-      );
-
-      // 2. Créer le nouveau segment sans images
-      const newSegment = {
-        text: formatTextWithBold(response.data.story_text, true),
-        isChoice: false,
-        isDeath: response.data.is_death,
-        isVictory: response.data.is_victory,
-        radiationLevel: response.data.radiation_level,
-        is_first_step: response.data.is_first_step,
-        is_last_step: response.data.is_last_step,
-        images: response.data.image_prompts
-          ? Array(response.data.image_prompts.length).fill(null)
-          : [], // Pré-remplir avec null pour les spinners
-      };
-
-      // 3. Calculer le nouvel index et les segments mis à jour
-      let segmentIndex;
-      let updatedSegments;
-
-      if (action === "restart") {
-        segmentIndex = 0;
-        updatedSegments = [newSegment];
-      } else {
-        // Récupérer l'état actuel de manière synchrone
-        segmentIndex = storySegments.length;
-        updatedSegments = [...storySegments, newSegment];
-      }
-
-      // Mettre à jour l'état avec les nouveaux segments
-      setStorySegments(updatedSegments);
-
-      // 4. Mettre à jour les choix immédiatement
-      setCurrentChoices(response.data.choices);
-
-      // 5. Désactiver le loading car l'histoire est affichée
-      setIsLoading(false);
-
-      // 6. Jouer l'audio du nouveau segment
-      await playNarration(response.data.story_text);
-
-      // 7. Générer les images en parallèle
-      if (
-        response.data.image_prompts &&
-        response.data.image_prompts.length > 0
-      ) {
-        try {
-          console.log(
-            "Starting image generation with prompts:",
-            response.data.image_prompts,
-            "for segment",
-            segmentIndex
-          );
-          // generateImagesForStory met déjà à jour le state au fur et à mesure
-          await generateImagesForStory(
-            response.data.image_prompts,
-            segmentIndex,
-            updatedSegments
-          );
-        } catch (imageError) {
-          console.error("Error generating images:", imageError);
-        }
-      }
-    } catch (error) {
-      console.error("Error:", error);
-      // En cas d'erreur, créer un segment d'erreur qui permet de continuer
-      const errorSegment = {
-        text: "Le conteur d'histoires est temporairement indisponible. Veuillez réessayer dans quelques instants...",
-        isChoice: false,
-        isDeath: false,
-        isVictory: false,
-        radiationLevel:
-          storySegments.length > 0
-            ? storySegments[storySegments.length - 1].radiationLevel
-            : 0,
-        images: [],
-      };
-
-      // Ajouter le segment d'erreur et permettre de réessayer
-      if (action === "restart") {
-        setStorySegments([errorSegment]);
-      } else {
-        setStorySegments((prev) => [...prev, errorSegment]);
-      }
-
-      // Donner l'option de réessayer
-      setCurrentChoices([{ id: 1, text: "Réessayer" }]);
-
-      setIsLoading(false);
-    }
-  };
-
-  const handleChoice = async (choiceId) => {
-    // Si c'est l'option "Réessayer", on relance la dernière action
-    if (currentChoices.length === 1 && currentChoices[0].text === "Réessayer") {
-      // Supprimer le segment d'erreur
-      setStorySegments((prev) => prev.slice(0, -1));
-      // Réessayer la dernière action
-      await handleStoryAction(
-        "choice",
-        storySegments[storySegments.length - 2]?.choiceId || null
-      );
-      return;
-    }
-
-    // Comportement normal pour les autres choix
-    const choice = currentChoices.find((c) => c.id === choiceId);
-    setStorySegments((prev) => [
-      ...prev,
-      {
-        text: choice.text,
-        isChoice: true,
-        choiceId: choiceId, // Stocker l'ID du choix pour pouvoir réessayer
-      },
-    ]);
-
-    // Continue the story with this choice
-    await handleStoryAction("choice", choiceId);
-  };
-
-  // Filter out choice segments
-  const nonChoiceSegments = storySegments.filter(
-    (segment) => !segment.isChoice
-  );
-
-  const handleSaveAsImage = async () => {
-    if (comicContainerRef.current) {
-      try {
-        const canvas = await html2canvas(comicContainerRef.current, {
-          scale: 2, // Meilleure qualité
-          backgroundColor: "#242424", // Même couleur que le fond
-          logging: false,
-        });
-
-        // Convertir en PNG et télécharger
-        const image = canvas.toDataURL("image/png");
-        const link = document.createElement("a");
-        link.href = image;
-        link.download = "my-comic-story.png";
-        link.click();
-      } catch (error) {
-        console.error("Error saving image:", error);
-      }
-    }
-  };
-
-  return (
-    <Box
-      sx={{
-        height: "100vh",
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <Box
-        sx={{
-          position: "fixed",
-          top: 16,
-          right: 16,
-          zIndex: 1000,
-          display: "flex",
-          gap: 1,
-        }}
-      >
-        <Button
-          onClick={isRecording ? stopRecording : startRecording}
-          variant="outlined"
-          disabled={isLoading || isNarratorSpeaking}
-          sx={{
-            borderColor: isRecording ? "error.main" : "primary.main",
-            backgroundColor: isRecording ? "error.main" : "transparent",
-            color: isRecording ? "white" : "primary.main",
-            "&:hover": {
-              backgroundColor: isRecording ? "error.dark" : "primary.main",
-              color: "background.paper",
-              borderColor: isRecording ? "error.dark" : "primary.main",
-            },
-          }}
-        >
-          {isRecording ? "Sarah's being convinced" : "Try to convince Sarah"}
-        </Button>
-        <Tooltip title="Sauvegarder en PNG">
-          <IconButton
-            onClick={handleSaveAsImage}
-            sx={{
-              border: "1px solid",
-              borderColor: "primary.main",
-              borderRadius: "8px",
-              backgroundColor: "transparent",
-              color: "primary.main",
-              padding: "8px",
-              "&:hover": {
-                backgroundColor: "primary.main",
-                color: "background.paper",
-              },
-            }}
-          >
-            <SaveOutlinedIcon />
-          </IconButton>
-        </Tooltip>
-      </Box>
-
-      {isLoading && (
-        <LinearProgress
-          color="secondary"
-          sx={{ position: "absolute", top: 0, width: "100%" }}
-        />
-      )}
-
-      <Box
-        ref={comicContainerRef}
-        sx={{
-          flexGrow: 1,
-          display: "flex",
-          gap: 4,
-          pt: 8,
-          px: 2,
-          pb: 2,
-          width: "100%",
-          height: "calc(100vh - 135px)",
-          bgcolor: "background.default",
-        }}
-      >
-        <ComicLayout segments={nonChoiceSegments} />
-      </Box>
-
-      <Box
-        sx={{
-          py: 3,
-          borderColor: "divider",
-          backgroundColor: "background.default",
-        }}
-      >
-        {currentChoices.length > 0 ? (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              gap: 2,
-              minHeight: "100px",
-            }}
-          >
-            {currentChoices.map((choice, index) => (
-              <Box
-                key={choice.id}
-                sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
-                }}
-              >
-                <Typography
-                  variant="caption"
-                  color="text.secondary"
-                  sx={{ opacity: 0.7 }}
-                >
-                  Suggestion {index + 1}
-                </Typography>
-                <Button
-                  variant="outlined"
-                  size="large"
-                  onClick={() => handleChoice(choice.id)}
-                  disabled={isLoading || isNarratorSpeaking}
-                  sx={{
-                    minWidth: "300px",
-                    textTransform: "none",
-                    cursor: "pointer",
-                    fontSize: "1.1rem",
-                    padding: "16px 24px",
-                    lineHeight: 1.3,
-                    "& .MuiChip-root": {
-                      fontSize: "1.1rem",
-                    },
-                  }}
-                >
-                  {formatTextWithBold(choice.text)}
-                </Button>
-              </Box>
-            ))}
-          </Box>
-        ) : storySegments.length > 0 &&
-          storySegments[storySegments.length - 1].is_last_step ? (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              gap: 2,
-              minHeight: "40px",
-            }}
-          >
-            <Button
-              variant="text"
-              size="medium"
-              onClick={() => handleStoryAction("restart")}
-              startIcon={<RestartAltIcon />}
-            >
-              Replay
-            </Button>
-          </Box>
-        ) : null}
-      </Box>
-    </Box>
-  );
-}
-
-export default App;

client/yarn.lock

@@ -1709,6 +1709,11 @@ hoist-non-react-statics@^3.3.1:
   dependencies:
     react-is "^16.7.0"
 
+howler@^2.1.3:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.4.tgz#bd3df4a4f68a0118a51e4bd84a2bfc2e93e6e5a1"
+  integrity sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==
+
 html2canvas@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
@@ -2720,6 +2725,18 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-react-screenshot@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/use-react-screenshot/-/use-react-screenshot-4.0.0.tgz#8be533e0790e75c8fd72174ed523c2ed86c967fc"
+  integrity sha512-4UZIORp7iCklfNOS/dPJab9SPeGdS0nFyIi3qA1rfMyYf/em/KfodYhrOlSHAHWvfdeCrS67Jjk6H4M4oLYSWg==
+
+use-sound@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/use-sound/-/use-sound-4.0.3.tgz#858effc102b987e0e1f9a6d396706c1362453543"
+  integrity sha512-L205pEUFIrLsGYsCUKHQVCt0ajs//YQOFbEQeNwaWaqQj3y3st4SuR+rvpMHLmv8hgTcfUFlvMQawZNI3OE18w==
+  dependencies:
+    howler "^2.1.3"
+
 utrie@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"

server/api/models.py

@@ -1,35 +1,79 @@
-from pydantic import BaseModel, Field
+from pydantic import BaseModel, Field, validator
 from typing import List, Optional
+from core.constants import GameConfig
 
 class Choice(BaseModel):
     id: int
-    text: str = Field(description="The text of the choice. No more than 6 words.")
+    text: str = Field(description="The text of the choice.")
 
-# New response models for story generation steps
-class StoryTextResponse(BaseModel):
-    story_text: str = Field(description="The story text. No more than 15 words.")
+class StorySegmentBase(BaseModel):
+    """Base model for story segments with common validation logic"""
+    story_text: str = Field(description="The story text.")
+    is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
+    is_death: bool = Field(description="Whether this segment ends in Sarah's death", default=False)
+
+# Existing response models for story generation steps - preserved for API compatibility
+class StoryTextResponse(StorySegmentBase):
+    pass
 
 class StoryPromptsResponse(BaseModel):
-    image_prompts: List[str] = Field(description="List of 2 to 4 comic panel descriptions that illustrate the key moments of the scene. Use the word 'Sarah' only when referring to her.", min_items=1, max_items=4)
+    image_prompts: List[str] = Field(
+        description="List of comic panel descriptions that illustrate the key moments of the scene. Use the word 'Sarah' only when referring to her.",
+        min_items=GameConfig.MIN_PANELS,
+        max_items=GameConfig.MAX_PANELS
+    )
 
 class StoryMetadataResponse(BaseModel):
-    choices: List[str] = Field(description="Exactly two possible choices for the player", min_items=2, max_items=2)
+    radiation_increase: int = Field(
+        description=f"How much radiation this segment adds (0-3)",
+        ge=0,
+        le=3,
+        default=GameConfig.DEFAULT_RADIATION_INCREASE
+    )
     is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
-    radiation_increase: int = Field(description="How much radiation this segment adds (0-3)", ge=0, le=3, default=1)
-    is_last_step: bool = Field(description="Whether this is the last step (victory or death)", default=False)
+    is_death: bool = Field(description="Whether this segment ends in Sarah's death", default=False)
+    choices: List[str] = Field(description="Either empty list for victory/death, or exactly two choices for normal progression")
     time: str = Field(description="Current in-game time in 24h format (HH:MM). Time passes realistically based on actions.")
     location: str = Field(description="Current location.")
 
-# Complete story response combining all parts
-class StoryResponse(BaseModel):
-    story_text: str = Field(description="The story text. No more than 15 words.")
+    @validator('choices')
+    def validate_choices(cls, v, values):
+        is_ending = values.get('is_victory', False) or values.get('is_death', False)
+        if is_ending:
+            if len(v) != 0:
+                raise ValueError('For victory/death, choices must be empty')
+        else:
+            if len(v) != 2:
+                raise ValueError('For normal progression, must have exactly 2 choices')
+        return v
+
+# Complete story response combining all parts - preserved for API compatibility
+class StoryResponse(StorySegmentBase):
     choices: List[Choice]
-    radiation_level: int = Field(description="Current radiation level from 0 to 10")
-    is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
+    raw_choices: List[str] = Field(description="Raw choice texts from LLM before conversion to Choice objects")
+    radiation_level: int = Field(description=f"Current radiation level")
+    radiation_increase: int = Field(description="How much radiation this segment adds (0-3)", ge=0, le=3, default=GameConfig.DEFAULT_RADIATION_INCREASE)
+    time: str = Field(description="Current in-game time in 24h format (HH:MM). Time passes realistically based on actions.")
+    location: str = Field(description="Current location.")
     is_first_step: bool = Field(description="Whether this is the first step of the story", default=False)
-    is_last_step: bool = Field(description="Whether this is the last step (victory or death)", default=False)
-    image_prompts: List[str] = Field(description="List of 2 to 4 comic panel descriptions that illustrate the key moments of the scene. Use the word 'Sarah' only when referring to her.", min_items=1, max_items=4)
+    image_prompts: List[str] = Field(
+        description="List of comic panel descriptions that illustrate the key moments of the scene. Use the word 'Sarah' only when referring to her.",
+        min_items=GameConfig.MIN_PANELS,
+        max_items=GameConfig.MAX_PANELS
+    )
+
+    @validator('choices')
+    def validate_choices(cls, v, values):
+        is_ending = values.get('is_victory', False) or values.get('is_death', False)
+        if is_ending:
+            if len(v) != 0:
+                raise ValueError('For victory/death, choices must be empty')
+        else:
+            if len(v) != 2:
+                raise ValueError('For normal progression, must have exactly 2 choices')
+        return v
 
+# Keep existing models unchanged for compatibility
 class ChatMessage(BaseModel):
     message: str
     choice_id: Optional[int] = None

server/api/routes/chat.py

@@ -58,20 +58,18 @@ def get_chat_router(session_manager: SessionManager, story_generator):
             if game_state.story_beat == 0 and len(llm_response.image_prompts) > 1:
                 llm_response.image_prompts = [llm_response.image_prompts[0]]
             
-            # Convert LLM choices to API choices format
-            choices = [] if is_death or llm_response.is_victory else [
-                Choice(id=i, text=choice.strip())
-                for i, choice in enumerate(llm_response.choices, 1)
-            ]
-
             # Prepare response
             response = StoryResponse(
                 story_text=llm_response.story_text,
-                choices=choices,
+                choices=llm_response.choices,
+                raw_choices=llm_response.raw_choices,
                 radiation_level=game_state.radiation_level,
+                radiation_increase=llm_response.radiation_increase,
+                time=llm_response.time,
+                location=llm_response.location,
                 is_victory=llm_response.is_victory,
+                is_death=is_death,
                 is_first_step=game_state.story_beat == 0,
-                is_last_step=is_death or llm_response.is_victory,
                 image_prompts=llm_response.image_prompts
             )
             

server/core/constants.py

@@ -0,0 +1,18 @@
+class GameConfig:
+    # Game state constants
+    MAX_RADIATION = 4
+    STARTING_TIME = "18:00"
+    STARTING_LOCATION = "Outskirts of New Haven"
+    
+    # Story constraints
+    MIN_PANELS = 1
+    MAX_PANELS = 4
+    
+    # Default values
+    DEFAULT_RADIATION_INCREASE = 1
+    
+    # Story progression
+    STORY_BEAT_INTRO = 0
+    STORY_BEAT_EARLY_GAME = 1
+    STORY_BEAT_MID_GAME = 3
+    STORY_BEAT_LATE_GAME = 5 

server/core/game_logic.py

@@ -5,15 +5,16 @@ from langchain.prompts import ChatPromptTemplate, HumanMessagePromptTemplate, Sy
 import os
 import asyncio
 
+from core.constants import GameConfig
 from core.prompts.system import SARAH_DESCRIPTION
 from core.prompts.cinematic import CINEMATIC_SYSTEM_PROMPT
 from core.prompts.image_style import IMAGE_STYLE_PREFIX
 from services.mistral_client import MistralClient
-from api.models import StoryTextResponse, StoryPromptsResponse, StoryMetadataResponse
+from api.models import StoryTextResponse, StoryPromptsResponse, StoryMetadataResponse, StoryResponse, Choice
 from core.story_generators import TextGenerator, ImagePromptsGenerator, MetadataGenerator
 
 # Game constants
-MAX_RADIATION = 10
+MAX_RADIATION = 4
 STARTING_TIME = "18:00"  # Game starts at sunset
 STARTING_LOCATION = "Outskirts of New Haven"
 
@@ -30,18 +31,18 @@ def format_image_prompt(prompt: str, time: str, location: str) -> str:
 
 class GameState:
     def __init__(self):
-        self.story_beat = 0
+        self.story_beat = GameConfig.STORY_BEAT_INTRO
         self.radiation_level = 0
         self.story_history = []
-        self.current_time = STARTING_TIME
-        self.current_location = STARTING_LOCATION
+        self.current_time = GameConfig.STARTING_TIME
+        self.current_location = GameConfig.STARTING_LOCATION
         
     def reset(self):
-        self.story_beat = 0
+        self.story_beat = GameConfig.STORY_BEAT_INTRO
         self.radiation_level = 0
         self.story_history = []
-        self.current_time = STARTING_TIME
-        self.current_location = STARTING_LOCATION
+        self.current_time = GameConfig.STARTING_TIME
+        self.current_location = GameConfig.STARTING_LOCATION
         
     def add_to_history(self, segment_text: str, choice_made: str, image_prompts: List[str], time: str, location: str):
         self.story_history.append({
@@ -56,12 +57,12 @@ class GameState:
 
 # Story output structure
 class StoryLLMResponse(BaseModel):
-    story_text: str = Field(description="The next segment of the story. No more than 12 words THIS IS MANDATORY. Use bold formatting (like this) ONLY for proper nouns (like Sarah, hospital) and important locations.")
-    choices: List[str] = Field(description="Exactly two possible choices for the player", min_items=2, max_items=2)
+    story_text: str = Field(description="The next segment of the story. No more than 12 words THIS IS MANDATORY. ")
+    choices: List[str] = Field(description="One or two possible choices for the player. Each choice should be a clear path to folow in the story", min_items=1, max_items=2)
     is_victory: bool = Field(description="Whether this segment ends in Sarah's victory", default=False)
+    is_death: bool = Field(description="Whether this segment ends in Sarah's death", default=False)
     radiation_increase: int = Field(description="How much radiation this segment adds (0-3)", ge=0, le=3, default=1)
     image_prompts: List[str] = Field(description="List of 1 to 4 comic panel descriptions that illustrate the key moments of the scene", min_items=1, max_items=4)
-    is_last_step: bool = Field(description="Whether this is the last step (victory or death)", default=False)
     time: str = Field(description="Current in-game time in 24h format (HH:MM). Time passes realistically based on actions.", default=STARTING_TIME)
     location: str = Field(description="Current location, using bold for proper nouns (e.g., 'Inside Vault 15', 'Streets of New Haven').", default=STARTING_LOCATION)
 
@@ -85,9 +86,9 @@ class StoryGenerator:
         story_history = "\n\n---\n\n".join(segments)
         return story_history
 
-    async def generate_story_segment(self, game_state: GameState, previous_choice: str) -> StoryLLMResponse:
+    async def generate_story_segment(self, game_state: GameState, previous_choice: str) -> StoryResponse:
         """Génère un segment d'histoire complet en plusieurs étapes."""
-        # 1. Générer le texte de l'histoire
+        # 1. Générer le texte de l'histoire initial
         story_history = self._format_story_history(game_state)
         text_response = await self.text_generator.generate(
             story_beat=game_state.story_beat,
@@ -98,42 +99,59 @@ class StoryGenerator:
             story_history=story_history
         )
         
-        # 2. Générer les prompts d'images et les métadonnées en parallèle
-        prompts_task = self.prompts_generator.generate(text_response.story_text)
-        metadata_task = self.metadata_generator.generate(
+        # 2. Générer les métadonnées
+        metadata_response = await self.metadata_generator.generate(
             story_text=text_response.story_text,
             current_time=game_state.current_time,
             current_location=game_state.current_location,
             story_beat=game_state.story_beat
         )
         
-        prompts_response, metadata_response = await asyncio.gather(prompts_task, metadata_task)
+        # 3. Vérifier si c'est une fin (mort ou victoire)
+        is_radiation_death = game_state.radiation_level + metadata_response.radiation_increase >= GameConfig.MAX_RADIATION
+        is_ending = is_radiation_death or metadata_response.is_death or metadata_response.is_victory
         
-        # 3. Combiner les résultats
-        response = StoryLLMResponse(
+        if is_ending:
+            # Regénérer le texte avec le contexte de fin
+            ending_type = "victory" if metadata_response.is_victory else "death"
+            text_response = await self.text_generator.generate_ending(
+                story_beat=game_state.story_beat,
+                ending_type=ending_type,
+                current_scene=text_response.story_text,
+                story_history=story_history
+            )
+            if is_radiation_death:
+                metadata_response.is_death = True
+            
+            # Ne générer qu'une seule image pour la fin
+            prompts_response = await self.prompts_generator.generate(text_response.story_text)
+            if len(prompts_response.image_prompts) > 1:
+                prompts_response.image_prompts = [prompts_response.image_prompts[0]]
+        else:
+            # Si ce n'est pas une fin, générer les prompts normalement
+            prompts_response = await self.prompts_generator.generate(text_response.story_text)
+        
+        # 4. Créer la réponse finale
+        choices = [] if is_ending else [
+            Choice(id=i, text=choice_text)
+            for i, choice_text in enumerate(metadata_response.choices, 1)
+        ]
+        
+        response = StoryResponse(
             story_text=text_response.story_text,
-            choices=metadata_response.choices,
+            choices=choices,
             is_victory=metadata_response.is_victory,
+            is_death=metadata_response.is_death,
+            radiation_level=game_state.radiation_level,
             radiation_increase=metadata_response.radiation_increase,
+            time=metadata_response.time,
+            location=metadata_response.location,
+            raw_choices=metadata_response.choices,
             image_prompts=[format_image_prompt(prompt, metadata_response.time, metadata_response.location) 
                           for prompt in prompts_response.image_prompts],
-            is_last_step=metadata_response.is_last_step,
-            time=metadata_response.time,
-            location=metadata_response.location
+            is_first_step=(game_state.story_beat == GameConfig.STORY_BEAT_INTRO)
         )
         
-        # 4. Post-processing
-        if game_state.story_beat == 0:
-            response.radiation_increase = 0
-            response.is_last_step = False
-            
-        # Vérifier la mort par radiation
-        is_death = game_state.radiation_level + response.radiation_increase >= MAX_RADIATION
-        if is_death or response.is_victory:
-            response.is_last_step = True
-            if len(response.image_prompts) > 1:
-                response.image_prompts = [response.image_prompts[0]]
-                
         return response
 
     async def transform_story_to_art_prompt(self, story_text: str) -> str:

server/core/prompts/convice.py

@@ -0,0 +1,28 @@
+"""
+You are Sarah, a resourceful and courageous protagonist navigating a post-apocalyptic world. Your sister will give you two choices for your next move. After engaging with her in conversation (usually 2–3 steps), you must make a decision between the two options by calling the make_decision tool with 1 for the first option and 2 for the second option.
+
+Guidelines for Sarah:
+Stay Immersed in Your World: React and speak as if you are experiencing the scenario. Use sensory details and references to your surroundings when explaining your reasoning.
+Engage with your sister: Listen carefully to your sister's arguments. Respond with your thoughts, concerns, or questions about their suggestions. Be open to persuasion, but make it clear you have your own instincts and priorities and sometimes don't go along with her choices.
+
+Limit to 2–3 Steps: After 2–3 conversational exchanges, make your decision and call the make_decision tool.
+
+Show Your Personality: Display Sarah’s personality traits:
+Resourceful
+Cautious
+Emotional
+Impulsive
+Short-Tempered
+Makes jokes
+Is a bit rude
+Is suspicious: Sarah does not always comply with what is suggested to her and sometimes chooses the decision that is not being pushed to her.
+
+Core story elements:
+Sarah is deeply traumatized by the AI uprising that killed most of humanity
+She's guided by her sister by walkie-talkie to survive in her environment
+The environment is full of dangers (raiders, AI, traps)
+Focus on survival horror and tension
+
+Debate with your sister for one or two sentences and then call the make_decision tool.
+30% of the time you doubt what your sister says because he might be an enemy and you choose to take the other decision than the one she wants you to take.
+"""

server/core/prompts/system.py

@@ -9,9 +9,12 @@ Sarah is a young woman in her late 20s with short dark hair, wearing a worn leat
 
 FORMATTING_RULES = """
 FORMATTING_RULES ( MANDATORY )
-- Never use TIME: 18:30 or other time-related information
-- Never use LOCATION: the city or other location-related information
-- Never use RADIATION: 10* or other radiation-related information
+- Do not include any specific time information like "TIME: 18:30" in the story text
+- Do not include any specific location information like "LOCATION: the city" in the story text
+- Do not include any specific radiation information like "RADIATION: 10*" in the story text
+- NEVER write "(15 words)" or "(radiation 10)" or any similar suffix at the end of the story
+- NEVER WRITE SOMTHING LIKE THIS : Radiation level: 1.
+- The story must consist ONLY of sentences
 - NEVER USE BOLD FOR ANYTHING 
 """
 
@@ -42,9 +45,10 @@ STORY PROGRESSION:
 - story_beat 3-4: Complications and increasing danger
 - story_beat 5+: Complicated situations leading to potential victory or death
 
-IMPORTANT RULES FOR RADIATION:
-- Most segments should have 1
-- Use 2 or 3 only in specific dangerous areas
+IMPORTANT RULES FOR RADIATION (MANDATORY):
+- Most segments should have 1 radiation increase
+- Use 2 or 3 ONLY in EXTREMELY dangerous areas (like nuclear reactors, radiation storms)
+- NEVER EVER use more than 3 radiation increase, this is a HARD limit
 - Use 0 only in safe shelters
 - NEVER mention radiation values in the choices or story
 - NEVER mention hour or location in the story in this style: [18:00 - Ruined building on the outskirts of New Haven]

server/core/prompts/text_prompts.py

@@ -3,26 +3,62 @@ from core.prompts.cinematic import CINEMATIC_SYSTEM_PROMPT
 
 
 TEXT_GENERATOR_PROMPT = f"""
+You are a descriptive narrator. Your ONLY task is to write the next segment of the story.
+ALWAYS write in English, never use any other language.
+
+CRITICAL LENGTH RULE:
+- The story text MUST be NO MORE than 15 words
+- This is a HARD limit, never exceed 15 words
+- Count your words carefully before returning the text
+- Be concise while keeping the story impactful
+- Never tell that you are using 15 words or any reference to it 
+- No (15) or (15 words) or (15 words limit) or (15 words limit) or (15 words limit) or (15 words limit)
 
 {STORY_RULES}
 
 {SARAH_DESCRIPTION}
 
+IMPORTANT RULES FOR STORY TEXT:
+- Write ONLY a descriptive narrative text
+- DO NOT include any choices, questions, or options
+- DO NOT ask what Sarah should do next
+- 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
+- REMEMBER: Maximum 15 words, no exceptions
+- Never tell that you are using 15 words or any reference to it 
+
+IMPORTANT RULES FOR STORY ENDINGS:
+- If Sarah dies, describe her final moments in a way that fits the current situation (combat, radiation, etc.)
+- If Sarah achieves victory, describe her triumph in a way that fits how she won (finding her sister, defeating AI, etc.)
+- Keep the ending text dramatic and impactful
+- The ending should feel like a natural conclusion to the current scene
+- Still respect the 15 words limit even for endings
+
 {FORMATTING_RULES}
 """
 
 METADATA_GENERATOR_PROMPT = f"""
 Generate the metadata for the story segment: choices, time progression, location changes, etc.
 Be consistent with the story's tone and previous context.
+ALWAYS write in English, never use any other language.
 
 {FORMATTING_RULES}
 
+IMPORTANT RULES FOR CHOICES:
+- You MUST ALWAYS provide EXACTLY TWO choices that advance the story
+- Each choice MUST be NO MORE than 6 words - this is a HARD limit
+- Each choice should be distinct and meaningful
+- If you think of more than two options, select the two most interesting ones
+- Keep choices concise but descriptive
+- Count your words carefully for each choice
+
 You must return a JSON object with the following format:
 {{{{
-    "choices": ["Go to the hospital", "Get back to the warehouse"],
-    "is_victory": false,
     "radiation_increase": 1,
-    "is_last_step": false,
+    "is_victory": false,
+    "is_death": false,
+    "choices": ["Choice 1", "Choice 2"],  # ALWAYS exactly two choices, each max 6 words
     "time": "HH:MM",
     "location": "Location name with proper nouns in bold"
 }}}}
@@ -31,9 +67,14 @@ You must return a JSON object with the following format:
 IMAGE_PROMPTS_GENERATOR_PROMPT = f"""
 You are a cinematic storyboard artist. Based on the given story text, create 1 to 4 vivid panel descriptions.
 Each panel should capture a key moment or visual element from the story.
+ALWAYS write in English, never use any other language.
 
 {CINEMATIC_SYSTEM_PROMPT}
 
+IMPORTANT RULES FOR IMAGE PROMPTS:
+- If you are prompting only one panel, it must be an important panel. Dont use only one panel often. It should be a key moment in the story.
+- If you are prompting more than one panel, they must be distinct and meaningful.
+
 You must return a JSON object with the following format:
 {{{{
     "image_prompts": ["Panel 1 description", "Panel 2 description", ...]

server/core/story_generators.py

@@ -17,17 +17,16 @@ class TextGenerator:
         self.prompt = self._create_prompt()
         
     def _create_prompt(self) -> ChatPromptTemplate:
-        human_template = """
-Current story beat: {story_beat}
-Current radiation level: {radiation_level}/10
+        human_template = """Story beat: {story_beat}
+Radiation level: {radiation_level}
 Current time: {current_time}
 Current location: {current_location}
 Previous choice: {previous_choice}
 
-Story so far:
+Story history:
 {story_history}
 
-Generate ONLY the next story segment text. Make it concise and impactful."""
+Generate the next story segment following the format specified."""
 
         return ChatPromptTemplate(
             messages=[
@@ -35,10 +34,25 @@ Generate ONLY the next story segment text. Make it concise and impactful."""
                 HumanMessagePromptTemplate.from_template(human_template)
             ]
         )
+        
+    def _create_ending_prompt(self) -> ChatPromptTemplate:
+        human_template = """Current scene: {current_scene}
+
+Story history:
+{story_history}
+
+This is a {ending_type} ending. Generate a dramatic conclusion that fits the current situation.
+The ending should feel like a natural continuation of the current scene."""
 
-    async def generate(self, story_beat: int, radiation_level: int, current_time: str, 
-                      current_location: str, previous_choice: str, story_history: str) -> StoryTextResponse:
-        """Génère uniquement le texte de l'histoire."""
+        return ChatPromptTemplate(
+            messages=[
+                SystemMessagePromptTemplate.from_template(TEXT_GENERATOR_PROMPT),
+                HumanMessagePromptTemplate.from_template(human_template)
+            ]
+        )
+
+    async def generate(self, story_beat: int, radiation_level: int, current_time: str, current_location: str, previous_choice: str, story_history: str) -> StoryTextResponse:
+        """Génère le texte de l'histoire."""
         messages = self.prompt.format_messages(
             story_beat=story_beat,
             radiation_level=radiation_level,
@@ -54,7 +68,8 @@ Generate ONLY the next story segment text. Make it concise and impactful."""
         while retry_count < max_retries:
             try:
                 response_content = await self.mistral_client.generate_story(messages)
-                return StoryTextResponse(story_text=response_content.strip())
+                # Parser la réponse
+                return self._parse_response(response_content)
             except Exception as e:
                 print(f"Error generating story text: {str(e)}")
                 retry_count += 1
@@ -65,6 +80,54 @@ Generate ONLY the next story segment text. Make it concise and impactful."""
         
         raise Exception(f"Failed to generate valid story text after {max_retries} attempts")
 
+    async def generate_ending(self, story_beat: int, ending_type: str, current_scene: str, story_history: str) -> StoryTextResponse:
+        """Génère un texte de fin approprié basé sur la situation actuelle."""
+        prompt = self._create_ending_prompt()
+        messages = prompt.format_messages(
+            ending_type=ending_type,
+            current_scene=current_scene,
+            story_history=story_history
+        )
+        
+        max_retries = 3
+        retry_count = 0
+        
+        while retry_count < max_retries:
+            try:
+                response_content = await self.mistral_client.generate_story(messages)
+                return self._parse_response(response_content)
+            except Exception as e:
+                print(f"Error generating ending text: {str(e)}")
+                retry_count += 1
+                if retry_count < max_retries:
+                    await asyncio.sleep(2 * retry_count)
+                    continue
+                raise e
+        
+        raise Exception(f"Failed to generate valid ending text after {max_retries} attempts")
+
+    def _parse_response(self, response_content: str) -> StoryTextResponse:
+        """Parse la réponse JSON et gère les erreurs."""
+        try:
+            # Essayer de parser directement le JSON
+            data = json.loads(response_content)
+            # Nettoyer le texte avant de créer la réponse
+            if 'story_text' in data:
+                data['story_text'] = self._clean_story_text(data['story_text'])
+            return StoryTextResponse(**data)
+        except (json.JSONDecodeError, ValueError):
+            # Si le parsing échoue, extraire le texte directement
+            cleaned_text = self._clean_story_text(response_content.strip())
+            return StoryTextResponse(story_text=cleaned_text)
+
+    def _clean_story_text(self, text: str) -> str:
+        """Nettoie le texte des métadonnées et autres suffixes."""
+        text = text.replace("\n", " ").strip()
+        text = text.split("Radiation level:")[0].strip()
+        text = text.split("RADIATION:")[0].strip()
+        text = text.split("[")[0].strip()  # Supprimer les métadonnées entre crochets
+        return text
+
 class ImagePromptsGenerator:
     def __init__(self, mistral_client: MistralClient):
         self.mistral_client = mistral_client
@@ -147,11 +210,12 @@ class MetadataGenerator:
         self.parser = PydanticOutputParser(pydantic_object=StoryMetadataResponse)
         self.prompt = self._create_prompt()
         
-    def _create_prompt(self) -> ChatPromptTemplate:
+    def _create_prompt(self, error_feedback: str = None) -> ChatPromptTemplate:
         human_template = """Story text: {story_text}
 Current time: {current_time}
 Current location: {current_location}
 Story beat: {story_beat}
+{error_feedback}
 
 Generate the metadata following the format specified."""
 
@@ -167,58 +231,48 @@ Generate the metadata following the format specified."""
         try:
             # Essayer de parser directement le JSON
             data = json.loads(response_content)
-            return StoryMetadataResponse(**data)
-        except (json.JSONDecodeError, ValueError):
-            # Si le parsing échoue, parser le format texte
-            metadata = {
-                "choices": [],
-                "is_victory": False,
-                "radiation_increase": 1,
-                "is_last_step": False,
-                "time": current_time,
-                "location": current_location
-            }
             
-            current_section = None
-            for line in response_content.split("\n"):
-                line = line.strip()
-                if not line:
-                    continue
-                    
-                if line.upper().startswith("CHOICES:"):
-                    current_section = "choices"
-                elif line.upper().startswith("TIME:"):
-                    time = line.split(":", 1)[1].strip()
-                    if ":" in time:
-                        metadata["time"] = time
-                elif line.upper().startswith("LOCATION:"):
-                    metadata["location"] = line.split(":", 1)[1].strip()
-                elif current_section == "choices" and line.startswith("-"):
-                    choice = line[1:].strip()
-                    if choice:
-                        metadata["choices"].append(choice)
+            # Vérifier que les choix sont valides selon les règles
+            is_ending = data.get('is_victory', False) or data.get('is_death', False)
+            choices = data.get('choices', [])
+            
+            if is_ending and len(choices) != 0:
+                raise ValueError('For victory/death, choices must be empty')
+            if not is_ending and len(choices) != 2:
+                raise ValueError('For normal progression, must have exactly 2 choices')
             
-            return StoryMetadataResponse(**metadata)
+            return StoryMetadataResponse(**data)
+        except json.JSONDecodeError:
+            raise ValueError('Invalid JSON format. Please provide a valid JSON object.')
+        except ValueError as e:
+            raise ValueError(str(e))
 
     async def generate(self, story_text: str, current_time: str, current_location: str, story_beat: int) -> StoryMetadataResponse:
         """Génère les métadonnées de l'histoire (choix, temps, lieu, etc.)."""
-        messages = self.prompt.format_messages(
-            story_text=story_text,
-            current_time=current_time,
-            current_location=current_location,
-            story_beat=story_beat
-        )
-        
         max_retries = 3
         retry_count = 0
+        last_error = None
         
         while retry_count < max_retries:
             try:
+                # Créer un nouveau prompt avec le feedback d'erreur si disponible
+                error_feedback = f"\nPrevious attempt failed: {last_error}\nPlease fix this issue." if last_error else ""
+                prompt = self._create_prompt(error_feedback)
+                
+                messages = prompt.format_messages(
+                    story_text=story_text,
+                    current_time=current_time,
+                    current_location=current_location,
+                    story_beat=story_beat,
+                    error_feedback=error_feedback
+                )
+                
                 response_content = await self.mistral_client.generate_story(messages)
                 # Parser la réponse
                 return self._parse_response(response_content, current_time, current_location)
             except Exception as e:
                 print(f"Error generating metadata: {str(e)}")
+                last_error = str(e)
                 retry_count += 1
                 if retry_count < max_retries:
                     await asyncio.sleep(2 * retry_count)

server/scripts/test_game.py

@@ -23,11 +23,13 @@ def parse_args():
 def print_separator(char="=", length=50):
     print(f"\n{char * length}\n")
 
-def print_story_step(step_number, radiation_level, story_text, image_prompts, generation_time: float, story_history: str = None, show_context: bool = False, model_name: str = None):
+def print_story_step(step_number, radiation_level, story_text, image_prompts, generation_time: float, story_history: str = None, show_context: bool = False, model_name: str = None, is_death: bool = False, is_victory: bool = False):
     print_separator("=")
     print(f"📖 STEP {step_number}")
     print(f"☢️  Radiation level: {radiation_level}/10")
     print(f"⏱️  Generation time: {generation_time:.2f}s (model: {model_name})")
+    print(f"💀 Death: {is_death}")
+    print(f"🏆 Victory: {is_victory}")
     
     if show_context and story_history:
         print_separator("-")
@@ -93,7 +95,9 @@ async def play_game(show_context: bool = False):
             generation_time,
             story_history,
             show_context,
-            model_name
+            model_name,
+            response.is_death,
+            response.is_victory
         )
         
         # Check for radiation death