added search for attack

src/lib/DamageCalculator.svelte

@@ -1,7 +1,20 @@
 <script lang="ts">
+  import { invoke } from "@tauri-apps/api/tauri";
+  import AutoComplete from "simple-svelte-autocomplete";
+
   export let player1Data;
   export let player2Data;
+  let attackData;
+  $: {
+    if (myValue > 0 && myValue !== currentValue) {
 
+      invoke("search_move", { index: myValue }).then((r) => {
+        currentValue = myValue;
+        attackData = r;
+        console.log(attackData);
+      });
+    }
+  }
   let attack_direction = "p1p2";
   let attack_type = "attack";
   let attack_power = 0;
@@ -12,6 +25,10 @@
     let defender;
     let atk_value;
     let def_value;
+    if (!player1Data || !player2Data || !attackData || (!!attackData && ![1, 2].includes(attackData.category))) {
+      console.log("skip");
+      return;
+    }
     if (attack_direction === "p1p2") {
       attacker = player1Data;
       defender = player2Data;
@@ -19,7 +36,7 @@
       attacker = player2Data;
       defender = player1Data;
     }
-    if (attack_type === "attack") {
+    if (attackData.category === 1) {
       atk_value = attacker.atk;
       def_value = defender.def;
     } else {
@@ -29,7 +46,7 @@
     // 計算で使用する値をひとまとめにしてみる
     let data = {
       level: 50, // 対戦時は基本的にレベル50なのでconstでも良さそう
-      attack_power: attack_power,
+      attack_power: attackData.power,
       atk_value: atk_value,
       def_value: def_value,
 
@@ -91,6 +108,18 @@
   function getMinDamage(data){
     return Math.trunc(data.maxDamage * 85/100);
   }
+  async function getItems(keyword) {
+    try {
+      let result = await invoke("autosearch_move", { keyword });
+      // console.log(result);
+      return result;
+    } catch (e) {
+      console.log(e);
+      return [];
+    }
+  }
+  let myValue;
+  let currentValue = 0;
 </script>
 <div class="calculator">
   <table>
@@ -103,9 +132,17 @@
       </td>
     </tr>
     <tr>
-      <td><input type="radio" name="type" value="attack" bind:group={attack_type}> Attack</td>
-      <td><input type="radio" name="type" value="special" bind:group={attack_type}> Special</td>
-      <td>Attack Power: <input type="text" bind:value={attack_power}></td>
+      <td>
+        <AutoComplete
+          showClear={true}
+          searchFunction="{getItems}"
+          delay="200"
+          localFiltering={false}
+          labelFieldName="name"
+          valueFieldName="id"
+          bind:value="{myValue}"
+        />
+      </td>
       <td><input type="button" value="Calculate" on:click={calculate_damage}></td>
       <td>Total Damage: {total_min_damage} ~ {total_max_damage}</td>
     </tr>