@mnbroatch/boardgame.io 0.0.1

package/src/client/debug/Debug.svelte

@@ -0,0 +1,239 @@
+<script>
+  export let clientManager;
+  $: client = $clientManager.client;
+
+  import { writable } from 'svelte/store';
+  import { setContext } from 'svelte';
+  import { crossfade, fly } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import Chevron from 'svelte-icons/fa/FaChevronRight.svelte';
+  import Menu from './Menu.svelte';
+  import Main from './main/Main.svelte';
+  import Info from './info/Info.svelte';
+  import Log from './log/Log.svelte';
+  import AI from './ai/AI.svelte';
+
+  const panes = {
+    main: { label: 'Main', shortcut: 'm', component: Main },
+    log: { label: 'Log', shortcut: 'l', component: Log },
+    info: { label: 'Info', shortcut: 'i', component: Info },
+    ai: { label: 'AI', shortcut: 'a', component: AI },
+  };
+
+  const disableHotkeys = writable(false);
+  const secondaryPane = writable(null);
+
+  setContext('hotkeys', { disableHotkeys });
+  setContext('secondaryPane', { secondaryPane });
+
+  let paneDiv;
+  let pane = 'main';
+  function MenuChange(e) {
+    pane = e.detail;
+    paneDiv.focus();
+  }
+
+  // Toggle debugger visibilty
+  function ToggleVisibility() {
+    visible = !visible;
+  }
+
+  const debugOpt = $clientManager.client.debugOpt
+  let visible = !debugOpt || !debugOpt.collapseOnLoad;
+  const showToggleButton = !debugOpt || !debugOpt.hideToggleButton
+
+  function Keypress(e) {
+    if (e.key == '.') {
+      ToggleVisibility();
+      return;
+    }
+    // Set displayed pane
+    if (!visible) return;
+    Object.entries(panes).forEach(([key, { shortcut }]) => {
+      if (e.key == shortcut) {
+        pane = key;
+      }
+    });
+  }
+
+  const transitionOpts = {
+    duration: 150,
+    easing: cubicOut,
+  };
+  const [send, receive] = crossfade(transitionOpts);
+</script>
+
+<style>
+  .debug-panel {
+    position: fixed;
+    color: #555;
+    font-family: monospace;
+    right: 0;
+    top: 0;
+    height: 100%;
+    font-size: 14px;
+    opacity: 0.9;
+    /* we want the debug panel to be above any other elements */
+    z-index: 99999;
+  }
+
+  .panel {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    height: 100%;
+  }
+
+  .visibility-toggle {
+    position: absolute;
+    box-sizing: border-box;
+    top: 7px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 48px;
+    height: 48px;
+    padding: 8px;
+    background: white;
+    color: #555;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  }
+
+  .visibility-toggle:hover,
+  .visibility-toggle:focus {
+    background: #eee;
+  }
+
+  .opener {
+    right: 10px;
+  }
+
+  .closer {
+    left: -326px;
+  }
+
+  /* Rotate chevron icon on toggle. */
+  @keyframes rotateFromZero {
+    from {
+      transform: rotateZ(0deg);
+    }
+    to {
+      transform: rotateZ(180deg);
+    }
+  }
+
+  .icon {
+    display: flex;
+    height: 100%;
+    animation: rotateFromZero 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s 1
+      normal forwards;
+  }
+
+  .closer .icon {
+    animation-direction: reverse;
+  }
+
+  .pane {
+    flex-grow: 2;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    background: #fefefe;
+    padding: 20px;
+    border-left: 1px solid #ccc;
+    box-shadow: -1px 0 5px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    width: 280px;
+  }
+
+  .secondary-pane {
+    background: #fefefe;
+    overflow-y: scroll;
+  }
+
+  .debug-panel :global(button),
+  .debug-panel :global(select) {
+    cursor: pointer;
+    font-size: 14px;
+    font-family: monospace;
+  }
+
+  .debug-panel :global(select) {
+    background: #eee;
+    border: 1px solid #bbb;
+    color: #555;
+    padding: 3px;
+    border-radius: 3px;
+  }
+
+  .debug-panel :global(section) {
+    margin-bottom: 20px;
+  }
+
+  .debug-panel :global(.screen-reader-only) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+</style>
+
+<svelte:window on:keypress={Keypress} />
+
+<section aria-label="boardgame.io Debug Panel" class="debug-panel">
+  {#if !visible}
+    {#if showToggleButton}
+    <button
+      on:click={ToggleVisibility}
+      class="visibility-toggle opener"
+      title="Show Debug Panel"
+      in:receive={{ key: 'toggle' }}
+      out:send={{ key: 'toggle' }}
+    >
+      <span class="icon" aria-hidden="true">
+        <Chevron />
+      </span>
+    </button>
+    {/if}
+  {:else}
+    <div transition:fly={{ x: 400, ...transitionOpts }} class="panel">
+      {#if showToggleButton}
+      <button
+        on:click={ToggleVisibility}
+        class="visibility-toggle closer"
+        title="Hide Debug Panel"
+        in:receive={{ key: 'toggle' }}
+        out:send={{ key: 'toggle' }}
+      >
+        <span class="icon" aria-hidden="true">
+          <Chevron />
+        </span>
+      </button>
+      {/if}
+      <Menu on:change={MenuChange} {panes} {pane} />
+      <div
+        bind:this={paneDiv}
+        class="pane"
+        role="region"
+        aria-label={pane}
+        tabindex="-1"
+      >
+        <svelte:component
+          this={panes[pane].component}
+          {client}
+          {clientManager}
+          {ToggleVisibility}
+        />
+      </div>
+      {#if $secondaryPane}
+        <div class="secondary-pane">
+          <svelte:component
+            this={$secondaryPane.component}
+            metadata={$secondaryPane.metadata}
+          />
+        </div>
+      {/if}
+    </div>
+  {/if}
+</section>

package/src/client/debug/Menu.svelte

@@ -0,0 +1,65 @@
+<script>
+  export let pane;
+  export let panes;
+
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+</script>
+
+<style>
+  .menu {
+    display: flex;
+    margin-top: 43px;
+    flex-direction: row-reverse;
+    border: 1px solid #ccc;
+    border-radius: 5px 5px 0 0;
+    height: 25px;
+    line-height: 25px;
+    margin-right: -500px;
+    transform-origin: bottom right;
+    transform: rotate(-90deg) translate(0, -500px);
+  }
+
+  .menu-item {
+    line-height: 25px;
+    cursor: pointer;
+    border: 0;
+    background: #fefefe;
+    color: #555;
+    padding-left: 15px;
+    padding-right: 15px;
+    text-align: center;
+  }
+
+  .menu-item:first-child {
+    border-radius: 0 5px 0 0;
+  }
+
+  .menu-item:last-child {
+    border-radius: 5px 0 0 0;
+  }
+
+  .menu-item.active {
+    cursor: default;
+    font-weight: bold;
+    background: #ddd;
+    color: #555;
+  }
+
+  .menu-item:hover,
+  .menu-item:focus {
+    background: #eee;
+    color: #555;
+  }
+</style>
+
+<nav class="menu">
+  {#each Object.entries(panes) as [key, {label}]}
+    <button
+      class="menu-item"
+      class:active={pane == key}
+      on:click={() => dispatch('change', key)}>
+      {label}
+    </button>
+  {/each}
+</nav>

package/src/client/debug/ai/AI.svelte

@@ -0,0 +1,215 @@
+<script>
+  export let client;
+  export let clientManager;
+  export let ToggleVisibility;
+
+  import { MAKE_MOVE } from '../../../core/action-types';
+  import Hotkey from '../main/Hotkey.svelte';
+  import Options from './Options.svelte';
+  import { MCTSBot } from '../../../ai/mcts-bot';
+  import { RandomBot } from '../../../ai/random-bot';
+  import MCTS from '../mcts/MCTS.svelte';
+  import { Step as _Step } from '../../../ai/ai';
+  import { getContext, onDestroy } from 'svelte';
+
+  const { secondaryPane } = getContext('secondaryPane');
+
+  const bots = {
+    'MCTS': MCTSBot,
+    'Random': RandomBot,
+  };
+
+  let debug = false;
+  let progress = null;
+  let iterationCounter = 0;
+  let metadata = null;
+  const iterationCallback = ({ iterationCounter: c, numIterations, metadata: m }) => {
+    iterationCounter = c;
+    progress = c / numIterations;
+    metadata = m;
+
+    if (debug && metadata) {
+      secondaryPane.set({ component: MCTS, metadata });
+    }
+  }
+
+  function OnDebug() {
+    if (debug && metadata) {
+      secondaryPane.set({ component: MCTS, metadata });
+    } else {
+      secondaryPane.set(null);
+    }
+  }
+
+  let bot;
+  if (client.game.ai) {
+    bot = new MCTSBot({
+      game: client.game,
+      enumerate: client.game.ai.enumerate,
+      iterationCallback,
+    });
+    bot.setOpt('async', true);
+  }
+
+  let selectedBot;
+  let botAction;
+  let botActionArgs;
+  function ChangeBot() {
+    const botConstructor = bots[selectedBot];
+    bot = new botConstructor({
+      game: client.game,
+      enumerate: client.game.ai.enumerate,
+      iterationCallback,
+    });
+    bot.setOpt('async', true);
+    botAction = null;
+    metadata = null;
+    secondaryPane.set(null);
+    iterationCounter = 0;
+  }
+
+  async function Step() {
+    botAction = null;
+    metadata = null;
+    iterationCounter = 0;
+
+    const t = await _Step(client, bot);
+
+    if (t) {
+      botAction = t.payload.type;
+      botActionArgs = t.payload.args;
+    }
+  }
+
+  function Simulate(iterations = 10000, sleepTimeout = 100) {
+    botAction = null;
+    metadata = null;
+    iterationCounter = 0;
+    const step = async () => {
+      for (let i = 0; i < iterations; i++) {
+        const action = await _Step(client, bot);
+        if (!action) break;
+        await new Promise(resolve => setTimeout(resolve, sleepTimeout));
+      }
+    };
+
+    return step();
+  }
+
+  function Exit() {
+    client.overrideGameState(null);
+    secondaryPane.set(null);
+    debug = false;
+  }
+
+  function Reset() {
+    client.reset();
+    botAction = null;
+    metadata = null;
+    iterationCounter = 0;
+    Exit();
+  }
+
+  function OnKeyDown(e) {
+    // ESC.
+    if (e.keyCode == 27) {
+      Exit();
+    }
+  }
+
+  onDestroy(Exit);
+</script>
+
+<style>
+  ul {
+    padding-left: 0;
+  }
+
+  li {
+    list-style: none;
+    margin: 0;
+    margin-bottom: 5px;
+  }
+
+  h3 {
+    text-transform: uppercase;
+  }
+
+  label {
+    color: #666;
+  }
+
+  input[type='checkbox'] {
+    vertical-align: middle;
+  }
+</style>
+
+<svelte:window on:keydown={OnKeyDown}/>
+
+<section>
+  {#if client.game.ai && !client.multiplayer}
+    <section>
+      <h3>Controls</h3>
+      <ul>
+        <li>
+          <Hotkey value="1" onPress={Reset} label="reset" />
+        </li>
+        <li>
+          <Hotkey value="2" onPress={Step} label="play" />
+        </li>
+        <li>
+          <Hotkey value="3" onPress={Simulate} label="simulate" />
+        </li>
+      </ul>
+    </section>
+
+    <section>
+      <h3>Bot</h3>
+      <select bind:value={selectedBot} on:change={ChangeBot}>
+        {#each Object.keys(bots) as bot}
+          <option value={bot}>{bot}</option>
+        {/each}
+      </select>
+    </section>
+
+    {#if Object.keys(bot.opts()).length}
+      <section>
+        <h3>Options</h3>
+        <label for="ai-option-debug">debug</label>
+        <input id="ai-option-debug" type=checkbox bind:checked={debug} on:change={OnDebug}>
+        <Options bot={bot}/>
+      </section>
+    {/if}
+
+    {#if botAction || iterationCounter}
+    <section>
+      <h3>Result</h3>
+      {#if progress && progress < 1.0}
+        <progress value={progress}></progress>
+      {/if}
+
+      {#if botAction}
+        <ul>
+          <li>Action: {botAction}</li>
+          <li>Args: {JSON.stringify(botActionArgs)}</li>
+        </ul>
+      {/if}
+    </section>
+    {/if}
+  {:else}
+    {#if client.multiplayer}
+      <p>The bot debugger is only available in singleplayer mode.</p>
+    {:else}
+      <p>No bots available.</p>
+
+      <p>
+        Follow the instructions
+        <a
+          href="https://boardgame.io/documentation/#/tutorial?id=bots"
+          target="_blank">
+          here</a>
+        to set up bots.
+      </p>
+    {/if}
+  {/if}
+</section>

package/src/client/debug/ai/Options.svelte

@@ -0,0 +1,48 @@
+<script>
+  export let bot;
+
+  let values = {};
+  for (let [key, value] of Object.entries(bot.opts())) {
+    values[key] = value.value;
+  }
+
+  function OnChange() {
+    for (let [key, value] of Object.entries(values)) {
+      bot.setOpt(key, value);
+    }
+  }
+
+  const makeID = (key) => 'ai-option-' + key;
+</script>
+
+<style>
+  label {
+    color: #666;
+  }
+
+  .option {
+    margin-bottom: 20px;
+  }
+
+  .value {
+    font-weight: bold;
+    color: #000;
+  }
+
+  input[type='checkbox'] {
+    vertical-align: middle;
+  }
+</style>
+
+{#each Object.entries(bot.opts()) as [key, value]}
+  <div class="option">
+    <label for={makeID(key)}>{key}</label>
+
+    {#if value.range}
+      <span class="value">{values[key]}</span>
+      <input id={makeID(key)} type=range bind:value={values[key]} min={value.range.min} max={value.range.max} on:change={OnChange}>
+    {:else if typeof value.value === 'boolean'}
+      <input id={makeID(key)} type=checkbox bind:checked={values[key]} on:change={OnChange}>
+    {/if}
+  </div>
+{/each}

package/src/client/debug/info/Info.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let client;
+  export let clientManager;
+  export let ToggleVisibility;
+
+  import Item from './Item.svelte';
+</script>
+
+<style>
+.gameinfo {
+  padding: 10px;
+}
+</style>
+
+<section class="gameinfo">
+  <Item name="matchID" value={client.matchID} />
+  <Item name="playerID" value={client.playerID} />
+  <Item name="isActive" value={$client.isActive} />
+  {#if client.multiplayer}
+    <Item name="isConnected" value={$client.isConnected} />
+  {/if}
+</section>

package/src/client/debug/info/Item.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let name;
+  export let value;
+</script>
+
+<style>
+.item {
+  padding: 10px;
+}
+
+.item:not(:first-child) {
+  border-top: 1px dashed #aaa;
+}
+
+.item div {
+  float: right;
+  text-align: right;
+}
+</style>
+
+<div class="item">
+  <strong>{name} </strong>
+  <div>{JSON.stringify(value)}</div>
+</div>