add AI tab

boardgameio · Oct 26, 2019 · bbfa304 · bbfa304
1 parent d130f96
commit bbfa304
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 48 deletions.
diff --git a/src/client/debug/Debug.svelte b/src/client/debug/Debug.svelte
@@ -8,44 +8,37 @@
   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 });
 
-  const panes = {
-    main: { label: 'Main', component: Main },
-    log: { label: 'Log', component: Log },
-    info: { label: 'Info', component: Info },
-  };
-
   let pane = 'main';
   function MenuChange(e) {
     pane = e.detail;
   }
 
   let visible = true;
   function Keypress(e) {
-    switch (e.key) {
-      case '.': {
-        visible = !visible;
-        break;
-      }
-      case 'm': {
-        pane = 'main';
-        break;
-      }
-      case 'l': {
-        pane = 'log';
-        break;
-      }
-      case 'i': {
-        pane = 'info';
-        break;
-      }
+    if (e.key == '.') {
+      visible = !visible;
+      return;
     }
+    Object.entries(panes).forEach(([key, { shortcut }]) => {
+      if (e.key == shortcut) {
+        pane = key;
+      }
+    });
   }
 </script>
 
@@ -92,7 +85,9 @@
     </div>
     {#if $secondaryPane}
       <div class="secondary-pane">
-        <svelte:component this={$secondaryPane.component} metadata={$secondaryPane.metadata} />
+        <svelte:component
+          this={$secondaryPane.component}
+          metadata={$secondaryPane.metadata} />
       </div>
     {/if}
   </div>

diff --git a/src/client/debug/ai/AI.svelte b/src/client/debug/ai/AI.svelte
@@ -0,0 +1,54 @@
+<script>
+  export let client;
+
+  import Hotkey from '../main/Hotkey.svelte';
+  function Simulate(iterations = 10000, sleepTimeout = 100) {
+    const step = async () => {
+      for (let i = 0; i < iterations; i++) {
+        const action = await client.step();
+        if (!action) break;
+        await new Promise(resolve => setTimeout(resolve, sleepTimeout));
+      }
+    };
+
+    return step();
+  }
+</script>
+
+<style>
+  li {
+    list-style: none;
+    margin: none;
+    margin-bottom: 5px;
+  }
+
+  h3 {
+    text-transform: uppercase;
+  }
+</style>
+
+<section>
+  {#if client.step}
+    <h3>Controls</h3>
+    <li>
+      <Hotkey value="1" onPress={client.reset} label="reset" />
+    </li>
+    <li>
+      <Hotkey value="2" onPress={client.step} label="step" />
+    </li>
+    <li>
+      <Hotkey value="3" onPress={Simulate} label="simulate" />
+    </li>
+  {: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}
+</section>
diff --git a/src/client/debug/main/Controls.svelte b/src/client/debug/main/Controls.svelte
@@ -5,18 +5,6 @@
   import { sync } from '../../../core/action-creators';
   import { parse, stringify } from 'flatted';
 
-  function Simulate(iterations = 10000, sleepTimeout = 100) {
-    const step = async () => {
-      for (let i = 0; i < iterations; i++) {
-        const action = await client.step();
-        if (!action) break;
-        await new Promise(resolve => setTimeout(resolve, sleepTimeout));
-      }
-    };
-
-    return step();
-  }
-
   function Save() {
     const { G, ctx } = client.getState();
     const json = stringify({ G, ctx });
@@ -41,14 +29,16 @@
 </style>
 
 <section 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>
-
-  {#if client.step}
-    <li><Hotkey value="4" onPress={client.step} label="step" /></li>
-    <li><Hotkey value="5" onPress={Simulate} label="simulate" /></li>
-  {/if}
-
-  <li><Hotkey value="." disable={true} label="hide" /></li>
+  <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="." disable={true} label="hide" />
+  </li>
 </section>
diff --git a/src/client/debug/main/Main.svelte b/src/client/debug/main/Main.svelte
@@ -6,7 +6,7 @@
   import PlayerInfo from './PlayerInfo.svelte';
   import { AssignShortcuts } from '../utils/shortcuts';
 
-  const shortcuts = AssignShortcuts(client.moves, client.events, 'mli');
+  const shortcuts = AssignShortcuts(client.moves, client.events, 'mlia');
 
   function SanitizeCtx(ctx) {
     let r = {};
@@ -81,5 +81,7 @@
 
 <section>
   <label>ctx</label>
-  <pre class="json">{JSON.stringify(SanitizeCtx($client ? $client.ctx : {}), null, 2)}</pre>
+  <pre class="json">
+    {JSON.stringify(SanitizeCtx($client ? $client.ctx : {}), null, 2)}
+  </pre>
 </section>