added some more changes

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tauri-apps/api": "^1.2.0",
+        "carbon-components-svelte": "^0.72.2",
         "simple-svelte-autocomplete": "^2.5.1"
       },
       "devDependencies": {
@@ -737,6 +738,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/carbon-components-svelte": {
+      "version": "0.72.2",
+      "resolved": "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.72.2.tgz",
+      "integrity": "sha512-fTwRQ+bQ+0lZooS2FOkERIaZGoBzWNPn2Ksq8+3K4x+E/pU9EFEnFH7PadYMpuxih2o5N0Dbn0YC9JyZbZrQJw==",
+      "dependencies": {
+        "flatpickr": "4.6.9"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -885,6 +894,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.9.tgz",
+      "integrity": "sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw=="
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2031,6 +2045,14 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true
     },
+    "carbon-components-svelte": {
+      "version": "0.72.2",
+      "resolved": "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.72.2.tgz",
+      "integrity": "sha512-fTwRQ+bQ+0lZooS2FOkERIaZGoBzWNPn2Ksq8+3K4x+E/pU9EFEnFH7PadYMpuxih2o5N0Dbn0YC9JyZbZrQJw==",
+      "requires": {
+        "flatpickr": "4.6.9"
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -2141,6 +2163,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "flatpickr": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.9.tgz",
+      "integrity": "sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw=="
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
+    "carbon-components-svelte": "^0.72.2",
     "simple-svelte-autocomplete": "^2.5.1"
   },
   "devDependencies": {

src-tauri/src/main.rs

@@ -110,6 +110,27 @@ fn search_move(index: i64) -> MoveSearchResult {
 #[tauri::command]
 fn search(index: i64) -> SearchResult {
   let connection = sqlite::open("./pokemon.db").unwrap();
+  let mut learnset: Vec<PokemonDataLearnset> = vec![];
+  let move_query = "SELECT pl.id, pl.learnset_id, l.name, l.types, l.power, l.category FROM pokemon__learnset pl JOIN learnset l on pl.learnset_id = l.id WHERE pl.pokemon_id = ? ORDER BY usage";
+  for row in connection
+    .prepare(move_query)
+    .unwrap()
+    .into_iter()
+    .bind((1, index))
+    .unwrap()
+    .map(|row| row.unwrap())
+  {
+    let row_result = PokemonDataLearnset {
+      id: row.read::<i64, _>("id"),
+      learset_id: row.read::<i64, _>("learnset_id"),
+      name: row.read::<&str, _>("name").to_string(),
+      types: serde_json::from_str(row.read::<&str, _>("types")).unwrap_or(vec![0]),
+      power: row.read::<i64, _>("power"),
+      category: row.read::<i64, _>("category"),
+    };
+    learnset.push(row_result)
+  }
+  println!("Get Thing2");
   let query = "SELECT * FROM pokemon WHERE id = ?";
   for row in connection
     .prepare(query)
@@ -131,6 +152,7 @@ fn search(index: i64) -> SearchResult {
       special_attack: row.read::<i64, _>("special_attack"),
       special_defense: row.read::<i64, _>("special_defense"),
       speed: row.read::<i64, _>("speed"),
+      learnset: learnset,
     };
     return row_result
   }
@@ -146,6 +168,7 @@ fn search(index: i64) -> SearchResult {
     special_attack: 0,
     special_defense: 0,
     speed: 0,
+    learnset: vec![],
   }
 }
 fn main() {

src-tauri/src/model.rs

@@ -13,8 +13,18 @@ pub struct SearchResult {
   pub speed: i64,
   pub abilities: String,
   pub thumbnail: String,
+  pub learnset: Vec<PokemonDataLearnset>,
 }
 
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct PokemonDataLearnset {
+  pub id: i64,
+  pub learset_id: i64,
+  pub name: String,
+  pub types: Vec<i64>,
+  pub power: i64,
+  pub category: i64,
+}
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct MoveSearchResult {
   pub id: i64,

src-tauri/tauri.conf.json

@@ -60,10 +60,11 @@
     "windows": [
       {
         "fullscreen": false,
+        "maximized": true,
         "height": 950,
         "resizable": true,
         "title": "pokemon-data-displayer",
-        "width": 1000,
+        "width": 1200,
         "alwaysOnTop": false
       }
     ]

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import MainWrapper from "./lib/MainWrapper.svelte";
   import DamageCalculator from "./lib/DamageCalculator.svelte";
+  import "carbon-components-svelte/css/g80.css";
   let player1Data;
   let player2Data;
 </script>

src/lib/DisplayData.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
-  import defense_types from "../const/defense_types.json"
+  import defense_types from "../const/defense_types.json";
-  export let pokemonData
+  import type { PokemonDBData } from "src/model/PokemonData";
+  import { Accordion, AccordionItem } from "carbon-components-svelte";
+  import PhysicalIcon from "../assets/buturi.png";
+  import SpecialIcon from "../assets/tokushu.png";
+  import BuffIcon from "../assets/henka.png";
+  export let pokemonData: PokemonDBData | undefined;
   function v_validator(v) {
     if (typeof v !== "number") {
       return null;
@@ -43,8 +48,8 @@
     { id: 15 },
     { id: 16 },
     { id: 17 },
-    { id: 18 }
+    { id: 18 },
-  ]
+  ];
   function d_validator(d) {
     if (typeof d !== "number") {
       return null;
@@ -109,100 +114,110 @@
       hp_final = calculate_hp(pokemonData.hp, hp_v, hp_d);
       atk_final = other_stats(pokemonData.attack, atk_v, atk_d, atk_p);
       def_final = other_stats(pokemonData.defense, def_v, def_d, def_p);
-      spatk_final = other_stats(pokemonData.special_attack, spatk_v, spatk_d, spatk_p);
+      spatk_final = other_stats(
-      spdef_final = other_stats(pokemonData.special_defense, spdef_v, spdef_d, spdef_p);
+        pokemonData.special_attack,
+        spatk_v,
+        spatk_d,
+        spatk_p
+      );
+      spdef_final = other_stats(
+        pokemonData.special_defense,
+        spdef_v,
+        spdef_d,
+        spdef_p
+      );
       spd_final = other_stats(pokemonData.speed, spd_v, spd_d, spd_p);
     }
   }
   function generate_type(types) {
-    let result = []
+    let result = [];
-    types.forEach(type => {
+    types.forEach((type) => {
       switch (type) {
         case 1: {
-          result.push(`<div class="normal type">ノーマル</div>`)
+          result.push(`<div class="normal type">ノーマル</div>`);
           break;
         }
         case 2: {
-          result.push(`<div class="fire type">ほのお</div>`)
+          result.push(`<div class="fire type">ほのお</div>`);
           break;
         }
         case 3: {
-          result.push(`<div class="water type">みず</div>`)
+          result.push(`<div class="water type">みず</div>`);
           break;
         }
         case 4: {
-          result.push(`<div class="electric type">でんき</div>`)
+          result.push(`<div class="electric type">でんき</div>`);
           break;
         }
         case 5: {
-          result.push(`<div class="grass type">くさ</div>`)
+          result.push(`<div class="grass type">くさ</div>`);
           break;
         }
         case 6: {
-          result.push(`<div class="ice type">こおり</div>`)
+          result.push(`<div class="ice type">こおり</div>`);
           break;
         }
         case 7: {
-          result.push(`<div class="fighting type">かくとう</div>`)
+          result.push(`<div class="fighting type">かくとう</div>`);
           break;
         }
         case 8: {
-          result.push(`<div class="poison type">どく</div>`)
+          result.push(`<div class="poison type">どく</div>`);
           break;
         }
         case 9: {
-          result.push(`<div class="ground type">じめん</div>`)
+          result.push(`<div class="ground type">じめん</div>`);
           break;
         }
         case 10: {
-          result.push(`<div class="flying type">ひこう</div>`)
+          result.push(`<div class="flying type">ひこう</div>`);
           break;
         }
         case 11: {
-          result.push(`<div class="psychic type">エスパー</div>`)
+          result.push(`<div class="psychic type">エスパー</div>`);
           break;
         }
         case 12: {
-          result.push(`<div class="bug type">むし</div>`)
+          result.push(`<div class="bug type">むし</div>`);
           break;
         }
         case 13: {
-          result.push(`<div class="rock type">いわ</div>`)
+          result.push(`<div class="rock type">いわ</div>`);
           break;
         }
         case 14: {
-          result.push(`<div class="ghost type">ゴースト</div>`)
+          result.push(`<div class="ghost type">ゴースト</div>`);
           break;
         }
         case 15: {
-          result.push(`<div class="dragon type">ドラゴン</div>`)
+          result.push(`<div class="dragon type">ドラゴン</div>`);
           break;
         }
         case 16: {
-          result.push(`<div class="dark type">あく</div>`)
+          result.push(`<div class="dark type">あく</div>`);
           break;
         }
         case 17: {
-          result.push(`<div class="steel type">はがね</div>`)
+          result.push(`<div class="steel type">はがね</div>`);
           break;
         }
         case 18: {
-          result.push(`<div class="fairy type">フェアリー</div>`)
+          result.push(`<div class="fairy type">フェアリー</div>`);
           break;
         }
       }
-    })
+    });
-    if (result.length > 0)
+    if (result.length > 0) return result.join("&nbsp;");
-      return result.join('&nbsp;')
     return "&nbsp;";
   }
   function generate_weakness(types) {
     let parsed_types = JSON.parse(types);
-    console.log(parsed_types)
+    console.log(parsed_types);
     let type_compatibility = defense_types[parsed_types[0] - 1];
     if (parsed_types.length > 1) {
       let second_type_compatibility = defense_types[parsed_types[1] - 1];
-      type_compatibility = type_compatibility.map((v, i) => v * second_type_compatibility[i]
+      type_compatibility = type_compatibility.map(
+        (v, i) => v * second_type_compatibility[i]
       );
     }
     let super_weakness = [];
@@ -229,7 +244,7 @@
           immune.push(i + 1);
           break;
       }
-    })
+    });
     console.log("super_weakness", super_weakness);
     console.log("weakness", weakness);
     console.log("super_resist", super_resist);
@@ -249,7 +264,8 @@
         return "x1/4";
       case 4:
         return "x0";
-      default: return "";
+      default:
+        return "";
     }
   }
   // 個体値 (V) 0-31
@@ -274,8 +290,11 @@
   export let spdef_final = 0;
   export let spd_final = 0;
   export let terastype = [0];
+  export let item = 0;
   let level = 50;
   let selected_terastype = 0;
+  let selected_item = 0;
+
   let atk_plus = false;
   let def_plus = false;
   let spatk_plus = false;
@@ -289,11 +308,11 @@
   let spd_minus = false;
   function calculate_hp(stat, v, d) {
     // floor({(種族値+個体値)×2+min(63,floor(floor(1+√努力値)÷4))}×レベル÷100)+レベル+10
-    return Math.floor(((stat*2+v+(d/4))*(level/100))+level+10)
+    return Math.floor((stat * 2 + v + d / 4) * (level / 100) + level + 10);
   }
   function other_stats(stat, v, d, p) {
     // floor({(種族値+個体値)×2+min(63,floor(floor(1+√努力値)÷4))}×レベル÷100)+5
-    return Math.floor((((stat*2+v+(d/4))*(level/100))+5)*p)
+    return Math.floor(((stat * 2 + v + d / 4) * (level / 100) + 5) * p);
   }
   let abilities = [];
   let abilities_description = [];
@@ -302,23 +321,34 @@
 <div class="data-container">
   {#if pokemonData && pokemonData.id && pokemonData.id > 0}
     <div class="row">
+      <Accordion>
+        <AccordionItem open title="基本情報">
           <table class="pokemon-data">
             <tr>
-        <td rowspan="3" class="picture"><img src={`data:image/png;base64,${pokemonData.thumbnail}`} alt={pokemonData.jap_name} width="85%"/></td>
+              <td rowspan="4" class="picture"
+                ><img
+                  src={`data:image/png;base64,${pokemonData.thumbnail}`}
+                  alt={pokemonData.name}
+                  width="85%"
+                /></td
+              >
               <td class="pokemon-title">名前</td>
               <td class="pokemon-name">{pokemonData.name}</td>
             </tr>
             <tr>
               <td class="pokemon-title">タイプ</td>
-        <td style="display: flex;">{@html generate_type(JSON.parse(pokemonData.types))}</td>
+              <td style="display: flex;"
+                >{@html generate_type(JSON.parse(pokemonData.types))}</td
+              >
             </tr>
             <tr>
               <td class="pokemon-title">テラスタル</td>
               <td style="display: flex;">
-          <select bind:value={selected_terastype} on:change="{() => terastype = [selected_terastype]}">
+                <select
-            <option value={0}>
+                  bind:value={selected_terastype}
-              なし
+                  on:change={() => (terastype = [selected_terastype])}
-            </option>
+                >
+                  <option value={0}> なし </option>
                   {#each available_type as curr_type}
                     <option value={curr_type.id}>
                       {@html generate_type([curr_type.id])}
@@ -327,9 +357,20 @@
                 </select>
               </td>
             </tr>
+            <tr>
+              <td class="pokemon-title">アイテム</td>
+              <td style="display: flex;">
+                <select
+                  bind:value={selected_item}
+                  on:change={() => (item = selected_item)}
+                >
+                  <option value={0}> なし </option>
+                </select>
+              </td>
+            </tr>
           </table>
-  </div>
+        </AccordionItem>
-  <div class="row">
+        <AccordionItem open title="弱点">
           <table class="weakness">
             {#each generate_weakness(terastype[0] === 0 ? pokemonData.types : JSON.stringify(terastype)) as row, i}
               <tr>
@@ -340,8 +381,8 @@
               </tr>
             {/each}
           </table>
-  </div>
+        </AccordionItem>
-  <div class="row">
+        <AccordionItem open title="特性">
           <table class="abilities_table">
             {#each abilities as ability, i}
               <tr>
@@ -350,14 +391,34 @@
               </tr>
             {/each}
           </table>
-  </div>
+        </AccordionItem>
-  <div class="row">
+        <AccordionItem open title="ステータス">
           <table class="data-table">
             <tr>
               <td class="value-column"><b>HP</b></td>
               <td class="atai-column"><b>{pokemonData.hp}</b></td>
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={hp_v} min=0 max=31></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={hp_d} min=0 max=252></b></td>
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={hp_v}
+                    min="0"
+                    max="31"
+                  /></b
+                ></td
+              >
+              <td class="atai-column"
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={hp_d}
+                    min="0"
+                    max="252"
+                  /></b
+                ></td
+              >
               <td class="atai-column"><b>{hp_final}</b></td>
               <td class="atai-column"><b>+</b></td>
               <td class="atai-column"><b>-</b></td>
@@ -365,70 +426,224 @@
             <tr>
               <td class="value-column"><b>ATK</b></td>
               <td class="atai-column"><b>{pokemonData.attack}</b></td>
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={atk_v} min=0 max=31></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={atk_d} min=0 max=252></b></td>
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={atk_v}
+                    min="0"
+                    max="31"
+                  /></b
+                ></td
+              >
+              <td class="atai-column"
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={atk_d}
+                    min="0"
+                    max="252"
+                  /></b
+                ></td
+              >
               <td class="atai-column"><b>{atk_final}</b></td>
-        <td class="atai-column"><b><input type=checkbox bind:checked={atk_plus}></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input type=checkbox bind:checked={atk_minus}></b></td>
+                ><b><input type="checkbox" bind:checked={atk_plus} /></b></td
+              >
+              <td class="atai-column"
+                ><b><input type="checkbox" bind:checked={atk_minus} /></b></td
+              >
             </tr>
             <tr>
               <td class="value-column"><b>DEF</b></td>
               <td class="atai-column"><b>{pokemonData.defense}</b></td>
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={def_v} min=0 max=31></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={def_d} min=0 max=252></b></td>
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={def_v}
+                    min="0"
+                    max="31"
+                  /></b
+                ></td
+              >
+              <td class="atai-column"
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={def_d}
+                    min="0"
+                    max="252"
+                  /></b
+                ></td
+              >
               <td class="atai-column"><b>{def_final}</b></td>
-        <td class="atai-column"><b><input type=checkbox bind:checked={def_plus}></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input type=checkbox bind:checked={def_minus}></b></td>
+                ><b><input type="checkbox" bind:checked={def_plus} /></b></td
+              >
+              <td class="atai-column"
+                ><b><input type="checkbox" bind:checked={def_minus} /></b></td
+              >
             </tr>
             <tr>
               <td class="value-column"><b>S.ATK</b></td>
               <td class="atai-column"><b>{pokemonData.special_attack}</b></td>
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={spatk_v} min=0 max=31></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={spatk_d} min=0 max=252></b></td>
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={spatk_v}
+                    min="0"
+                    max="31"
+                  /></b
+                ></td
+              >
+              <td class="atai-column"
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={spatk_d}
+                    min="0"
+                    max="252"
+                  /></b
+                ></td
+              >
               <td class="atai-column"><b>{spatk_final}</b></td>
-        <td class="atai-column"><b><input type=checkbox bind:checked={spatk_plus}></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input type=checkbox bind:checked={spatk_minus}></b></td>
+                ><b><input type="checkbox" bind:checked={spatk_plus} /></b></td
+              >
+              <td class="atai-column"
+                ><b><input type="checkbox" bind:checked={spatk_minus} /></b></td
+              >
             </tr>
             <tr>
               <td class="value-column"><b>S.DEF</b></td>
               <td class="atai-column"><b>{pokemonData.special_defense}</b></td>
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={spdef_v} min=0 max=31></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={spdef_d} min=0 max=252></b></td>
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={spdef_v}
+                    min="0"
+                    max="31"
+                  /></b
+                ></td
+              >
+              <td class="atai-column"
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={spdef_d}
+                    min="0"
+                    max="252"
+                  /></b
+                ></td
+              >
               <td class="atai-column"><b>{spdef_final}</b></td>
-        <td class="atai-column"><b><input type=checkbox bind:checked={spdef_plus}></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input type=checkbox bind:checked={spdef_minus}></b></td>
+                ><b><input type="checkbox" bind:checked={spdef_plus} /></b></td
+              >
+              <td class="atai-column"
+                ><b><input type="checkbox" bind:checked={spdef_minus} /></b></td
+              >
             </tr>
             <tr>
               <td class="value-column"><b>SPD</b></td>
               <td class="atai-column"><b>{pokemonData.speed}</b></td>
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={spd_v} min=0 max=31></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input class="vd-input" type=number bind:value={spd_d} min=0 max=252></b></td>
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={spd_v}
+                    min="0"
+                    max="31"
+                  /></b
+                ></td
+              >
+              <td class="atai-column"
+                ><b
+                  ><input
+                    class="vd-input"
+                    type="number"
+                    bind:value={spd_d}
+                    min="0"
+                    max="252"
+                  /></b
+                ></td
+              >
               <td class="atai-column"><b>{spd_final}</b></td>
-        <td class="atai-column"><b><input type=checkbox bind:checked={spd_plus}></b></td>
+              <td class="atai-column"
-        <td class="atai-column"><b><input type=checkbox bind:checked={spd_minus}></b></td>
+                ><b><input type="checkbox" bind:checked={spd_plus} /></b></td
+              >
+              <td class="atai-column"
+                ><b><input type="checkbox" bind:checked={spd_minus} /></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>
+              <td class="atai-column"
-        <td class="atai-column"></td>
+                ><b
+                  >{pokemonData.hp +
+                    pokemonData.attack +
+                    pokemonData.defense +
+                    pokemonData.special_attack +
+                    pokemonData.special_defense +
+                    pokemonData.speed}</b
+                ></td
+              >
+              <td class="atai-column" />
             </tr>
             <tr>
               <td class="value-column"><b>Level</b></td>
-        <td class="atai-column"><input class="vd-input" type=number bind:value={level} min=1 max=100></td>
+              <td class="atai-column"
-        <td class="atai-column"></td>
+                ><input
+                  class="vd-input"
+                  type="number"
+                  bind:value={level}
+                  min="1"
+                  max="100"
+                /></td
+              >
+              <td class="atai-column" />
             </tr>
           </table>
+        </AccordionItem>
+        <AccordionItem open title="技">
+          <table class=weakness>
+            {#each pokemonData.learnset as learnset}
+              <tr>
+                <td><img src={learnset.category === 1 ? PhysicalIcon : learnset.category === 2 ? SpecialIcon : BuffIcon} alt="a"></td>
+                <td>{@html generate_type(learnset.types)}</td>
+                <td>{learnset.name}</td>
+                <td>{learnset.power}</td>
+              </tr>
+            {/each}
+          </table>
+        </AccordionItem>
+      </Accordion>
     </div>
   {:else}
-  <div class="row">
+    <div class="row">No data</div>
-    No data
-  </div>
   {/if}
 </div>
 
 <style>
   .pokemon-data {
-    width:90%;
+    border: 1px solid;
+    width: 90%;
+  }
+  .pokemon-data > tr > td {
+    padding: 5px;
+    border: 1px solid;
   }
   .pokemon-title {
     width: 20%;
@@ -439,7 +654,8 @@
     text-align: left;
   }
   .picture {
-    width:20%;
+    width: 20%;
+    vertical-align: top;
   }
   .data-container {
     padding-top: 20px;
@@ -459,6 +675,8 @@
   }
   .vd-input {
     width: 50px;
+    padding-left:0;
+    padding-right:0;
     height: 8px;
   }
   .abilities_table {
@@ -469,13 +687,17 @@
   .abilities_table > tr {
     border: 1px solid;
   }
-  .abilities_table > tr > td{
+  .abilities_table > tr > td {
     border: 1px solid;
+    vertical-align: middle;
+    height: 25px;
   }
   .weakness {
     width: 90%;
   }
   .weakness > tr > td {
     border: 1px solid;
+    vertical-align: middle;
+    min-height: 25px;
   }
 </style>

src/lib/MainWrapper.svelte

@@ -3,11 +3,12 @@
   import AutoComplete from "simple-svelte-autocomplete";
   import DisplayData from "./DisplayData.svelte";
   import type { PokemonData } from "../model/PokemonStatus";
+  import type { PokemonDBData } from "src/model/PokemonData";
   $: {
     if (myValue > 0 && myValue !== currentValue) {
       invoke("search", { index: myValue }).then((r) => {
         currentValue = myValue;
-        pokemonData = r;
+        pokemonData = r as PokemonDBData;
         console.log(pokemonData);
       });
     }
@@ -25,7 +26,7 @@
   }
   let myValue;
   let currentValue = 0;
-  let pokemonData;
+  let pokemonData: PokemonDBData | undefined;
   let terastype = [0];
   let hp_final = 0;
   let atk_final = 0;
@@ -67,7 +68,7 @@
       bind:value={myValue}
     />
   </div>
-  <div class="row">
+  <div class="row-display">
     <DisplayData
       {pokemonData}
       bind:terastype
@@ -80,3 +81,10 @@
     />
   </div>
 </div>
+
+<style>
+  .row-display {
+    height: 755px;
+    overflow-y: scroll;
+  }
+</style>

src/model/PokemonData.ts

@@ -0,0 +1,22 @@
+export interface PokemonDBData {
+  id: number;
+  name: string;
+  types: string;
+  thumbnail: string;
+  abilities: string;
+  hp: number;
+  attack: number;
+  defense: number;
+  special_attack: number;
+  special_defense: number;
+  speed: number;
+  learnset: PokemonLearnsetDBData[];
+};
+export interface PokemonLearnsetDBData {
+  id: number;
+  learnset_id: number;
+  name: string;
+  types: number[];
+  power: number;
+  category: number;
+}

src/style.css

@@ -95,6 +95,7 @@ input::-webkit-inner-spin-button {
 .type {
   font-size: small;
   font-weight: bold;
+  padding-top: 4px;
   width: 75px;
   height: 23px;
   border-radius: 10px;