refactor: migrate Abilities view
This commit is contained in:
Sebin Nyshkim
parent
a78ad22578
commit
3a1a5942df
2 changed files with 173 additions and 95 deletions
|
|
@ -1,95 +0,0 @@
|
||||||
<template>
|
|
||||||
<prose>
|
|
||||||
<h2>Abilities</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Since Sebin is a fire dragon there's a myriad of abilities he has at his
|
|
||||||
disposal to defend himself.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Attacks</h3>
|
|
||||||
|
|
||||||
<attack-list>
|
|
||||||
<attack-item>
|
|
||||||
<template #image>
|
|
||||||
<img
|
|
||||||
src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
|
|
||||||
alt="Sebin Fire Breath"
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<attack-item>
|
|
||||||
<template #image>
|
|
||||||
<img
|
|
||||||
src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
|
|
||||||
alt="Sebin Flame Toss"
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<attack-item>
|
|
||||||
<template #image>
|
|
||||||
<img
|
|
||||||
src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
|
|
||||||
alt="Sebin Kindled Fist"
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<attack-item>
|
|
||||||
<template #image>
|
|
||||||
<img
|
|
||||||
src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
|
|
||||||
alt="Sebin Burning Twister"
|
|
||||||
/>
|
|
||||||
</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:
|
|
||||||
<a href="https://twitter.com/GafreitasArt">Gabriel Freitas</a>
|
|
||||||
</p>
|
|
||||||
</prose>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Prose from "@/components/Prose.vue";
|
|
||||||
import AttackList from "@/components/AttackList.vue";
|
|
||||||
import AttackItem from "@/components/AttackItem.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { Prose, AttackList, AttackItem },
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
173
src/views/AbilitiesView.vue
Normal file
173
src/views/AbilitiesView.vue
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import AttackItem from "@/components/AttackItem.vue";
|
||||||
|
import AttackList from "@/components/AttackList.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<h1>{{ $route.name }}</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Since Sebin is a fire dragon there's a myriad of abilities he has at his
|
||||||
|
disposal to defend himself.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Attacks</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<AttackList>
|
||||||
|
<AttackItem>
|
||||||
|
<!-- max 2000px -->
|
||||||
|
<template #image>
|
||||||
|
<picture>
|
||||||
|
<source
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
type="image/avif"
|
||||||
|
/>
|
||||||
|
<source
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
type="image/webp"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-fire_breath-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
alt="Sebin Fire Breath"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</picture>
|
||||||
|
</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>
|
||||||
|
</AttackItem>
|
||||||
|
|
||||||
|
<AttackItem>
|
||||||
|
<!-- max 2000px -->
|
||||||
|
<template #image>
|
||||||
|
<picture>
|
||||||
|
<source
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
type="image/avif"
|
||||||
|
/>
|
||||||
|
<source
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
type="image/webp"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-flame_toss-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
alt="Sebin Fire Breath"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</picture>
|
||||||
|
</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>
|
||||||
|
</AttackItem>
|
||||||
|
|
||||||
|
<AttackItem>
|
||||||
|
<!-- max 2000px -->
|
||||||
|
<template #image>
|
||||||
|
<picture>
|
||||||
|
<source
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
type="image/avif"
|
||||||
|
/>
|
||||||
|
<source
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
type="image/webp"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-kindled_fist-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
alt="Sebin Kindled Fist"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</picture>
|
||||||
|
</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>
|
||||||
|
</AttackItem>
|
||||||
|
|
||||||
|
<AttackItem>
|
||||||
|
<!-- max 2000px -->
|
||||||
|
<template #image>
|
||||||
|
<picture>
|
||||||
|
<source
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&avif&quality=75&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
type="image/avif"
|
||||||
|
/>
|
||||||
|
<source
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&webp&quality=100&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
type="image/webp"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
srcset="
|
||||||
|
@/assets/refs/attacks/sebin-burning_twister-hires.png?w=640;400;480;560;1280;800;960;1120;1920;1200;1330;1680&png&withoutEnlargement&srcset
|
||||||
|
"
|
||||||
|
sizes="(min-width: 120em) 560px, (min-width: 80em) 480px, (min-width: 45em) 400px, 640px"
|
||||||
|
alt="Sebin Burning Twister"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</picture>
|
||||||
|
</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>
|
||||||
|
</AttackItem>
|
||||||
|
</AttackList>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue