feat: randomize textures

Author: syndrizzle

client/src/components/QuizArea.tsx

@@ -1,17 +1,36 @@
-import { motion, AnimatePresence } from "motion/react";
+import { motion, AnimatePresence } from "framer-motion";
 import { type QuizAreaProps } from "@/types/quiz";
+import { useIsMobile } from "@/hooks/useIsMobile";
+
+export const QuizArea = ({ question, questionIndex, selectedAnswer, onSelectAnswer, textureUrl }: QuizAreaProps) => {
+  const isMobile = useIsMobile();
 
-export const QuizArea = ({ question, questionIndex, selectedAnswer, onSelectAnswer }: QuizAreaProps) => {
   return (
-    <div className="md:bg-neutral-950 md:border-2 md:border-neutral-500 w-full h-full gap-6 md:p-10 md:shadow-2xl md:shadow-neutral-950/60 flex flex-col justify-center items-center md:bg-[url(/texture-two.png)]">
+    <motion.div
+      className={`md:bg-neutral-950 md:border-2 md:border-neutral-500 w-full h-full gap-6 md:p-10 md:shadow-2xl md:shadow-neutral-950/60 flex flex-col justify-center items-center relative`}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+    >
       <AnimatePresence mode="wait">
+        {!isMobile && textureUrl && (
+          <motion.div
+            key={`${question.id}-bg`}
+            className="absolute inset-0 w-full h-full"
+            style={{ backgroundImage: `url(${textureUrl})` }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.5 }}
+          />
+        )}
         <motion.div
           key={question.id}
+          className="relative w-full h-full flex flex-col justify-center items-center gap-6"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          transition={{ duration: 0.5 }}
-          className="w-full h-full flex flex-col justify-center items-center gap-6"
+          transition={{ duration: 0.3 }}
         >
           <div className="flex flex-col w-full max-w-3xl gap-4">
             <p className="font-heading text-4xl text-neutral-50">Question {questionIndex + 1}.</p>
@@ -40,6 +59,6 @@ export const QuizArea = ({ question, questionIndex, selectedAnswer, onSelectAnsw
           </div>
         </motion.div>
       </AnimatePresence>
-    </div>
+    </motion.div>
   );
 };

client/src/routes/Quiz/QuizOngoing.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import { ArrowLeft, ArrowRight, Clock } from "lucide-react";
+import { useTextureStore } from "@/stores/textureStore";
 import { QuizArea } from "@/components/QuizArea";
 import { QuizNav } from "@/components/QuizNav";
 import { useIsMobile } from "@/hooks/useIsMobile";
@@ -21,6 +22,7 @@ export const QuizOngoingPage = () => {
   const [visited, setVisited] = useState<boolean[]>([]);
   const [elapsedTime, setElapsedTime] = useState(0);
   const [loading, setLoading] = useState(true);
+  const { currentTexture, setRandomTexture } = useTextureStore();
 
   useEffect(() => {
     if (!quizId) {
@@ -69,6 +71,10 @@ export const QuizOngoingPage = () => {
     return () => clearInterval(timer);
   }, []);
 
+  useEffect(() => {
+    setRandomTexture();
+  }, [currentQuestionIndex, setRandomTexture]);
+
   const handleGoToQuestion = useCallback((index: number) => {
     setCurrentQuestionIndex(index);
     setVisited((prev) => {
@@ -193,11 +199,11 @@ export const QuizOngoingPage = () => {
           {headerContent}
           <div className="pb-28">
             <QuizArea
-              key={currentQuestionIndex} // Ensures animation triggers
               question={quizData.questions[currentQuestionIndex]}
               questionIndex={currentQuestionIndex}
               selectedAnswer={answers[currentQuestionIndex]}
               onSelectAnswer={handleSelectAnswer}
+              textureUrl={currentTexture}
             />
           </div>
         </div>
@@ -211,11 +217,11 @@ export const QuizOngoingPage = () => {
     <div className="bg-neutral-900 md:h-screen min-h-screen flex">
       <div className="pl-6 py-6 w-full">
       <QuizArea
-        key={currentQuestionIndex} // Ensures animation triggers
         question={quizData.questions[currentQuestionIndex]}
         questionIndex={currentQuestionIndex}
         selectedAnswer={answers[currentQuestionIndex]}
         onSelectAnswer={handleSelectAnswer}
+        textureUrl={currentTexture}
       />
       </div>
       <div className="flex flex-col lg:w-1/3 w-2/5 justify-between pb-6">

client/src/stores/textureStore.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+const textures = Array.from({ length: 12 }, (_, i) => `/textures/${i + 1}.png`);
+
+interface TextureState {
+  currentTexture: string;
+  setRandomTexture: () => void;
+}
+
+export const useTextureStore = create<TextureState>((set) => ({
+  currentTexture: textures[Math.floor(Math.random() * textures.length)],
+  setRandomTexture: () => {
+    set({ currentTexture: textures[Math.floor(Math.random() * textures.length)] });
+  },
+}));

client/src/types/quiz.ts

@@ -97,6 +97,7 @@ export interface QuizAreaProps {
   questionIndex: number;
   selectedAnswer: number | null;
   onSelectAnswer: (answerIndex: number) => void;
+  textureUrl: string;
 }
 
 /**