Merge branch 'logger_and_grid_diet' into dev

client/src/hooks/useDragHandlers.tsx

@@ -0,0 +1,28 @@
+import { MoveType } from "@/enums/moveEnum";
+import { useCallback } from "react";
+
+const useDragHandlers = (
+  handleDragMove: (clientX: number, moveType: MoveType) => void,
+) => {
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      handleDragMove(e.clientX, MoveType.MOUSE);
+    },
+    [handleDragMove],
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      const touch = e.touches[0];
+      handleDragMove(touch.clientX, MoveType.TOUCH);
+    },
+    [handleDragMove],
+  );
+
+  return {
+    handleMouseMove,
+    handleTouchMove,
+  };
+};
+
+export default useDragHandlers;

client/src/hooks/useGrid.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, useRef } from "react";
 import { useGame } from "@/hooks/useGame";
 import { formatBigIntToBinaryArrayCustom } from "@/utils/gridUtils";
 import useDeepMemo from "./useDeepMemo";
+import { consoleTSLog } from "@/utils/logger";
 
 interface DebugData {
   blocksRaw: bigint;

client/src/ui/components/BackgroundBoard.tsx

@@ -1,32 +1,26 @@
-import { ReactNode } from "react";
 import { motion, MotionProps } from "framer-motion";
 
 interface BackgroundImageProps {
-  children: ReactNode;
   imageBackground: string;
   animate?: MotionProps["animate"];
   initial?: MotionProps["initial"];
   transition?: MotionProps["transition"];
 }
 
 const BackgroundBoard: React.FC<BackgroundImageProps> = ({
-  children,
   imageBackground,
   animate,
   initial,
   transition,
 }) => {
   return (
-    <div className="relative w-full grow h-full overflow-hidden">
-      <motion.div
-        className="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
-        style={{ backgroundImage: `url(${imageBackground})` }}
-        initial={initial || {}}
-        animate={animate || {}}
-        transition={transition || {}}
-      />
-      {children}
-    </div>
+    <motion.div
+      className="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `url(${imageBackground})` }}
+      initial={initial || {}}
+      animate={animate || {}}
+      transition={transition || {}}
+    />
   );
 };
 

client/src/ui/components/GameBoard.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { Card } from "@/ui/elements/card";
 import { useDojo } from "@/dojo/useDojo";
 import { GameBonus } from "../containers/GameBonus";
@@ -24,6 +18,7 @@ import { Game } from "@/dojo/game/models/game";
 import useRank from "@/hooks/useRank";
 
 import "../../grid.css";
+import { consoleTSLog } from "@/utils/logger";
 
 interface GameBoardProps {
   initialGrid: number[][];
@@ -79,6 +74,7 @@ const GameBoard: React.FC<GameBoardProps> = ({
     setOptimisticScore(score);
     setOptimisticCombo(combo);
     setOptimisticMaxCombo(maxCombo);
+    consoleTSLog("info", "Initial grid changed in GameBoard");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialGrid]);
 
@@ -192,11 +188,15 @@ const GameBoard: React.FC<GameBoardProps> = ({
   useEffect(() => {
     // Reset the isTxProcessing state and the bonus state when the grid changes
     // meaning the tx as been processed, and the client state updated
+    consoleTSLog("success", "Game board is trigger");
     setBonus(BonusType.None);
     setBonusDescription("");
   }, [initialGrid]);
 
+  consoleTSLog("info", "Rendering GameBoard component");
+
   const memoizedInitialData = useMemo(() => {
+    consoleTSLog("success", "Transforming data in gameboard");
     return transformDataContractIntoBlock(initialGrid);
   }, [initialGrid]);
 

client/src/ui/components/Grid.tsx

@@ -14,6 +14,7 @@ import {
   deepCompareBlocks,
   getBlocksSameRow,
   getBlocksSameWidth,
+  transformToGridFormat,
 } from "@/utils/gridUtils";
 import { MoveType } from "@/enums/moveEnum";
 import AnimatedText from "../elements/animatedText";
@@ -24,6 +25,9 @@ import ConfettiExplosion, { ConfettiExplosionRef } from "./ConfettiExplosion";
 import { useMusicPlayer } from "@/contexts/hooks";
 
 import "../../grid.css";
+import { consoleTSLog } from "@/utils/logger";
+import useDragHandlers from "@/hooks/useDragHandlers";
+import { calculateFallDistance, isBlocked } from "@/utils/gridPhysics";
 
 const { VITE_PUBLIC_DEPLOY_TYPE } = import.meta.env;
 
@@ -112,9 +116,14 @@ const Grid: React.FC<GridProps> = ({
   useEffect(() => {
     if (applyData) {
       if (deepCompareBlocks(saveGridStateblocks, initialData)) {
+        consoleTSLog(
+          "Grid state is the same, no need to apply data",
+          transformToGridFormat(saveGridStateblocks, gridWidth, gridHeight),
+        );
         return;
       }
       if (moveTxAwaitDone) {
+        consoleTSLog("success", "Applying data to grid");
         setSaveGridStateblocks(initialData);
         setBlocks(initialData);
         setNextLine(nextLineData);
@@ -249,14 +258,7 @@ const Grid: React.FC<GridProps> = ({
     handleDragStart(touch.clientX, block);
   };
 
-  const handleMouseMove = (e: React.MouseEvent) => {
-    handleDragMove(e.clientX, MoveType.MOUSE);
-  };
-
-  const handleTouchMove = (e: React.TouchEvent) => {
-    const touch = e.touches[0];
-    handleDragMove(touch.clientX, MoveType.TOUCH);
-  };
+  const { handleMouseMove, handleTouchMove } = useDragHandlers(handleDragMove);
 
   const endDrag = () => {
     if (!dragging) return;
@@ -352,69 +354,14 @@ const Grid: React.FC<GridProps> = ({
     [account, isMoving, gridHeight, move],
   );
 
-  const isBlocked = (
-    initialX: number,
-    newX: number,
-    y: number,
-    width: number,
-    blocks: Block[],
-    blockId: number,
-  ) => {
-    const rowBlocks = blocks.filter(
-      (block) => block.y === y && block.id !== blockId,
-    );
-
-    if (newX > initialX) {
-      for (const block of rowBlocks) {
-        if (block.x >= initialX + width && block.x < newX + width) {
-          return true;
-        }
-      }
-    } else {
-      for (const block of rowBlocks) {
-        if (block.x + block.width > newX && block.x <= initialX) {
-          return true;
-        }
-      }
-    }
-
-    return false;
-  };
-
-  const calculateFallDistance = useCallback(
-    (block: Block, blocks: Block[]) => {
-      let maxFall = gridHeight - block.y - 1;
-      for (let y = block.y + 1; y < gridHeight; y++) {
-        if (isCollision(block.x, y, block.width, blocks, block.id)) {
-          maxFall = y - block.y - 1;
-          break;
-        }
-      }
-      return maxFall;
-    },
-    [gridHeight],
-  );
-
-  const isCollision = (
-    x: number,
-    y: number,
-    width: number,
-    blocks: Block[],
-    blockId: number,
-  ) => {
-    return blocks.some(
-      (block) =>
-        block.id !== blockId &&
-        block.y === y &&
-        x < block.x + block.width &&
-        x + width > block.x,
-    );
-  };
-
   const applyGravity = useCallback(() => {
     setBlocks((prevBlocks) => {
       const newBlocks = prevBlocks.map((block) => {
-        const fallDistance = calculateFallDistance(block, prevBlocks);
+        const fallDistance = calculateFallDistance(
+          block,
+          prevBlocks,
+          gridHeight,
+        );
         if (fallDistance > 0) {
           return { ...block, y: block.y + 1 };
         }
@@ -430,7 +377,7 @@ const Grid: React.FC<GridProps> = ({
 
       return newBlocks;
     });
-  }, [calculateFallDistance]);
+  }, [gridHeight]);
 
   useEffect(() => {
     const interval = setInterval(() => {

client/src/ui/elements/pagination.tsx

@@ -64,6 +64,11 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
+const isMdOrLarger = () => {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(min-width: 768px)").matches;
+};
+
 const PaginationPrevious = ({
   className,
   ...props
@@ -75,7 +80,7 @@ const PaginationPrevious = ({
     {...props}
   >
     <ChevronLeftIcon className="h-4 w-4" />
-    <span>Previous</span>
+    {!isMdOrLarger && <span>Previous</span>}
   </PaginationLink>
 );
 PaginationPrevious.displayName = "PaginationPrevious";
@@ -90,7 +95,7 @@ const PaginationNext = ({
     className={cn("gap-1 pr-2.5", className)}
     {...props}
   >
-    <span>Next</span>
+    {!isMdOrLarger && <span>Next</span>}
     <ChevronRightIcon className="h-4 w-4" />
   </PaginationLink>
 );