first commit

src/lib/DisplayData.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  export let pokemonData
+  $: {
+    
+  console.log("TestInsideDisplay")
+  console.log(pokemonData)
+  }
+  function generate_type(types) {
+    let parsed_types = JSON.parse(types);
+    let result = []
+    parsed_types.forEach(type => {
+      switch (type) {
+        case 0: {
+          result.push(`<div class="normal type">ノーマル</div>`)
+          break;
+        }
+        case 1: {
+          result.push(`<div class="fighting type">かくとう</div>`)
+          break;
+        }
+        case 2: {
+          result.push(`<div class="flying type">ひこう</div>`)
+          break;
+        }
+        case 3: {
+          result.push(`<div class="poison type">どく</div>`)
+          break;
+        }
+        case 4: {
+          result.push(`<div class="ground type">じめん</div>`)
+          break;
+        }
+        case 5: {
+          result.push(`<div class="rock type">いわ</div>`)
+          break;
+        }
+        case 6: {
+          result.push(`<div class="bug type">むし</div>`)
+          break;
+        }
+        case 7: {
+          result.push(`<div class="ghost type">ゴースト</div>`)
+          break;
+        }
+        case 8: {
+          result.push(`<div class="steel type">はがね</div>`)
+          break;
+        }
+        case 9: {
+          result.push(`<div class="fire type">ほのお</div>`)
+          break;
+        }
+        case 10: {
+          result.push(`<div class="water type">みず</div>`)
+          break;
+        }
+        case 11: {
+          result.push(`<div class="grass type">くさ</div>`)
+          break;
+        }
+        case 12: {
+          result.push(`<div class="electric type">でんき</div>`)
+          break;
+        }
+        case 13: {
+          result.push(`<div class="psychic type">エスパー</div>`)
+          break;
+        }
+        case 14: {
+          result.push(`<div class="ice type">こおり</div>`)
+          break;
+        }
+        case 15: {
+          result.push(`<div class="dragon type">ドラゴン</div>`)
+          break;
+        }
+        case 16: {
+          result.push(`<div class="dark type">あく</div>`)
+          break;
+        }
+        case 17: {
+          result.push(`<div class="fairy type">フェアリー</div>`)
+          break;
+        }
+      }
+    })
+    return result.join('&nbsp;')
+  }
+</script>
+
+<div class="data-container">
+  {#if pokemonData && pokemonData.id && pokemonData.id > 0}
+  <div class="row">
+    <img src={`data:image/png;base64,${pokemonData.thumb_big}`} alt={pokemonData.jap_name}/>
+  </div>
+  <div class="row">
+    <table>
+      <tr>
+        <td><b>{pokemonData.jap_name}</b></td>
+      </tr>
+      <tr>
+        <td><b>{pokemonData.eng_name}</b></td>
+      </tr>
+      <tr>
+        <td style="display: flex;">{@html generate_type(pokemonData.types)}</td>
+      </tr>
+    </table>
+  </div>
+  <div class="row">
+    <table class="data-table">
+      <tr>
+        <td class="value-column"><b>HP</b></td>
+        <td class="atai-column"><b>{pokemonData.hp}</b></td>
+      </tr>
+      <tr>
+        <td class="value-column"><b>ATK</b></td>
+        <td class="atai-column"><b>{pokemonData.attack}</b></td>
+      </tr>
+      <tr>
+        <td class="value-column"><b>DEF</b></td>
+        <td class="atai-column"><b>{pokemonData.defense}</b></td>
+      </tr>
+      <tr>
+        <td class="value-column"><b>S.ATK</b></td>
+        <td class="atai-column"><b>{pokemonData.special_attack}</b></td>
+      </tr>
+      <tr>
+        <td class="value-column"><b>S.DEF</b></td>
+        <td class="atai-column"><b>{pokemonData.special_defense}</b></td>
+      </tr>
+      <tr>
+        <td class="value-column"><b>SPD</b></td>
+        <td class="atai-column"><b>{pokemonData.speed}</b></td>
+      </tr>
+      <tr>
+        <td class="value-column"><b>TOTAL</b></td>
+        <td class="atai-column"><b>{pokemonData.hp + pokemonData.attack + pokemonData.defense + pokemonData.special_attack + pokemonData.special_defense + pokemonData.speed}</b></td>
+      </tr>
+    </table>
+  </div>
+  {:else}
+  <div class="row">
+    No data
+  </div>
+  {/if}
+</div>
+
+<style>
+  .data-container {
+    padding-top: 20px;
+  }
+  .data-table {
+    width: 200px;
+  }
+  .value-column {
+    text-align: right;
+    padding-right: 10px;
+    width: 50%;
+  }
+  .atai-column {
+    text-align: left;
+    padding-left: 10px;
+    width: 50%;
+  }
+</style>

src/lib/MainWrapper.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/tauri";
+  import AutoComplete from "simple-svelte-autocomplete";
+  import DisplayData from "./DisplayData.svelte";
+
+  let myValue;
+  let currentValue = 0;
+  let pokemonData;
+  async function getItems(keyword) {
+    try {
+      let result = await invoke("autosearch", { keyword });
+      console.log(result);
+      return result;
+    } catch (e) {
+      console.log(e);
+      return [];
+    }
+  }
+  $: {
+    if (myValue > 0 && myValue !== currentValue) {
+      invoke("search", { index: myValue }).then((r) => {
+        currentValue = myValue;
+        pokemonData = r;
+        console.log(pokemonData);
+      });
+    }
+  }
+</script>
+
+<div>
+  <div class="row">
+    <AutoComplete
+      showClear={true}
+      searchFunction="{getItems}"
+      delay="200"
+      localFiltering={false}
+      labelFieldName="name"
+      valueFieldName="id"
+      bind:value="{myValue}"
+    />
+  </div>
+  <div class="row">
+    <DisplayData
+      pokemonData={pokemonData}
+    />
+  </div>
+</div>