File size: 4,576 Bytes
ddf672c d9ce58c 7eed06f ddf672c b462a9f ddf672c 7eed06f 8201795 d9ce58c b462a9f 7eed06f b462a9f ddf672c 7eed06f ddf672c 2ea78fe 7eed06f 2ea78fe ddf672c 2ea78fe b462a9f d9ce58c 7eed06f d9ce58c 7eed06f d9ce58c 7eed06f d9ce58c b462a9f 2ea78fe ddf672c b462a9f d9ce58c b462a9f fc42692 ddf672c d9ce58c 78b81a5 fc42692 b462a9f 1e8f4c6 ddf672c 2ea78fe 1e8f4c6 ddf672c 1e8f4c6 2ea78fe 1e8f4c6 78b81a5 1e8f4c6 ddf672c 1e8f4c6 7eed06f d9ce58c 7eed06f d9ce58c 7eed06f d9ce58c b462a9f 7eed06f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 |
import {
Box,
Button,
Typography,
useTheme,
useMediaQuery,
Tooltip,
CircularProgress,
} from "@mui/material";
import { motion } from "framer-motion";
import { useNavigate } from "react-router-dom";
import { useSoundSystem } from "../contexts/SoundContext";
import {
ServiceStatusProvider,
useServiceStatus,
} from "../contexts/ServiceStatusContext";
import { BlinkingText } from "../components/BlinkingText";
import { BookPages } from "../components/BookPages";
import { ServiceStatus } from "../components/ServiceStatus";
function HomeContent() {
const navigate = useNavigate();
const { playSound } = useSoundSystem();
const { services, areServicesHealthy } = useServiceStatus();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
// Vérifier si les services sont en cours de chargement
const isLoading = Object.values(services).some(
(service) => service.status === "loading"
);
const handlePlay = () => {
playSound("page");
navigate("/tutorial");
};
const playButton = (
<Button
color="primary"
size="large"
variant="contained"
onClick={handlePlay}
disabled={isLoading || !areServicesHealthy()}
sx={{
mt: 4,
fontSize: isMobile ? "1rem" : "1.2rem",
padding: isMobile ? "8px 24px" : "12px 36px",
zIndex: 10,
minWidth: "120px",
position: "relative",
}}
>
<Box
sx={{
height: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
visibility: isLoading ? "hidden" : "visible",
}}
>
Play
</Box>
{isLoading && (
<CircularProgress
size={24}
sx={{
color: "inherit",
position: "absolute",
top: "50%",
left: "50%",
marginTop: "-12px",
marginLeft: "-12px",
}}
/>
)}
</Button>
);
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3, ease: "easeInOut" }}
style={{
width: "100%",
height: "100vh",
position: "relative",
overflow: "hidden",
}}
>
<ServiceStatus />
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
minHeight: "100vh",
height: "100%",
width: isMobile ? "80%" : "40%",
margin: "auto",
position: "relative",
}}
>
<Typography
variant="h1"
sx={{
zIndex: 10,
textAlign: "center",
position: "relative",
fontSize: {
xs: "clamp(2.5rem, 8vw, 3.5rem)",
sm: "clamp(3.5rem, 10vw, 6rem)",
},
lineHeight: {
xs: 1.2,
sm: 1.1,
},
}}
>
interactive
<br /> comic book
<div
style={{
position: "absolute",
top: isMobile ? "-20px" : "-40px",
left: isMobile ? "-40px" : "-120px",
fontSize: isMobile
? "clamp(1rem, 4vw, 1.5rem)"
: "clamp(1.5rem, 3vw, 2.5rem)",
transform: "rotate(-15deg)",
}}
>
IA driven{" "}
</div>
</Typography>
<Typography
variant="caption"
sx={{
zIndex: 10,
textAlign: "center",
mt: 2,
opacity: 0.8,
px: isMobile ? 2 : 0,
fontSize: "clamp(0.875rem, 2vw, 1.125rem)",
lineHeight: 1.6,
}}
>
Experience a unique comic book where artificial intelligence brings
your choices to life, shaping the narrative as you explore.
</Typography>
{isLoading || !areServicesHealthy() ? (
<Tooltip
title={
isLoading
? "Checking services availability..."
: "Services are currently unavailable. Please wait..."
}
arrow
>
<span>{playButton}</span>
</Tooltip>
) : (
playButton
)}
</Box>
</motion.div>
);
}
export function Home() {
return (
<ServiceStatusProvider>
<HomeContent />
</ServiceStatusProvider>
);
}
|