refactor: migrate Abilities view
This commit is contained in:
Sebin Nyshkim
parent
a78ad22578
commit
3a1a5942df
2 changed files with 173 additions and 95 deletions
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