update on code

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>