Feat: Update to allow drawing on mobile screens

.env.example

@@ -4,4 +4,6 @@ STUDIO_MONGODB_URI=
 ASTRIA_API_KEY=
 MONGODB_URI=
 NEXT_PUBLIC_BASE_URL=
-NEXT_PUBLIC_BLOCKCHAIN_NETWORK=
+NEXT_PUBLIC_BLOCKCHAIN_NETWORK=
+NEXT_PUBLIC_WLD_APP_ID="app_staging_2cdaabaaf5974584da2f391b081e3171"
+NEXT_PUBLIC_WLD_ACTION="testing-action"

app/play/page.tsx

@@ -56,6 +56,7 @@ const Play = () => {
 
   return (
     <div>
+      <AppBar/>
       {currentScreen === 'game' && <GameScreen onComplete={handleGameScreenComplete} />}
       {currentScreen === 'match' && <MatchScreen onComplete={handleMatchScreenComplete} />}
       {currentScreen === 'mint' && 

components/game/GameScreen.tsx

@@ -32,7 +32,7 @@ const GameScreen: React.FC<GameScreenProps> = ({ onComplete }) => {
   const timerProgress = (timeLeft / 60) * 100;
 
   return (
-    <div className="flex flex-col items-center justify-center p-4 md:p-8 lg:p-12 h-screen ">
+    <div className="flex flex-col items-center justify-center p-4 md:p-8 lg:p-12 h-screen mt-16 ">
       <div className="flex flex-col md:flex-row items-center justify-between w-full mb-4 mt-10 p-4 rounded-lg">
         <ScoreDisplay score={score} />
         <div className="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 lg:w-28 lg:h-28">

components/game/Leaderboard.tsx

@@ -11,7 +11,7 @@ interface LeaderboardProps {
 const Leaderboard: React.FC<LeaderboardProps> = ({ onGoBack, onRestart }) => {
   return (
     <div className="flex flex-col items-center p-4">
-      <h1 className="text-2xl mb-4 mt-10">Leaderboard</h1>
+      <h1 className="text-2xl mb-4 mt-14">Leaderboard</h1>
       <LeaderboardTable />
       <div className='flex flex-row gap-4'>
       <Button onClick={onGoBack} className="mt-4">Go Back</Button>

components/game/MatchScreen.tsx

@@ -13,7 +13,7 @@ const MatchScreen: React.FC<MatchScreenProps> = ({ onComplete }) => {
   };
 
   return (
-    <div className="flex flex-col items-center p-6 mt-10 min-h-screen">
+    <div className="flex flex-col items-center p-6 mt-14 min-h-screen">
       {/* Container for Diagonal Cards */}
       <div className="relative w-full max-w-lg p-6 bg-white border border-gray-200 rounded shadow-lg">
         <div className="absolute inset-0 opacity-30 rounded-lg bg-slate-200"></div>

components/game/MintScreen.tsx

@@ -15,7 +15,7 @@ const MintScreen: React.FC<MintScreenProps> = ({ onComplete, onViewLeaderboard }
 
   return (
     <div className="flex flex-col items-center p-4">
-      <h1 className="text-2xl mb-4 mt-10"> Your Drawing</h1>
+      <h1 className="text-2xl mb-4 mt-14"> Your Drawing</h1>
       <MintForm imageUrl=''/>
       <Button onClick={handleMintComplete} className="mt-4 w-44">Mint Drawing</Button>
       {/* <Button onClick={onViewLeaderboard} className="mt-4">View Leaderboard</Button> */}

components/game/NFTScreen.tsx

@@ -13,7 +13,7 @@ const NFTScreen: React.FC<NFTScreenProps> = ({ onViewLeaderboard, onRestart }) =
 
   return (
     <div className="flex flex-col items-center p-4">
-      <div className="w-full max-w-4xl mt-10">
+      <div className="w-full max-w-4xl mt-14">
         <div className="flex border-b border-gray-300 mb-4">
           <button
             className={`py-2 px-4 text-lg font-medium ${activeTab === 'all' ? 'border-b-2 border-blue-500' : 'text-gray-500'}`}

components/ui/drawingcanvas.tsx

@@ -13,37 +13,53 @@ const DrawingCanvas = React.forwardRef<HTMLCanvasElement, DrawingCanvasProps>(
     const [isErasing, setIsErasing] = useState(false);
     const [undoStack, setUndoStack] = useState<string[]>([]);
     const [redoStack, setRedoStack] = useState<string[]>([]);
-    const [activeTool, setActiveTool] = useState<'draw' | 'erase'>('draw'); 
+    const [activeTool, setActiveTool] = useState<'draw' | 'erase'>('draw');
+    const [canvasSize, setCanvasSize] = useState({ width, height });
 
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
-    useEffect(() => {
-      const handleResize = () => {
-        if (canvasRef.current) {
-          const canvas = canvasRef.current;
-          const ctx = canvas.getContext('2d');
-          if (ctx) {
-            // Save current drawing
-            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    // Utility function to get the correct coordinates for mouse and touch events
+    const getEventCoords = (event: React.MouseEvent | React.TouchEvent, canvas: HTMLCanvasElement) => {
+      let offsetX: number;
+      let offsetY: number;
+
+      if ('touches' in event) {
+        const touch = event.touches[0];
+        const rect = canvas.getBoundingClientRect();
+        offsetX = touch.clientX - rect.left;
+        offsetY = touch.clientY - rect.top;
+      } else {
+        offsetX = event.nativeEvent.offsetX;
+        offsetY = event.nativeEvent.offsetY;
+      }
 
-            // Resize canvas
-            canvas.width = canvas.parentElement?.clientWidth || width;
-            canvas.height = canvas.parentElement?.clientHeight || height;
+      return { offsetX, offsetY };
+    };
 
-            // Restore drawing
-            ctx.putImageData(imageData, 0, 0);
-          }
+    const resizeCanvas = (canvas: HTMLCanvasElement) => {
+      const parent = canvas.parentElement;
+      if (parent) {
+        const { clientWidth, clientHeight } = parent;
+        setCanvasSize({ width: clientWidth, height: clientHeight });
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          canvas.width = clientWidth;
+          canvas.height = clientHeight;
+          ctx.putImageData(imageData, 0, 0);
         }
-      };
-
-      // Set initial size
-      handleResize();
+      }
+    };
 
-      // Add resize event listener
-      window.addEventListener('resize', handleResize);
-
-      return () => window.removeEventListener('resize', handleResize);
-    }, [width, height]);
+    useEffect(() => {
+      if (canvasRef.current) {
+        resizeCanvas(canvasRef.current);
+        window.addEventListener('resize', () => resizeCanvas(canvasRef.current!));
+      }
+      return () => {
+        window.removeEventListener('resize', () => resizeCanvas(canvasRef.current!));
+      };
+    }, []);
 
     useEffect(() => {
       if (canvasRef.current) {
@@ -64,21 +80,21 @@ const DrawingCanvas = React.forwardRef<HTMLCanvasElement, DrawingCanvasProps>(
       }
     }, [ref]);
 
-    const startDrawing = ({ nativeEvent }: React.MouseEvent) => {
+    const startDrawing = (event: React.MouseEvent | React.TouchEvent) => {
       if (canvasRef.current) {
-        const { offsetX, offsetY } = nativeEvent;
+        const { offsetX, offsetY } = getEventCoords(event, canvasRef.current);
         const ctx = canvasRef.current.getContext('2d');
         if (ctx) {
           ctx.beginPath();
           ctx.moveTo(offsetX, offsetY);
-          setIsDrawing(true); 
+          setIsDrawing(true);
         }
       }
     };
 
-    const draw = ({ nativeEvent }: React.MouseEvent) => {
+    const draw = (event: React.MouseEvent | React.TouchEvent) => {
       if (!isDrawing || !canvasRef.current) return;
-      const { offsetX, offsetY } = nativeEvent;
+      const { offsetX, offsetY } = getEventCoords(event, canvasRef.current);
       const ctx = canvasRef.current.getContext('2d');
       if (ctx) {
         ctx.lineTo(offsetX, offsetY);
@@ -88,7 +104,7 @@ const DrawingCanvas = React.forwardRef<HTMLCanvasElement, DrawingCanvasProps>(
 
     const stopDrawing = () => {
       if (canvasRef.current && isDrawing) {
-        setIsDrawing(false); 
+        setIsDrawing(false);
         setUndoStack([...undoStack, canvasRef.current.toDataURL()]);
         setRedoStack([]);
       }
@@ -100,7 +116,7 @@ const DrawingCanvas = React.forwardRef<HTMLCanvasElement, DrawingCanvasProps>(
         const lastState = undoStack.pop()!;
         setRedoStack([...redoStack, canvasRef.current!.toDataURL()]);
         setUndoStack([...undoStack]);
-    
+
         const img = new Image();
         img.src = lastState;
         img.onload = () => {
@@ -134,22 +150,22 @@ const DrawingCanvas = React.forwardRef<HTMLCanvasElement, DrawingCanvasProps>(
       if (canvasRef.current) {
         const ctx = canvasRef.current.getContext('2d');
         if (ctx) {
-          ctx.globalCompositeOperation = 'source-over'; 
+          ctx.globalCompositeOperation = 'source-over';
         }
-        setActiveTool('draw'); 
-        setIsErasing(false); 
+        setActiveTool('draw');
+        setIsErasing(false);
       }
     };
 
     const handleErase = () => {
       if (canvasRef.current) {
         const ctx = canvasRef.current.getContext('2d');
         if (ctx) {
-          ctx.globalCompositeOperation = 'destination-out'; 
-          ctx.lineWidth = eraserSize; 
+          ctx.globalCompositeOperation = 'destination-out';
+          ctx.lineWidth = eraserSize;
         }
-        setActiveTool('erase'); 
-        setIsErasing(true); 
+        setActiveTool('erase');
+        setIsErasing(true);
         setIsDrawing(false);
       }
     };
@@ -170,14 +186,19 @@ const DrawingCanvas = React.forwardRef<HTMLCanvasElement, DrawingCanvasProps>(
           onMouseDown={startDrawing}
           onMouseMove={draw}
           onMouseUp={stopDrawing}
-          onMouseLeave={stopDrawing} 
+          onMouseLeave={stopDrawing}
+          onTouchStart={startDrawing}
+          onTouchMove={draw}
+          onTouchEnd={stopDrawing}
+          width={canvasSize.width}
+          height={canvasSize.height}
         />
         <MyToolBar
           handleDraw={handleDraw}
           handleErase={handleErase}
           handleUndo={handleUndo}
           handleRedo={handleRedo}
-          activeTool={activeTool} 
+          activeTool={activeTool}
         />
       </div>
     );

components/ui/imagecomparison.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 const ImageComparison: React.FC = () => {
     return (
-        <div className="flex items-center justify-center flex-col">
+        <div className="flex flex-col md:flex-row items-center justify-center space-y-6 md:space-y-0 md:space-x-6">
 
             {/* User's Drawing */}
-            <div className="relative w-1/2 ml-44">
+            <div className="relative w-full md:w-1/2">
                 <div className="relative bg-gray-200 border border-gray-300 rounded overflow-hidden">
                     <img
                         src="path_to_user_image"
@@ -17,8 +17,9 @@ const ImageComparison: React.FC = () => {
                     </div>
                 </div>
             </div>
+
             {/* AI Generated Image */}
-            <div className="relative w-1/2 mr-44 mt-[-30px]">
+            <div className="relative w-full md:w-1/2">
                 <div className="relative bg-gray-200 border border-gray-300 rounded overflow-hidden">
                     <img
                         src="path_to_ai_image"