From 8908881a8d2e254e8aec523edef7e8abdc9262e6 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Tue, 14 Apr 2026 10:25:40 +0700
Subject: [PATCH] fix: resolve Svelte 5 effect_update_depth_exceeded infinite
 loop

- ScoreBoard: wrap floats mutation in untrack() to prevent $effect
  from re-triggering when it reads+writes floats in same cycle
- App: split bestScore effect and use untrack() to prevent read/write
  loop on bestScore within the same $effect
---
 src/App.svelte                   | 10 ++++++++--
 src/components/ScoreBoard.svelte |  7 ++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 09b8a59..41b2f50 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,6 +2,7 @@
   import Grid from './components/Grid.svelte';
   import ScoreBoard from './components/ScoreBoard.svelte';
   import GameMessage from './components/GameMessage.svelte';
+  import { untrack } from 'svelte';
   import { initGame, move, isGameOver } from './lib/game-logic.js';
   import { GRID_SIZE } from './lib/constants.js';
   import { getDirectionFromKey, getDirectionFromSwipe } from './lib/input-handler.js';
@@ -27,9 +28,14 @@
   });
 
   $effect(() => {
-    if (gameState.score > bestScore) {
-      bestScore = gameState.score;
+    const score = gameState.score;
+    const best = untrack(() => bestScore);
+    if (score > best) {
+      bestScore = score;
     }
+  });
+
+  $effect(() => {
     saveBestScore(bestScore);
   });
 
diff --git a/src/components/ScoreBoard.svelte b/src/components/ScoreBoard.svelte
index ebca622..3bc890d 100644
--- a/src/components/ScoreBoard.svelte
+++ b/src/components/ScoreBoard.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { untrack } from 'svelte';
+
   let { score = 0, bestScore = 0, scoreDelta = 0 } = $props();
 
   let floats = $state([]);
@@ -7,7 +9,10 @@
   $effect(() => {
     if (scoreDelta > 0) {
       const id = ++floatId;
-      floats = [...floats, { id, value: scoreDelta }];
+      const delta = scoreDelta;
+      untrack(() => {
+        floats = [...floats, { id, value: delta }];
+      });
       setTimeout(() => {
         floats = floats.filter(f => f.id !== id);
       }, 600);