terastal dropdown added

src/lib/DisplayData.svelte

@@ -13,6 +13,26 @@
     }
     return v;
   }
+  const available_type = [
+    { id: 1 },
+    { id: 2 },
+    { id: 3 },
+    { id: 4 },
+    { id: 5 },
+    { id: 6 },
+    { id: 7 },
+    { id: 8 },
+    { id: 9 },
+    { id: 10 },
+    { id: 11 },
+    { id: 12 },
+    { id: 13 },
+    { id: 14 },
+    { id: 15 },
+    { id: 16 },
+    { id: 17 },
+    { id: 18 }
+  ]
   function d_validator(d) {
     if (typeof d !== "number") {
       return null;
@@ -165,6 +185,7 @@
   }
   function generate_weakness(types) {
     let parsed_types = JSON.parse(types);
+    console.log(parsed_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];
@@ -239,7 +260,9 @@
   export let spatk_final = 0;
   export let spdef_final = 0;
   export let spd_final = 0;
+  export let terastype = [0];
 
+  let selected_terastype = 0;
   let atk_plus = false;
   let def_plus = false;
   let spatk_plus = false;
@@ -264,21 +287,36 @@
 <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="15%"/>
-  </div>
-  <div class="row">
-    <table>
+    <table class="pokemon-data">
       <tr>
-        <td><b>{pokemonData.name}</b></td>
+        <td rowspan="3" class="picture"><img src={`data:image/png;base64,${pokemonData.thumbnail}`} alt={pokemonData.jap_name} width="85%"/></td>
+        <td class="pokemon-title">名前</td>
+        <td class="pokemon-name">{pokemonData.name}</td>
       </tr>
       <tr>
+        <td class="pokemon-title">タイプ</td>
         <td style="display: flex;">{@html generate_type(JSON.parse(pokemonData.types))}</td>
       </tr>
+      <tr>
+        <td class="pokemon-title">テラスタル</td>
+        <td style="display: flex;">
+          <select bind:value={selected_terastype} on:change="{() => terastype = [selected_terastype]}">
+            <option value={0}>
+              なし
+            </option>
+            {#each available_type as curr_type}
+              <option value={curr_type.id}>
+                {@html generate_type([curr_type.id])}
+              </option>
+            {/each}
+          </select>
+        </td>
+      </tr>
     </table>
   </div>
   <div class="row">
     <table class="weakness">
-      {#each generate_weakness(pokemonData.types) as row, i}
+      {#each generate_weakness(terastype[0] === 0 ? pokemonData.types : JSON.stringify(terastype)) as row, i}
         <tr>
           <td>{generate_damage_value(i)}</td>
           <td style="display: flex; flex-wrap: wrap;">
@@ -369,6 +407,20 @@
 </div>
 
 <style>
+  .pokemon-data {
+    width:90%;
+  }
+  .pokemon-title {
+    width: 20%;
+    text-align: left;
+    font-weight: bold;
+  }
+  .pokemon-name {
+    text-align: left;
+  }
+  .picture {
+    width:20%;
+  }
   .data-container {
     padding-top: 20px;
   }

src/lib/MainWrapper.svelte

@@ -12,6 +12,7 @@
     }
     pokemonStatus = {
       types: pokemonData?.types ? pokemonData.types : [],
+      terastype: terastype,
       hp: hp_final,
       atk: atk_final,
       def: def_final,
@@ -24,6 +25,7 @@
   let myValue;
   let currentValue = 0;
   let pokemonData;
+  let terastype = [0];
   let hp_final = 0;
   let atk_final = 0;
   let def_final = 0;
@@ -32,6 +34,7 @@
   let spd_final = 0;
   export let pokemonStatus = {
     types: [],
+    terastype: [0],
     hp: 0,
     atk: 0,
     def: 0,
@@ -66,6 +69,7 @@
   <div class="row">
     <DisplayData
       {pokemonData}
+      bind:terastype
       bind:hp_final
       bind:atk_final
       bind:def_final