Svelte re-rendering issue

Question

I created a ScoreBoard component which will render the score, when the trick is completed.

Here is the code, this is the score updating function.

  export let game = {
    deck: undefined,
    players: [],
    tricks: [],
    contract: {},
  };

  let scores = null; // scores = {'0_1': 0, '2_3': 0} (structure of the object)

  $: {
    game.tricks;
    scores = getRunningScores();
    scores = scores
  }

  function getRunningScores() {
    console.log("called");
    let newScores = {};
    if (game?.tricks?.length > 0) {
      // Is the current trick complete?
      let skipLast = !faeko.isTrickComplete();

      game.tricks.forEach((_, i) => {
        // Skip the last trick if incomplete
        if (skipLast) {
          if (i >= game.tricks.length - 1) return;
        }

        newScores = faeko.trickScore();
        newScores = newScores;
        console.log("scores made by each team ", newScores);
      });
    }

    return newScores;
  }

  <div class:score-board={game?.tricks?.length > 0}>
    {#if game.tricks && game.tricks.length > 0}
      <ScoreBoard players={game?.players} scores={scores} />
    {:else}
      <div class="contract-div">
        <p class="label">Score</p>
        <div class="contract-container">
          <span class="nick-name"></span>
          <div class="contract">
            <div class="value">
              <span></span>
            </div>
          </div>
          <div class="dblRdbl"></div>
        </div>
      </div>
    {/if}
  </div>

If the game.tricks got updated, it should call the getrunningScore() and update the scores. Even it is updating in console. But it is not calling the <ScoreBoard />

$: console.log("Scores made in current trick ", scores);

Answer 1

try to declare the object in store.js for example as

   import { writable } from 'svelte/store';
        
        export const game = writable({
          deck: undefined,
          players: [],
          tricks: [],
          contract: {},
          scores: {},
        });

On Component

<script>
  import { game } from './store.js';
  import ScoreBoard from './ScoreBoard.svelte';

  $: {
    const tricks = $game.tricks;
    const isTrickComplete = faeko.isTrickComplete();

    if (tricks.length > 0 && !isTrickComplete) {
      game.update((currentGame) => {
        const newScores = faeko.trickScore();
        return { ...currentGame, scores: newScores };
      });
    }
  }
</script>

<div class:score-board={$game.tricks.length > 0}>
  {#if $game.tricks.length > 0}
    <ScoreBoard players={$game.players} scores={$game.scores} />
  {:else}
    <div class="contract-div">
      <p class="label">Score</p>
      <div class="contract-container">
        <span class="nick-name"></span>
        <div class="contract">
          <div class="value">
            <span></span>
          </div>
        </div>
        <div class="dblRdbl"></div>
      </div>
    </div>
  {/if}
</div>

I wrote it a bit on prima vista...