@mnbroatch/boardgame.io 0.0.1

package/src/client/debug/main/Main.svelte

@@ -0,0 +1,121 @@
+<script>
+  export let client;
+  export let clientManager;
+  export let ToggleVisibility;
+
+  import { onDestroy } from 'svelte';
+  import JSONTree from 'svelte-json-tree-auto/src/Root.svelte';
+  import ClientSwitcher from './ClientSwitcher.svelte';
+  import Move from './Move.svelte';
+  import Controls from './Controls.svelte';
+  import PlayerInfo from './PlayerInfo.svelte';
+  import { AssignShortcuts } from '../utils/shortcuts';
+
+  const shortcuts = AssignShortcuts(client.moves, 'mlia');
+
+  function SanitizeCtx(ctx) {
+    let r = {};
+    for (const key in ctx) {
+      if (!key.startsWith('_')) {
+        r[key] = ctx[key];
+      }
+    }
+    return r;
+  }
+
+  let { playerID, moves, events } = client;
+  let ctx = {};
+  let G = {};
+  const unsubscribe = client.subscribe((state) => {
+    if (state) ({ G, ctx } = state);
+    ({ playerID, moves, events } = client);
+  });
+
+  onDestroy(unsubscribe);
+</script>
+
+<style>
+  .tree {
+    --json-tree-font-family: monospace;
+    --json-tree-font-size: 14px;
+    --json-tree-null-color: #757575;
+  }
+
+  .label {
+    margin-bottom: 0;
+    text-transform: none;
+  }
+
+  h3 {
+    text-transform: uppercase;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  li {
+    list-style: none;
+    margin: 0;
+    margin-bottom: 5px;
+  }
+</style>
+
+<section>
+  <h3>Controls</h3>
+  <Controls {client} {ToggleVisibility} />
+</section>
+
+<section>
+  <h3>Players</h3>
+  <PlayerInfo
+    on:change={(e) => clientManager.switchPlayerID(e.detail.playerID)}
+    ctx={ctx}
+    playerID={playerID}
+  />
+</section>
+
+<section>
+  <h3>Moves</h3>
+  <ul>
+    {#each Object.entries(moves) as [name, fn]}
+    <li>
+      <Move shortcut={shortcuts[name]} {fn} {name} />
+    </li>
+    {/each}
+  </ul>
+</section>
+
+<section>
+  <h3>Events</h3>
+
+  <ul>
+  {#if ctx.activePlayers && events.endStage}
+    <li>
+      <Move name="endStage" shortcut={7} fn={events.endStage} />
+    </li>
+  {/if}
+  {#if events.endTurn}
+    <li>
+      <Move name="endTurn" shortcut={8} fn={events.endTurn} />
+    </li>
+  {/if}
+  {#if ctx.phase && events.endPhase}
+    <li>
+      <Move name="endPhase" shortcut={9} fn={events.endPhase} />
+    </li>
+  {/if}
+  </ul>
+</section>
+
+<section class="tree">
+  <h3 class="label">G</h3>
+  <JSONTree value={G} />
+</section>
+
+<section class="tree">
+  <h3 class="label">ctx</h3>
+  <JSONTree value={SanitizeCtx(ctx)} />
+</section>
+
+<ClientSwitcher {clientManager} />

package/src/client/debug/main/Move.svelte

@@ -0,0 +1,68 @@
+<script>
+  export let shortcut;
+  export let name;
+  export let fn;
+
+  import Hotkey from './Hotkey.svelte';
+  import InteractiveFunction from './InteractiveFunction.svelte';
+  import * as logger from '../../../core/logger';
+  import {getContext} from 'svelte';
+
+  const {disableHotkeys} = getContext('hotkeys');
+
+  let error = '';
+  let focus = false;
+  let enterArg = false;
+  let active = false;
+
+  function Activate() {
+    disableHotkeys.set(true);
+    active = true;
+  }
+
+  function Deactivate() {
+    disableHotkeys.set(false);
+    error = '';
+    active = false;
+  }
+
+  function Submit(e) {
+    error = '';
+    Deactivate();
+    fn.apply(this, e.detail);
+  }
+
+  function Error(e) {
+    error = e.detail;
+    logger.error(e.detail);
+  }
+</script>
+
+<style>
+  .move-error {
+    color: #a00;
+    font-weight: bold;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+</style>
+
+<div>
+  <div class="wrapper">
+    <Hotkey value={shortcut} onPress={Activate} />
+    <InteractiveFunction
+      {Activate}
+      {Deactivate}
+      {name}
+      {active}
+      on:submit={Submit}
+      on:error={Error} />
+  </div>
+  {#if error}
+    <span class="move-error">{error}</span>
+  {/if}
+</div>

package/src/client/debug/main/PlayerInfo.svelte

@@ -0,0 +1,70 @@
+<script>
+  export let ctx;
+  export let playerID;
+
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+  function OnClick(player) {
+    if (player == playerID) {
+      dispatch("change", { playerID: null });
+    } else {
+      dispatch("change", { playerID: player });
+    }
+  }
+
+  function playerLabel(player) {
+    const properties = [];
+    if (player == ctx.currentPlayer) properties.push('current');
+    if (player == playerID) properties.push('active');
+    let label = `Player ${player}`;
+    if (properties.length) label += ` (${properties.join(', ')})`;
+    return label;
+  }
+
+  let players;
+  $: players = ctx ? [...Array(ctx.numPlayers).keys()].map(i => i.toString()) : [];
+</script>
+
+<style>
+  .player-box {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .player {
+    cursor: pointer;
+    text-align: center;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    background: #eee;
+    border: 3px solid #fefefe;
+    box-sizing: content-box;
+    padding: 0;
+  }
+
+  .player.current {
+    background: #555;
+    color: #eee;
+    font-weight: bold;
+  }
+
+  .player.active {
+    border: 3px solid #ff7f50;
+  }
+</style>
+
+<div class="player-box">
+  {#each players as player}
+    <button
+      class="player"
+      class:current={player == ctx.currentPlayer}
+      class:active={player == playerID}
+      on:click={() => OnClick(player)}
+      aria-label={playerLabel(player)}
+    >
+      {player}
+    </button>
+  {/each}
+</div>

package/src/client/debug/mcts/Action.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let action;
+
+  let text;
+
+  $: {
+    const { type, args } = action.payload;
+    const argsFormatted = (args || []).join(',');
+    text = `${type}(${argsFormatted})`;
+  }
+</script>
+
+<style>
+  div {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 500px;
+  }
+</style>
+
+<div alt={text}>{text}</div>

package/src/client/debug/mcts/MCTS.svelte

@@ -0,0 +1,78 @@
+<script>
+  export let metadata;
+
+  import Arrow from 'svelte-icons/fa/FaArrowAltCircleDown.svelte'
+
+  let nodes = [];
+  let prevNodes = [];
+  let preview = null;
+
+  import Table from './Table.svelte';
+
+  $: {
+    prevNodes = [];
+    nodes = [{ node: metadata }];
+  }
+
+  function SelectNode({ node, selectedIndex }, i) {
+    preview = null;
+    nodes[i].selectedIndex = selectedIndex;
+    nodes = [...nodes.slice(0, i + 1), { node }];
+  }
+
+  function PreviewNode({ node }, i) {
+    preview = node;
+  }
+</script>
+
+<style>
+.visualizer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px;
+}
+
+.preview {
+  opacity: 0.5;
+}
+
+.icon {
+  color: #777;
+  width: 32px;
+  height: 32px;
+  margin-bottom: 20px;
+}
+</style>
+
+<div class="visualizer">
+  {#each nodes as { node, selectedIndex }, i}
+    {#if i !== 0}
+    <div class="icon">
+      <Arrow/>
+    </div>
+    {/if}
+
+    <section>
+      {#if i === nodes.length - 1}
+        <Table on:select={e => SelectNode(e.detail, i)}
+               on:preview={e => PreviewNode(e.detail, i)}
+               root={node}/>
+      {:else}
+        <Table on:select={e => SelectNode(e.detail, i)}
+          root={node}
+          selectedIndex={selectedIndex}/>
+      {/if}
+    </section>
+  {/each}
+
+  {#if preview}
+    <div class="icon">
+      <Arrow/>
+    </div>
+
+    <section class="preview">
+      <Table root={preview}/>
+    </section>
+  {/if}
+</div>

package/src/client/debug/mcts/Table.svelte

@@ -0,0 +1,98 @@
+<script>
+  export let root;
+  export let selectedIndex = null;
+
+  import Action from './Action.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  let parents = [];
+  let children = [];
+
+  $: {
+    let t = root;
+    parents = [];
+    while (t.parent) {
+      const parent = t.parent;
+      const { type, args } = t.parentAction.payload;
+      const argsFormatted = (args || []).join(',');
+      const arrowText = `${type}(${argsFormatted})`;
+      parents.push({ parent, arrowText });
+      t = parent;
+    }
+    parents.reverse();
+
+    children = [...root.children]
+                   .sort((a, b) => (a.visits < b.visits ? 1 : -1))
+                   .slice(0, 50);
+  }
+
+  function Select(node, i) {
+    dispatch('select', { node, selectedIndex: i });
+  }
+
+  function Preview(node, i) {
+    if (selectedIndex === null) {
+      dispatch('preview', { node });
+    }
+  }
+</script>
+
+<style>
+  table {
+    font-size: 12px;
+    border-collapse: collapse;
+    border: 1px solid #ddd;
+    padding: 0;
+  }
+
+  tr {
+    cursor: pointer;
+  }
+
+  tr:hover td {
+    background: #eee;
+  }
+
+  tr.selected td {
+    background: #eee;
+  }
+
+  td {
+    padding: 10px;
+    height: 10px;
+    line-height: 10px;
+    font-size: 12px;
+    border: none;
+  }
+
+  th {
+    background: #888;
+    color: #fff;
+    padding: 10px;
+    text-align: center;
+  }
+</style>
+
+<table>
+  <thead>
+    <th>Value</th>
+    <th>Visits</th>
+    <th>Action</th>
+  </thead>
+
+  <tbody>
+  {#each children as child, i}
+    <tr class:clickable={children.length > 0}
+        class:selected={i === selectedIndex}
+        on:click={() => Select(child, i)}
+        on:mouseout={() => Preview(null, i)}
+        on:mouseover={() => Preview(child, i)}>
+      <td>{child.value}</td>
+      <td>{child.visits}</td>
+      <td><Action action={child.parentAction}/></td>
+    </tr>
+  {/each}
+  </tbody>
+</table>

package/src/client/debug/tests/JSONTree.mock.svelte

@@ -0,0 +1,3 @@
+<script>
+  export let value;
+</script>

package/src/client/debug/tests/debug.test.ts

@@ -0,0 +1,183 @@
+/*
+ * Copyright 2019 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import '@testing-library/jest-dom/extend-expect';
+import { screen, fireEvent, waitFor } from '@testing-library/svelte';
+import { Client } from '../../client';
+import { Local } from '../../transport/local';
+
+test('sanity', () => {
+  const client = Client({ game: {} });
+  client.start();
+  expect(screen.getByText('Controls')).toBeInTheDocument();
+  expect(screen.getByText('Players')).toBeInTheDocument();
+  expect(screen.getByText('G')).toBeInTheDocument();
+  expect(screen.getByText('ctx')).toBeInTheDocument();
+  client.stop();
+});
+
+test('switching panels', async () => {
+  const client = Client({ game: {} });
+  client.start();
+
+  // switch to info tab
+  const InfoTab = screen.getByText('Info');
+  await fireEvent.click(InfoTab);
+  expect(screen.getByText('matchID')).toBeInTheDocument();
+  expect(screen.getByText('playerID')).toBeInTheDocument();
+  expect(screen.getByText('isActive')).toBeInTheDocument();
+
+  // switch to AI tab
+  const AITab = screen.getByText('AI');
+  await fireEvent.click(AITab);
+  expect(screen.getByText('No bots available.')).toBeInTheDocument();
+  client.stop();
+});
+
+test('visibility toggle', async () => {
+  const client = Client({ game: {} });
+  client.start();
+
+  // Visibility toggle button & debug panel are rendered
+  const hideButton = screen.getByTitle('Hide Debug Panel');
+  expect(hideButton).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: 'Controls' })).toBeInTheDocument();
+
+  // Hide debug panel
+  await fireEvent.click(hideButton);
+  await waitFor(() => expect(hideButton).not.toBeInTheDocument());
+
+  // Show button is rendered & debug panel is not.
+  const showButton = screen.getByTitle('Show Debug Panel');
+  expect(showButton).toBeInTheDocument();
+  expect(
+    screen.queryByRole('heading', { name: 'Controls' })
+  ).not.toBeInTheDocument();
+
+  // Show debug panel
+  await fireEvent.click(showButton);
+  await waitFor(() => expect(showButton).not.toBeInTheDocument());
+
+  // Hide button & debug panel are rendered.
+  expect(screen.getByTitle('Hide Debug Panel')).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: 'Controls' })).toBeInTheDocument();
+
+  client.stop();
+});
+
+test('panel options', async () => {
+  const client = Client({
+    game: {},
+    debug: { hideToggleButton: true, collapseOnLoad: true },
+  });
+  client.start();
+
+  const hideButton = screen.queryByTitle('Hide Debug Panel');
+  expect(hideButton).not.toBeInTheDocument();
+
+  expect(
+    screen.queryByRole('heading', { name: 'Controls' })
+  ).not.toBeInTheDocument();
+
+  client.stop();
+});
+
+describe('multiple clients', () => {
+  const client0 = Client({
+    game: { name: 'game1' },
+    playerID: '0',
+    matchID: 'A',
+  });
+  const multiplayer = Local();
+  const client1 = Client({
+    game: { name: 'game2' },
+    playerID: '0',
+    matchID: 'B',
+    multiplayer,
+  });
+  const client2 = Client({
+    game: { name: 'game2' },
+    playerID: '1',
+    matchID: 'B',
+    multiplayer,
+  });
+
+  beforeEach(() => {
+    client0.start();
+    client1.start();
+    client2.start();
+  });
+
+  afterEach(() => {
+    client0.stop();
+    client1.stop();
+    client2.stop();
+  });
+
+  test('switching clients', async () => {
+    // Check if the client switcher is displayed.
+    await waitFor(() => screen.getByText('Client'));
+    // Get the client switcher select element.
+    const select = screen.getByLabelText('Client');
+    // Check it is displaying details for the client that rendered first.
+    expect(
+      screen.getByDisplayValue('0 — playerID: "0", matchID: "A" (game1)')
+    ).toBeInTheDocument();
+    // Switch to client1.
+    await fireEvent.change(select, { target: { value: 1 } });
+    // Check the client switcher now shows details for client1.
+    expect(
+      screen.getByDisplayValue('1 — playerID: "0", matchID: "B" (game2)')
+    ).toBeInTheDocument();
+
+    // Switch to the info tab and check if the matchID for client1 is displayed.
+    const InfoTab = screen.getByText('Info');
+    await fireEvent.click(InfoTab);
+    expect(screen.getByText('"B"')).toBeInTheDocument();
+  });
+
+  test('switching playerID for a solo client', async () => {
+    expect(client0.playerID).toBe('0');
+    // Toggle to playerID 1 by clicking on the “1” button.
+    await fireEvent.click(screen.getByRole('button', { name: 'Player 1' }));
+    // Check client0’s playerID was updated.
+    expect(
+      screen.getByDisplayValue('0 — playerID: "1", matchID: "A" (game1)')
+    ).toBeInTheDocument();
+    expect(client0.playerID).toBe('1');
+  });
+
+  test('switching playerID with multiplayer clients', async () => {
+    expect(client1.playerID).toBe('0');
+    expect(client2.playerID).toBe('1');
+    // Switch to client1.
+    const select = screen.getByLabelText('Client');
+    await fireEvent.change(select, { target: { value: 1 } });
+    // Check the client switcher now shows details for client1.
+    expect(
+      screen.getByDisplayValue('1 — playerID: "0", matchID: "B" (game2)')
+    ).toBeInTheDocument();
+    // Toggle to playerID 1 by clicking on the “1” button.
+    await fireEvent.click(screen.getByRole('button', { name: 'Player 1' }));
+    // Check the client switcher now shows details for client2.
+    expect(
+      screen.getByDisplayValue('2 — playerID: "1", matchID: "B" (game2)')
+    ).toBeInTheDocument();
+    // Client playerIDs have not changed.
+    expect(client1.playerID).toBe('0');
+    expect(client2.playerID).toBe('1');
+  });
+
+  test('switching to current client', async () => {
+    const select = screen.getByLabelText('Client');
+    await fireEvent.change(select, { target: { value: 0 } });
+    expect(
+      screen.getByDisplayValue('0 — playerID: "1", matchID: "A" (game1)')
+    ).toBeInTheDocument();
+  });
+});

package/src/client/debug/utils/shortcuts.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2018 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+export function AssignShortcuts(moveNames, blacklist) {
+  let shortcuts = {};
+
+  const taken = {};
+  for (const c of blacklist) {
+    taken[c] = true;
+  }
+
+  // Try assigning the first char of each move as the shortcut.
+  let t = taken;
+  let canUseFirstChar = true;
+  for (const name in moveNames) {
+    const shortcut = name[0];
+    if (t[shortcut]) {
+      canUseFirstChar = false;
+      break;
+    }
+
+    t[shortcut] = true;
+    shortcuts[name] = shortcut;
+  }
+  if (canUseFirstChar) {
+    return shortcuts;
+  }
+
+  // If those aren't unique, use a-z.
+  t = taken;
+  let next = 97;
+  shortcuts = {};
+  for (const name in moveNames) {
+    let shortcut = String.fromCharCode(next);
+
+    while (t[shortcut]) {
+      next++;
+      shortcut = String.fromCharCode(next);
+    }
+
+    t[shortcut] = true;
+    shortcuts[name] = shortcut;
+  }
+  return shortcuts;
+}