feat(coding): conding game implement

public/locales/en.json

@@ -3,37 +3,12 @@
     "login": {
       "github": "GitHub",
       "google": "Google",
-      "apple": "Apple",
       "choice": "Choose a connection method",
       "connection": "Sign in",
       "division":"or sign in with",
       "pass" : "Password"
     },
-    "user_detail": {
-      "all_games": "All games :",
-      "in_progress": "In progress...",
-      "question": "Question ",
-      "statement": "Statement :",
-      "answer": "Answer :",
-      "grade": "Grade : "
-    },
-    "signout": "Sign out",
-    "dashboard": "Dashboard",
-    "users": "All users",
-    "game_nb": "Number of games",
-    "game_played": "Games played",
-    "easy": "Easy",
-    "easy_desc": "of right answers on easy question (1 point)",
-    "medium": "Medium",
-    "medium_desc": "of right answers on medium question (2 points)",
-    "hard": "Hard",
-    "hard_desc": "of right answers on hard question (3 points)",
-    "top_5": "Top 5 users",
-    "top_5_desc": "Best user to ever play the game",
-    "rank": "Rank",
-    "user": "User",
-    "see": "See",
-    "users_desc": "Here are all users and their grades",
-    "email": "Email"
+
+    "signout": "Sign out"
   }
 }

public/locales/fr.json

@@ -3,37 +3,11 @@
     "login": {
       "github": "Github",
       "google": "Google",
-      "apple": "Apple",
       "choice": "Choisissez un moyen de connection",
       "connection" : "Se connecter",
       "division": "ou connectez-vous avec",
       "pass" : "Mot de passe"
     },
-    "user_detail": {
-      "all_games": "Toutes les parties :",
-      "in_progress": "En cours...",
-      "question": "Question ",
-      "statement": "Intitulé :",
-      "answer": "Réponse :",
-      "grade": "Note : "
-    },
-    "signout": "Déconnexion",
-    "dashboard": "Tableau de bord",
-    "users": "Tout les utilisateurs",
-    "game_nb": "Nombre de parties",
-    "game_played": "parties jouées",
-    "easy": "Facile",
-    "easy_desc": "de bonnes réponses sur les questions faciles (1 point)",
-    "medium": "Moyen",
-    "medium_desc": "de bonnes réponses sur les questions moyennes (2 points)",
-    "hard": "Difficile",
-    "hard_desc": "de bonnes réponses sur les questions difficiles (3 points)",
-    "top_5": "Top 5 des utilisateurs",
-    "top_5_desc": "Voici les 5 meilleurs utilisateurs",
-    "rank": "Rang",
-    "user": "Utilisateur",
-    "see": "Voir",
-    "users_desc": "Voici la liste de tout les utilisateurs",
-    "email": "E-mail"
+    "signout": "Déconnexion"
   }
 }

src/modules/CodingGame.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useCommandStore } from "@src/stores/useCommandStore";
+import { Textarea } from "@src/ui/textarea";
+
+export type GameDialogProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+  consigne: string;
+  outpout: string;
+  code?: string;
+};
+
+export const CodingGame: React.FC<GameDialogProps> = ({ consigne, outpout, code }) => {
+  const { remove } = useCommandStore();
+
+  return (
+    <>
+      <div className="absolute left-[2.5%] top-8 flex h-[95%] w-[34%] flex-col items-center gap-2">
+        <motion.div
+          className="flex h-full w-full flex-wrap rounded-md border bg-black/80 p-8"
+          initial={{ opacity: 0, y: 200 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 200 }}
+          transition={{ duration: 0.3 }}
+          onClick={remove}
+        >
+          <AnimatePresence>
+            {consigne.split("").map((char, i) => (
+              <motion.span
+                key={i}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: i * 0.05, duration: 0.01 }}
+                className="h-fit select-none text-lg text-white"
+              >
+                {char === " " ? "\u00A0" : char}
+              </motion.span>
+            ))}
+          </AnimatePresence>
+        </motion.div>
+      </div>
+      <div className="absolute  right-[2.5%]  top-8 flex h-3/5 w-3/5 flex-col items-center gap-2">
+        <motion.div
+          className="flex h-full w-full flex-wrap rounded-md border bg-black/80 p-8"
+          initial={{ opacity: 0, y: 200 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 200 }}
+          transition={{ duration: 0.3 }}
+          onClick={remove}
+        >
+          <Textarea placeholder={code} />
+        </motion.div>
+      </div>
+      <div className="absolute  bottom-4  right-[2.5%] flex h-1/3 w-[60%] flex-col items-center gap-2">
+        <motion.div
+          className="flex h-full w-full flex-wrap rounded-md border bg-black/80 p-8"
+          initial={{ opacity: 0, y: 200 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 200 }}
+          transition={{ duration: 0.3 }}
+          onClick={remove}
+        >
+          <AnimatePresence>
+            {outpout.split("").map((char, i) => (
+              <motion.span
+                key={i}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: i * 0.05, duration: 0.01 }}
+                className="h-fit select-none text-lg text-white"
+              >
+                {char === " " ? "\u00A0" : char}
+              </motion.span>
+            ))}
+          </AnimatePresence>
+        </motion.div>
+      </div>
+    </>
+  );
+};

src/modules/scene/GameScene.tsx

@@ -4,6 +4,7 @@ import { Suspense, useEffect, useRef } from "react";
 import { CameraControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import { AnimatePresence } from "framer-motion";
+// import { CodingGame } from "@modules/CodingGame";
 // import { CubeTextureLoader } from "three";
 import { Dialog } from "@modules/Dialog";
 import { LoadingScene } from "@modules/scene/LoadingScene";
@@ -44,6 +45,7 @@ export const GameScene: React.FC<GameSceneProps> = () => {
                     ["1) is_even = num % 2 == 1", "2) is_even = num % 2 == 0"],
                   ],
                 },
+                { type: "coding", args: ["les consigne s'afficheront ici"] },
               ]);
             }}
           />

src/stores/useCommandStore.ts

@@ -61,6 +61,14 @@ const commandHandler = (command: Command) => {
         dialogStore.setOptions(options);
       }
       break;
+    case "coding":
+      {
+        const dialogStore = useDialogStore.getState();
+        dialogStore.setText(command.args[0] as string);
+        const options = command.args[1] as string[];
+        dialogStore.setOptions(options);
+      }
+      break;
     default:
       break;
   }

src/ui/textarea.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "@lib/utils";
+
+export type TextareaProps = object & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };