Debugger.svelte

<script lang="ts">
  import { gameFactsStore, addGameFactToFactArray, toggleFactInFactArray } from './gameFacts'
  import type { Dialog, DialogMap, DialogSet } from './types';
  
  export let currentDialog: Dialog;
  export let dialogSet: DialogSet;
  $: dialogNames = Object.keys(dialogSet.dialogs)
  export let selectedDialogName: string

  function getDialogFacts(dialogMap: DialogMap): String[] {
      const dialogs = [];
      for (const dmKey of Object.keys(dialogMap)) dialogs.push(dialogMap[dmKey]);
      return dialogs.map(dialog => [...(dialog.addFacts || []), ...(dialog.removeFacts || [])]).flat()
  }

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