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>