From 9dcda9d3dd9491da5763c7ffe12b6edfdd7554f5 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:53:11 +0100
Subject: [PATCH] refactor: migrate Overdrive view

---
 src/views/Overdrive.vue     | 229 -------------------------
 src/views/OverdriveView.vue | 327 ++++++++++++++++++++++++++++++++++++
 2 files changed, 327 insertions(+), 229 deletions(-)
 delete mode 100644 src/views/Overdrive.vue
 create mode 100644 src/views/OverdriveView.vue

diff --git a/src/views/Overdrive.vue b/src/views/Overdrive.vue
deleted file mode 100644
index a5df19f..0000000
--- a/src/views/Overdrive.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<template>
-  <prose>
-    <h2>Overdrive Form</h2>
-
-    <ref-figure polaroidBorder>
-      <template #img>
-        <img
-          src="@/assets/refs/sebin-overdrive_ref-hires.jpg"
-          alt="Sebin in Overdrive"
-        />
-      </template>
-      <template #caption>Sebin in Overdrive</template>
-      <template #copyright>
-        <a href="https://twitter.com/CVictorrosso">CVictorrosso</a>
-      </template>
-    </ref-figure>
-
-    <p>
-      Sebin can enter an Overdrive Form which greatly increases his strength and
-      abilities but it comes at a cost.
-    </p>
-
-    <p>
-      He enters Overdrive by engulfing himself in a pillar of flames which
-      transforms his exterior physique. During Overdrive transformation his hair
-      ignites and flickers with blue flames. The corners of his eyes flicker
-      with long green flames. His arms and legs become part carbon black and are
-      crossed by several glowing veins which pulsate like flowing lava. Fire in
-      this form burns several degrees hotter than usual because his body becomes
-      a living blast furnace, which is why his limbs have to be of more
-      fire-proof material to withstand the increased heat.
-    </p>
-
-    <p>
-      To complete the transformation he inhales the flames from the pillar
-      surrounding him which heats up his body from within. Even if Sebin is a
-      fire dragon who can sustain high degrees of heat he is essentially
-      overheating himself from the inside. Because of this he can't maintain
-      this form for more than a few hours before he does permanent damage to his
-      own body.
-    </p>
-
-    <p>
-      Direct body contact with Sebin during overdrive causes 3rd degree burns as
-      he emits an extreme temperature, although less than he keeps inside his
-      body. His immediate surroundings are likely to burn or melt.
-    </p>
-
-    <h3>Attacks</h3>
-    <h4>Fire Breath (improved)</h4>
-    <p>
-      The reach of Sebin's Fire Breath increases as well as the frequency at
-      which he can fire shots from his mouth.
-    </p>
-
-    <h4>Flame Toss (improved)</h4>
-    <p>
-      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 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.
-    </p>
-
-    <h4>Kindled Fist (improved)</h4>
-    <p>
-      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.
-    </p>
-
-    <h4>Searing Discus</h4>
-    <p>
-      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.
-    </p>
-
-    <h4>Combustion Flare</h4>
-    <p>
-      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.
-    </p>
-
-    <h4>Blazing Pandemonium</h4>
-    <p>
-      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.
-    </p>
-
-    <h4>Scorching Edge</h4>
-    <p>
-      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.
-    </p>
-
-    <h4>Circling Fire Shield</h4>
-    <p>
-      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.
-    </p>
-
-    <!-- <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.
-        </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
-          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.
-        </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.
-        </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.
-        </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.
-        </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.
-        </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.
-        </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,
-    // AttackList,
-    // AttackItem,
-  },
-};
-</script>
diff --git a/src/views/OverdriveView.vue b/src/views/OverdriveView.vue
new file mode 100644
index 0000000..f4f281a
--- /dev/null
+++ b/src/views/OverdriveView.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+// import AttackItem from "@/components/AttackItem.vue";
+// import AttackList from "@/components/AttackList.vue";
+import RefFigure from "@/components/RefFigure.vue";
+</script>
+
+<template>
+  <section>
+    <h1>Overdrive Form</h1>
+  </section>
+
+  <RefFigure id="overdrive-ref" polaroidBorder>
+    <!-- max 1080px -->
+    <template #img>
+      <picture>
+        <source
+          srcset="
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&avif&quality=75&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&webp&quality=100&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/refs/sebin-overdrive_ref-hires.jpg?w=450;500;600;900;0&jpg&quality=95&withoutEnlargement&srcset
+          "
+          sizes="(min-width: 120em) 700px, (min-width: 80em) 600px, (min-width: 35em) 500px, 450px"
+          alt="Sebin in Overdrive"
+          loading="lazy"
+        />
+      </picture>
+    </template>
+    <template #caption>Sebin in Overdrive</template>
+    <template #copyright>
+      <a href="https://twitter.com/CVictorrosso">CVictorrosso</a>
+    </template>
+  </RefFigure>
+
+  <section>
+    <p>
+      Sebin can enter an Overdrive Form which greatly increases his strength and
+      abilities but it comes at a cost.
+    </p>
+
+    <p>
+      He enters Overdrive by engulfing himself in a pillar of flames which
+      transforms his exterior physique. During Overdrive transformation his hair
+      ignites and flickers with blue flames. The corners of his eyes flicker
+      with long green flames. His arms and legs become part carbon black and are
+      crossed by several glowing veins which pulsate like flowing lava. Fire in
+      this form burns several degrees hotter than usual because his body becomes
+      a living blast furnace, which is why his limbs have to be of more
+      fire-proof material to withstand the increased heat.
+    </p>
+
+    <p>
+      To complete the transformation he inhales the flames from the pillar
+      surrounding him which heats up his body from within. Even if Sebin is a
+      fire dragon who can sustain high degrees of heat he is essentially
+      overheating himself from the inside. Because of this he can't maintain
+      this form for more than a few hours before he does permanent damage to his
+      own body.
+    </p>
+
+    <p>
+      Direct body contact with Sebin during overdrive causes 3rd degree burns as
+      he emits an extreme temperature, although less than he keeps inside his
+      body. His immediate surroundings are likely to burn or melt.
+    </p>
+
+    <h2>Attacks</h2>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Fire Breath (improved)</td>
+          <td>
+            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>Flame Toss (improved)</td>
+          <td>
+            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 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>Kindled Fist (improved)</td>
+          <td>
+            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>Searing Discus</td>
+          <td>
+            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>Combustion Flare</td>
+          <td>
+            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>Blazing Pandemonium</td>
+          <td>
+            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>Scorching Edge</td>
+          <td>
+            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>Circling Fire Shield</td>
+          <td>
+            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>
+      </tbody>
+    </table>
+
+    <!-- <h3>Fire Breath (improved)</h3>
+    <p>
+      The reach of Sebin's Fire Breath increases as well as the frequency at
+      which he can fire shots from his mouth.
+    </p> -->
+
+    <!-- <h3>Flame Toss (improved)</h3>
+    <p>
+      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 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.
+    </p> -->
+
+    <!-- <h3>Kindled Fist (improved)</h3>
+    <p>
+      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.
+    </p> -->
+
+    <!-- <h3>Searing Discus</h3>
+    <p>
+      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.
+    </p> -->
+
+    <!-- <h3>Combustion Flare</h3>
+    <p>
+      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.
+    </p> -->
+
+    <!-- <h3>Blazing Pandemonium</h3>
+    <p>
+      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.
+    </p> -->
+
+    <!-- <h3>Scorching Edge</h3>
+    <p>
+      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.
+    </p> -->
+
+    <!-- <h3>Circling Fire Shield</h3>
+    <p>
+      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.
+    </p> -->
+  </section>
+
+  <!-- <AttackList>
+    <AttackItem>
+      <template #image>
+        <span style="font-size: 10rem">🚫</span>
+      </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.
+      </template>
+    </AttackItem>
+    <attack-item>
+      <template #image>
+        <span style="font-size: 10rem">🚫</span>
+      </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
+        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>
+        <span style="font-size: 10rem">🚫</span>
+      </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.
+      </template>
+    </attack-item>
+    <attack-item>
+      <template #image>
+        <span style="font-size: 10rem">🚫</span>
+      </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.
+      </template>
+    </attack-item>
+    <attack-item>
+      <template #image>
+        <span style="font-size: 10rem">🚫</span>
+      </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.
+      </template>
+    </attack-item>
+    <attack-item>
+      <template #image>
+        <span style="font-size: 10rem">🚫</span>
+      </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.
+      </template>
+    </attack-item>
+    <attack-item>
+      <template #image>
+        <span style="font-size: 10rem">🚫</span>
+      </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.
+      </template>
+    </attack-item>
+    <attack-item>
+      <template #image>
+        <span style="font-size: 10rem">🚫</span>
+      </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.
+      </template>
+    </attack-item>
+  </AttackList> -->
+</template>