feat(coding): conding game implement

public/locales/fr.json

@@ -36,4 +36,4 @@
     "users_desc": "Voici la liste de tout les utilisateurs",
     "email": "E-mail"
   }
-}
+}

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 CodingGameProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+  consigne: string;
+  outpout: string;
+  code?: string;
+};
+
+export const CodingGame: React.FC<CodingGameProps> = ({ 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 };