marinlife☆ Comments - Answer Overflow

so like when this line of code runs in the deployCard after an onClick event player.combat_board[location].deployed = player.hand.find( (card) => card.id === player.selected_card_id ); I expect the currentPlayerCombatBoard() to react to that change and rerender its element

24 replies

SSolidJS

•Created by marinlife☆ on 1/7/2024 in #support

Nested Reactivity not working

But its not being updated for some reason, even though the store has been for sure updated

24 replies

SSolidJS

•Created by marinlife☆ on 1/7/2024 in #support

Nested Reactivity not working

currentPlayerCombatBoard is supposed to be updated when the .combat_board property is modified by the deployCard function

24 replies

SSolidJS

•Created by marinlife☆ on 1/7/2024 in #support

Nested Reactivity not working

Yea for now it never changes

24 replies

SSolidJS

•Created by marinlife☆ on 1/7/2024 in #support

Nested Reactivity not working

import { useGame } from "../data/context";
import { For, createMemo } from "solid-js";

export const CombatDisplay = () => {
  const [game, { deployCard }] = useGame();

  const currentPlayerIndex = 0;
  const currentPlayerCombatBoard = createMemo(() => {
    return game.players[currentPlayerIndex].combat_board;
  });

  return (
    <div class="combat-display">
      <For each={currentPlayerCombatBoard()}>
        {(location) => {
          const card = location.deployed;
          console.log("rendering");
          return (
            <div class="card">
              <h4>{card ? card.name : "Empty"}</h4>
              <p>{location.type}</p>
              {card ? (
                <button
                  onClick={[
                    deployCard,
                    [currentPlayerIndex, location.location],
                  ]}
                >
                  Action
                </button>
              ) : (
                <button
                  onClick={[
                    deployCard,
                    [currentPlayerIndex, location.location],
                  ]}
                >
                  Deploy
                </button>
              )}
            </div>
          );
        }}
      </For>
    </div>
  );
};

import { useGame } from "../data/context";
import { For, createMemo } from "solid-js";

export const CombatDisplay = () => {
  const [game, { deployCard }] = useGame();

  const currentPlayerIndex = 0;
  const currentPlayerCombatBoard = createMemo(() => {
    return game.players[currentPlayerIndex].combat_board;
  });

  return (
    <div class="combat-display">
      <For each={currentPlayerCombatBoard()}>
        {(location) => {
          const card = location.deployed;
          console.log("rendering");
          return (
            <div class="card">
              <h4>{card ? card.name : "Empty"}</h4>
              <p>{location.type}</p>
              {card ? (
                <button
                  onClick={[
                    deployCard,
                    [currentPlayerIndex, location.location],
                  ]}
                >
                  Action
                </button>
              ) : (
                <button
                  onClick={[
                    deployCard,
                    [currentPlayerIndex, location.location],
                  ]}
                >
                  Deploy
                </button>
              )}
            </div>
          );
        }}
      </For>
    </div>
  );
};

24 replies

SSolidJS

•Created by marinlife☆ on 1/7/2024 in #support

Nested Reactivity not working

Here is the code for quick reference

  const deployCard = (inputs) => {
    const id = inputs[0];
    const location = inputs[1];

    setGame(
      "players",
      id,
      produce((player) => {
        player.combat_board[location].deployed = player.hand.find(
          (card) => card.id === player.selected_card_id
        );
        const index = player.hand.findIndex(
          (c) => c.id === player.selected_card_id
        );
        if (index > -1) {
          player.hand.splice(index, 1);
        }
        player.selected_card_id = undefined;
      })
    );
  };

  const deployCard = (inputs) => {
    const id = inputs[0];
    const location = inputs[1];

    setGame(
      "players",
      id,
      produce((player) => {
        player.combat_board[location].deployed = player.hand.find(
          (card) => card.id === player.selected_card_id
        );
        const index = player.hand.findIndex(
          (c) => c.id === player.selected_card_id
        );
        if (index > -1) {
          player.hand.splice(index, 1);
        }
        player.selected_card_id = undefined;
      })
    );
  };

24 replies

Gaming

Programming