sebin-reference/src/views/AbilitiesView.vue
2023-01-20 00:51:54 +01:00

173 lines
6.8 KiB
Vue

<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>