diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 28c42dc..d17333c 100644
--- a/src-tauri/Cargo.lock
+++ b/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"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 3f61907..6c8b931 100644
--- a/src-tauri/Cargo.toml
+++ b/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
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 7ea737c..f4713f6 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -2,11 +2,15 @@
   all(not(debug_assertions), target_os = "windows"),
   windows_subsystem = "windows"
 )]
+use std::collections::HashMap;
+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 +35,7 @@ fn autosearch_move(keyword: &str) -> serde_json::Value {
   {
     let row_result = Autosearch {
       id: row.read::<i64, _>("id"),
-      name: format!(
-        "{}",
-        row.read::<&str, _>("name").to_string()
-      ),
+      name: format!("{}", row.read::<&str, _>("name").to_string()),
     };
     result.push(row_result);
   }
@@ -42,6 +43,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 +122,7 @@ fn autosearch(keyword: &str) -> serde_json::Value {
   {
     let row_result = Autosearch {
       id: row.read::<i64, _>("id"),
-      name: format!(
-        "{}",
-        row.read::<&str, _>("name").to_string()
-      ),
+      name: format!("{}", row.read::<&str, _>("name").to_string()),
     };
     result.push(row_result);
   }
@@ -87,7 +144,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 +153,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 +191,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, l.priority, pl.usage 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()
@@ -153,10 +218,18 @@ fn search(index: i64) -> SearchResult {
       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"),
+      usage: row.read::<i64, _>("usage"),
     };
     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,9 +242,9 @@ 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(),
+      abilities: serde_json::from_str(row.read::<&str, _>("abilities")).unwrap_or(HashMap::new()),
       hp: row.read::<i64, _>("hp"),
       attack: row.read::<i64, _>("attack"),
       defense: row.read::<i64, _>("defense"),
@@ -180,14 +253,14 @@ 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(),
+    abilities: HashMap::new(),
     hp: 0,
     attack: 0,
     defense: 0,
@@ -195,11 +268,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");
 }
diff --git a/src-tauri/src/model.rs b/src-tauri/src/model.rs
index 14b4673..89e3fb8 100644
--- a/src-tauri/src/model.rs
+++ b/src-tauri/src/model.rs
@@ -1,17 +1,19 @@
+use std::collections::HashMap;
+
 use serde::{Deserialize, Serialize};
 
 #[derive(Serialize, Deserialize, Debug, Clone)]
 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,
   pub special_attack: i64,
   pub special_defense: i64,
   pub speed: i64,
-  pub abilities: String,
+  pub abilities: HashMap<String, String>,
   pub thumbnail: String,
   pub learnset: Vec<PokemonDataLearnset>,
 }
@@ -24,12 +26,14 @@ pub struct PokemonDataLearnset {
   pub types: Vec<i64>,
   pub power: i64,
   pub category: i64,
+  pub priority: i64,
+  pub usage: i64,
 }
 #[derive(Serialize, Deserialize, Debug, Clone)]
 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,
@@ -47,4 +51,124 @@ pub struct ItemSearchResult {
   pub name: String,
   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: HashMap<String, 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]
+      }
+  }
 }
\ No newline at end of file
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 2cb4592..bcda16a 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "pokemon-data-displayer",
-    "version": "0.0.4"
+    "version": "0.0.7"
   },
   "tauri": {
     "allowlist": {
diff --git a/src/App.svelte b/src/App.svelte
index 12a32d3..722e343 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,23 +1,48 @@
 <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;
-  let player2Data;
-  let attackId;
+  import type { ItemData } from "./model/ItemData";
+  import type { PokemonStatus } from "./model/PokemonStatus";
+  let items: ItemData[] = [];
+  let player1Data: PokemonStatus | undefined;
+  let player2Data: PokemonStatus | undefined;
+  let attackId: number | undefined;
+  let attackSide: 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
+        bind:attackSide
+        {items}
+        playerSide={1}
+      />
     </div>
     <div class="column-2">
-      <MainWrapper bind:pokemonStatus={player2Data} bind:attackId />
+      <MainWrapper
+        bind:pokemonStatus={player2Data}
+        bind:attackId
+        bind:attackSide
+        {items}
+        playerSide={2}
+      />
     </div>
   </div>
   <div class="row">
-    <DamageCalculator bind:player1Data bind:player2Data bind:attackId />
+    <DamageCalculator
+      bind:player1Data
+      bind:player2Data
+      bind:attackId
+      bind:attackSide
+    />
   </div>
 </main>
 
diff --git a/src/lib/DamageCalculator.svelte b/src/lib/DamageCalculator.svelte
index f7c2727..5d262d6 100644
--- a/src/lib/DamageCalculator.svelte
+++ b/src/lib/DamageCalculator.svelte
@@ -2,26 +2,37 @@
   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 player2Data: PokemonData | undefined;
+  export let player1Data: PokemonStatus | undefined;
+  export let player2Data: PokemonStatus | undefined;
   export let attackId: number | undefined;
+  export let attackSide: number | undefined;
   let attackData;
   $: {
-    if (myValue > 0 && myValue !== currentValue) {
-      invoke("search_move", { index: myValue }).then((r) => {
-        currentValue = myValue;
+    if (moveValue > 0) {
+      invoke("search_move", { index: moveValue }).then((r) => {
         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;
+        console.log(attackSide);
+        switch (attackSide) {
+          case 1: {
+            attack_direction = "p1p2";
+            break;
+          }
+          case 2: {
+            attack_direction = "p2p1";
+            break;
+          }
+        }
+        attackSide = undefined;
       });
     }
   }
@@ -32,8 +43,8 @@
   let total_min_damage_percentage = 0;
   let item_magnification = 1.0;
   function calculate_damage() {
-    let attacker;
-    let defender;
+    let attacker: PokemonStatus;
+    let defender: PokemonStatus;
     let atk_value;
     let def_value;
     if (
@@ -43,9 +54,14 @@
       (!!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;
     }
+    console.log(attackData);
     if (attack_direction === "p1p2") {
       attacker = player1Data;
       defender = player2Data;
@@ -55,11 +71,11 @@
     }
     // 物理or特殊の判定
     if (attackData.category === 1) {
-      atk_value = attacker.atk;
-      def_value = defender.def;
+      atk_value = attacker.attack;
+      def_value = defender.defense;
     } else {
-      atk_value = attacker.spatk;
-      def_value = defender.spdef;
+      atk_value = attacker.special_attack;
+      def_value = defender.special_defense;
     }
 
     // debug
@@ -103,7 +119,7 @@
       attack_data_category: attackData.category,
 
       // 技タイプ
-      move_type: JSON.parse(attackData.types),
+      move_type: attackData.types,
       // 範囲の計算で使用する
     };
     // 計算
@@ -352,8 +368,7 @@
       return [];
     }
   }
-  let myValue;
-  let currentValue = 0;
+  let moveValue;
 </script>
 
 <div class="calculator">
@@ -391,9 +406,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>
diff --git a/src/lib/DisplayData.svelte b/src/lib/DisplayData.svelte
index e5ea9cd..e3049b3 100644
--- a/src/lib/DisplayData.svelte
+++ b/src/lib/DisplayData.svelte
@@ -1,12 +1,17 @@
 <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;
+  export let attackSide: number | undefined;
+  export let playerSide: number;
   function v_validator(v) {
     if (typeof v !== "number") {
       return null;
@@ -51,83 +56,149 @@
     { id: 17 },
     { id: 18 },
   ];
-  function d_validator(d) {
+  function d_validator(d, prev) {
     if (typeof d !== "number") {
       return null;
     }
-    if (d > 252) {
-      return 252;
+    let result = 0;
+    if (d > prev) {
+      result = Math.ceil(d / 4) * 4;
+    } else {
+      result = Math.floor(d / 4) * 4;
     }
-    if (d < 0) {
-      return 0;
-    }
-    return d;
+    return Math.min(Math.max(result, 0), 252);
   }
+  let hp_d_prev = 0;
+  let attack_d_prev = 0;
+  let defense_d_prev = 0;
+  let special_attack_d_prev = 0;
+  let special_defense_d_prev = 0;
+  let speed_d_prev = 0;
   $: {
-    // validator
-    level = level_validator(level);
-    hp_v = v_validator(hp_v);
-    atk_v = v_validator(atk_v);
-    def_v = v_validator(def_v);
-    spatk_v = v_validator(spatk_v);
-    spdef_v = v_validator(spdef_v);
-    spd_v = v_validator(spd_v);
-    hp_d = d_validator(hp_d);
-    atk_d = d_validator(atk_d);
-    def_d = d_validator(def_d);
-    spatk_d = d_validator(spatk_d);
-    spdef_d = d_validator(spdef_d);
-    spd_d = d_validator(spd_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) {
-      atk_p = 1.1;
-    } else if (!atk_plus && !!atk_minus) {
-      atk_p = 0.9;
-    }
-    if (!!def_plus && !def_minus) {
-      def_p = 1.1;
-    } else if (!def_plus && !!def_minus) {
-      def_p = 0.9;
-    }
-    if (!!spatk_plus && !spatk_minus) {
-      spatk_p = 1.1;
-    } else if (!spatk_plus && !!spatk_minus) {
-      spatk_p = 0.9;
-    }
-    if (!!spdef_plus && !spdef_minus) {
-      spdef_p = 1.1;
-    } else if (!spdef_plus && !!spdef_minus) {
-      spdef_p = 0.9;
-    }
-    if (!!spd_plus && !spd_minus) {
-      spd_p = 1.1;
-    } else if (!spd_plus && !!spd_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);
-      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(
+      if (init_flag) {
+        selected_terastype = pokemonData.terastype[0];
+        init_flag = false;
+      }
+      if (pokemonData.item !== selected_item) {
+        selected_item = pokemonData.item;
+      }
+      total_move_usage = pokemonData.learnset
+        .map((v) => v.usage)
+        .reduce((partialSum, a) => partialSum + a, 0);
+      // validator
+      level = level_validator(level);
+      pokemonData.hp_v = v_validator(pokemonData.hp_v);
+      pokemonData.attack_v = v_validator(pokemonData.attack_v);
+      pokemonData.defense_v = v_validator(pokemonData.defense_v);
+      pokemonData.special_attack_v = v_validator(pokemonData.special_attack_v);
+      pokemonData.special_defense_v = v_validator(
+        pokemonData.special_defense_v
+      );
+      pokemonData.speed_v = v_validator(pokemonData.speed_v);
+
+      hp_d_prev = pokemonData.hp_d = d_validator(pokemonData.hp_d, hp_d_prev);
+
+      attack_d_prev = pokemonData.attack_d = d_validator(
+        pokemonData.attack_d,
+        attack_d_prev
+      );
+      defense_d_prev = pokemonData.defense_d = d_validator(
+        pokemonData.defense_d,
+        defense_d_prev
+      );
+      special_attack_d_prev = pokemonData.special_attack_d = d_validator(
+        pokemonData.special_attack_d,
+        special_attack_d_prev
+      );
+      special_defense_d_prev = pokemonData.special_defense_d = d_validator(
+        pokemonData.special_defense_d,
+        special_defense_d_prev
+      );
+      speed_d_prev = pokemonData.speed_d = d_validator(
+        pokemonData.speed_d,
+        speed_d_prev
+      );
+      // 性格補正 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 (!!pokemonData.attack_plus && !pokemonData.attack_minus) {
+        atk_p = 1.1;
+      } else if (!pokemonData.attack_plus && !!pokemonData.attack_minus) {
+        atk_p = 0.9;
+      }
+      if (!!pokemonData.defense_plus && !pokemonData.defense_minus) {
+        def_p = 1.1;
+      } else if (!pokemonData.defense_plus && !!pokemonData.defense_minus) {
+        def_p = 0.9;
+      }
+      if (
+        !!pokemonData.special_attack_plus &&
+        !pokemonData.special_attack_minus
+      ) {
+        spatk_p = 1.1;
+      } else if (
+        !pokemonData.special_attack_plus &&
+        !!pokemonData.special_attack_minus
+      ) {
+        spatk_p = 0.9;
+      }
+      if (
+        !!pokemonData.special_defense_plus &&
+        !pokemonData.special_defense_minus
+      ) {
+        spdef_p = 1.1;
+      } else if (
+        !pokemonData.special_defense_plus &&
+        !!pokemonData.special_defense_minus
+      ) {
+        spdef_p = 0.9;
+      }
+      if (!!pokemonData.speed_plus && !pokemonData.speed_minus) {
+        spd_p = 1.1;
+      } else if (!pokemonData.speed_plus && !!pokemonData.speed_minus) {
+        spd_p = 0.9;
+      }
+      abilities = Object.keys(pokemonData.abilities);
+      abilities_description = Object.values(pokemonData.abilities);
+      hp_final = calculate_hp(
+        pokemonData.hp,
+        pokemonData.hp_v,
+        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,
-        spatk_d,
+        pokemonData.special_attack_v,
+        pokemonData.special_attack_d,
         spatk_p
       );
-      spdef_final = other_stats(
+      special_defense_final = other_stats(
         pokemonData.special_defense,
-        spdef_v,
-        spdef_d,
+        pokemonData.special_defense_v,
+        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 +283,9 @@
     return "&nbsp;";
   }
   function generate_weakness(types) {
-    let parsed_types = JSON.parse(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];
+    let type_compatibility = defense_types[types[0] - 1];
+    if (types.length > 1) {
+      let second_type_compatibility = defense_types[types[1] - 1];
       type_compatibility = type_compatibility.map(
         (v, i) => v * second_type_compatibility[i]
       );
@@ -227,7 +296,6 @@
     let resist = [];
     let immune = [];
     type_compatibility.forEach((v, i) => {
-      console.log(v);
       switch (v) {
         case 4:
           super_weakness.push(i + 1);
@@ -246,11 +314,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,51 +333,25 @@
         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;
-
+  let total_move_usage = 0;
   export let hp_final = 0;
-  export let atk_final = 0;
-  export let def_final = 0;
-  export let spatk_final = 0;
-  export let spdef_final = 0;
-  export let spd_final = 0;
-  export let terastype = [0];
-  export let item = 0;
+  export let attack_final = 0;
+  export let defense_final = 0;
+  export let special_attack_final = 0;
+  export let special_defense_final = 0;
+  export let speed_final = 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;
+  let init_flag = true;
+  let filter_move = "";
   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);
   }
   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 - 1) * (level / 100) + 5) * p);
   }
   let abilities = [];
   let abilities_description = [];
@@ -326,20 +364,20 @@
         <AccordionItem open title="基本情報">
           <table class="pokemon-data">
             <tr>
-              <td rowspan="4" class="picture"
-                ><img
+              <td rowspan="4" class="picture">
+                <img
                   src={`data:image/png;base64,${pokemonData.thumbnail}`}
                   alt={pokemonData.name}
-                  width="85%"
-                /></td
-              >
+                  width="100%"
+                />
+              </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 +385,11 @@
               <td style="display: flex;">
                 <select
                   bind:value={selected_terastype}
-                  on:change={() => (terastype = [selected_terastype])}
+                  on:change={(a) => {
+                    console.log(a);
+                    pokemonData.terastype = [selected_terastype];
+                    console.log(selected_terastype);
+                  }}
                 >
                   <option value={0}> なし </option>
                   {#each available_type as curr_type}
@@ -363,9 +405,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 +420,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;">
@@ -398,252 +445,559 @@
             <tr>
               <td class="value-column"><b>HP</b></td>
               <td class="atai-column"><b>{pokemonData.hp}</b></td>
-              <td class="atai-column"
-                ><b
-                  ><input
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={hp_v}
+                    bind:value={pokemonData.hp_v}
                     min="0"
                     max="31"
-                  /></b
-                ></td
-              >
-              <td class="atai-column"
-                ><b
-                  ><input
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={hp_d}
+                    bind:value={pokemonData.hp_d}
                     min="0"
                     max="252"
-                  /></b
-                ></td
-              >
+                  />
+                </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>
+              <td class="plus-minus-column"><b>+</b></td>
+              <td class="plus-minus-column"><b>-</b></td>
             </tr>
             <tr>
               <td class="value-column"><b>ATK</b></td>
               <td class="atai-column"><b>{pokemonData.attack}</b></td>
-              <td class="atai-column"
-                ><b
-                  ><input
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={atk_v}
+                    bind:value={pokemonData.attack_v}
                     min="0"
                     max="31"
-                  /></b
-                ></td
-              >
-              <td class="atai-column"
-                ><b
-                  ><input
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <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><input type="checkbox" bind:checked={atk_plus} /></b></td
-              >
-              <td class="atai-column"
-                ><b><input type="checkbox" bind:checked={atk_minus} /></b></td
+                  />
+                </b>
+              </td>
+              <td class="atai-column"><b>{attack_final}</b></td>
+              <td class="atai-column">
+                <b>
+                  <input
+                    type="checkbox"
+                    bind:checked={pokemonData.attack_plus}
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <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>
               <td class="atai-column"><b>{pokemonData.defense}</b></td>
-              <td class="atai-column"
-                ><b
-                  ><input
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={def_v}
+                    bind:value={pokemonData.defense_v}
                     min="0"
                     max="31"
-                  /></b
-                ></td
-              >
-              <td class="atai-column"
-                ><b
-                  ><input
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <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><input type="checkbox" bind:checked={def_plus} /></b></td
-              >
-              <td class="atai-column"
-                ><b><input type="checkbox" bind:checked={def_minus} /></b></td
+                  />
+                </b>
+              </td>
+              <td class="atai-column"><b>{defense_final}</b></td>
+              <td class="atai-column">
+                <b>
+                  <input
+                    type="checkbox"
+                    bind:checked={pokemonData.defense_plus}
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <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"
-                ><b
-                  ><input
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spatk_v}
+                    bind:value={pokemonData.special_attack_v}
                     min="0"
                     max="31"
-                  /></b
-                ></td
-              >
-              <td class="atai-column"
-                ><b
-                  ><input
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spatk_d}
+                    bind:value={pokemonData.special_attack_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"
-                ><b><input type="checkbox" bind:checked={spatk_minus} /></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>
+              {/each}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <td
+                class="cursor-pointer"
+                on:click={() => {
+                  pokemonData.special_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.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"
-                ><b
-                  ><input
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spdef_v}
+                    bind:value={pokemonData.special_defense_v}
                     min="0"
                     max="31"
-                  /></b
-                ></td
-              >
-              <td class="atai-column"
-                ><b
-                  ><input
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spdef_d}
+                    bind:value={pokemonData.special_defense_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"
-                ><b><input type="checkbox" bind:checked={spdef_minus} /></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>
+              {/each}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <td
+                class="cursor-pointer"
+                on:click={() => {
+                  pokemonData.special_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.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"
-                ><b
-                  ><input
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spd_v}
+                    bind:value={pokemonData.speed_v}
                     min="0"
                     max="31"
-                  /></b
-                ></td
-              >
-              <td class="atai-column"
-                ><b
-                  ><input
+                  />
+                </b>
+              </td>
+              <td class="atai-column">
+                <b>
+                  <input
                     class="vd-input"
                     type="number"
-                    bind:value={spd_d}
+                    bind:value={pokemonData.speed_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"
-                ><b><input type="checkbox" bind:checked={spd_minus} /></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>
+              {/each}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <td
+                class="cursor-pointer"
+                on:click={() => {
+                  pokemonData.speed_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.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"
-                ><b
-                  >{pokemonData.hp +
+              <td class="atai-column">
+                <b>
+                  {pokemonData.hp +
                     pokemonData.attack +
                     pokemonData.defense +
                     pokemonData.special_attack +
                     pokemonData.special_defense +
-                    pokemonData.speed}</b
-                ></td
-              >
+                    pokemonData.speed}
+                </b>
+              </td>
               <td class="atai-column" />
             </tr>
             <tr>
               <td class="value-column"><b>Level</b></td>
-              <td class="atai-column"
-                ><input
+              <td class="atai-column">
+                <input
                   class="vd-input"
                   type="number"
                   bind:value={level}
                   min="1"
                   max="100"
-                /></td
-              >
+                />
+              </td>
               <td class="atai-column" />
             </tr>
           </table>
         </AccordionItem>
         <AccordionItem open title="技">
+          <input bind:value={filter_move} type="text" />
           <table class="learnset">
             {#each pokemonData.learnset as learnset}
-              <tr
-                on:click={() => {
-                  console.log("passing" + learnset.name);
-                  console.log(learnset.learnset_id);
-                  console.log(attackId);
-                  attackId = learnset.learnset_id;
-                  console.log(attackId);
-                }}
-              >
-                <td
-                  ><img
-                    src={learnset.category === 1
-                      ? PhysicalIcon
-                      : learnset.category === 2
-                      ? SpecialIcon
-                      : BuffIcon}
-                    alt="a"
-                  /></td
+              {#if filter_move === "" || learnset.name.includes(filter_move)}
+                <tr
+                  on:click={async () => {
+                    console.log("passing" + learnset.name);
+                    attackSide = playerSide;
+                    attackId = learnset.learnset_id;
+                    if (playerSide > 1) {
+                      // 技の使用回数は相手の使用回数に限定する。
+                      await invoke("increase_attack_usage", {
+                        index: learnset.id,
+                      });
+                      pokemonData.learnset = await invoke("search_learnset", {
+                        index: pokemonData.id,
+                      });
+                    }
+                  }}
                 >
-                <td>{@html generate_type(learnset.types)}</td>
-                <td>{learnset.name}</td>
-                <td>{learnset.power}</td>
-              </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>
+                  <td>{learnset.priority}</td>
+                  <td
+                    >{total_move_usage === 0
+                      ? 0
+                      : Math.round(
+                          (learnset.usage / total_move_usage) * 10000
+                        ) / 100}%</td
+                  >
+                </tr>
+              {/if}
             {/each}
           </table>
         </AccordionItem>
@@ -691,6 +1045,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 +1068,7 @@
     border: 1px solid;
     vertical-align: middle;
     height: 25px;
+    padding: 5px;
   }
   .weakness {
     width: 90%;
@@ -717,6 +1077,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%;
diff --git a/src/lib/MainWrapper.svelte b/src/lib/MainWrapper.svelte
index d33b10c..fb6f500 100644
--- a/src/lib/MainWrapper.svelte
+++ b/src/lib/MainWrapper.svelte
@@ -2,53 +2,109 @@
   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 } from "../model/ItemData";
   $: {
-    if (myValue > 0 && myValue !== currentValue) {
-      invoke("search", { index: myValue }).then((r) => {
-        currentValue = myValue;
-        pokemonData = r as PokemonDBData;
-        console.log(pokemonData);
+    if (myValue > 0) {
+      invoke("search", { index: myValue }).then((r: 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,
+          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) : [],
-      terastype: terastype,
+      types: pokemonData ? pokemonData.types : [],
+      terastype: pokemonData ? pokemonData.terastype : [0],
       hp: hp_final,
-      atk: atk_final,
-      def: def_final,
-      spatk: spatk_final,
-      spdef: spdef_final,
-      spd: spd_final,
+      attack: attack_final,
+      defense: defense_final,
+      special_attack: special_attack_final,
+      special_defense: special_defense_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 playerSide: number;
   export let attackId: number | undefined;
+  export let attackSide: number | undefined;
+  export let items: ItemData[];
   let myValue;
-  let currentValue = 0;
-  let pokemonData: PokemonDBData | undefined;
-  let terastype = [0];
+  let index = 0;
+  let pokemonData: PokemonData | undefined;
+  let pokemonDataArray: PokemonData[] = [];
   let hp_final = 0;
-  let atk_final = 0;
-  let def_final = 0;
-  let spatk_final = 0;
-  let spdef_final = 0;
-  let spd_final = 0;
-  export let pokemonStatus: PokemonData = {
+  let attack_final = 0;
+  let defense_final = 0;
+  let special_attack_final = 0;
+  let special_defense_final = 0;
+  let speed_final = 0;
+  export let pokemonStatus: PokemonStatus = {
     types: [],
     terastype: [0],
     hp: 0,
-    atk: 0,
-    def: 0,
-    spatk: 0,
-    spdef: 0,
-    spd: 0,
+    attack: 0,
+    defense: 0,
+    special_attack: 0,
+    special_defense: 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 +126,172 @@
     />
   </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 Array.from({ length: 6 }, (_, i) => i) 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={() => {
+            pokemonDataArray.forEach((pd) => {
+              pd.attack_buff = 0;
+              pd.defense_buff = 0;
+              pd.special_attack_buff = 0;
+              pd.special_defense_buff = 0;
+              pd.speed_buff = 0;
+              pd.terastype = [0];
+            });
+            pokemonData = pokemonDataArray[index];
+          }}
+        >
+          Reset Battle Status
+        </button><br />
+        <button
+          on:click={() => {
+            pokemonData = undefined;
+            pokemonDataArray = [];
+            index = 0;
+            myValue = undefined;
+          }}
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+    <div class="display-data">
+      <DisplayData
+        {pokemonData}
+        bind:hp_final
+        bind:attack_final
+        bind:defense_final
+        bind:special_attack_final
+        bind:special_defense_final
+        bind:speed_final
+        bind:attackId
+        bind:attackSide
+        {items}
+        {playerSide}
+      />
+    </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;
   }
-</style>
\ No newline at end of file
+  .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>
diff --git a/src/model/ItemData.ts b/src/model/ItemData.ts
new file mode 100644
index 0000000..6401a4c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/model/PokemonData.ts b/src/model/PokemonData.ts
index bd11278..bd36125 100644
--- a/src/model/PokemonData.ts
+++ b/src/model/PokemonData.ts
@@ -1,9 +1,9 @@
 export interface PokemonDBData {
   id: number;
   name: string;
-  types: string;
+  types: number[];
   thumbnail: string;
-  abilities: string;
+  abilities: Record<string, string>;
   hp: number;
   attack: number;
   defense: number;
@@ -12,6 +12,49 @@ export interface PokemonDBData {
   speed: number;
   learnset: PokemonLearnsetDBData[];
 };
+export interface PokemonData {
+  id: number;
+  name: string;
+  types: number[];
+  thumbnail: string;
+  abilities: Record<string, 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;
@@ -19,4 +62,6 @@ export interface PokemonLearnsetDBData {
   types: number[];
   power: number;
   category: number;
+  priority: number;
+  usage: number;
 }
diff --git a/src/model/PokemonStatus.ts b/src/model/PokemonStatus.ts
index 397b89e..b9c93d2 100644
--- a/src/model/PokemonStatus.ts
+++ b/src/model/PokemonStatus.ts
@@ -1,10 +1,16 @@
-export interface PokemonData {
+export interface PokemonStatus {
   types: number[],
   terastype: number[],
   hp: number,
-  atk: number,
-  def: number,
-  spatk: number,
-  spdef: number,
-  spd: number  
+  attack: number,
+  defense: number,
+  special_attack: number,
+  special_defense: number,
+  speed: number,
+  attack_buff: number,
+  defense_buff: number,
+  special_attack_buff: number,
+  special_defense_buff: number,
+  speed_buff: number,
+  item: number,
 };