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

179
src/views/Abilities.vue
View file

@ -9,81 +9,73 @@
<h3>Attacks</h3> <h3>Attacks</h3>
<div class="attacks"> <attack-list>
<div class="attack"> <attack-item>
<div class="attack__illustration"> <template #image>
<img <img
src="@/assets/refs/attacks/sebin-fire_breath-hires.png" src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
alt="Sebin Fire Breath" alt="Sebin Fire Breath"
/> />
</div> </template>
<div class="attack__description"> <template #name>Fire Breath</template>
<p><strong>Fire Breath</strong></p> <template #desc>
<p>
Like most fire dragons, Sebin can breathe fire. In order to do this, 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, he takes a deep breath to enrich the oxygen in his lungs with gases,
which, together with special glands in his mouth, produce a which, together with special glands in his mouth, produce a
combustible mixture. The resulting jet of fire, reaching several combustible mixture. The resulting jet of fire, reaching several
hundred degrees Celsius, spreads out on its way to its target, hundred degrees Celsius, spreads out on its way to its target,
scorching everything in its path. scorching everything in its path.
</p> </template>
</div> </attack-item>
</div>
<div class="attack"> <attack-item>
<div class="attack__illustration"> <template #image>
<img <img
src="@/assets/refs/attacks/sebin-flame_toss-hires.png" src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
alt="Sebin Flame Toss" alt="Sebin Flame Toss"
/> />
</div> </template>
<div class="attack__description"> <template #name>Flame Toss</template>
<p><strong>Flame Toss</strong></p> <template #desc>
<p> By spitting fire into his hands, Sebin can form it into a ball and use
By spitting fire into his hands, Sebin can form it into a ball and it as a projectile. His scales are fireproof and can withstand the
use it as a projectile. His scales are fireproof and can withstand high temperatures. Due to their high concentration, the projectiles
the high temperatures. Due to their high concentration, the explode upon impact. By combining two fireballs the explosion radius
projectiles explode upon impact. By combining two fireballs the increases dramatically.
explosion radius increases dramatically. </template>
</p> </attack-item>
</div>
</div>
<div class="attack"> <attack-item>
<div class="attack__illustration"> <template #image>
<img <img
src="@/assets/refs/attacks/sebin-kindled_fist-hires.png" src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
alt="Sebin Kindled Fist" alt="Sebin Kindled Fist"
/> />
</div> </template>
<div class="attack__description"> <template #name>Kindled Fist</template>
<p><strong>Kindled Fist</strong></p> <template #desc>
<p>
Apart from throwing projectiles, Sebin can also use the fireballs to Apart from throwing projectiles, Sebin can also use the fireballs to
wrap his fists in fire. This allows him to inflict severe burns on wrap his fists in fire. This allows him to inflict severe burns on his
his opponent with each blow. In addition, he can release the fire opponent with each blow. In addition, he can release the fire from his
from his fists with aimed blows and hurl it at his opponents. fists with aimed blows and hurl it at his opponents.
</p> </template>
</div> </attack-item>
</div>
<div class="attack"> <attack-item>
<div class="attack__illustration"> <template #image>
<img <img
src="@/assets/refs/attacks/sebin-burning_twister-hires.png" src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
alt="Sebin Burning Twister" alt="Sebin Burning Twister"
/> />
</div> </template>
<div class="attack__description"> <template #name>Burning Twister</template>
<p><strong>Burning Twister</strong></p> <template #desc>
<p>
A technique used in aerial combat, Sebin uses his fire breath to A technique used in aerial combat, Sebin uses his fire breath to
engulf his body in flames while spinning to become a fire tornado engulf his body in flames while spinning to become a fire tornado that
that singes opponents. singes opponents.
</p> </template>
</div> </attack-item>
</div> </attack-list>
</div>
<p> <p>
Image Credit: Image Credit:
@ -94,95 +86,10 @@
<script> <script>
import Prose from "@/components/Prose.vue"; import Prose from "@/components/Prose.vue";
import AttackList from "@/components/AttackList.vue";
import AttackItem from "@/components/AttackItem.vue";
export default { export default {
components: { Prose }, components: { Prose, AttackList, AttackItem },
}; };
</script> </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> </p>
<h3>Attacks</h3> <h3>Attacks</h3>
<table class="overdrive-attacks"> <attack-list>
<tr> <attack-item>
<td><strong>Fire Breath</strong> (improved)</td> <template #image>
<td> <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 The reach of Sebin's Fire Breath increases as well as the frequency at
which he can fire shots from his mouth. which he can fire shots from his mouth.
</td> </template>
</tr> </attack-item>
<tr> <attack-item>
<td><strong>Flame Toss</strong> (improved)</td> <template #image>
<td> <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 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 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 palm of his hands, as the firey veins crossing his arms act as an
to do so. The explosion radius of the burning projectiles that explode orifice to do so. The explosion radius of the burning projectiles that
on impact is greatly increased. explode on impact is greatly increased.
</td> </template>
</tr> </attack-item>
<tr> <attack-item>
<td><strong>Kindled Fist</strong> (improved)</td> <template #image>
<td> <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 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 trails of flames while doing so. Landing a punch or kick sears
enemies. enemies.
</td> </template>
</tr> </attack-item>
<!-- <tr> <attack-item>
<td><strong>Searing Discus</strong></td> <template #image>
<td> <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 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 his fingertips and swirling them in a circle motion. He can use them
for both close quarters or ranged combat. for both close quarters or ranged combat.
</td> </template>
</tr> --> </attack-item>
<tr> <attack-item>
<td><strong>Combustion Flare</strong></td> <template #image>
<td> <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 Clinking both of his wrists against each other like flints unleashes a
devestating fire blast from both of his fire-infused hands. A secure devestating fire blast from both of his fire-infused hands. A secure
foothold is needed to prevent Sebin from being thrown back by the foothold is needed to prevent Sebin from being thrown back by the
recoil of the attack. Using this technique in the air is therefore recoil of the attack. Using this technique in the air is therefore
highly risky. highly risky.
</td> </template>
</tr> </attack-item>
<tr> <attack-item>
<td><strong>Blazing Pandemonium</strong></td> <template #image>
<td> <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, A heavy impact into the ground from a great height with both fists,
tearing deep cracks in the ground around the impact crater. Combined tearing deep cracks in the ground around the impact crater. Combined
with <strong><em>Kindled Fist</em></strong> with <strong><em>Kindled Fist</em></strong>
the heat in Sebin's arms are forced through the newly created furrows, the heat in Sebin's arms are forced through the newly created furrows,
transforming the scene into an inferno. transforming the scene into an inferno.
</td> </template>
</tr> </attack-item>
<tr> <attack-item>
<td><strong>Scorching Edge</strong></td> <template #image>
<td> <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 A fiery blade towering several meters into the air that Sebin sends
careening towards his enemies from his fire-infused legs with a careening towards his enemies from his fire-infused legs with a
backflip kick, leaving a swath of destruction in its wake. Upon impact backflip kick, leaving a swath of destruction in its wake. Upon impact
the force of the attack is distributed sideways. the force of the attack is distributed sideways.
</td> </template>
</tr> </attack-item>
<tr> <attack-item>
<td><strong>Circling Fire Shield</strong></td> <template #image>
<td> <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 A rather defensive technique. By spinning around with stretched out
arms Sebin creates fire balls, which he usually hurls towards enemies, arms Sebin creates fire balls, which he usually hurls towards enemies,
that circle around his body diagonally. They act as a shield while he that circle around his body diagonally. They act as a shield while he
can still move his arms relatively freely. Enemies would be well can still move his arms relatively freely. Enemies would be well
advised to keep their distance to this spinning shield, as the fire advised to keep their distance to this spinning shield, as the fire
balls will still explode on contact. balls will still explode on contact.
</td> </template>
</tr> </attack-item>
</table> </attack-list>
</prose> </prose>
</template> </template>
<script> <script>
import Prose from "@/components/Prose.vue"; import Prose from "@/components/Prose.vue";
import RefFigure from "@/components/Figure.vue"; import RefFigure from "@/components/Figure.vue";
import AttackList from "@/components/AttackList.vue";
import AttackItem from "@/components/AttackItem.vue";
export default { export default {
components: { Prose, RefFigure }, components: { Prose, RefFigure, AttackList, AttackItem },
}; };
</script> </script>
<style lang="scss">
.overdrive-attacks {
max-width: 55rem;
margin: auto;
}
</style>