added feature to register team

src/lib/MainWrapper.svelte

@@ -2,13 +2,32 @@
   import { invoke } from "@tauri-apps/api/tauri";
   import AutoComplete from "simple-svelte-autocomplete";
   import DisplayData from "./DisplayData.svelte";
-  import type { PokemonData } from "../model/PokemonStatus";
-  import type { PokemonDBData } from "src/model/PokemonData";
+  import type { PokemonStatus } from "../model/PokemonStatus";
+  import type { PokemonDBData, PokemonData } from "src/model/PokemonData";
+  import type { ItemData, ItemEffect } from "../model/ItemData";
   $: {
     if (myValue > 0 && myValue !== currentValue) {
-      invoke("search", { index: myValue }).then((r) => {
+      invoke("search", { index: myValue }).then((r: PokemonDBData) => {
         currentValue = myValue;
-        pokemonData = r as PokemonDBData;
+        pokemonData = {
+          id: r.id,
+          name: r.name,
+          types: r.types,
+          thumbnail: r.thumbnail,
+          abilities: r.abilities,
+          hp: r.hp,
+          attack: r.attack,
+          defense: r.defense,
+          special_attack: r.special_attack,
+          special_defense: r.special_defense,
+          speed: r.speed,
+          learnset: r.learnset,
+          item: 0,
+          terastype: [0],
+        };
+        item = 0;
+        terastype = [0];
+        pokemonDataArray[index] = pokemonData;
         console.log(pokemonData);
       });
     }
@@ -21,13 +40,17 @@
       spatk: spatk_final,
       spdef: spdef_final,
       spd: spd_final,
+      item: item,
     };
     console.log(pokemonStatus);
   }
   export let attackId: number | undefined;
+  export let items: ItemData[];
   let myValue;
+  let index = 0;
   let currentValue = 0;
-  let pokemonData: PokemonDBData | undefined;
+  let pokemonData: PokemonData | undefined;
+  let pokemonDataArray: PokemonData[] = [];
   let terastype = [0];
   let hp_final = 0;
   let atk_final = 0;
@@ -35,7 +58,8 @@
   let spatk_final = 0;
   let spdef_final = 0;
   let spd_final = 0;
-  export let pokemonStatus: PokemonData = {
+  let item = 0;
+  export let pokemonStatus: PokemonStatus = {
     types: [],
     terastype: [0],
     hp: 0,
@@ -44,6 +68,7 @@
     spatk: 0,
     spdef: 0,
     spd: 0,
+    item: 0,
   };
   async function getItems(keyword) {
     try {
@@ -70,23 +95,93 @@
     />
   </div>
   <div class="row-display">
-    <DisplayData
-      {pokemonData}
-      bind:terastype
-      bind:hp_final
-      bind:atk_final
-      bind:def_final
-      bind:spatk_final
-      bind:spdef_final
-      bind:spd_final
-      bind:attackId
-    />
+    <div class="pokemon-button-div">
+      <table class="button-table">
+        {#each [0, 1, 2, 3, 4, 5] as i}
+        <tr>
+          <td>
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div class="pokemon-button {i % 2 === 0 ? "odd" : "even"}" on:click={() => {
+              index = i;
+              pokemonData = pokemonDataArray[i];
+            }}>
+              {#if pokemonDataArray[i]}
+                <img
+                  src={`data:image/png;base64,${pokemonDataArray[i].thumbnail}`}
+                  alt={pokemonDataArray[i].name}
+                  width="15%"
+                />
+                {pokemonDataArray[i].name}
+              {:else}
+              No Pokemon
+              {/if}
+            </div>
+          </td>
+        </tr>
+        {/each}
+      </table>
+    </div>
+    <div class="display-data">
+      <DisplayData
+        {pokemonData}
+        bind:terastype
+        bind:hp_final
+        bind:atk_final
+        bind:def_final
+        bind:spatk_final
+        bind:spdef_final
+        bind:spd_final
+        bind:attackId
+        bind:item
+        {items}
+      />
+    </div>
   </div>
 </div>
 
 <style>
   .row-display {
-    height: 755px;
+    height: 759px;
+    display: flex;
+  }
+  .button-table {
+    width: 200px;
+  }
+  .pokemon-button-div {
+    width: 200px;
+    border-right: 2px solid white;
+  }
+  .display-data {
+    width: 800px;
+    height: 759px;
     overflow-y: scroll;
   }
-</style>
+  .pokemon-button { 
+    padding: 10px;
+    border-top-left-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;  
+    height: 50px;  
+  }
+  .odd {
+    color: black;
+    background-color: azure;
+  }
+  .odd:hover {
+    color: black;
+    background-color:aquamarine;
+    transition: background-color 1s ease;
+    cursor: pointer;
+  }
+  .even {
+    color: black;
+    background-color: beige;
+  }
+  .even:hover {
+    color: black;
+    background-color:burlywood;
+    transition: background-color 1s ease;
+    cursor: pointer;
+  }
+</style>