update on code

src-tauri/tauri.conf.json

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

src/App.svelte

@@ -1,13 +1,28 @@
 <script lang="ts">
   import MainWrapper from './lib/MainWrapper.svelte'
+  import DamageCalculator from './lib/DamageCalculator.svelte'
+  let player1Data;
+  let player2Data;
 </script>
 
 <main class="container">
+  <div class="main-row">
     <div class="column-1">
-    <MainWrapper />
+      <MainWrapper 
+        bind:pokemonStatus={player1Data}
+      />
     </div>
     <div class="column-2">
-    <MainWrapper />
+      <MainWrapper 
+        bind:pokemonStatus={player2Data}
+      />
+    </div>
+  </div>
+  <div class="row">
+    <DamageCalculator
+      bind:player1Data={player1Data}
+      bind:player2Data={player2Data}
+    />
   </div>
 </main>
 
@@ -22,4 +37,9 @@
     width: 50%;
     border-left: 1px solid white;
   }
+  .main-row {
+    display: flex;
+    flex-direction: row;
+    height: 700px;
+  }
 </style>

src/lib/DamageCalculator.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  export let player1Data;
+  export let player2Data;
+
+  let attack_direction = "p1p2";
+  let attack_type = "attack";
+  let attack_power = 0;
+  let total_damage = 0;
+  function calculate_damage() {
+    let attacker;
+    let defender;
+    let atk_value;
+    let def_value;
+    if (attack_direction === "p1p2") {
+      attacker = player1Data;
+      defender = player2Data;
+    } else {
+      attacker = player2Data;
+      defender = player1Data;
+    }
+    if (attack_type === "attack") {
+      atk_value = attacker.atk;
+      def_value = defender.def;
+    } else {
+      atk_value = attacker.spatk;
+      def_value = defender.spdef;
+    }
+    total_damage = Math.floor(Math.random() * 150);
+  }
+</script>
+<div class="calculator">
+  <table>
+    <tr>
+      <td>
+        <input type="radio" name="direction" value="p1p2" bind:group={attack_direction}> P1 ->> P2
+      </td>
+      <td>
+        <input type="radio" name="direction" value="p2p1" bind:group={attack_direction}> P2 ->> P1
+      </td>
+    </tr>
+    <tr>
+      <td><input type="radio" name="type" value="attack" bind:group={attack_type}> Attack</td>
+      <td><input type="radio" name="type" value="special" bind:group={attack_type}> Special</td>
+      <td>Attack Power: <input type="text" bind:value={attack_power}></td>
+      <td><input type="button" value="Calculate" on:click={calculate_damage}></td>
+      <td>Total Damage: {total_damage}</td>
+    </tr>
+  </table>
+  {JSON.stringify(player1Data)} -
+   {JSON.stringify(player2Data)}<br> {attack_direction}
+</div>
+
+<style>
+.calculator {
+  height: 100px;
+  width: 100%;
+  border-top: 2px solid white;
+}
+</style>

src/lib/DisplayData.svelte

@@ -33,6 +33,8 @@
       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);
@@ -137,12 +139,12 @@
   let spdef_d = 0;
   let spd_d = 0;
 
-  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 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;
 
   let atk_plus = false;
   let def_plus = false;
@@ -161,6 +163,8 @@
   function other_stats(stat, v, d, p) {
     return Math.floor((((stat*2+v+(d/4))*0.5)+5)*p)
   }
+  let abilities = [];
+  let abilities_description = [];
 </script>
 
 <div class="data-container">
@@ -178,6 +182,16 @@
       </tr>
     </table>
   </div>
+  <div class="row">
+    <table class="abilities_table">
+      {#each abilities as ability, i}
+      <tr>
+        <td>{ability}</td>
+        <td>{abilities_description[i]}</td>
+      </tr>
+      {/each}
+    </table>
+  </div>
   <div class="row">
     <table class="data-table">
       <tr>
@@ -269,4 +283,15 @@
     width: 50px;
     height: 8px;
   }
+  .abilities_table {
+    border: 1px solid;
+    width: 90%;
+    margin: 10px 0;
+  }
+  .abilities_table > tr {
+    border: 1px solid;
+  }
+  .abilities_table > tr > td{
+    border: 1px solid;
+  }
 </style>

src/lib/MainWrapper.svelte

@@ -2,10 +2,36 @@
   import { invoke } from "@tauri-apps/api/tauri";
   import AutoComplete from "simple-svelte-autocomplete";
   import DisplayData from "./DisplayData.svelte";
-
+  $: {
+    pokemonStatus = {
+      types: pokemonData?.types ? pokemonData.types : [],
+      hp: hp_final,
+      atk: atk_final,
+      def: def_final,
+      spatk: spatk_final,
+      spdef: spdef_final,
+      spd: spd_final,
+    };
+    console.log(pokemonStatus);
+  }
   let myValue;
   let currentValue = 0;
   let 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 = {
+    types: [],
+    hp: 0,
+    atk: 0,
+    def: 0,
+    spatk: 0,
+    spdef: 0,
+    spd: 0,
+  };
   async function getItems(keyword) {
     try {
       let result = await invoke("autosearch", { keyword });
@@ -42,6 +68,12 @@
   <div class="row">
     <DisplayData
       pokemonData={pokemonData}
+      bind:hp_final={hp_final}
+      bind:atk_final={atk_final}
+      bind:def_final={def_final}
+      bind:spatk_final={spatk_final}
+      bind:spdef_final={spdef_final}
+      bind:spd_final={spd_final}
     />
   </div>
 </div>

src/style.css

@@ -19,7 +19,7 @@ body {
 .container {
   margin: 0;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   text-align: center;
   height: 100%;