SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use new attack list and attack item components

Browse source
This commit is contained in:
Sebin Nyshkim 2022-07-19 15:52:15 +02:00
parent c682e2b38b
commit 3d2d876b98
2 changed files with 123 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

195
src/views/Abilities.vue
View file

@ -9,81 +9,73 @@
<h3>Attacks</h3>
<div class="attacks">
<div class="attack">
<div class="attack__illustration">
<attack-list>
<attack-item>
<template #image>
<img
src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
alt="Sebin Fire Breath"
/>
</div>
<div class="attack__description">
<p><strong>Fire Breath</strong></p>
<p>
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.
</p>
</div>
</div>
</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>
<div class="attack">
<div class="attack__illustration">
<attack-item>
<template #image>
<img
src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
alt="Sebin Flame Toss"
/>
</div>
<div class="attack__description">
<p><strong>Flame Toss</strong></p>
<p>
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.
</p>
</div>
</div>
</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>
<div class="attack">
<div class="attack__illustration">
<attack-item>
<template #image>
<img
src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
alt="Sebin Kindled Fist"
/>
</div>
<div class="attack__description">
<p><strong>Kindled Fist</strong></p>
<p>
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.
</p>
</div>
</div>
</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>
<div class="attack">
<div class="attack__illustration">
<attack-item>
<template #image>
<img
src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
alt="Sebin Burning Twister"
/>
</div>
<div class="attack__description">
<p><strong>Burning Twister</strong></p>
<p>
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.
</p>
</div>
</div>
</div>
</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:
@ -94,95 +86,10 @@
<script>
import Prose from "@/components/Prose.vue";
import AttackList from "@/components/AttackList.vue";
import AttackItem from "@/components/AttackItem.vue";
export default {
components: { Prose },
components: { Prose, AttackList, AttackItem },
};
</script>
<style lang="scss">
@import "@/scss/_mixins.scss";
.attacks {
display: flex;
flex-flow: row wrap;
align-items: center;
width: 100%;
margin: auto;
@include mq-desktop {
max-width: 45rem;
}
@media (min-width: 70em) {
max-width: 70em;
}
.attack {
flex: 0 1 100%;
display: flex;
flex-flow: row wrap;
align-items: center;
padding: 0.375em 0;
@include mq-desktop {
flex-flow: row nowrap;
&:nth-child(even) {
text-align: right;
.attack__illustration,
.attack__description {
&:first-child {
order: 1;
}
}
}
}
@media (min-width: 70em) {
text-align: left;
flex: 0 1 50%;
&:nth-child(even) {
text-align: left;
.attack__illustration,
.attack__description {
&:first-child {
order: 0;
}
}
}
}
&__illustration,
&__description {
flex: 1 1 auto;
&:first-child {
text-align: center;
img {
max-width: 100%;
max-height: 100%;
}
@include mq-desktop {
flex: 0 0 15em;
height: 15em;
}
}
&:last-child {
@include mq-desktop {
padding: 0 1rem;
}
}
}
}
}
</style>

125
src/views/Overdrive.vue
View file

@ -47,96 +47,115 @@
</p>
<h3>Attacks</h3>
<table class="overdrive-attacks">
<tr>
<td><strong>Fire Breath</strong> (improved)</td>
<td>
<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.
</td>
</tr>
<tr>
<td><strong>Flame Toss</strong> (improved)</td>
<td>
</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
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><strong>Kindled Fist</strong> (improved)</td>
<td>
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.
</td>
</tr>
<!-- <tr>
<td><strong>Searing Discus</strong></td>
<td>
</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.
</td>
</tr> -->
<tr>
<td><strong>Combustion Flare</strong></td>
<td>
</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.
</td>
</tr>
<tr>
<td><strong>Blazing Pandemonium</strong></td>
<td>
</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.
</td>
</tr>
<tr>
<td><strong>Scorching Edge</strong></td>
<td>
</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.
</td>
</tr>
<tr>
<td><strong>Circling Fire Shield</strong></td>
<td>
</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.
</td>
</tr>
</table>
</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 },
components: { Prose, RefFigure, AttackList, AttackItem },
};
</script>
<style lang="scss">
.overdrive-attacks {
max-width: 55rem;
margin: auto;
}
</style>