add sliders to adjust iterations and playoutDepth of MCTS bot

Author: nicolodavis

src/client/debug/ai/AI.svelte

@@ -3,6 +3,7 @@
 
   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';
@@ -25,16 +26,17 @@
   }
 
   let selectedBot;
+  let botAction;
+  let botActionArgs;
   function ChangeBot() {
     const botConstructor = bots[selectedBot];
     bot = new botConstructor({
       game: client.game,
       enumerate: client.ai.enumerate,
     });
+    botAction = null;
   }
 
-  let botAction;
-  let botActionArgs;
   async function Step() {
     const t = await _Step(client, bot);
     botAction = t.payload.type;
@@ -119,6 +121,13 @@
       </select>
     </section>
 
+    {#if Object.keys(bot.opts()).length}
+      <section>
+        <h3>Options</h3>
+        <Options bot={bot}/>
+      </section>
+    {/if}
+
     {#if botAction}
     <section>
       <h3>Action</h3>

src/client/debug/ai/Options.svelte

@@ -0,0 +1,39 @@
+<script>
+  export let bot;
+
+  let values = {};
+  for ([key, value] of Object.entries(bot.opts())) {
+    values[key] = value.value;
+  }
+
+  function OnChange() {
+    for ([key, value] of Object.entries(values)) {
+      bot.setOpt(key, value);
+    }
+  }
+</script>
+
+<style>
+  label {
+    font-weight: bold;
+    color: #999;
+  }
+
+  .option {
+    margin-bottom: 20px;
+  }
+
+  .value {
+    font-weight: bold;
+  }
+</style>
+
+{#each Object.entries(bot.opts()) as [key, value]}
+  <div class="option">
+  <label>{key}</label>
+  <span class="value">{values[key]}</span>
+  {#if value.range}
+    <input type=range bind:value={values[key]} min={value.range.min} max={value.range.max} on:change={OnChange}>
+  {/if}
+  </div>
+{/each}