SingleDialogComponent.svelte

<script lang="ts">
  import type { DialogOption } from "./types";
  import { createEventDispatcher } from "svelte";
  import { gameFactsStore, addGameFactToFactArray } from "./gameFacts";
  import Typewriter from "svelte-typewriter";

  const dispatch = createEventDispatcher();

  export let imageUrl: string;
  export let title: string | undefined;
  export let text: string;
  export let options: DialogOption[] = [];
  $: usableOptions = options.filter((option) =>
    isDialogOptionAllowedByGameFacts(option, $gameFactsStore)
  );
  export let addFacts: String[] = [];
  $: {
    if (Array.isArray(addFacts)) {
      const gameFactsAfterAddedFacts = addFacts.reduce(
        (accFacts, factToAdd) => addGameFactToFactArray(factToAdd, accFacts),
        $gameFactsStore
      );
      $gameFactsStore = gameFactsAfterAddedFacts;
    }
  }
  export let removeFacts: String[] = [];
  $: {
    if (Array.isArray(removeFacts)) {
      const gameFactsAfterRemovedFacts = removeFacts.reduce(
        (accFacts, factToRemove) => accFacts.filter((f) => f !== factToRemove),
        $gameFactsStore
      );
      $gameFactsStore = gameFactsAfterRemovedFacts;
    }
  }

  function isDialogOptionAllowedByGameFacts(
    option: DialogOption,
    gameFacts: String[]
  ): boolean {
    // Check if all required facts are given
    if (Array.isArray(option.requiredFacts)) {
      const isOk = option.requiredFacts.every((requiredFact) =>
        gameFacts.includes(requiredFact)
      );
      if (!isOk) {
        return false;
      }
    }

    // Check if no forbidden facts are given
    if (Array.isArray(option.forbiddenFacts)) {
      const isOk = option.forbiddenFacts.every(
        (forbiddenFact) => !gameFacts.includes(forbiddenFact)
      );
      if (!isOk) {
        return false;
      }
    }

    return true;
  }

  function handleDialogOptionClick(option: DialogOption): void {
    dispatch("switchToDialog", option.linksToDialog);
  }
</script>

{#if typeof title === "string"}
  <h3>
    {title}
  </h3>
{/if}

<img src={imageUrl} alt="Portrait" />

<div>
  <Typewriter cascade interval={10} cursor={false}>
    {#each text.split("\n") as para}
      <p>{para}</p>
    {/each}
  </Typewriter>
</div>
<hr />
<div>
  {#each usableOptions as option}
    <button on:click={() => handleDialogOptionClick(option)}>
      {option.text}
    </button>
    <br />
  {/each}
</div>

<style>
  img {
    max-height: 15rem;
  }
</style>