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);
  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>
  <details>
    <summary>Show debug tools</summary>
    <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}
        <li>
          <input
            type="checkbox"
            checked={$gameFactsStore.includes(gameFact)}
            on:change={() =>
              gameFactsStore.set(
                toggleFactInFactArray(gameFact, $gameFactsStore)
              )}
          />
          {gameFact}
        </li>
      {/each}
    </ul>
    Add fact:
    <input type="text" bind:value={addFactInputValue} />
    <button
      style="width: 3rem;"
      on:click={() => {
        gameFactsStore.set(
          addGameFactToFactArray(addFactInputValue, $gameFactsStore)
        );
        seenFactIds = seenFactIds.add(addFactInputValue);
        addFactInputValue = "";
      }}>Add</button
    >
    <button style="width: 13rem;" on:click={() => gameFactsStore.set([])}
      >Reset facts</button
    >
  </details>
</div>

<style>
  div {
    border: 1px solid;
    padding: 10px;
    margin: 5px;
  }
</style>