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];
  }

  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}
            <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>

</div>

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