fix minor bug

src-tauri/Cargo.lock

@@ -1709,6 +1709,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "wana_kana",
+ "wfd",
 ]
 
 [[package]]
@@ -2949,6 +2950,16 @@ dependencies = [
  "windows-metadata",
 ]
 
+[[package]]
+name = "wfd"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e713040b67aae5bf1a0ae3e1ebba8cc29ab2b90da9aa1bff6e09031a8a41d7a8"
+dependencies = [
+ "libc",
+ "winapi",
+]
+
 [[package]]
 name = "winapi"
 version = "0.3.9"

src-tauri/Cargo.toml

@@ -19,6 +19,7 @@ serde = { version = "1.0.152", features = ["derive"] }
 tauri = { version = "1.2", features = ["shell-open"] }
 sqlite = "0.30.3"
 wana_kana = "2.1.0"
+wfd = "0.1.7"
 
 [features]
 # by default Tauri runs in production mode

src-tauri/src/main.rs

@@ -2,11 +2,14 @@
   all(not(debug_assertions), target_os = "windows"),
   windows_subsystem = "windows"
 )]
+use std::fs;
+
 use serde_json::json;
-use wana_kana::to_katakana::*;
 use wana_kana::to_hiragana::*;
+use wana_kana::to_katakana::*;
 mod model;
 use model::*;
+use wfd::DialogParams;
 
 #[tauri::command]
 fn autosearch_move(keyword: &str) -> serde_json::Value {
@@ -31,10 +34,7 @@ fn autosearch_move(keyword: &str) -> serde_json::Value {
   {
     let row_result = Autosearch {
       id: row.read::<i64, _>("id"),
-      name: format!(
+      name: format!("{}", row.read::<&str, _>("name").to_string()),
-        "{}",
-        row.read::<&str, _>("name").to_string()
-      ),
     };
     result.push(row_result);
   }
@@ -42,6 +42,65 @@ fn autosearch_move(keyword: &str) -> serde_json::Value {
   serde_json::to_value(result).unwrap_or(serde_json::json!("[]"))
 }
 
+#[tauri::command]
+fn save_json(json_content: Vec<Option<PokemonDataToSave>>) -> Result<(), String> {
+  let params = DialogParams {
+    title: "Select a file to save",
+    file_types: vec![("JSON File", "*.json")],
+    file_name: "team.json",
+    default_extension: "json",
+    ..Default::default()
+  };
+  match wfd::save_dialog(params) {
+    Ok(r) => {
+      let result = fs::write(r.selected_file_path, serde_json::to_string_pretty(&json_content).unwrap());
+      if let Err(e) = result {
+        Err(format!("Error: {e:?}"))
+      } else {
+        Ok(())
+      }
+    }
+    Err(e) => {
+      Err(format!("Error: {e:?}"))
+    }
+  }
+}
+#[tauri::command]
+fn load_json() -> Result<serde_json::Value, String> {
+  let params = DialogParams {
+    title: "Select a file to load",
+    file_types: vec![("JSON File", "*.json")],
+    default_extension: "json",
+    ..Default::default()
+  };
+  match wfd::open_dialog(params) {
+    Ok(r) => {
+      let file_content_string = fs::read_to_string(r.selected_file_path);
+      if let Err(e) = file_content_string {
+        return Err(format!("Error: {e:?}"))
+      }
+      match serde_json::from_str::<Vec<PokemonDataToSave>>(&file_content_string.unwrap()) {
+        Ok(c) => {
+          let mut result: Vec<PokemonDataToLoad> = vec![];
+          for d in c {
+            let pokemon_data = search(d.id);
+            let pokemon_data_to_load = PokemonDataToLoad::from((d, pokemon_data));
+            result.push(pokemon_data_to_load);
+          }
+          if result.len() > 0 {
+            Ok(serde_json::to_value(result).unwrap())
+          } else {
+            Err("Unable to load pokemon data.".to_string())
+          }
+        },
+        Err(e) => Err(format!("Error: {e:?}")),
+      }
+    }
+    Err(e) => {
+      Err(format!("Error: {e:?}"))
+    }
+  }
+}
 #[tauri::command]
 fn autosearch(keyword: &str) -> serde_json::Value {
   let connection = sqlite::open("./pokemon.db").unwrap();
@@ -62,10 +121,7 @@ fn autosearch(keyword: &str) -> serde_json::Value {
   {
     let row_result = Autosearch {
       id: row.read::<i64, _>("id"),
-      name: format!(
+      name: format!("{}", row.read::<&str, _>("name").to_string()),
-        "{}",
-        row.read::<&str, _>("name").to_string()
-      ),
     };
     result.push(row_result);
   }
@@ -87,7 +143,7 @@ fn search_move(index: i64) -> MoveSearchResult {
     let row_result = MoveSearchResult {
       id: row.read::<i64, _>("id"),
       name: row.read::<&str, _>("name").to_string(),
-      types: row.read::<&str, _>("types").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"),
       priority: row.read::<i64, _>("priority"),
@@ -96,17 +152,17 @@ fn search_move(index: i64) -> MoveSearchResult {
         _ => None,
       },
     };
-    return row_result
+    return row_result;
   }
   return MoveSearchResult {
     id: 0,
     name: "Wrong".to_string(),
-    types: "[0]".to_string(),
+    types: vec![0],
     power: 0,
     category: 0,
     priority: 0,
     condition: None,
-  }
+  };
 }
 #[tauri::command]
 fn get_items() -> Vec<ItemSearchResult> {
@@ -134,10 +190,18 @@ fn get_items() -> Vec<ItemSearchResult> {
 }
 
 #[tauri::command]
-fn search(index: i64) -> SearchResult {
+fn increase_attack_usage(index: i64) {
+  println!("update index: {index}");
+  let connection = sqlite::open("./pokemon.db").unwrap();
+  let query = format!("UPDATE pokemon__learnset SET usage = usage + 1 WHERE id = {index}");
+  connection.execute(query).unwrap();
+}
+
+#[tauri::command]
+fn search_learnset(index: i64) -> Vec<PokemonDataLearnset> {
   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";
+  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 DESC";
   for row in connection
     .prepare(move_query)
     .unwrap()
@@ -156,7 +220,13 @@ fn search(index: i64) -> SearchResult {
     };
     learnset.push(row_result)
   }
-  println!("Get Thing2");
+  return learnset;
+}
+#[tauri::command]
+fn search(index: i64) -> SearchResult {
+  let connection = sqlite::open("./pokemon.db").unwrap();
+  let learnset = search_learnset(index.clone());
+
   let query = "SELECT * FROM pokemon WHERE id = ?";
   for row in connection
     .prepare(query)
@@ -169,7 +239,7 @@ fn search(index: i64) -> SearchResult {
     let row_result = SearchResult {
       id: row.read::<i64, _>("id"),
       name: row.read::<&str, _>("name").to_string(),
-      types: row.read::<&str, _>("types").to_string(),
+      types: serde_json::from_str(row.read::<&str, _>("types")).unwrap_or(vec![0]),
       thumbnail: row.read::<&str, _>("thumbnail").to_string(),
       abilities: row.read::<&str, _>("abilities").to_string(),
       hp: row.read::<i64, _>("hp"),
@@ -180,12 +250,12 @@ fn search(index: i64) -> SearchResult {
       speed: row.read::<i64, _>("speed"),
       learnset: learnset,
     };
-    return row_result
+    return row_result;
   }
   return SearchResult {
     id: 0,
     name: "Missigno".to_string(),
-    types: "[]".to_string(),
+    types: vec![],
     thumbnail: "".to_string(),
     abilities: "{}".to_string(),
     hp: 0,
@@ -195,11 +265,21 @@ fn search(index: i64) -> SearchResult {
     special_defense: 0,
     speed: 0,
     learnset: vec![],
-  }
+  };
 }
 fn main() {
   tauri::Builder::default()
-    .invoke_handler(tauri::generate_handler![autosearch_move, search_move, autosearch, search, get_items])
+    .invoke_handler(tauri::generate_handler![
+      autosearch_move,
+      search_move,
+      autosearch,
+      search,
+      get_items,
+      increase_attack_usage,
+      search_learnset,
+      save_json,
+      load_json,
+    ])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }

src-tauri/src/model.rs

@@ -4,7 +4,7 @@ use serde::{Deserialize, Serialize};
 pub struct SearchResult {
   pub id: i64,
   pub name: String,
-  pub types: String,
+  pub types: Vec<i64>,
   pub hp: i64,
   pub attack: i64,
   pub defense: i64,
@@ -29,7 +29,7 @@ pub struct PokemonDataLearnset {
 pub struct MoveSearchResult {
   pub id: i64,
   pub name: String,
-  pub types: String,
+  pub types: Vec<i64>,
   pub power: i64,
   pub category: i64,
   pub priority: i64,
@@ -48,3 +48,123 @@ pub struct ItemSearchResult {
   pub image: String,
   pub effect: Option<serde_json::Value>,
 }
+
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct PokemonDataToSave {
+  pub id: i64,
+  pub hp_v: i64,
+  pub attack_v: i64,
+  pub defense_v: i64,
+  pub special_attack_v: i64,
+  pub special_defense_v: i64,
+  pub speed_v: i64,
+  pub hp_d: i64,
+  pub attack_d: i64,
+  pub defense_d: i64,
+  pub special_attack_d: i64,
+  pub special_defense_d: i64,
+  pub speed_d: i64,
+  pub attack_plus: bool,
+  pub attack_minus: bool,
+  pub defense_plus: bool,
+  pub defense_minus: bool,
+  pub special_attack_plus: bool,
+  pub special_attack_minus: bool,
+  pub special_defense_plus: bool,
+  pub special_defense_minus: bool,
+  pub speed_plus: bool,
+  pub speed_minus: bool,
+  pub item: i64,
+}
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct PokemonDataToLoad {
+  pub id: i64,
+  pub name: String,
+  pub types: Vec<i64>,
+  pub thumbnail: String,
+  pub abilities: String,
+  pub hp: i64,
+  pub attack: i64,
+  pub defense: i64,
+  pub special_attack: i64,
+  pub special_defense: i64,
+  pub speed: i64,
+  pub hp_v: i64,
+  pub attack_v: i64,
+  pub defense_v: i64,
+  pub special_attack_v: i64,
+  pub special_defense_v: i64,
+  pub speed_v: i64,
+  pub hp_d: i64,
+  pub attack_d: i64,
+  pub defense_d: i64,
+  pub special_attack_d: i64,
+  pub special_defense_d: i64,
+  pub speed_d: i64,
+  pub attack_plus: bool,
+  pub attack_minus: bool,
+  pub defense_plus: bool,
+  pub defense_minus: bool,
+  pub special_attack_plus: bool,
+  pub special_attack_minus: bool,
+  pub special_defense_plus: bool,
+  pub special_defense_minus: bool,
+  pub speed_plus: bool,
+  pub speed_minus: bool,
+  pub attack_buff: i64,
+  pub defense_buff: i64,
+  pub special_attack_buff: i64,
+  pub special_defense_buff: i64,
+  pub speed_buff: i64,
+  pub item: i64,
+  pub learnset: Vec<PokemonDataLearnset>,
+  pub terastype: Vec<i64>,
+}
+
+impl From<(PokemonDataToSave, SearchResult)> for PokemonDataToLoad {
+  fn from(value: (PokemonDataToSave, SearchResult)) -> Self {
+      PokemonDataToLoad {
+        id: value.0.id,
+        name: value.1.name,
+        types: value.1.types,
+        thumbnail: value.1.thumbnail,
+        abilities: value.1.abilities,
+        hp: value.1.hp,
+        attack: value.1.attack,
+        defense: value.1.defense,
+        special_attack: value.1.special_attack,
+        special_defense: value.1.special_defense,
+        speed: value.1.speed,
+        hp_v: value.0.hp_v,
+        attack_v: value.0.attack_v,
+        defense_v: value.0.defense_v,
+        special_attack_v: value.0.special_attack_v,
+        special_defense_v: value.0.special_defense_v,
+        speed_v: value.0.speed_v,
+        hp_d: value.0.hp_d,
+        attack_d: value.0.attack_d,
+        defense_d: value.0.defense_d,
+        special_attack_d: value.0.special_attack_d,
+        special_defense_d: value.0.special_defense_d,
+        speed_d: value.0.speed_d,
+        attack_plus: value.0.attack_plus,
+        attack_minus: value.0.attack_minus,
+        defense_plus: value.0.defense_plus,
+        defense_minus: value.0.defense_minus,
+        special_attack_plus: value.0.special_attack_plus,
+        special_attack_minus: value.0.special_attack_minus,
+        special_defense_plus: value.0.special_defense_plus,
+        special_defense_minus: value.0.special_defense_minus,
+        speed_plus: value.0.speed_plus,
+        speed_minus: value.0.speed_minus,
+        attack_buff: 0,
+        defense_buff: 0,
+        special_attack_buff: 0,
+        special_defense_buff: 0,
+        speed_buff: 0,
+        item: value.0.item,
+        learnset: value.1.learnset,
+        terastype: vec![0]
+      }
+  }
+}

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "pokemon-data-displayer",
-    "version": "0.0.4"
+    "version": "0.0.7"
   },
   "tauri": {
     "allowlist": {

src/App.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
+  import { invoke } from "@tauri-apps/api/tauri";
   import MainWrapper from "./lib/MainWrapper.svelte";
   import DamageCalculator from "./lib/DamageCalculator.svelte";
   import "carbon-components-svelte/css/g80.css";
-  let player1Data;
+  import type { ItemData } from "./model/ItemData";
-  let player2Data;
+  import type { PokemonStatus } from "./model/PokemonStatus";
-  let attackId;
+  let items: ItemData[] = [];
+  let player1Data: PokemonStatus | undefined;
+  let player2Data: PokemonStatus | undefined;
+  let attackId: number | undefined;
+  invoke("get_items").then((r: ItemData[]) => {
+    items = r;
+  });
 </script>
 
 <main class="container">
   <div class="main-row">
     <div class="column-1">
-      <MainWrapper bind:pokemonStatus={player1Data} bind:attackId/>
+      <MainWrapper bind:pokemonStatus={player1Data} bind:attackId {items} />
     </div>
     <div class="column-2">
-      <MainWrapper bind:pokemonStatus={player2Data} bind:attackId />
+      <MainWrapper bind:pokemonStatus={player2Data} bind:attackId {items} />
     </div>
   </div>
   <div class="row">

src/lib/DamageCalculator.svelte

@@ -2,25 +2,23 @@
   import { invoke } from "@tauri-apps/api/tauri";
   import AutoComplete from "simple-svelte-autocomplete";
   import attack_types from "../const/attack_types.json";
-  import type { PokemonData } from "../model/PokemonStatus";
+  import type { PokemonStatus } from "../model/PokemonStatus";
 
-  export let player1Data: PokemonData | undefined;
+  export let player1Data: PokemonStatus | undefined;
-  export let player2Data: PokemonData | undefined;
+  export let player2Data: PokemonStatus | undefined;
   export let attackId: number | undefined;
   let attackData;
   $: {
-    if (myValue > 0 && myValue !== currentValue) {
+    if (moveValue > 0) {
-      invoke("search_move", { index: myValue }).then((r) => {
+      invoke("search_move", { index: moveValue }).then((r) => {
-        currentValue = myValue;
         attackData = r;
-        console.log(attackData);
+        moveValue = undefined;
       });
     }
     if (!!attackId) {
+      console.log(attackId);
       invoke("search_move", { index: attackId }).then((r) => {
-        currentValue = myValue = attackId;
         attackData = r;
-        console.log(attackData);
         attackId = undefined;
       });
     }
@@ -32,8 +30,8 @@
   let total_min_damage_percentage = 0;
   let item_magnification = 1.0;
   function calculate_damage() {
-    let attacker;
+    let attacker: PokemonStatus;
-    let defender;
+    let defender: PokemonStatus;
     let atk_value;
     let def_value;
     if (
@@ -43,6 +41,10 @@
       (!!attackData && ![1, 2].includes(attackData.category))
     ) {
       // display some message somewhere
+      total_max_damage = 0;
+      total_min_damage = 0;
+      total_max_damage_percentage = 0;
+      total_min_damage_percentage = 0;
       console.log("skip");
       return;
     }
@@ -55,11 +57,11 @@
     }
     // 物理or特殊の判定
     if (attackData.category === 1) {
-      atk_value = attacker.atk;
+      atk_value = attacker.attack;
-      def_value = defender.def;
+      def_value = defender.defense;
     } else {
-      atk_value = attacker.spatk;
+      atk_value = attacker.special_attack;
-      def_value = defender.spdef;
+      def_value = defender.special_defense;
     }
 
     // debug
@@ -103,7 +105,7 @@
       attack_data_category: attackData.category,
 
       // 技タイプ
-      move_type: JSON.parse(attackData.types),
+      move_type: attackData.types,
       // 範囲の計算で使用する
     };
     // 計算
@@ -352,8 +354,7 @@
       return [];
     }
   }
-  let myValue;
+  let moveValue;
-  let currentValue = 0;
 </script>
 
 <div class="calculator">
@@ -391,9 +392,10 @@
           localFiltering={false}
           labelFieldName="name"
           valueFieldName="id"
-          bind:value={myValue}
+          bind:value={moveValue}
         />
       </td>
+      <td>{ attackData ? attackData.name : "" }</td>
       <td>
         <input type="button" value="Calculate" on:click={calculate_damage} />
       </td>

src/lib/DisplayData.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+  import { invoke } from "@tauri-apps/api/tauri";
   import defense_types from "../const/defense_types.json";
-  import type { PokemonDBData } from "src/model/PokemonData";
+  import type { PokemonData } from "src/model/PokemonData";
+  import type { ItemData } from "../model/ItemData";
   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;
+  export let items: ItemData[];
+  export let pokemonData: PokemonData | undefined;
   export let attackId: number | undefined;
   function v_validator(v) {
     if (typeof v !== "number") {
@@ -64,70 +67,111 @@
     return d;
   }
   $: {
+    if (pokemonData) {
+      if (pokemonData.terastype[0] !== selected_terastype) {
+        selected_terastype = pokemonData.terastype[0];
+      }
+      if (pokemonData.item !== selected_item) {
+        selected_item = pokemonData.item;
+      }
       // validator
       level = level_validator(level);
-    hp_v = v_validator(hp_v);
+      pokemonData.hp_v = v_validator(pokemonData.hp_v);
-    atk_v = v_validator(atk_v);
+      pokemonData.attack_v = v_validator(pokemonData.attack_v);
-    def_v = v_validator(def_v);
+      pokemonData.defense_v = v_validator(pokemonData.defense_v);
-    spatk_v = v_validator(spatk_v);
+      pokemonData.special_attack_v = v_validator(pokemonData.special_attack_v);
-    spdef_v = v_validator(spdef_v);
+      pokemonData.special_defense_v = v_validator(
-    spd_v = v_validator(spd_v);
+        pokemonData.special_defense_v
-    hp_d = d_validator(hp_d);
+      );
-    atk_d = d_validator(atk_d);
+      pokemonData.speed_v = v_validator(pokemonData.speed_v);
-    def_d = d_validator(def_d);
+      pokemonData.hp_d = d_validator(pokemonData.hp_d);
-    spatk_d = d_validator(spatk_d);
+      pokemonData.attack_d = d_validator(pokemonData.attack_d);
-    spdef_d = d_validator(spdef_d);
+      pokemonData.defense_d = d_validator(pokemonData.defense_d);
-    spd_d = d_validator(spd_d);
+      pokemonData.special_attack_d = d_validator(pokemonData.special_attack_d);
+      pokemonData.special_defense_d = d_validator(
+        pokemonData.special_defense_d
+      );
+      pokemonData.speed_d = d_validator(pokemonData.speed_d);
       // 性格補正 0.9/1/1.1
       let atk_p = 1;
       let def_p = 1;
       let spatk_p = 1;
       let spdef_p = 1;
       let spd_p = 1;
-    if (!!atk_plus && !atk_minus) {
+      if (!!pokemonData.attack_plus && !pokemonData.attack_minus) {
         atk_p = 1.1;
-    } else if (!atk_plus && !!atk_minus) {
+      } else if (!pokemonData.attack_plus && !!pokemonData.attack_minus) {
         atk_p = 0.9;
       }
-    if (!!def_plus && !def_minus) {
+      if (!!pokemonData.defense_plus && !pokemonData.defense_minus) {
         def_p = 1.1;
-    } else if (!def_plus && !!def_minus) {
+      } else if (!pokemonData.defense_plus && !!pokemonData.defense_minus) {
         def_p = 0.9;
       }
-    if (!!spatk_plus && !spatk_minus) {
+      if (
+        !!pokemonData.special_attack_plus &&
+        !pokemonData.special_attack_minus
+      ) {
         spatk_p = 1.1;
-    } else if (!spatk_plus && !!spatk_minus) {
+      } else if (
+        !pokemonData.special_attack_plus &&
+        !!pokemonData.special_attack_minus
+      ) {
         spatk_p = 0.9;
       }
-    if (!!spdef_plus && !spdef_minus) {
+      if (
+        !!pokemonData.special_defense_plus &&
+        !pokemonData.special_defense_minus
+      ) {
         spdef_p = 1.1;
-    } else if (!spdef_plus && !!spdef_minus) {
+      } else if (
+        !pokemonData.special_defense_plus &&
+        !!pokemonData.special_defense_minus
+      ) {
         spdef_p = 0.9;
       }
-    if (!!spd_plus && !spd_minus) {
+      if (!!pokemonData.speed_plus && !pokemonData.speed_minus) {
         spd_p = 1.1;
-    } else if (!spd_plus && !!spd_minus) {
+      } else if (!pokemonData.speed_plus && !!pokemonData.speed_minus) {
         spd_p = 0.9;
       }
-    if (pokemonData) {
       abilities = Object.keys(JSON.parse(pokemonData.abilities));
       abilities_description = Object.values(JSON.parse(pokemonData.abilities));
-      hp_final = calculate_hp(pokemonData.hp, hp_v, hp_d);
+      hp_final = calculate_hp(
-      atk_final = other_stats(pokemonData.attack, atk_v, atk_d, atk_p);
+        pokemonData.hp,
-      def_final = other_stats(pokemonData.defense, def_v, def_d, def_p);
+        pokemonData.hp_v,
-      spatk_final = other_stats(
+        pokemonData.hp_d
+      );
+      attack_final = other_stats(
+        pokemonData.attack,
+        pokemonData.attack_v,
+        pokemonData.attack_d,
+        atk_p
+      );
+      defense_final = other_stats(
+        pokemonData.defense,
+        pokemonData.defense_v,
+        pokemonData.defense_d,
+        def_p
+      );
+      special_attack_final = other_stats(
         pokemonData.special_attack,
-        spatk_v,
+        pokemonData.special_attack_v,
-        spatk_d,
+        pokemonData.special_attack_d,
         spatk_p
       );
-      spdef_final = other_stats(
+      special_defense_final = other_stats(
         pokemonData.special_defense,
-        spdef_v,
+        pokemonData.special_defense_v,
-        spdef_d,
+        pokemonData.special_defense_d,
         spdef_p
       );
-      spd_final = other_stats(pokemonData.speed, spd_v, spd_d, spd_p);
+      speed_final = other_stats(
+        pokemonData.speed,
+        pokemonData.speed_v,
+        pokemonData.speed_d,
+        spd_p
+      );
     }
   }
   function generate_type(types) {
@@ -212,11 +256,9 @@
     return "&nbsp;";
   }
   function generate_weakness(types) {
-    let parsed_types = JSON.parse(types);
+    let type_compatibility = defense_types[types[0] - 1];
-    console.log(parsed_types);
+    if (types.length > 1) {
-    let type_compatibility = defense_types[parsed_types[0] - 1];
+      let second_type_compatibility = defense_types[types[1] - 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]
       );
@@ -227,7 +269,6 @@
     let resist = [];
     let immune = [];
     type_compatibility.forEach((v, i) => {
-      console.log(v);
       switch (v) {
         case 4:
           super_weakness.push(i + 1);
@@ -246,11 +287,7 @@
           break;
       }
     });
-    console.log("super_weakness", super_weakness);
+
-    console.log("weakness", weakness);
-    console.log("super_resist", super_resist);
-    console.log("resist", resist);
-    console.log("immune", immune);
     return [super_weakness, weakness, resist, super_resist, immune];
   }
   function generate_damage_value(index) {
@@ -269,44 +306,17 @@
         return "";
     }
   }
-  // 個体値 (V) 0-31
-  let hp_v = 0;
-  let atk_v = 0;
-  let def_v = 0;
-  let spatk_v = 0;
-  let spdef_v = 0;
-  let spd_v = 0;
-  // 努力値 0-252
-  let hp_d = 0;
-  let atk_d = 0;
-  let def_d = 0;
-  let spatk_d = 0;
-  let spdef_d = 0;
-  let spd_d = 0;
 
   export let hp_final = 0;
-  export let atk_final = 0;
+  export let attack_final = 0;
-  export let def_final = 0;
+  export let defense_final = 0;
-  export let spatk_final = 0;
+  export let special_attack_final = 0;
-  export let spdef_final = 0;
+  export let special_defense_final = 0;
-  export let spd_final = 0;
+  export let speed_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;
-  let spdef_plus = false;
-  let spd_plus = false;
-
-  let atk_minus = false;
-  let def_minus = false;
-  let spatk_minus = false;
-  let spdef_minus = false;
-  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);
@@ -326,20 +336,20 @@
         <AccordionItem open title="基本情報">
           <table class="pokemon-data">
             <tr>
-              <td rowspan="4" class="picture"
+              <td rowspan="4" class="picture">
-                ><img
+                <img
                   src={`data:image/png;base64,${pokemonData.thumbnail}`}
                   alt={pokemonData.name}
-                  width="85%"
+                  width="100%"
-                /></td
+                />
-              >
+              </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
+                >{@html generate_type(pokemonData.types)}</td
               >
             </tr>
             <tr>
@@ -347,7 +357,8 @@
               <td style="display: flex;">
                 <select
                   bind:value={selected_terastype}
-                  on:change={() => (terastype = [selected_terastype])}
+                  on:change={() =>
+                    (pokemonData.terastype = [selected_terastype])}
                 >
                   <option value={0}> なし </option>
                   {#each available_type as curr_type}
@@ -363,9 +374,14 @@
               <td style="display: flex;">
                 <select
                   bind:value={selected_item}
-                  on:change={() => (item = selected_item)}
+                  on:change={() => (pokemonData.item = selected_item)}
                 >
                   <option value={0}> なし </option>
+                  {#each items as item}
+                    <option value={item.id}>
+                      {item.name}
+                    </option>
+                  {/each}
                 </select>
               </td>
             </tr>
@@ -373,7 +389,7 @@
         </AccordionItem>
         <AccordionItem open title="弱点">
           <table class="weakness">
-            {#each generate_weakness(terastype[0] === 0 ? pokemonData.types : JSON.stringify(terastype)) as row, i}
+            {#each generate_weakness(pokemonData.terastype[0] === 0 ? pokemonData.types : pokemonData.terastype) as row, i}
               <tr>
                 <td>{generate_damage_value(i)}</td>
                 <td style="display: flex; flex-wrap: wrap;">
@@ -403,7 +419,7 @@
                   ><input
                     class="vd-input"
                     type="number"
-                    bind:value={hp_v}
+                    bind:value={pokemonData.hp_v}
                     min="0"
                     max="31"
                   /></b
@@ -414,15 +430,15 @@
                   ><input
                     class="vd-input"
                     type="number"
-                    bind:value={hp_d}
+                    bind:value={pokemonData.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="plus-minus-column"><b>+</b></td>
-              <td class="atai-column"><b>-</b></td>
+              <td class="plus-minus-column"><b>-</b></td>
             </tr>
             <tr>
               <td class="value-column"><b>ATK</b></td>
@@ -432,7 +448,7 @@
                   ><input
                     class="vd-input"
                     type="number"
-                    bind:value={atk_v}
+                    bind:value={pokemonData.attack_v}
                     min="0"
                     max="31"
                   /></b
@@ -443,19 +459,76 @@
                   ><input
                     class="vd-input"
                     type="number"
-                    bind:value={atk_d}
+                    bind:value={pokemonData.attack_d}
                     min="0"
                     max="252"
                   /></b
                 ></td
               >
-              <td class="atai-column"><b>{atk_final}</b></td>
+              <td class="atai-column"><b>{attack_final}</b></td>
               <td class="atai-column"
-                ><b><input type="checkbox" bind:checked={atk_plus} /></b></td
+                ><b
+                  ><input
+                    type="checkbox"
+                    bind:checked={pokemonData.attack_plus}
+                  /></b
+                ></td
               >
               <td class="atai-column"
-                ><b><input type="checkbox" bind:checked={atk_minus} /></b></td
+                ><b
+                  ><input
+                    type="checkbox"
+                    bind:checked={pokemonData.attack_minus}
+                  /></b
+                ></td
               >
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              {#each Array.from({ length: 6 }, (_, i) => i - 6) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer minus {pokemonData.attack_buff < i + 1
+                    ? 'red'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.attack_buff = i;
+                  }}
+                >
+                  ▼
+                </td>
+              {/each}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <td
+                class="cursor-pointer"
+                on:click={() => {
+                  pokemonData.attack_buff = 0;
+                }}
+              >
+                ・
+              </td>
+              {#each Array.from({ length: 6 }, (_, i) => i) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer plus {pokemonData.attack_buff > i
+                    ? 'green'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.attack_buff = i + 1;
+                  }}
+                >
+                  ▲
+                </td>
+              {/each}
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              <td>
+                ({Math.floor(
+                  attack_final *
+                    (pokemonData.attack_buff > 0
+                      ? (2 + pokemonData.attack_buff) / 2
+                      : pokemonData.attack_buff < 0
+                      ? 2 / (2 - pokemonData.attack_buff)
+                      : 1)
+                )})
+              </td>
             </tr>
             <tr>
               <td class="value-column"><b>DEF</b></td>
@@ -465,7 +538,7 @@
                   ><input
                     class="vd-input"
                     type="number"
-                    bind:value={def_v}
+                    bind:value={pokemonData.defense_v}
                     min="0"
                     max="31"
                   /></b
@@ -476,131 +549,363 @@
                   ><input
                     class="vd-input"
                     type="number"
-                    bind:value={def_d}
+                    bind:value={pokemonData.defense_d}
                     min="0"
                     max="252"
                   /></b
                 ></td
               >
-              <td class="atai-column"><b>{def_final}</b></td>
+              <td class="atai-column"><b>{defense_final}</b></td>
               <td class="atai-column"
-                ><b><input type="checkbox" bind:checked={def_plus} /></b></td
+                ><b
+                  ><input
+                    type="checkbox"
+                    bind:checked={pokemonData.defense_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={pokemonData.defense_minus}
+                  />
+                </b>
+              </td>
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              {#each Array.from({ length: 6 }, (_, i) => i - 6) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer minus {pokemonData.defense_buff < i + 1
+                    ? 'red'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.defense_buff = i;
+                  }}
                 >
+                  ▼
+                </td>
+              {/each}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <td
+                class="cursor-pointer"
+                on:click={() => {
+                  pokemonData.defense_buff = 0;
+                }}
+              >
+                ・
+              </td>
+              {#each Array.from({ length: 6 }, (_, i) => i) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer plus {pokemonData.defense_buff > i
+                    ? 'green'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.defense_buff = i + 1;
+                  }}
+                >
+                  ▲
+                </td>
+              {/each}
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              <td>
+                ({Math.floor(
+                  defense_final *
+                    (pokemonData.defense_buff > 0
+                      ? (2 + pokemonData.defense_buff) / 2
+                      : pokemonData.defense_buff < 0
+                      ? 2 / (2 - pokemonData.defense_buff)
+                      : 1)
+                )})
+              </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"
+              <td class="atai-column">
-                ><b
+                <b>
-                  ><input
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spatk_v}
+                    bind:value={pokemonData.special_attack_v}
                     min="0"
                     max="31"
-                  /></b
+                  />
-                ></td
+                </b>
-              >
+              </td>
-              <td class="atai-column"
+              <td class="atai-column">
-                ><b
+                <b>
-                  ><input
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spatk_d}
+                    bind:value={pokemonData.special_attack_d}
                     min="0"
                     max="252"
-                  /></b
+                  />
-                ></td
+                </b>
+              </td>
+              <td class="atai-column"><b>{special_attack_final}</b></td>
+              <td class="atai-column">
+                <b>
+                  <input
+                    type="checkbox"
+                    bind:checked={pokemonData.special_attack_plus}
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <input
+                    type="checkbox"
+                    bind:checked={pokemonData.special_attack_minus}
+                  />
+                </b>
+              </td>
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              {#each Array.from({ length: 6 }, (_, i) => i - 6) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer minus {pokemonData.special_attack_buff <
+                  i + 1
+                    ? 'red'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.special_attack_buff = i;
+                  }}
                 >
-              <td class="atai-column"><b>{spatk_final}</b></td>
+                  ▼
-              <td class="atai-column"
+                </td>
-                ><b><input type="checkbox" bind:checked={spatk_plus} /></b></td
+              {/each}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <td
+                class="cursor-pointer"
+                on:click={() => {
+                  pokemonData.special_attack_buff = 0;
+                }}
               >
-              <td class="atai-column"
+                ・
-                ><b><input type="checkbox" bind:checked={spatk_minus} /></b></td
+              </td>
+              {#each Array.from({ length: 6 }, (_, i) => i) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer plus {pokemonData.special_attack_buff >
+                  i
+                    ? 'green'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.special_attack_buff = i + 1;
+                  }}
                 >
+                  ▲
+                </td>
+              {/each}
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              <td>
+                ({Math.floor(
+                  special_attack_final *
+                    (pokemonData.special_attack_buff > 0
+                      ? (2 + pokemonData.special_attack_buff) / 2
+                      : pokemonData.special_attack_buff < 0
+                      ? 2 / (2 - pokemonData.special_attack_buff)
+                      : 1)
+                )})
+              </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"
+              <td class="atai-column">
-                ><b
+                <b>
-                  ><input
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spdef_v}
+                    bind:value={pokemonData.special_defense_v}
                     min="0"
                     max="31"
-                  /></b
+                  />
-                ></td
+                </b>
-              >
+              </td>
-              <td class="atai-column"
+              <td class="atai-column">
-                ><b
+                <b>
-                  ><input
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spdef_d}
+                    bind:value={pokemonData.special_defense_d}
                     min="0"
                     max="252"
-                  /></b
+                  />
-                ></td
+                </b>
+              </td>
+              <td class="atai-column"><b>{special_defense_final}</b></td>
+              <td class="atai-column">
+                <b>
+                  <input
+                    type="checkbox"
+                    bind:checked={pokemonData.special_defense_plus}
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <input
+                    type="checkbox"
+                    bind:checked={pokemonData.special_defense_minus}
+                  />
+                </b>
+              </td>
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              {#each Array.from({ length: 6 }, (_, i) => i - 6) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer minus {pokemonData.special_defense_buff <
+                  i + 1
+                    ? 'red'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.special_defense_buff = i;
+                  }}
                 >
-              <td class="atai-column"><b>{spdef_final}</b></td>
+                  ▼
-              <td class="atai-column"
+                </td>
-                ><b><input type="checkbox" bind:checked={spdef_plus} /></b></td
+              {/each}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <td
+                class="cursor-pointer"
+                on:click={() => {
+                  pokemonData.special_defense_buff = 0;
+                }}
               >
-              <td class="atai-column"
+                ・
-                ><b><input type="checkbox" bind:checked={spdef_minus} /></b></td
+              </td>
+              {#each Array.from({ length: 6 }, (_, i) => i) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer plus {pokemonData.special_defense_buff >
+                  i
+                    ? 'green'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.special_defense_buff = i + 1;
+                  }}
                 >
+                  ▲
+                </td>
+              {/each}
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              <td>
+                ({Math.floor(
+                  special_defense_final *
+                    (pokemonData.special_defense_buff > 0
+                      ? (2 + pokemonData.special_defense_buff) / 2
+                      : pokemonData.special_defense_buff < 0
+                      ? 2 / (2 - pokemonData.special_defense_buff)
+                      : 1)
+                )})
+              </td>
             </tr>
             <tr>
               <td class="value-column"><b>SPD</b></td>
               <td class="atai-column"><b>{pokemonData.speed}</b></td>
-              <td class="atai-column"
+              <td class="atai-column">
-                ><b
+                <b>
-                  ><input
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spd_v}
+                    bind:value={pokemonData.speed_v}
                     min="0"
                     max="31"
-                  /></b
+                  />
-                ></td
+                </b>
-              >
+              </td>
-              <td class="atai-column"
+              <td class="atai-column">
-                ><b
+                <b>
-                  ><input
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spd_d}
+                    bind:value={pokemonData.speed_d}
                     min="0"
                     max="252"
-                  /></b
+                  />
-                ></td
+                </b>
+              </td>
+              <td class="atai-column"><b>{speed_final}</b></td>
+              <td class="atai-column">
+                <b>
+                  <input
+                    type="checkbox"
+                    bind:checked={pokemonData.speed_plus}
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <input
+                    type="checkbox"
+                    bind:checked={pokemonData.speed_minus}
+                  />
+                </b>
+              </td>
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              {#each Array.from({ length: 6 }, (_, i) => i - 6) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer minus {pokemonData.speed_buff < i + 1
+                    ? 'red'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.speed_buff = i;
+                  }}
                 >
-              <td class="atai-column"><b>{spd_final}</b></td>
+                  ▼
-              <td class="atai-column"
+                </td>
-                ><b><input type="checkbox" bind:checked={spd_plus} /></b></td
+              {/each}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <td
+                class="cursor-pointer"
+                on:click={() => {
+                  pokemonData.speed_buff = 0;
+                }}
               >
-              <td class="atai-column"
+                ・
-                ><b><input type="checkbox" bind:checked={spd_minus} /></b></td
+              </td>
+              {#each Array.from({ length: 6 }, (_, i) => i) as i}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <td
+                  class="cursor-pointer plus {pokemonData.speed_buff > i
+                    ? 'green'
+                    : ''}"
+                  on:click={() => {
+                    pokemonData.speed_buff = i + 1;
+                  }}
                 >
+                  ▲
+                </td>
+              {/each}
+              <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
+              <td>
+                ({Math.floor(
+                  speed_final *
+                    (pokemonData.speed_buff > 0
+                      ? (2 + pokemonData.speed_buff) / 2
+                      : pokemonData.speed_buff < 0
+                      ? 2 / (2 - pokemonData.speed_buff)
+                      : 1)
+                )})
+              </td>
             </tr>
             <tr>
               <td class="value-column"><b>TOTAL</b></td>
-              <td class="atai-column"
+              <td class="atai-column">
-                ><b
+                <b>
-                  >{pokemonData.hp +
+                  {pokemonData.hp +
                     pokemonData.attack +
                     pokemonData.defense +
                     pokemonData.special_attack +
                     pokemonData.special_defense +
-                    pokemonData.speed}</b
+                    pokemonData.speed}
-                ></td
+                </b>
-              >
+              </td>
               <td class="atai-column" />
             </tr>
             <tr>
@@ -622,12 +927,13 @@
           <table class="learnset">
             {#each pokemonData.learnset as learnset}
               <tr
-                on:click={() => {
+                on:click={async () => {
                   console.log("passing" + learnset.name);
-                  console.log(learnset.learnset_id);
-                  console.log(attackId);
                   attackId = learnset.learnset_id;
-                  console.log(attackId);
+                  await invoke("increase_attack_usage", { index: learnset.id });
+                  pokemonData.learnset = await invoke("search_learnset", {
+                    index: pokemonData.id,
+                  });
                 }}
               >
                 <td
@@ -691,6 +997,11 @@
     padding-left: 10px;
     width: 50%;
   }
+  .plus-minus-column {
+    text-align: center;
+    padding-left: 10px;
+    width: 50%;
+  }
   .vd-input {
     width: 50px;
     padding-left: 0;
@@ -709,6 +1020,7 @@
     border: 1px solid;
     vertical-align: middle;
     height: 25px;
+    padding: 5px;
   }
   .weakness {
     width: 90%;
@@ -717,6 +1029,28 @@
     border: 1px solid;
     vertical-align: middle;
     min-height: 25px;
+    padding: 2px;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .minus:hover {
+    color: pink;
+    transition: font-size 0.5s ease;
+    font-size: 1.1em;
+  }
+  .plus:hover {
+    color: lightgreen;
+    transition: font-size 0.5s ease;
+    font-size: 1.1em;
+  }
+  .red {
+    color: red;
+    font-weight: bold;
+  }
+  .green {
+    color: green;
+    font-weight: bold;
   }
   .learnset {
     width: 90%;

src/lib/MainWrapper.svelte

@@ -2,53 +2,107 @@
   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 { PokemonStatus } from "../model/PokemonStatus";
-  import type { PokemonDBData } from "src/model/PokemonData";
+  import type { PokemonDBData, PokemonData } from "src/model/PokemonData";
+  import type { ItemData } from "../model/ItemData";
   $: {
-    if (myValue > 0 && myValue !== currentValue) {
+    if (myValue > 0) {
-      invoke("search", { index: myValue }).then((r) => {
+      invoke("search", { index: myValue }).then((r: PokemonDBData) => {
-        currentValue = myValue;
+        pokemonData = {
-        pokemonData = r as PokemonDBData;
+          id: r.id,
-        console.log(pokemonData);
+          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,
+          hp_v: 31,
+          attack_v: 31,
+          defense_v: 31,
+          special_attack_v: 31,
+          special_defense_v: 31,
+          speed_v: 31,
+          hp_d: 0,
+          attack_d: 0,
+          defense_d: 0,
+          special_attack_d: 0,
+          special_defense_d: 0,
+          speed_d: 0,
+          learnset: r.learnset,
+          item: 0,
+          terastype: [0],
+          attack_plus: false,
+          attack_minus: false,
+          defense_plus: false,
+          defense_minus: false,
+          special_attack_plus: false,
+          special_attack_minus: false,
+          special_defense_plus: false,
+          special_defense_minus: false,
+          speed_plus: false,
+          speed_minus: false,
+          attack_buff: 0,
+          defense_buff: 0,
+          special_attack_buff: 0,
+          special_defense_buff: 0,
+          speed_buff: 0,
+        };
+        pokemonDataArray[index] = pokemonData;
+        myValue = undefined;
       });
     }
     pokemonStatus = {
-      types: pokemonData?.types ? JSON.parse(pokemonData.types) : [],
+      types: pokemonData ? pokemonData.types : [],
-      terastype: terastype,
+      terastype: pokemonData ? pokemonData.terastype : [0],
       hp: hp_final,
-      atk: atk_final,
+      attack: attack_final,
-      def: def_final,
+      defense: defense_final,
-      spatk: spatk_final,
+      special_attack: special_attack_final,
-      spdef: spdef_final,
+      special_defense: special_defense_final,
-      spd: spd_final,
+      speed: speed_final,
+      attack_buff: pokemonData ? pokemonData.attack_buff : 0,
+      defense_buff: pokemonData ? pokemonData.defense_buff : 0,
+      special_attack_buff: pokemonData ? pokemonData.special_attack_buff : 0,
+      special_defense_buff: pokemonData ? pokemonData.special_defense_buff : 0,
+      speed_buff: pokemonData ? pokemonData.speed_buff : 0,
+      item: pokemonData ? pokemonData.item : 0,
     };
-    console.log(pokemonStatus);
   }
   export let attackId: number | undefined;
+  export let items: ItemData[];
   let myValue;
-  let currentValue = 0;
+  let index = 0;
-  let pokemonData: PokemonDBData | undefined;
+  let pokemonData: PokemonData | undefined;
-  let terastype = [0];
+  let pokemonDataArray: PokemonData[] = [];
   let hp_final = 0;
-  let atk_final = 0;
+  let attack_final = 0;
-  let def_final = 0;
+  let defense_final = 0;
-  let spatk_final = 0;
+  let special_attack_final = 0;
-  let spdef_final = 0;
+  let special_defense_final = 0;
-  let spd_final = 0;
+  let speed_final = 0;
-  export let pokemonStatus: PokemonData = {
+  export let pokemonStatus: PokemonStatus = {
     types: [],
     terastype: [0],
     hp: 0,
-    atk: 0,
+    attack: 0,
-    def: 0,
+    defense: 0,
-    spatk: 0,
+    special_attack: 0,
-    spdef: 0,
+    special_defense: 0,
-    spd: 0,
+    speed: 0,
+    attack_buff: 0,
+    defense_buff: 0,
+    special_attack_buff: 0,
+    special_defense_buff: 0,
+    speed_buff: 0,
+    item: 0,
   };
   async function getItems(keyword) {
     try {
       let result = await invoke("autosearch", { keyword });
-      console.log(result);
       return result;
     } catch (e) {
       console.log(e);
@@ -70,23 +124,155 @@
     />
   </div>
   <div class="row-display">
+    <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 == index
+                  ? 'active'
+                  : i % 2 === 0
+                  ? 'odd'
+                  : 'even'}"
+                on:click={() => {
+                  index = i;
+                  pokemonData = pokemonDataArray[i];
+                }}
+              >
+                <span class="active-arrow">➤</span>
+                {#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 class="save-load-clear-group">
+        <button
+          on:click={() => {
+            invoke("save_json", { jsonContent: pokemonDataArray})
+            .then(() => {})
+            .catch((err) => console.log(err));
+          }}
+        >
+          Save
+        </button>
+        <button
+          on:click={() => {
+            invoke("load_json").then((d) => {
+              // fix this type issue
+              pokemonDataArray = d;
+              pokemonData = pokemonDataArray[index];
+            })
+            .catch((e) => console.log(e));
+          }}
+        >
+          Load
+        </button><br />
+        <button
+          on:click={() => {
+            pokemonData = undefined;
+            pokemonDataArray = [];
+            index = 0;
+            myValue = undefined;
+          }}
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+    <div class="display-data">
       <DisplayData
         {pokemonData}
-      bind:terastype
         bind:hp_final
-      bind:atk_final
+        bind:attack_final
-      bind:def_final
+        bind:defense_final
-      bind:spatk_final
+        bind:special_attack_final
-      bind:spdef_final
+        bind:special_defense_final
-      bind:spd_final
+        bind:speed_final
         bind:attackId
+        {items}
       />
     </div>
+  </div>
 </div>
 
 <style>
+  .save-load-clear-group {
+    margin: 15px 0;
+    line-height: 40px;
+  }
   .row-display {
-    height: 755px;
+    height: 759px;
+    display: flex;
+  }
+  .button-table {
+    width: 200px;
+  }
+  .pokemon-button-div {
+    width: 200px;
+    border-right: 2px solid white;
+  }
+  .active-arrow {
+    display: none;
+  }
+  .active > .active-arrow {
+    display: block;
+    margin-right: 5px;
+  }
+  .display-data {
+    width: 800px;
+    height: 759px;
     overflow-y: scroll;
   }
+  .pokemon-button {
+    padding: 10px;
+    border-top-left-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+    border-right: 2px solid white;
+    border-bottom: 1px solid black;
+  }
+  .active {
+    background-color: #d1be01;
+    cursor: unset;
+    color: black;
+    font-weight: bold;
+    text-shadow: 1px 1px 1px white;
+  }
+  .odd {
+    color: white;
+    background-color: #f7bbb8;
+  }
+  .odd:hover {
+    color: white;
+    background-color: #f5453d;
+    transition: background-color 0.5s ease;
+    cursor: pointer;
+  }
+  .even {
+    color: white;
+    background-color: #b6b4ff;
+  }
+  .even:hover {
+    color: white;
+    background-color: #3d3094;
+    transition: background-color 0.5s ease;
+    cursor: pointer;
+  }
 </style>

src/model/ItemData.ts

@@ -0,0 +1,16 @@
+export interface ItemData {
+  id: number;
+  name: string;
+  image: string;
+  effect?: ItemEffect,
+}
+
+export interface ItemEffect {
+  attack?: number;
+  defense?: number;
+  special_attack?: number;
+  special_defense?: number;
+  speed?: number;
+  condition?: string;
+  type?: number;
+}

src/model/PokemonData.ts

@@ -1,7 +1,7 @@
 export interface PokemonDBData {
   id: number;
   name: string;
-  types: string;
+  types: number[];
   thumbnail: string;
   abilities: string;
   hp: number;
@@ -12,6 +12,49 @@ export interface PokemonDBData {
   speed: number;
   learnset: PokemonLearnsetDBData[];
 };
+export interface PokemonData {
+  id: number;
+  name: string;
+  types: number[];
+  thumbnail: string;
+  abilities: string;
+  hp: number;
+  attack: number;
+  defense: number;
+  special_attack: number;
+  special_defense: number;
+  speed: number;
+  hp_v: number;
+  attack_v: number;
+  defense_v: number;
+  special_attack_v: number;
+  special_defense_v: number;
+  speed_v: number;
+  hp_d: number;
+  attack_d: number;
+  defense_d: number;
+  special_attack_d: number;
+  special_defense_d: number;
+  speed_d: number;
+  attack_plus: boolean;
+  attack_minus: boolean;
+  defense_plus: boolean;
+  defense_minus: boolean;
+  special_attack_plus: boolean;
+  special_attack_minus: boolean;
+  special_defense_plus: boolean;
+  special_defense_minus: boolean;
+  speed_plus: boolean;
+  speed_minus: boolean;
+  attack_buff: number;
+  defense_buff: number;
+  special_attack_buff: number;
+  special_defense_buff: number;
+  speed_buff: number;
+  learnset: PokemonLearnsetDBData[];
+  item: number;
+  terastype: number[];
+};
 export interface PokemonLearnsetDBData {
   id: number;
   learnset_id: number;

src/model/PokemonStatus.ts

@@ -1,10 +1,16 @@
-export interface PokemonData {
+export interface PokemonStatus {
   types: number[],
   terastype: number[],
   hp: number,
-  atk: number,
+  attack: number,
-  def: number,
+  defense: number,
-  spatk: number,
+  special_attack: number,
-  spdef: number,
+  special_defense: number,
-  spd: number  
+  speed: number,
+  attack_buff: number,
+  defense_buff: number,
+  special_attack_buff: number,
+  special_defense_buff: number,
+  speed_buff: number,
+  item: number,
 };