added type weakness to display

added matrices for attack/defense type compatibility

src/lib/DisplayData.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import defense_types from "../const/defense_types.json"
   export let pokemonData
   function v_validator(v) {
     if (typeof v !== "number") {
@@ -81,9 +82,8 @@
     }
   }
   function generate_type(types) {
-    let parsed_types = JSON.parse(types);
     let result = []
-    parsed_types.forEach(type => {
+    types.forEach(type => {
       switch (type) {
         case 1: {
           result.push(`<div class="normal type">ノーマル</div>`)
@@ -159,7 +159,64 @@
         }
       }
     })
-    return result.join('&nbsp;')
+    if (result.length > 0)
+      return result.join('&nbsp;')
+    return "&nbsp;";
+  }
+  function generate_weakness(types) {
+    let parsed_types = JSON.parse(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];
+      type_compatibility = type_compatibility.map((v, i) => v * second_type_compatibility[i]
+      );
+    }
+    let super_weakness = [];
+    let weakness = [];
+    let super_resist = [];
+    let resist = [];
+    let immune = [];
+    type_compatibility.forEach((v, i) => {
+      console.log(v);
+      switch (v) {
+        case 4:
+          super_weakness.push(i + 1);
+          break;
+        case 2:
+          weakness.push(i + 1);
+          break;
+        case 0.5:
+          resist.push(i + 1);
+          break;
+        case 0.25:
+          super_resist.push(i + 1);
+          break;
+        case 0:
+          immune.push(i + 1);
+          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) {
+    switch (index) {
+      case 0:
+        return "x4";
+      case 1:
+        return "x2";
+      case 2:
+        return "x1/2";
+      case 3:
+        return "x1/4";
+      case 4:
+        return "x0";
+      default: return "";
+    }
   }
   // 個体値 (V) 0-31
   let hp_v = 0;
@@ -207,7 +264,7 @@
 <div class="data-container">
   {#if pokemonData && pokemonData.id && pokemonData.id > 0}
   <div class="row">
-    <img src={`data:image/png;base64,${pokemonData.thumbnail}`} alt={pokemonData.jap_name} width="32%"/>
+    <img src={`data:image/png;base64,${pokemonData.thumbnail}`} alt={pokemonData.jap_name} width="15%"/>
   </div>
   <div class="row">
     <table>
@@ -215,10 +272,22 @@
         <td><b>{pokemonData.name}</b></td>
       </tr>
       <tr>
-        <td style="display: flex;">{@html generate_type(pokemonData.types)}</td>
+        <td style="display: flex;">{@html generate_type(JSON.parse(pokemonData.types))}</td>
       </tr>
     </table>
   </div>
+  <div class="row">
+    <table class="weakness">
+      {#each generate_weakness(pokemonData.types) as row, i}
+        <tr>
+          <td>{generate_damage_value(i)}</td>
+          <td style="display: flex; flex-wrap: wrap;">
+            {@html generate_type(row)}
+          </td>
+        </tr>
+      {/each}
+    </table>
+  </div>
   <div class="row">
     <table class="abilities_table">
       {#each abilities as ability, i}
@@ -331,4 +400,10 @@
   .abilities_table > tr > td{
     border: 1px solid;
   }
+  .weakness {
+    width: 90%;
+  }
+  .weakness > tr > td {
+    border: 1px solid;
+  }
 </style>