Spaces:

Mistral-AI-Game-Jam
/

ai-interactive-comic-book

Running

App Files Files Community

tfrere HF Staff commited on Jan 27, 2025

Commit

2ea78fe

1 Parent(s): 2e787a2

update

Browse files

Files changed (7) hide show

.DS_Store +0 -0
client/index.html +10 -2
client/src/components/StoryChoices.jsx +5 -5
client/src/index.css +0 -1
client/src/pages/Game.jsx +134 -99
client/src/pages/Home.jsx +69 -9
client/src/pages/Tutorial.jsx +161 -58

.DS_Store CHANGED Viewed

Binary files a/.DS_Store and b/.DS_Store differ

client/index.html CHANGED Viewed

@@ -1,10 +1,18 @@
-<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
   </head>
   <body>
     <div id="root"></div>

+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sarah's Chronicles</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background-color: #121212; /* MUI dark theme background color */
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

client/src/components/StoryChoices.jsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import { Box, Button, Typography, Chip } from "@mui/material";
-import { useStoryCapture } from "../hooks/useStoryCapture";
 // Function to convert text with ** to Chip elements
 const formatTextWithBold = (text) => {
@@ -33,8 +32,6 @@ export function StoryChoices({
   isGameOver = false,
   containerRef,
 }) {
-  const { captureStory } = useStoryCapture();
   console.log("ICI", isLastStep, isGameOver);
   if (isGameOver) {
     return (
@@ -65,7 +62,10 @@ export function StoryChoices({
         <Button
           variant="outlined"
           size="large"
-          onClick={() => captureStory(containerRef)}
           sx={{
             width: "100%",
             textTransform: "none",
@@ -137,7 +137,7 @@ export function StoryChoices({
           }}
         >
           <Typography variant="caption" sx={{ opacity: 0.7, color: "white" }}>
-            Suggestion {index + 1}
           </Typography>
           <Button
             variant="outlined"

 import { Box, Button, Typography, Chip } from "@mui/material";
 // Function to convert text with ** to Chip elements
 const formatTextWithBold = (text) => {
   isGameOver = false,
   containerRef,
 }) {
   console.log("ICI", isLastStep, isGameOver);
   if (isGameOver) {
     return (
         <Button
           variant="outlined"
           size="large"
+          onClick={() => {
+            // Simulate a button click on another button with the id "targetButton"
+            document.getElementById("printButton").click();
+          }}
           sx={{
             width: "100%",
             textTransform: "none",
           }}
         >
           <Typography variant="caption" sx={{ opacity: 0.7, color: "white" }}>
+            Choice {index + 1}
           </Typography>
           <Button
             variant="outlined"

client/src/index.css CHANGED Viewed

@@ -25,7 +25,6 @@ html,
 body,
 #root {
   min-height: 100vh;
-  background-color: #f5f5f5;
   overflow: hidden;
   font-weight: bold;
 }

 body,
 #root {
   min-height: 100vh;
   overflow: hidden;
   font-weight: bold;
 }

client/src/pages/Game.jsx CHANGED Viewed

@@ -1,5 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { Box, LinearProgress, IconButton, Tooltip } from "@mui/material";
 import { ComicLayout } from "../layouts/ComicLayout";
 import { storyApi } from "../utils/api";
 import { useNarrator } from "../hooks/useNarrator";
@@ -10,7 +12,8 @@ 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
@@ -34,6 +37,7 @@ const stripBoldMarkers = (text) => {
 };
 export function Game() {
   const storyContainerRef = useRef(null);
   const { downloadStoryImage } = useStoryCapture();
   const [storySegments, setStorySegments] = useState([]);
@@ -61,6 +65,11 @@ export function Game() {
     handleStoryAction("restart");
   }, []);
   const handleChoice = async (choiceId) => {
     playPageSound();
@@ -275,114 +284,140 @@ export function Game() {
   };
   return (
-    <Box
-      ref={storyContainerRef}
-      sx={{
-        height: "100vh",
-        width: "100vw",
-        backgroundColor: "#1a1a1a",
-        position: "relative",
-        overflow: "hidden",
-      }}
     >
-      {isLoading && (
-        <LinearProgress
-          sx={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 1000,
-          }}
-        />
-      )}
-      {error ? (
-        <ErrorDisplay
-          message={error}
-          onRetry={() => {
-            if (storySegments.length === 0) {
-              handleStoryAction("restart");
-            } else {
-              handleStoryAction(
-                "choice",
-                storySegments[storySegments.length - 1]?.choiceId || null
-              );
-            }
-          }}
-        />
-      ) : (
-        <>
-          <ComicLayout
-            segments={storySegments}
-            choices={showChoices ? currentChoices : []}
-            onChoice={handleChoice}
-            isLoading={isLoading}
-            showScreenshot={storySegments.length > 0}
-            onScreenshot={handleCaptureStory}
           />
-          {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>
   );
 }

 import { useState, useEffect, useRef } from "react";
 import { Box, LinearProgress, IconButton, Tooltip } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
 import { ComicLayout } from "../layouts/ComicLayout";
 import { storyApi } from "../utils/api";
 import { useNarrator } from "../hooks/useNarrator";
 import { ErrorDisplay } from "../components/ErrorDisplay";
 import VolumeUpIcon from "@mui/icons-material/VolumeUp";
 import VolumeOffIcon from "@mui/icons-material/VolumeOff";
+import PhotoCameraOutlinedIcon from "@mui/icons-material/PhotoCameraOutlined";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { getNextLayoutType, LAYOUTS } from "../layouts/config";
 // Constants
 };
 export function Game() {
+  const navigate = useNavigate();
   const storyContainerRef = useRef(null);
   const { downloadStoryImage } = useStoryCapture();
   const [storySegments, setStorySegments] = useState([]);
     handleStoryAction("restart");
   }, []);
+  const handleBack = () => {
+    playPageSound();
+    navigate("/tutorial");
+  };
   const handleChoice = async (choiceId) => {
     playPageSound();
   };
   return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3, ease: "easeInOut" }}
+      style={{ backgroundColor: "#121212", width: "100%" }}
     >
+      <Box
+        ref={storyContainerRef}
+        sx={{
+          height: "100vh",
+          width: "100vw",
+          backgroundColor: "#1a1a1a",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {isLoading && (
+          <LinearProgress
+            sx={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              zIndex: 1000,
+            }}
           />
+        )}
+        <Tooltip title="Back to tutorial">
+          <IconButton
+            onClick={handleBack}
             sx={{
+              position: "absolute",
               top: 16,
+              left: 16,
+              color: "white",
               backgroundColor: "rgba(0, 0, 0, 0.5)",
+              "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+              },
+              zIndex: 1000,
             }}
           >
+            <ArrowBackIcon />
+          </IconButton>
+        </Tooltip>
+        {error ? (
+          <ErrorDisplay
+            message={error}
+            onRetry={() => {
+              if (storySegments.length === 0) {
+                handleStoryAction("restart");
+              } else {
+                handleStoryAction(
+                  "choice",
+                  storySegments[storySegments.length - 1]?.choiceId || null
+                );
               }
+            }}
+          />
+        ) : (
+          <>
+            <ComicLayout
+              segments={storySegments}
+              choices={showChoices ? currentChoices : []}
+              onChoice={handleChoice}
+              isLoading={isLoading}
+              showScreenshot={storySegments.length > 0}
+              onScreenshot={handleCaptureStory}
+            />
+            {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,
+                padding: 1,
+                borderRadius: 1,
+              }}
             >
+              <Tooltip title="Save your story">
+                <IconButton
+                  onClick={handleCaptureStory}
+                  sx={{
+                    color: "white",
+                    "&:hover": {
+                      backgroundColor: "rgba(0, 0, 0, 0.7)",
+                    },
+                  }}
+                >
+                  <PhotoCameraOutlinedIcon />
+                </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>
+    </motion.div>
   );
 }

client/src/pages/Home.jsx CHANGED Viewed

@@ -1,16 +1,24 @@
-import { Box, Button } from "@mui/material";
 import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 export function Home() {
   const navigate = useNavigate();
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      transition={{ duration: 0.5 }}
     >
       <Box
         sx={{
@@ -24,20 +32,72 @@ export function Home() {
         }}
       >
         <Box
-          component="img"
-          src="/book.webp"
-          alt="Book cover"
           sx={{
             height: "80vh",
             width: "auto",
-            objectFit: "contain",
-            borderRadius: "12px",
           }}
-        />
         <Button
           variant="outlined"
           size="large"
-          onClick={() => navigate("/tutorial")}
           sx={{
             fontSize: "1.2rem",
             padding: "12px 36px",

+import { Box, Button, Typography } from "@mui/material";
 import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
+import { usePageSound } from "../hooks/usePageSound";
 export function Home() {
   const navigate = useNavigate();
+  const playPageSound = usePageSound();
+  const handlePlay = () => {
+    playPageSound();
+    navigate("/tutorial");
+  };
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
+      transition={{ duration: 0.3, ease: "easeInOut" }}
+      style={{ backgroundColor: "#121212", width: "100%" }}
     >
       <Box
         sx={{
         }}
       >
         <Box
           sx={{
+            position: "relative",
             height: "80vh",
             width: "auto",
           }}
+        >
+          <Box
+            component="img"
+            src="/book.webp"
+            alt="Book cover"
+            sx={{
+              height: "100%",
+              width: "auto",
+              objectFit: "contain",
+              borderRadius: "4px",
+            }}
+          />
+          <Box
+            sx={{
+              position: "absolute",
+              top: "75%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              textAlign: "center",
+              color: "white",
+              textShadow: "2px 2px 4px rgba(0,0,0,0.15)",
+            }}
+          >
+            <Typography
+              variant="h2"
+              component="h1"
+              sx={{
+                fontWeight: "bold",
+                marginBottom: 2,
+              }}
+            >
+              Sarah's Chronicles
+            </Typography>
+          </Box>
+          <Box
+            sx={{
+              position: "absolute",
+              bottom: 32,
+              left: "50%",
+              transform: "translateX(-50%)",
+              textAlign: "center",
+              color: "white",
+              textShadow: "2px 2px 4px rgba(0,0,0,0.15)",
+            }}
+          >
+            <Typography
+              variant="caption"
+              display="block"
+              sx={{ opacity: 0.9, mb: -1, fontWeight: "black" }}
+            >
+              a story by
+            </Typography>
+            <Typography variant="h6" sx={{ fontWeight: "black" }}>
+              Mistral Small
+            </Typography>
+          </Box>
+        </Box>
         <Button
           variant="outlined"
           size="large"
+          onClick={handlePlay}
           sx={{
             fontSize: "1.2rem",
             padding: "12px 36px",

client/src/pages/Tutorial.jsx CHANGED Viewed

@@ -1,72 +1,175 @@
-import { Box, Typography, Button, Chip } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 export function Tutorial() {
   const navigate = useNavigate();
-  return (
-    <Box
-      sx={{
-        height: "100vh",
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 4,
-        padding: 4,
-        backgroundColor: "background.default",
-        color: "text.primary",
-      }}
-    >
-      <Typography variant="h2" component="h1" textAlign="center" gutterBottom>
-        How to play?
-      </Typography>
-      <Box sx={{ maxWidth: "800px", textAlign: "center" }}>
-        <Typography variant="h5" paragraph>
-          Since the rise of AI, the world is desolate. Your sister,{" "}
-          <Chip label="Sarah" size="small" />, is traversing these{" "}
-          <Chip label="wastelands" size="small" /> in search of food.
-        </Typography>
-        <Typography variant="h5" paragraph>
-          As her little sister, you stayed in the bunker and you help her make
-          decisions with a talkie-walkie.
-        </Typography>
-        -
-        <Typography variant="body1" paragraph>
-          When <Chip label="Sarah" size="small" /> calls you, you have two ways
-          to help her:
-        </Typography>
-        <Typography variant="body1" paragraph sx={{ mb: 4 }}>
-          1. Choose one of the suggested responses by clicking on it
-          <br />
-          2. Use your voice to speak directly to{" "}
-          <Chip label="Sarah" size="small" /> by clicking the "Try to convince{" "}
-          <Chip label="Sarah" size="small" />" button
-        </Typography>
-        -
-        <Typography variant="body1" paragraph>
-          As her sibling and a scientist, you need to find the right words and
-          tone to help her understand the urgency of climate change, while
-          maintaining your close relationship.
-        </Typography>
-      </Box>
-      <Button
-        variant="contained"
-        size="large"
-        onClick={() => navigate("/game")}
         sx={{
-          mt: 4,
-          fontSize: "1.2rem",
-          padding: "12px 24px",
         }}
       >
-        Start the game
-      </Button>
-    </Box>
   );
 }

+import {
+  Box,
+  Typography,
+  Button,
+  Chip,
+  Paper,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { usePageSound } from "../hooks/usePageSound";
+import { motion } from "framer-motion";
 export function Tutorial() {
   const navigate = useNavigate();
+  const playPageSound = usePageSound();
+  const handleStartGame = () => {
+    playPageSound();
+    navigate("/game");
+  };
+  const handleBack = () => {
+    playPageSound();
+    navigate("/");
+  };
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3, ease: "easeInOut" }}
+      style={{ backgroundColor: "#121212", width: "100%" }}
+    >
+      <Box
         sx={{
+          minHeight: "100vh",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 4,
+          padding: 4,
+          backgroundColor: "background.default",
+          position: "relative",
         }}
       >
+        <Tooltip title="Back to home">
+          <IconButton
+            onClick={handleBack}
+            sx={{
+              position: "absolute",
+              top: 16,
+              left: 16,
+              color: "white",
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+              },
+            }}
+          >
+            <ArrowBackIcon />
+          </IconButton>
+        </Tooltip>
+        <Box
+          sx={{
+            position: "relative",
+            width: "auto",
+            height: "80vh",
+            aspectRatio: "0.66666667",
+            display: "flex",
+            alignItems: "center", // Center vertically
+            justifyContent: "center", // Center horizontally
+            "&::before, &::after": {
+              content: '""',
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              background: "white",
+              borderRadius: 1,
+              boxShadow: "0px 1px 3px rgba(0,0,0,0.2)",
+            },
+            "&::before": {
+              top: "4px",
+              left: "4px",
+              transform: "rotate(-1deg)",
+              zIndex: 1,
+            },
+            "&::after": {
+              top: "8px",
+              left: "8px",
+              transform: "rotate(1deg)",
+              zIndex: 0,
+            },
+          }}
+        >
+          <Paper
+            elevation={3}
+            sx={{
+              position: "relative",
+              zIndex: 2,
+              width: "100%",
+              height: "100%",
+              backgroundColor: "white",
+              color: "black",
+              padding: 6,
+              borderRadius: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center", // Center align items
+              justifyContent: "center", // Ensure content is centered vertically
+              textAlign: "center",
+              gap: 4,
+              overflowY: "auto",
+            }}
+          >
+            <Typography
+              variant="h2"
+              component="h1"
+              textAlign="center"
+              gutterBottom
+              color="black"
+              sx={{ width: "100%" }}
+            >
+              Synopsis
+            </Typography>
+            <Typography
+              variant="body1"
+              paragraph
+              color="black"
+              sx={{ fontWeight: "normal" }}
+            >
+              Since the rise of <strong>AI</strong>, the world is desolate due
+              to a <strong>nuclear winter</strong> caused by rogue{" "}
+              <strong>AIs</strong> that launched <strong>bombs</strong> all over
+              the planet. You are the only <strong>survivor</strong> of the{" "}
+              <strong>bunker</strong>.
+              <br />
+              <br />
+              You have to make <strong>decisions</strong> to{" "}
+              <strong>survive</strong>. You have ventured out of your{" "}
+              <strong>bunker</strong> to find <strong>medicine</strong> for your{" "}
+              <strong>sick sister</strong>. If you don't find it, she will{" "}
+              <strong>die</strong>. <strong>Time</strong> is running out, and
+              every <strong>choice</strong>
+              matters in this desperate <strong>quest</strong>.
+            </Typography>
+            <Typography variant="h4">How to play</Typography>
+            <Typography variant="body1" sx={{ fontWeight: "normal" }}>
+              At each step, click one of the available <strong>choices</strong>.
+            </Typography>
+          </Paper>
+        </Box>
+        <Button
+          variant="outlined"
+          size="large"
+          onClick={handleStartGame}
+          sx={{
+            fontSize: "1.2rem",
+            padding: "12px 24px",
+          }}
+        >
+          Start the game
+        </Button>
+      </Box>
+    </motion.div>
   );
 }