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