Motion

client/src/hooks/useGame.tsx

@@ -1,10 +1,9 @@
 import { useDojo } from "@/dojo/useDojo";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useComponentValue } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
 import useDeepMemo from "./useDeepMemo";
-import { consoleTSLog } from "@/utils/logger";
 
 export const useGame = ({
   gameId,

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,11 +1,4 @@
-import React, {
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useLayoutEffect,
-} 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";
@@ -195,10 +188,13 @@ 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);