@mnbroatch/boardgame.io 0.0.1

package/src/client/debug/log/Log.svelte

@@ -0,0 +1,157 @@
+<script>
+  export let client;
+
+  import { getContext, onDestroy } from 'svelte';
+
+  const { secondaryPane } = getContext('secondaryPane');
+
+  import { CreateGameReducer } from '../../../core/reducer';
+  import TurnMarker from './TurnMarker.svelte';
+  import PhaseMarker from './PhaseMarker.svelte';
+  import LogEvent from './LogEvent.svelte';
+  import MCTS from '../mcts/MCTS.svelte';
+
+  const reducer = CreateGameReducer({ game: client.game });
+  const initialState = client.getInitialState();
+  let { log } = $client;
+  let pinned = null;
+
+  function rewind(logIndex) {
+    let state = initialState;
+    for (let i = 0; i < log.length; i++) {
+      const { action, automatic } = log[i];
+
+      if (!automatic) {
+        state = reducer(state, action);
+
+        if (logIndex == 0) {
+          break;
+        }
+
+        logIndex--;
+      }
+    }
+    return { G: state.G, ctx: state.ctx, plugins: state.plugins };
+  }
+
+  function OnLogClick(e) {
+    const { logIndex } = e.detail;
+    const state = rewind(logIndex);
+    const renderedLogEntries = log.filter(e => !e.automatic);
+    client.overrideGameState(state);
+
+    if (pinned == logIndex) {
+      pinned = null;
+      secondaryPane.set(null);
+    } else {
+      pinned = logIndex;
+      const { metadata } = renderedLogEntries[logIndex].action.payload;
+      if (metadata) {
+        secondaryPane.set({ component: MCTS, metadata });
+      }
+    }
+  }
+
+  function OnMouseEnter(e) {
+    const { logIndex } = e.detail;
+    if (pinned === null) {
+      const state = rewind(logIndex);
+      client.overrideGameState(state);
+    }
+  }
+
+  function OnMouseLeave() {
+    if (pinned === null) {
+      client.overrideGameState(null);
+    }
+  }
+
+  function Reset() {
+    pinned = null;
+    client.overrideGameState(null);
+    secondaryPane.set(null);
+  }
+
+  onDestroy(Reset);
+
+  function OnKeyDown(e) {
+    // ESC.
+    if (e.keyCode == 27) {
+      Reset();
+    }
+  }
+
+  let renderedLogEntries;
+  let turnBoundaries = {};
+  let phaseBoundaries = {};
+
+  $: {
+    log = $client.log;
+    renderedLogEntries = log.filter(e => !e.automatic);
+
+    let eventsInCurrentPhase = 0;
+    let eventsInCurrentTurn = 0;
+
+    turnBoundaries = {};
+    phaseBoundaries = {};
+
+    for (let i = 0; i < renderedLogEntries.length; i++) {
+      const { action, payload, turn, phase } = renderedLogEntries[i];
+
+      eventsInCurrentTurn++;
+      eventsInCurrentPhase++;
+
+      if (
+        i == renderedLogEntries.length - 1 ||
+        renderedLogEntries[i + 1].turn != turn
+      ) {
+        turnBoundaries[i] = eventsInCurrentTurn;
+        eventsInCurrentTurn = 0;
+      }
+
+      if (
+        i == renderedLogEntries.length - 1 ||
+        renderedLogEntries[i + 1].phase != phase
+      ) {
+        phaseBoundaries[i] = eventsInCurrentPhase;
+        eventsInCurrentPhase = 0;
+      }
+    }
+  }
+</script>
+
+<style>
+  .gamelog {
+    display: grid;
+    grid-template-columns: 30px 1fr 30px;
+    grid-auto-rows: auto;
+    grid-auto-flow: column;
+  }
+</style>
+
+<svelte:window on:keydown={OnKeyDown}/>
+
+<div class="gamelog" class:pinned>
+  {#each renderedLogEntries as { turn }, i}
+    {#if i in turnBoundaries}
+      <TurnMarker {turn} numEvents={turnBoundaries[i]} />
+    {/if}
+  {/each}
+
+  {#each renderedLogEntries as { action, metadata }, i}
+    <LogEvent
+      pinned={i === pinned}
+      logIndex={i}
+      on:click={OnLogClick}
+      on:mouseenter={OnMouseEnter}
+      on:mouseleave={OnMouseLeave}
+      {action}
+      {metadata} />
+  {/each}
+
+  {#each renderedLogEntries as { phase }, i}
+    {#if i in phaseBoundaries}
+      <PhaseMarker {phase} numEvents={phaseBoundaries[i]} />
+    {/if}
+  {/each}
+</div>

package/src/client/debug/log/LogEvent.svelte

@@ -0,0 +1,149 @@
+<script>
+  export let logIndex;
+  export let action;
+  export let pinned;
+  export let metadata;
+  export let metadataComponent;
+
+  import LogMetadata from './LogMetadata.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  const args = action.payload.args;
+  const renderedArgs = Array.isArray(args)
+    ? args.map(arg => JSON.stringify(arg, null, 2)).join(',')
+    : JSON.stringify(args, null, 2) || '';
+  const playerID = action.payload.playerID;
+  let actionType;
+  switch (action.type) {
+    case 'UNDO':
+      actionType = 'undo';
+      break;
+    case 'REDO':
+      actionType = 'redo';
+    case 'GAME_EVENT':
+    case 'MAKE_MOVE':
+    default:
+      actionType = action.payload.type;
+      break;
+  }
+</script>
+
+<style>
+  .log-event {
+    grid-column: 2;
+    cursor: pointer;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: #fff;
+    border: 1px dotted #ccc;
+    border-left: 5px solid #ccc;
+    padding: 5px;
+    text-align: center;
+    color: #666;
+    font-size: 14px;
+    min-height: 25px;
+    line-height: 25px;
+  }
+
+  .log-event:hover,
+  .log-event:focus {
+    border-style: solid;
+    background: #eee;
+  }
+
+  .log-event.pinned {
+    border-style: solid;
+    background: #eee;
+    opacity: 1;
+  }
+
+  .args {
+    text-align: left;
+    white-space: pre-wrap;
+  }
+
+  .player0 {
+    border-left-color: #ff851b;
+  }
+
+  .player1 {
+    border-left-color: #7fdbff;
+  }
+
+  .player2 {
+    border-left-color: #0074d9;
+  }
+
+  .player3 {
+    border-left-color: #39cccc;
+  }
+
+  .player4 {
+    border-left-color: #3d9970;
+  }
+
+  .player5 {
+    border-left-color: #2ecc40;
+  }
+
+  .player6 {
+    border-left-color: #01ff70;
+  }
+
+  .player7 {
+    border-left-color: #ffdc00;
+  }
+
+  .player8 {
+    border-left-color: #001f3f;
+  }
+
+  .player9 {
+    border-left-color: #ff4136;
+  }
+
+  .player10 {
+    border-left-color: #85144b;
+  }
+
+  .player11 {
+    border-left-color: #f012be;
+  }
+
+  .player12 {
+    border-left-color: #b10dc9;
+  }
+
+  .player13 {
+    border-left-color: #111111;
+  }
+
+  .player14 {
+    border-left-color: #aaaaaa;
+  }
+
+  .player15 {
+    border-left-color: #dddddd;
+  }
+</style>
+
+<button
+  class="log-event player{playerID}"
+  class:pinned
+  on:click={() => dispatch('click', { logIndex })}
+  on:mouseenter={() => dispatch('mouseenter', { logIndex })}
+  on:focus={() => dispatch('mouseenter', { logIndex })}
+  on:mouseleave={() => dispatch('mouseleave')}
+  on:blur={() => dispatch('mouseleave')}
+>
+  <div class="args">{actionType}({renderedArgs})</div>
+  {#if metadataComponent}
+    <svelte:component this={metadataComponent} {metadata} />
+  {:else}
+    <LogMetadata {metadata} />
+  {/if}
+</button>

package/src/client/debug/log/LogMetadata.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let metadata;
+  const renderedMetadata =
+    metadata !== undefined ? JSON.stringify(metadata, null, 4) : '';
+</script>
+
+<div>{renderedMetadata}</div>

package/src/client/debug/log/PhaseMarker.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let phase;
+  export let numEvents;
+
+  const style = `grid-row: span ${numEvents}`;
+</script>
+
+<style>
+.phase-marker {
+  grid-column: 3;
+  background: #555;
+  border: 1px solid #888;
+  color: #eee;
+  text-align: center;
+  font-weight: bold;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-orientation: sideways;
+  writing-mode: vertical-rl;
+  line-height: 30px;
+  width: 100%;
+}
+</style>
+
+<div class="phase-marker" style={style}>
+  {phase || ''}
+</div>

package/src/client/debug/log/TurnMarker.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let turn;
+  export let numEvents;
+  const style = `grid-row: span ${numEvents}`;
+</script>
+
+<style>
+.turn-marker {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-column: 1;
+  background: #555;
+  color: #eee;
+  text-align: center;
+  font-weight: bold;
+  border: 1px solid #888;
+}
+</style>
+
+<div class="turn-marker" style={style}>
+  {turn}
+</div>

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

@@ -0,0 +1,59 @@
+<script>
+export let clientManager;
+
+$: ({ client, debuggableClients } = $clientManager);
+$: selected = debuggableClients.indexOf(client);
+
+const selectId = 'bgio-debug-select-client';
+const handleSelection = (e) => {
+  // Request to switch to the selected client.
+  const selectedClient = debuggableClients[e.target.value];
+  clientManager.switchToClient(selectedClient);
+  // Maintain focus on the client select menu after switching clients.
+  // Necessary because switching clients will usually trigger a mount/unmount.
+  const select = document.getElementById(selectId);
+  if (select) select.focus();
+};
+</script>
+
+<style>
+  * { box-sizing: border-box; }
+
+  section.switcher {
+    position: sticky;
+    bottom: 0;
+    transform: translateY(20px);
+    margin: 40px -20px 0;
+    border-top: 1px solid #999;
+    padding: 20px;
+    background: #fff;
+  }
+
+  label {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+    font-weight: bold;
+  }
+
+  select { min-width: 140px; }
+</style>
+
+{#if debuggableClients.length > 1}
+  <section class="switcher">
+    <label>
+      Client
+      <!-- svelte-ignore a11y-no-onchange -->
+      <select id={selectId} on:change={handleSelection} bind:value={selected}>
+        {#each debuggableClients as clientOption, index}
+          <option value={index}>
+            {index} —
+            playerID: {JSON.stringify(clientOption.playerID)},
+            matchID: {JSON.stringify(clientOption.matchID)}
+            ({clientOption.game.name})
+          </option>
+        {/each}
+      </select>
+    </label>
+  </section>
+{/if}

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

@@ -0,0 +1,58 @@
+<script>
+  export let client;
+  export let ToggleVisibility;
+
+  import Hotkey from './Hotkey.svelte';
+  import { sync } from '../../../core/action-creators';
+  import { parse, stringify } from 'flatted';
+
+  function Save() {
+    // get state to persist and overwrite deltalog, _undo, and _redo
+    const state = client.getState();
+    const json = stringify({
+      ...state,
+      _undo: [],
+      _redo: [],
+      deltalog: [],
+    });
+    window.localStorage.setItem('gamestate', json);
+    window.localStorage.setItem('initialState', stringify(client.initialState));
+  }
+
+  function Restore() {
+    const gamestateJSON = window.localStorage.getItem('gamestate');
+    const initialStateJSON = window.localStorage.getItem('initialState');
+    if (gamestateJSON !== null && initialStateJSON !== null) {
+      const gamestate = parse(gamestateJSON);
+      const initialState = parse(initialStateJSON);
+      client.store.dispatch(sync({ state: gamestate, initialState }));
+    }
+  }
+</script>
+
+<style>
+  ul {
+    padding-left: 0;
+  }
+
+  li {
+    list-style: none;
+    margin: 0;
+    margin-bottom: 5px;
+  }
+</style>
+
+<ul id="debug-controls" class="controls">
+  <li>
+    <Hotkey value="1" onPress={client.reset} label="reset" />
+  </li>
+  <li>
+    <Hotkey value="2" onPress={Save} label="save" />
+  </li>
+  <li>
+    <Hotkey value="3" onPress={Restore} label="restore" />
+  </li>
+  <li>
+    <Hotkey value="." onPress={ToggleVisibility} label="hide" />
+  </li>
+</ul>

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

@@ -0,0 +1,84 @@
+<script>
+  export let value;
+  export let onPress = null;
+  export let label = null;
+  export let disable = false;
+
+  import { getContext } from 'svelte';
+
+  const { disableHotkeys } = getContext('hotkeys');
+
+  let active = false;
+  let id = `key-${value}`;
+
+  function Deactivate() {
+    active = false;
+  }
+
+  function Activate() {
+    active = true;
+    setTimeout(Deactivate, 200);
+    if (onPress) {
+      setTimeout(onPress, 1);
+    }
+  }
+
+  function Keypress(e) {
+    if (
+      !$disableHotkeys && !disable &&
+      !e.ctrlKey && !e.metaKey &&
+      e.key == value
+    ) {
+      e.preventDefault();
+      Activate();
+    }
+  }
+</script>
+
+<style>
+  .key {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  button {
+    cursor: pointer;
+    min-width: 10px;
+    padding-left: 5px;
+    padding-right: 5px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px #888;
+    background: #eee;
+    color: #444;
+  }
+
+  button:hover {
+    background: #ddd;
+  }
+
+  .key.active button {
+    background: #ddd;
+    border: 1px solid #999;
+    box-shadow: none;
+  }
+
+  label {
+    margin-left: 10px;
+  }
+</style>
+
+<svelte:window on:keydown={Keypress} />
+
+<div class="key" class:active>
+  <button {id} on:click={Activate} disabled={disable}>{value}</button>
+  {#if label}
+    <label for={id}>
+      {label}
+      <span class="screen-reader-only">{`(shortcut: ${value})`}</span>
+    </label>
+  {/if}
+</div>

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

@@ -0,0 +1,85 @@
+<script>
+  export let Activate;
+  export let Deactivate;
+  export let name;
+  export let active;
+  let value;
+  let span;
+
+  import { afterUpdate, createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  function Submit() {
+    try {
+      const value = span.innerText;
+      let argArray = new Function(`return [${value}]`)();
+      dispatch('submit', argArray);
+    } catch (error) {
+      dispatch('error', error);
+    }
+    span.innerText = '';
+  }
+
+  function OnKeyDown(e) {
+    if (e.key == 'Enter') {
+      e.preventDefault();
+      Submit();
+    }
+
+    if (e.key == 'Escape') {
+      e.preventDefault();
+      Deactivate();
+    }
+  }
+
+  afterUpdate(() => {
+    if (active) {
+      span.focus();
+    } else {
+      span.blur();
+    }
+  });
+</script>
+
+<style>
+  .move {
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+    margin-left: 10px;
+    color: #666;
+  }
+
+  .move:hover {
+    color: #333;
+  }
+
+  .move.active {
+    color: #111;
+    font-weight: bold;
+  }
+
+  .move-error {
+    color: #a00;
+    font-weight: bold;
+  }
+
+  .arg-field {
+    outline: none;
+    font-family: monospace;
+  }
+</style>
+
+<div class="move" class:active on:click={Activate}>
+  <span>{name}</span>
+  <span>(</span>
+  <span
+    class="arg-field"
+    bind:this={span}
+    on:focus={Activate}
+    on:blur={Deactivate}
+    on:keypress|stopPropagation={() => {}}
+    on:keydown={OnKeyDown}
+    contentEditable />
+  <span>)</span>
+</div>