pass attack side to calculator

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,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!(
+      name: format!("{}", row.read::<&str, _>("name").to_string()),
-        "{}",
-        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!(
+      name: format!("{}", row.read::<&str, _>("name").to_string()),
-        "{}",
-        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");
 }

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,
@@ -48,3 +52,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: 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]
+      }
+  }
+}

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,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;
+  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;
+  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>
 

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 player1Data: PokemonStatus | undefined;
-  export let player2Data: PokemonData | undefined;
+  export let player2Data: PokemonStatus | undefined;
   export let attackId: number | undefined;
+  export let attackSide: 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;
+        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 attacker: PokemonStatus;
-    let defender;
+    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;
+      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 +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 moveValue;
-  let currentValue = 0;
 </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>

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 { 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 playerSide: number;
   export let attackId: number | undefined;
+  export let attackSide: 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 +126,172 @@
     />
   </div>
   <div class="row-display">
+    <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: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
+        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;
   }
+  .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,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;
 }

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,
 };