Merge branch 'dev'

client/src/dojo/setup.ts

@@ -29,7 +29,7 @@ export async function setup({ ...config }: Config) {
   // await getSyncEntities(toriiClient, contractModels as any, []);
   const sync = await getSyncEntities<Schema>(
     toriiClient,
-    Object.values(contractComponents),
+    contractComponents as any,
     [],
     1000,
   );

client/src/hooks/useChest.tsx

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useComponentValue } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
+import useDeepMemo from "./useDeepMemo";
 
 export const useChest = ({ id }: { id: number }) => {
   const {
@@ -17,7 +18,7 @@ export const useChest = ({ id }: { id: number }) => {
   const key = useMemo(() => getEntityIdFromKeys([BigInt(id)]) as Entity, [id]);
 
   const component = useComponentValue(Chest, key);
-  const chest = useMemo(() => {
+  const chest = useDeepMemo(() => {
     return component ? new ChestClass(component) : null;
   }, [component]);
 

client/src/hooks/useCredits.tsx

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useComponentValue } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
+import useDeepMemo from "./useDeepMemo";
 
 export const useCredits = ({ playerId }: { playerId: string | undefined }) => {
   const {
@@ -21,7 +22,7 @@ export const useCredits = ({ playerId }: { playerId: string | undefined }) => {
   //console.log("[useCredits] creditsKey", creditsKey);
   const component = useComponentValue(Credits, creditsKey);
   //console.log("[useCredits] component", component);
-  const credits = useMemo(() => {
+  const credits = useDeepMemo(() => {
     return component ? new CreditsClass(component) : null;
   }, [component]);
   //console.log("[useCredits] credits", credits);

client/src/hooks/useDeepMemo.tsx

@@ -0,0 +1,58 @@
+import { useRef } from "react";
+
+export function deepCompare(a: any, b: any): boolean {
+  // Check for strict equality (handles primitives and reference equality)
+  if (a === b) return true;
+
+  // Check for null or undefined
+  if (a == null || b == null) return a === b;
+
+  // Check for Date objects
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+
+  // Check for Array objects
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepCompare(a[i], b[i])) return false;
+    }
+    return true;
+  }
+
+  // Check for plain objects
+  if (typeof a === "object" && typeof b === "object") {
+    // Compare object prototypes
+    if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;
+
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+
+    // Compare number of keys
+    if (keysA.length !== keysB.length) return false;
+
+    // Compare keys in 'a' to keys in 'b'
+    for (const key of keysA) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!deepCompare(a[key], b[key])) return false;
+    }
+
+    return true;
+  }
+
+  // If none of the above, values are not equal
+  return false;
+}
+
+function useDeepMemo<T>(factory: () => T, deps: any[]): T {
+  const valueRef = useRef<{ deps: any[]; value: T }>();
+
+  if (!valueRef.current || !deepCompare(valueRef.current.deps, deps)) {
+    valueRef.current = { deps, value: factory() };
+  }
+
+  return valueRef.current.value;
+}
+
+export default useDeepMemo;

client/src/hooks/useGame.tsx

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useComponentValue } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
+import useDeepMemo from "./useDeepMemo";
 
 export const useGame = ({
   gameId,
@@ -25,7 +26,7 @@ export const useGame = ({
   );
   const component = useComponentValue(Game, gameKey);
 
-  const game = useMemo(() => {
+  const game = useDeepMemo(() => {
     return component ? new GameClass(component) : null;
   }, [component]);
 

client/src/hooks/useGrid.tsx

@@ -29,9 +29,13 @@ export const useGrid = ({
 
   // Utiliser useEffect pour gérer le log quand la grille change
   useEffect(() => {
+    console.log("[useGrid] useEffect");
     if (game?.blocks) {
+      console.log("[useGrid] game?.blocks", game?.blocks);
+      console.log("[useGrid] prevBlocksRef.current", prevBlocksRef.current);
       // Vérifier si la grille a changé
       if (!deepCompareNumberArrays(game.blocks, prevBlocksRef.current)) {
+        console.log("[useGrid] deepCompareNumberArrays");
         // Si shouldLog est true, on log les données
         if (shouldLog) {
           const num = game.blocksRaw;

client/src/hooks/usePlayer.tsx

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useComponentValue } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
+import useDeepMemo from "./useDeepMemo";
 
 export const usePlayer = ({ playerId }: { playerId: string | undefined }) => {
   const {
@@ -21,7 +22,7 @@ export const usePlayer = ({ playerId }: { playerId: string | undefined }) => {
   //console.log("playerKey", playerKey);
   const component = useComponentValue(Player, playerKey);
   //console.log("component", component);
-  const player = useMemo(() => {
+  const player = useDeepMemo(() => {
     return component ? new PlayerClass(component) : null;
   }, [component]);
 

client/src/hooks/useSettings.tsx

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useComponentValue } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
+import useDeepMemo from "./useDeepMemo";
 
 export const useSettings = () => {
   const {
@@ -20,7 +21,7 @@ export const useSettings = () => {
   );
 
   const component = useComponentValue(Settings, settingsKey);
-  const settings = useMemo(() => {
+  const settings = useDeepMemo(() => {
     return component ? new SettingsClass(component) : null;
   }, [component]);
 

client/src/hooks/useTournament.tsx

@@ -5,6 +5,7 @@ import { Entity } from "@dojoengine/recs";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useDojo } from "@/dojo/useDojo";
 import { Tournament } from "@/dojo/game/models/tournament";
+import useDeepMemo from "./useDeepMemo";
 
 interface TournamentInfo {
   id: number;
@@ -58,6 +59,7 @@ const useTournament = (mode: ModeType): TournamentInfo => {
   );
 
   const component = useComponentValue(Tournament, tournamentKey);
+
   const tournament = useMemo(() => {
     return component ? new TournamentClass(component) : null;
   }, [component]);

client/src/main.tsx

@@ -28,10 +28,7 @@ export function Main() {
   const connectors = [cartridgeConnector];
   const [setupResult, setSetupResult] = useState<SetupResult | null>(null);
 
-  const loading = useMemo(
-    () => !setupResult,
-    [setupResult],
-  );
+  const loading = useMemo(() => !setupResult, [setupResult]);
 
   useEffect(() => {
     async function initialize() {

client/src/ui/screens/Home.tsx

@@ -49,7 +49,7 @@ export const Home = () => {
   useViewport();
   useRewardsCalculator();
 
-  useQuerySync<Schema>(toriiClient, Object.values(contractComponents), []);
+  useQuerySync<Schema>(toriiClient, contractComponents as any, []);
 
   const isSigning = false; //useAutoSignup();
 
@@ -145,9 +145,9 @@ export const Home = () => {
     prevGameOverRef.current = game?.over;
   }, [game?.over]);
 
-  useEffect(() => {
+  /*useEffect(() => {
     console.log("==================> Grid is changing");
-  }, [grid]);
+  }, [grid]);*/
 
   // Define render functions
   const renderDesktopView = () => (
@@ -328,7 +328,7 @@ export const Home = () => {
                         // Check if game is over because otherwise we can display
                         // previous game data on the board while the new game is starting
                         // and torii indexing
-                        initialGrid={game.isOver() ? [] : grid}
+                        initialGrid={game.isOver() ? [] : game.blocks}
                         nextLine={game.isOver() ? [] : game.next_row}
                         score={game.isOver() ? 0 : game.score}
                         combo={game.isOver() ? 0 : game.combo}