/* ClientBase, page 404 (pages-404.jsx)
--------------------------------------------------------------------------
Quand l'utilisateur arrive sur une URL inconnue, plutôt qu'une page vide
ou un fallback maladroit vers la home, on affiche une page 404 sympa
avec un mini-jeu d'attrape-RDV. Pendant 20 s, des chips RDV apparaissent
à des positions aléatoires dans une zone de jeu : à chaque clic = +1
point + chip qui disparaît. Score final + CTA retour.
But : transformer un cul-de-sac en moment de jeu mémorable. Si quelqu'un
tombe par hasard sur /quelque-chose-de-faux, il rigole et clique vers
la home. */
const NotFoundGame = () => {
const [phase, setPhase] = React.useState("idle"); // idle | playing | done
const [score, setScore] = React.useState(0);
const [timeLeft, setTimeLeft] = React.useState(20);
const [targets, setTargets] = React.useState([]); // [{ id, x, y, dur }]
const playRef = React.useRef(null);
const fieldRef = React.useRef(null);
const intervals = React.useRef({ tick: null, spawn: null });
// Lance/relance la partie
const start = () => {
setPhase("playing");
setScore(0);
setTimeLeft(20);
setTargets([]);
};
// Boucle de jeu : timer + spawner. On nettoie tout sur fin/démontage.
React.useEffect(() => {
if (phase !== "playing") return;
intervals.current.tick = setInterval(() => {
setTimeLeft(t => {
if (t <= 1) {
clearInterval(intervals.current.tick);
clearInterval(intervals.current.spawn);
setPhase("done");
setTargets([]);
return 0;
}
return t - 1;
});
}, 1000);
let nextId = 1;
const spawnOne = () => {
const dur = 1500 + Math.random() * 800; // chaque cible vit 1.5–2.3s
const id = nextId++;
setTargets(curr => {
// Position aléatoire en pourcentage du terrain de jeu, avec marges
// pour éviter que la chip sorte du cadre.
const x = 6 + Math.random() * 84; // 6%-90%
const y = 8 + Math.random() * 78; // 8%-86%
const next = [...curr, { id, x, y, dur }];
// Auto-disparition au bout de `dur` ms si la cible n'a pas été cliquée
setTimeout(() => {
setTargets(c => c.filter(t => t.id !== id));
}, dur);
return next;
});
};
// Cadence : un spawn toutes les 550 ms (env.). Démarre une fois après 50 ms
// pour ne pas attendre la 1re seconde à blanc.
setTimeout(spawnOne, 50);
intervals.current.spawn = setInterval(spawnOne, 550);
return () => {
clearInterval(intervals.current.tick);
clearInterval(intervals.current.spawn);
};
}, [phase]);
const catchOne = (id) => {
setTargets(curr => curr.filter(t => t.id !== id));
setScore(s => s + 1);
};
// Verdict final selon le score : message + emoji + sous-texte.
const verdict = (() => {
if (score >= 30) return { emoji: "🚀", title: "Wow, vous gérez !", sub: "Sérieusement, vous devriez postuler pour gérer notre support." };
if (score >= 20) return { emoji: "💪", title: "Pro confirmé·e", sub: "Avec un agenda comme ClientBase, vous serez intouchable." };
if (score >= 12) return { emoji: "👍", title: "Pas mal du tout", sub: "ClientBase vous donnerait un coup de pouce pour les RDV plus délicats." };
if (score >= 6) return { emoji: "🌱", title: "Petit warm-up", sub: "Promis, gérer ses vrais RDV est plus facile que ça." };
return { emoji: "😄", title: "Bon, c'est juste un jeu", sub: "Heureusement, ClientBase gère vos RDV à votre place." };
})();
return (
Erreur 404
Cette page n'existe pas…
mais voici un petit jeu.
Attrapez le maximum de rendez-vous en 20 secondes. Cliquez sur chaque chip dès qu'elle apparaît, avant qu'elle disparaisse.
{/* HUD : timer + score + bouton */}
{timeLeft}s
Score : {score}
{phase !== "playing" && (
)}
{/* Terrain de jeu : fond doux, hauteur fixe pour ne pas sauter
entre les phases, position relative pour les chips absolute. */}
{phase === "idle" && (
{/* 🎯 qui respire doucement pour signaler que la zone est vivante */}
🎯
Prêt·e ? Cliquez sur « Lancer le jeu » pour commencer.
)}
{phase === "done" && (
{/* Emoji du verdict en bounce in spring + glow doux */}