From 3d2d876b98ff77310c9b8000c5b23821be61ff8f Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 19 Jul 2022 15:52:15 +0200
Subject: [PATCH] refactor: use new attack list and attack item components

---
 src/views/Abilities.vue | 195 +++++++++++-----------------------------
 src/views/Overdrive.vue | 125 +++++++++++++++-----------
 2 files changed, 123 insertions(+), 197 deletions(-)

diff --git a/src/views/Abilities.vue b/src/views/Abilities.vue
index 30ad8a6..574e72d 100644
--- a/src/views/Abilities.vue
+++ b/src/views/Abilities.vue
@@ -9,81 +9,73 @@
 
     <h3>Attacks</h3>
 
-    <div class="attacks">
-      <div class="attack">
-        <div class="attack__illustration">
+    <attack-list>
+      <attack-item>
+        <template #image>
           <img
             src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
             alt="Sebin Fire Breath"
           />
-        </div>
-        <div class="attack__description">
-          <p><strong>Fire Breath</strong></p>
-          <p>
-            Like most fire dragons, Sebin can breathe fire. In order to do this,
-            he takes a deep breath to enrich the oxygen in his lungs with gases,
-            which, together with special glands in his mouth, produce a
-            combustible mixture. The resulting jet of fire, reaching several
-            hundred degrees Celsius, spreads out on its way to its target,
-            scorching everything in its path.
-          </p>
-        </div>
-      </div>
+        </template>
+        <template #name>Fire Breath</template>
+        <template #desc>
+          Like most fire dragons, Sebin can breathe fire. In order to do this,
+          he takes a deep breath to enrich the oxygen in his lungs with gases,
+          which, together with special glands in his mouth, produce a
+          combustible mixture. The resulting jet of fire, reaching several
+          hundred degrees Celsius, spreads out on its way to its target,
+          scorching everything in its path.
+        </template>
+      </attack-item>
 
-      <div class="attack">
-        <div class="attack__illustration">
+      <attack-item>
+        <template #image>
           <img
             src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
             alt="Sebin Flame Toss"
           />
-        </div>
-        <div class="attack__description">
-          <p><strong>Flame Toss</strong></p>
-          <p>
-            By spitting fire into his hands, Sebin can form it into a ball and
-            use it as a projectile. His scales are fireproof and can withstand
-            the high temperatures. Due to their high concentration, the
-            projectiles explode upon impact. By combining two fireballs the
-            explosion radius increases dramatically.
-          </p>
-        </div>
-      </div>
+        </template>
+        <template #name>Flame Toss</template>
+        <template #desc>
+          By spitting fire into his hands, Sebin can form it into a ball and use
+          it as a projectile. His scales are fireproof and can withstand the
+          high temperatures. Due to their high concentration, the projectiles
+          explode upon impact. By combining two fireballs the explosion radius
+          increases dramatically.
+        </template>
+      </attack-item>
 
-      <div class="attack">
-        <div class="attack__illustration">
+      <attack-item>
+        <template #image>
           <img
             src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
             alt="Sebin Kindled Fist"
           />
-        </div>
-        <div class="attack__description">
-          <p><strong>Kindled Fist</strong></p>
-          <p>
-            Apart from throwing projectiles, Sebin can also use the fireballs to
-            wrap his fists in fire. This allows him to inflict severe burns on
-            his opponent with each blow. In addition, he can release the fire
-            from his fists with aimed blows and hurl it at his opponents.
-          </p>
-        </div>
-      </div>
+        </template>
+        <template #name>Kindled Fist</template>
+        <template #desc>
+          Apart from throwing projectiles, Sebin can also use the fireballs to
+          wrap his fists in fire. This allows him to inflict severe burns on his
+          opponent with each blow. In addition, he can release the fire from his
+          fists with aimed blows and hurl it at his opponents.
+        </template>
+      </attack-item>
 
-      <div class="attack">
-        <div class="attack__illustration">
+      <attack-item>
+        <template #image>
           <img
             src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
             alt="Sebin Burning Twister"
           />
-        </div>
-        <div class="attack__description">
-          <p><strong>Burning Twister</strong></p>
-          <p>
-            A technique used in aerial combat, Sebin uses his fire breath to
-            engulf his body in flames while spinning to become a fire tornado
-            that singes opponents.
-          </p>
-        </div>
-      </div>
-    </div>
+        </template>
+        <template #name>Burning Twister</template>
+        <template #desc>
+          A technique used in aerial combat, Sebin uses his fire breath to
+          engulf his body in flames while spinning to become a fire tornado that
+          singes opponents.
+        </template>
+      </attack-item>
+    </attack-list>
 
     <p>
       Image Credit:
@@ -94,95 +86,10 @@
 
 <script>
 import Prose from "@/components/Prose.vue";
+import AttackList from "@/components/AttackList.vue";
+import AttackItem from "@/components/AttackItem.vue";
 
 export default {
-  components: { Prose },
+  components: { Prose, AttackList, AttackItem },
 };
 </script>
-
-<style lang="scss">
-@import "@/scss/_mixins.scss";
-
-.attacks {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-
-  width: 100%;
-  margin: auto;
-
-  @include mq-desktop {
-    max-width: 45rem;
-  }
-
-  @media (min-width: 70em) {
-    max-width: 70em;
-  }
-
-  .attack {
-    flex: 0 1 100%;
-
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-
-    padding: 0.375em 0;
-
-    @include mq-desktop {
-      flex-flow: row nowrap;
-
-      &:nth-child(even) {
-        text-align: right;
-
-        .attack__illustration,
-        .attack__description {
-          &:first-child {
-            order: 1;
-          }
-        }
-      }
-    }
-
-    @media (min-width: 70em) {
-      text-align: left;
-      flex: 0 1 50%;
-
-      &:nth-child(even) {
-        text-align: left;
-
-        .attack__illustration,
-        .attack__description {
-          &:first-child {
-            order: 0;
-          }
-        }
-      }
-    }
-
-    &__illustration,
-    &__description {
-      flex: 1 1 auto;
-
-      &:first-child {
-        text-align: center;
-
-        img {
-          max-width: 100%;
-          max-height: 100%;
-        }
-
-        @include mq-desktop {
-          flex: 0 0 15em;
-          height: 15em;
-        }
-      }
-
-      &:last-child {
-        @include mq-desktop {
-          padding: 0 1rem;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/Overdrive.vue b/src/views/Overdrive.vue
index 1609ee5..b080279 100644
--- a/src/views/Overdrive.vue
+++ b/src/views/Overdrive.vue
@@ -47,96 +47,115 @@
     </p>
 
     <h3>Attacks</h3>
-    <table class="overdrive-attacks">
-      <tr>
-        <td><strong>Fire Breath</strong> (improved)</td>
-        <td>
+    <attack-list>
+      <attack-item>
+        <template #image>
+          <img src="" alt="Sebin Fire Breath (improved)" />
+        </template>
+        <template #name>Fire Breath (improved)</template>
+        <template #desc>
           The reach of Sebin's Fire Breath increases as well as the frequency at
           which he can fire shots from his mouth.
-        </td>
-      </tr>
-      <tr>
-        <td><strong>Flame Toss</strong> (improved)</td>
-        <td>
+        </template>
+      </attack-item>
+      <attack-item>
+        <template #image>
+          <img src="" alt="Sebin Flame Toss (improved)" />
+        </template>
+        <template #name>Flame Toss (improved)</template>
+        <template #desc>
           Overdrive Form eliminates the need for Sebin to spit fire into his
           palms. It instead enables him to fire the shots directly from the palm
-          of his hands, as the firey veins crossing his arms act as an orifice
-          to do so. The explosion radius of the burning projectiles that explode
-          on impact is greatly increased.
-        </td>
-      </tr>
-      <tr>
-        <td><strong>Kindled Fist</strong> (improved)</td>
-        <td>
+          palm of his hands, as the firey veins crossing his arms act as an
+          orifice to do so. The explosion radius of the burning projectiles that
+          explode on impact is greatly increased.
+        </template>
+      </attack-item>
+      <attack-item>
+        <template #image>
+          <img src="" alt="Sebin Kindled Fist (improved)" />
+        </template>
+        <template #name>Kindled Fist (improved)</template>
+        <template #desc>
           As his arms and legs are infused with fire his punches and kicks exert
           trails of flames while doing so. Landing a punch or kick sears
           enemies.
-        </td>
-      </tr>
-      <!-- <tr>
-        <td><strong>Searing Discus</strong></td>
-        <td>
+        </template>
+      </attack-item>
+      <attack-item>
+        <template #image>
+          <img src="" alt="Sebin Searing Discus" />
+        </template>
+        <template #name>Searing Discus</template>
+        <template #desc>
           Overdrive allows Sebin to form rings of fire by igniting flames from
           his fingertips and swirling them in a circle motion. He can use them
           for both close quarters or ranged combat.
-        </td>
-      </tr> -->
-      <tr>
-        <td><strong>Combustion Flare</strong></td>
-        <td>
+        </template>
+      </attack-item>
+      <attack-item>
+        <template #image>
+          <img src="" alt="Sebin Combustion Flare" />
+        </template>
+        <template #name>Combustion Flare</template>
+        <template #desc>
           Clinking both of his wrists against each other like flints unleashes a
           devestating fire blast from both of his fire-infused hands. A secure
           foothold is needed to prevent Sebin from being thrown back by the
           recoil of the attack. Using this technique in the air is therefore
           highly risky.
-        </td>
-      </tr>
-      <tr>
-        <td><strong>Blazing Pandemonium</strong></td>
-        <td>
+        </template>
+      </attack-item>
+      <attack-item>
+        <template #image>
+          <img src="" alt="Blazing Pandemonium" />
+        </template>
+        <template #name>Blazing Pandemonium</template>
+        <template #desc>
           A heavy impact into the ground from a great height with both fists,
           tearing deep cracks in the ground around the impact crater. Combined
           with <strong><em>Kindled Fist</em></strong>
           the heat in Sebin's arms are forced through the newly created furrows,
           transforming the scene into an inferno.
-        </td>
-      </tr>
-      <tr>
-        <td><strong>Scorching Edge</strong></td>
-        <td>
+        </template>
+      </attack-item>
+      <attack-item>
+        <template #image>
+          <img src="" alt="Sebin Scorching Edge" />
+        </template>
+        <template #name>Scorching Edge</template>
+        <template #desc>
           A fiery blade towering several meters into the air that Sebin sends
           careening towards his enemies from his fire-infused legs with a
           backflip kick, leaving a swath of destruction in its wake. Upon impact
           the force of the attack is distributed sideways.
-        </td>
-      </tr>
-      <tr>
-        <td><strong>Circling Fire Shield</strong></td>
-        <td>
+        </template>
+      </attack-item>
+      <attack-item>
+        <template #image>
+          <img src="" alt="Sebin Circling Fire Shield" />
+        </template>
+        <template #name>Circling Fire Shield</template>
+        <template #desc>
           A rather defensive technique. By spinning around with stretched out
           arms Sebin creates fire balls, which he usually hurls towards enemies,
           that circle around his body diagonally. They act as a shield while he
           can still move his arms relatively freely. Enemies would be well
           advised to keep their distance to this spinning shield, as the fire
           balls will still explode on contact.
-        </td>
-      </tr>
-    </table>
+        </template>
+      </attack-item>
+    </attack-list>
   </prose>
 </template>
 
 <script>
 import Prose from "@/components/Prose.vue";
 import RefFigure from "@/components/Figure.vue";
+import AttackList from "@/components/AttackList.vue";
+import AttackItem from "@/components/AttackItem.vue";
 
 export default {
-  components: { Prose, RefFigure },
+  components: { Prose, RefFigure, AttackList, AttackItem },
 };
 </script>
-
-<style lang="scss">
-.overdrive-attacks {
-  max-width: 55rem;
-  margin: auto;
-}
-</style>