diff --git a/src/App.svelte b/src/App.svelte
index c6c3cf3..1570f62 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import MainWrapper from './lib/MainWrapper.svelte'
-  import DamageCalculator from './lib/DamageCalculator.svelte'
+  import MainWrapper from "./lib/MainWrapper.svelte";
+  import DamageCalculator from "./lib/DamageCalculator.svelte";
   let player1Data;
   let player2Data;
 </script>
@@ -8,21 +8,14 @@
 <main class="container">
   <div class="main-row">
     <div class="column-1">
-      <MainWrapper 
-        bind:pokemonStatus={player1Data}
-      />
+      <MainWrapper bind:pokemonStatus={player1Data} />
     </div>
     <div class="column-2">
-      <MainWrapper 
-        bind:pokemonStatus={player2Data}
-      />
+      <MainWrapper bind:pokemonStatus={player2Data} />
     </div>
   </div>
   <div class="row">
-    <DamageCalculator
-      bind:player1Data={player1Data}
-      bind:player2Data={player2Data}
-    />
+    <DamageCalculator bind:player1Data bind:player2Data />
   </div>
 </main>
 
@@ -42,4 +35,4 @@
     flex-direction: row;
     height: 800px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/DamageCalculator.svelte b/src/lib/DamageCalculator.svelte
index d8824f0..a326447 100644
--- a/src/lib/DamageCalculator.svelte
+++ b/src/lib/DamageCalculator.svelte
@@ -7,7 +7,6 @@
   let attackData;
   $: {
     if (myValue > 0 && myValue !== currentValue) {
-
       invoke("search_move", { index: myValue }).then((r) => {
         currentValue = myValue;
         attackData = r;
@@ -23,7 +22,13 @@
     let defender;
     let atk_value;
     let def_value;
-    if (!player1Data || !player2Data || !attackData || (!!attackData && ![1, 2].includes(attackData.category))) {
+    if (
+      !player1Data ||
+      !player2Data ||
+      !attackData ||
+      (!!attackData && ![1, 2].includes(attackData.category))
+    ) {
+      // display some message somewhere
       console.log("skip");
       return;
     }
@@ -53,13 +58,13 @@
       minDamage: 0,
       // 攻撃側タイプ
       // TODO: try catchでエラーハンドリング
-      atk_type: JSON.parse(attacker.types),// 配列なのでjson parse
+      atk_type: JSON.parse(attacker.types), // 配列なのでjson parse
       // 防御側タイプ
       def_type: JSON.parse(defender.types),
       // 技タイプ
       move_type: JSON.parse(attackData.types),
       // 範囲の計算で使用する
-    }
+    };
 
     // 計算
     let d = damage(data);
@@ -67,33 +72,35 @@
     total_max_damage = d.maxDamage;
     total_min_damage = d.minDamage;
   }
-  function damage(data){
+  function damage(data) {
     // 基本の計算
-    var step1 = Math.trunc(data.level * 2 / 5 + 2);
-    var step2 = Math.trunc(step1 * data.attack_power * data.atk_value / data.def_value);
+    var step1 = Math.trunc((data.level * 2) / 5 + 2);
+    var step2 = Math.trunc(
+      (step1 * data.attack_power * data.atk_value) / data.def_value
+    );
     data.maxDamage = Math.trunc(step2 / 50 + 2); // この時点の計算結果は最大ダメージ
 
     // 各種補正かけた結果を返す
-    return modify(data)
+    return modify(data);
   }
   // 全部一気にやると大変なので、一旦基本計算から
-  function modify(data){
+  function modify(data) {
     // 範囲補正
     // 親子愛補正
     // ※svでおやこあいの特性はないのでスキップする
     // 天気補正
     // 急所補正
     // 乱数補正
-    data.minDamage = getMinDamage(data)
+    data.minDamage = getMinDamage(data);
     // タイプ一致補正
-    let type_match = false
-    for (let i = 0; i < data.atk_type.length && !type_match; i++){
-      for (let j = 0; j < data.move_type.length && !type_match; j++){
-        if (data.atk_type[i] === data.move_type[j]){
+    let type_match = false;
+    for (let i = 0; i < data.atk_type.length && !type_match; i++) {
+      for (let j = 0; j < data.move_type.length && !type_match; j++) {
+        if (data.atk_type[i] === data.move_type[j]) {
           // タイプ一致したら判定終了
           type_match = true;
-          data.maxDamage = Math.trunc(data.maxDamage*1.5)
-          data.minDamage = Math.trunc(data.minDamage*1.5)
+          data.maxDamage = Math.trunc(data.maxDamage * 1.5);
+          data.minDamage = Math.trunc(data.minDamage * 1.5);
         }
       }
     }
@@ -101,7 +108,6 @@
     // 相性補正
     // 相性の計算の関数をとってくる
 
-
     // やけど補正
     // 壁補正
     // ブレインフォース補正
@@ -117,15 +123,15 @@
     // 半減木の実補正
     // その他ダメージ補正(M twice)
     // ダイマックス技などの軽減(M protect)
-    return data
+    return data;
   }
   // 乱数補正
   // ダメージは、乱数で0.85~1.00をかけた値の範囲で変動する
   // 1.00はそのままの値なので、
   // 0.85をかけた最小ダメージだけを計算する
   // 少数切り捨て
-  function getMinDamage(data){
-    return Math.trunc(data.maxDamage * 85/100);
+  function getMinDamage(data) {
+    return Math.trunc((data.maxDamage * 85) / 100);
   }
   async function getItems(keyword) {
     try {
@@ -140,40 +146,58 @@
   let myValue;
   let currentValue = 0;
 </script>
+
 <div class="calculator">
   <table>
     <tr>
       <td>
-        <input type="radio" name="direction" value="p1p2" bind:group={attack_direction}> P1 ->> P2
+        <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
+        <input
+          type="radio"
+          name="direction"
+          value="p2p1"
+          bind:group={attack_direction}
+        /> P2 ->> P1
       </td>
     </tr>
     <tr>
       <td>
         <AutoComplete
           showClear={true}
-          searchFunction="{getItems}"
+          searchFunction={getItems}
           delay="200"
           localFiltering={false}
           labelFieldName="name"
           valueFieldName="id"
-          bind:value="{myValue}"
+          bind:value={myValue}
         />
       </td>
-      <td><input type="button" value="Calculate" on:click={calculate_damage}></td>
+      <td
+        ><input
+          type="button"
+          value="Calculate"
+          on:click={calculate_damage}
+        /></td
+      >
       <td>Total Damage: {total_min_damage} ~ {total_max_damage}</td>
     </tr>
   </table>
   {JSON.stringify(player1Data)} -
-   {JSON.stringify(player2Data)}<br> {attack_direction}
+  {JSON.stringify(player2Data)}<br />
+  {attack_direction}
 </div>
 
 <style>
-.calculator {
-  height: 100px;
-  width: 100%;
-  border-top: 2px solid white;
-}
-</style>
\ No newline at end of file
+  .calculator {
+    height: 100px;
+    width: 100%;
+    border-top: 2px solid white;
+  }
+</style>
diff --git a/src/lib/MainWrapper.svelte b/src/lib/MainWrapper.svelte
index 876442f..6b52934 100644
--- a/src/lib/MainWrapper.svelte
+++ b/src/lib/MainWrapper.svelte
@@ -55,23 +55,23 @@
   <div class="row">
     <AutoComplete
       showClear={true}
-      searchFunction="{getItems}"
+      searchFunction={getItems}
       delay="200"
       localFiltering={false}
       labelFieldName="name"
       valueFieldName="id"
-      bind:value="{myValue}"
+      bind:value={myValue}
     />
   </div>
   <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}
+      {pokemonData}
+      bind:hp_final
+      bind:atk_final
+      bind:def_final
+      bind:spatk_final
+      bind:spdef_final
+      bind:spd_final
     />
   </div>
 </div>