Debugger.svelte

<script lang="ts">
  import {
    gameFactsStore,
    addGameFactToFactArray,
    toggleFactInFactArray,
  } from "./gameFacts";
  import type { Dialog, DialogMap, DialogSet } from "./types";
  import { findDialogSetProblems } from "./utils";

  export let currentDialog: Dialog;
  export let dialogSet: DialogSet;
  $: dialogNames = Object.keys(dialogSet.dialogs);
  export let selectedDialogName: string;

  /**
   * Collect all facts referenced in these dialogs
   */
  function getDialogFacts(dialogMap: DialogMap): String[] {
    const dialogs: Dialog[] = [];
    for (const dmKey of Object.keys(dialogMap)) dialogs.push(dialogMap[dmKey]);
    const allFacts = dialogs
      .map((dialog) => [
        ...(dialog.addFacts || []),
        ...(dialog.removeFacts || []),
        ...dialog.options.map((opt) => opt.requiredFacts).flat(),
        ...dialog.options.map((opt) => opt.forbiddenFacts).flat(),
      ])
      .flat();
    // Deduplicate entries
    const factsSet = new Set(allFacts);
    return [...factsSet].filter(e => e !== undefined);
  }

  let seenFactIds = new Set<String>([
    ...$gameFactsStore,
    ...getDialogFacts(dialogSet.dialogs),
  ]);
  $: seenFactIdsArray = Array.from(seenFactIds);
  let addFactInputValue: string;
</script>

<div>
  <h3>Dialog-Debugger</h3>
  Jump to dialog:
  <!-- svelte-ignore a11y-no-onchange -->
  <select
    bind:value={selectedDialogName}
    on:change={() => (currentDialog = dialogSet.dialogs[selectedDialogName])}
  >
    {#each dialogNames as dialogName}
      <option value={dialogName} selected={dialogName === selectedDialogName}>
        {dialogName}
      </option>
    {/each}
  </select>
  <br />
  <ol>
    {#each findDialogSetProblems(dialogSet) as { sourceDialog, text }}
      <li>
        {sourceDialog}: <code style="color: orange">{text}</code>
      </li>
    {/each}
  </ol>

  <hr />

  <h3>Quest-Debugger</h3>
  <b>GameFacts:</b>
  <ul>
    {#each seenFactIdsArray as gameFact}