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

feat: ♻️ refactor ALL THE THINGS!!! (again)

Browse source 
Update to Vue 3 and employ Vue Router, additional design changes and navigation changes
This commit is contained in:
sebin.nyshkim@icloud.com 2022-01-04 00:39:02 +01:00
parent e9f29b655d
commit ae5d4d2633
59 changed files with 2768 additions and 1381 deletions
Download patch file Download diff file Expand all files Collapse all files

180
src/views/Abilities.vue Normal file
View file

@ -0,0 +1,180 @@
<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>
<div class="attacks">
<div class="row">
<div class="col">
<img
src="@/assets/refs/attacks/sebin-fire_breath-hires.png"
alt="Sebin Fire Breath"
/>
</div>
<div class="col">
<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>
<div class="row">
<div class="col">
<img
src="@/assets/refs/attacks/sebin-flame_toss-hires.png"
alt="Sebin Flame Toss"
/>
</div>
<div class="col">
<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>
<div class="row">
<div class="col">
<img
src="@/assets/refs/attacks/sebin-kindled_fist-hires.png"
alt="Sebin Kindled Fist"
/>
</div>
<div class="col">
<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>
<div class="row">
<div class="col">
<img
src="@/assets/refs/attacks/sebin-burning_twister-hires.png"
alt="Sebin Burning Twister"
/>
</div>
<div class="col">
<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>
</prose>
</template>
<script>
import Prose from "@/components/Prose.vue";
export default {
components: { Prose },
};
</script>
<style lang="scss">
@import "@/scss/base.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;
}
.row {
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;
.col {
&:first-child {
order: 1;
}
}
}
}
@media (min-width: 70em) {
text-align: left;
flex: 0 1 50%;
&:nth-child(even) {
text-align: left;
.col {
&:first-child {
order: 0;
}
}
}
}
}
.col {
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>

360
src/views/Anatomy.vue Normal file
View file

@ -0,0 +1,360 @@
<template>
<nsfw-warning v-show="isWarn">
<template #heading>
⚠️⚠️⚠️<br />
Whoa, Nelly!
</template>
<template #message>
By enabling NSFW mode you confirm that you are of legal age to view adult
content.
</template>
<template #yes>Yes, show me the goods 👀</template>
<template #no>NO, STAHP 😱</template>
</nsfw-warning>
<prose>
<nsfw-switch id="nsfw-switch" v-model="nsfw" @change="showWarning()" />
<h2>Anatomy</h2>
<ref-figure>
<template #img>
<img
v-if="nsfw"
src="@/assets/refs/sebin-ref-body-NSFW.png"
alt="Sebin Full Body Ref"
/>
<img
v-else
src="@/assets/refs/sebin-ref-body-SFW.png"
alt="Sebin Full Body Ref"
/>
</template>
<template #caption>
<label>Sebin Full Body Reference</label>
</template>
<template #copyright>
<a href="https://twitter.com/draftgon">draftgon</a>
</template>
</ref-figure>
<data-table class="prose" :dataset="getSebinData.colors" />
<quick-facts>
<ul>
<li>Bipedal plantigrade</li>
<li>
Red scales, yellow chest-plates running from underneath chin, over
torso, between legs, underside of tail
</li>
<li>Athletic to body builder physique</li>
<li>Sharp, black claws on fingers and toes</li>
<li>Brown spikes running over back and top-side of tail</li>
<li>Tail about 1 meter in length</li>
</ul>
</quick-facts>
<p>
Sebin is a bipedal plantigrade. His body is mostly covered by red scales
with yellow chest plates running from below his chin over his torso all
the way down between his legs and underside of his tail. His physique is
athletic to muscular. His fingers and toes are equipped sharp black claws.
Brown spikes run along his spine down to the tip of his tail. His tail is
about one meter in length.
</p>
<h3>Wings</h3>
<quick-facts>
<ul>
<li>Wingspan 3-4 meters</li>
<li>Closed when on the ground</li>
<li>Function like a second pair of arms</li>
<li>Pointy talon on end of "hand"</li>
</ul>
</quick-facts>
<p>
His wing span is around 3-4 meters. He has them closed when on the ground.
His wings function like a second pair of arms, at which ends are hand-like
limbs with a black talon on top and finger-like extensions, in between
which are the membranes of his wings. He can use his wings to fly short
distances. Longer distances become difficult due to fatigue of having to
carry his own weight with his wings alone.
</p>
<h3>Head</h3>
<ref-figure>
<template #img>
<div>
<img
src="@/assets/refs/sebin-ref-expressions.png"
alt="Sebin's Expressions"
/>
</div>
</template>
<template #caption>
<label>Sebin's Expressions</label>
</template>
<template #copyright>
<a href="https://twitter.com/draftgon">draftgon</a>
</template>
</ref-figure>
<quick-facts>
<ul>
<li>
Round pupils, green iris. Yellow spikes on cheeks, as well as for
eyebrows
</li>
<li>Black horns with slight curve downwards</li>
<li>Blue hair, different styles; short style preferred</li>
<li>Long, pointy, movable ears</li>
<li>Very sharp teeth</li>
<li>Tongue with pointy tip</li>
</ul>
</quick-facts>
<p>
He has round pupils instead of the slit ones typical for reptilians. He
has short yellow spikes above his eyes that resemble eyebrows, as well as
spikes along the jawline of his cheeks. He has black horns growing out of
his head which are mostly straight but slightly curve downwards. His hair
is blue and he wears it in varying styles. He has long pointy ears which
he can move to determine the origin of sounds around him. He also uses
them to express emotion. His teeth are very sharp. In his throat are
glands that produce a mixture that allows him to breathe fire. His tongue
has a pointy tip.
</p>
<h3>Upper Body</h3>
<quick-facts>
<ul>
<li>Strong upper body, lush pecs, defined abs, black nipples</li>
<li>
Any muscle mass from athletic to body builder is fine, with a
preference towards body builder
</li>
</ul>
</quick-facts>
<p>
Sebin started working out at the age of 17. Being in top shape is very
important to him. His favorite workouts are weight-lifting (dumbbells as
well as barbells), lat pulldown, leg press, straight arm pulldown and
cable pull. He works out three times a week with one day in between
workout days for rest, switching body regions each workout day.
</p>
<ref-figure>
<template #img>
<div>
<img
src="@/assets/refs/upper-body-ref.jpg"
alt="Sebin's upper body closeup"
/>
</div>
</template>
<template #caption>
<label>Sebin's upper body closeup</label>
</template>
<template #copyright>
<a href="https://twitter.com/NidtheDragon">NidtheDragon</a>
</template>
</ref-figure>
<p>
Sebin is very focused on evenly distributed muscle mass but pays special
attention to his back, chest and arms. This is so his fire breath doesn't
get weak and he can throw fire projectiles farther. A strong back ensures
his wings continue to carry him so he can stay airbourne for extended
periods of time.
</p>
<h3>Additional Muscle References</h3>
<!-- <div class="nsfw-bar" v-show="!nsfw">
<div class="nsfw-bar__content flex flex--row flex--nowrap">
<div>
<strong>
Some of these additional references are NSFW. Please enable NSFW
mode to reveal them.
</strong>
</div>
<nsfw-switch
id="nsfw-switch-muscle"
v-model="nsfw"
@change="showWarning()"
/>
</div>
</div> -->
<ref-gallery>
<figure>
<img src="@/assets/refs/muscle/muscle-ref12.jpg" />
<figcaption>
By <a href="https://twitter.com/KidRhinoBoy">Chirros</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref1.jpg" />
<figcaption>
By <a href="https://twitter.com/GrisserArt">Grisser</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref2.jpg" />
<figcaption>
By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref3.jpg" />
<figcaption>
By
<a href="https://www.furaffinity.net/user/Marsel-Defender">
Marsel-Defender
</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref4.png" />
<figcaption>
By
<a href="https://www.furaffinity.net/user/sirboburto"> SirBoburto </a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref5.jpg" />
<figcaption>
By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref6.jpg" />
<figcaption>
By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref7.jpg" />
<figcaption>
By
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref8.jpg" />
<figcaption>
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref9.jpg" />
<figcaption>
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref10.jpg" />
<figcaption>
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/muscle/muscle-ref11.jpg" />
<figcaption>
By
<a href="https://www.furaffinity.net/user/Marsel-Defender">
Marsel-Defender
</a>
</figcaption>
</figure>
</ref-gallery>
<h3>Penis</h3>
<ref-figure>
<template #img>
<div>
<img
src="@/assets/refs/sebin-ref-penis.png"
alt="Sebin's manly parts"
/>
</div>
</template>
<template #caption>
<label>Sebin's manly parts</label>
</template>
<template #copyright>
<a href="https://twitter.com/draftgon">draftgon</a>
</template>
</ref-figure>
<data-table :dataset="getSebinData.penis" />
<quick-facts>
<ul>
<li>Human-shaped with ridges</li>
<li>Ring-like sheath surrounding shaft</li>
<li>
Extends from sheath when erect, lives inside sheath when not erect
</li>
<li>External balls</li>
</ul>
</quick-facts>
<p>
Despite his majorly reptilian appearance he has nipples, a feature of the
human side of his family, which also shows with his external testicles.
Rather than a slit which houses his penis he has a pouch-like sheath, with
the tip slightly peeking out of it when not aroused. His penis is mainly
humanoid in shape but is surrounded by several ridges. He can take it out
of its pouch while it's still soft (e.g. for passing water). When aroused
his charcoal black shaft pushes out from the sheath, its base girded by
the sheath like a ring.
</p>
</prose>
</template>
<script>
import Prose from "@/components/Prose.vue";
import NsfwSwitch from "@/components/NsfwSwitch.vue";
import NsfwWarning from "@/components/NsfwWarning.vue";
import RefFigure from "@/components/Figure.vue";
import QuickFacts from "@/components/QuickFacts.vue";
import DataTable from "@/components/DataTable.vue";
import RefGallery from "@/components/Gallery.vue";
import Sebin from "@/mixins/Sebin.js";
import Helper from "@/mixins/Helper.js";
export default {
components: {
Prose,
NsfwSwitch,
NsfwWarning,
RefFigure,
QuickFacts,
DataTable,
RefGallery,
},
data() {
return {
nsfw: false,
isWarn: false,
isConfirmedHorny: false,
};
},
mixins: [Sebin, Helper],
methods: {
showWarning() {
if (!this.isConfirmedHorny) {
this.isWarn = true;
}
},
},
};
</script>
<style></style>

82
src/views/Clothing.vue Normal file
View file

@ -0,0 +1,82 @@
<template>
<prose>
<h2>Clothing Styles</h2>
<h3>Casual Wear</h3>
<ref-gallery>
<figure>
<img src="@/assets/refs/clothes/casual/fullbody.png" alt="Full Body" />
<figcaption>
<p>
Black tank top, flannell shirt, shorts (w/ dangling bands), sneakers
</p>
<p>
By <a href="https://twitter.com/coffeerelated">coffeerelated</a>
</p>
</figcaption>
</figure>
</ref-gallery>
<h3>Cold Weather</h3>
<ref-gallery>
<figure>
<img src="@/assets/refs/clothes/cold/fullbody.png" alt="Full Body" />
<figcaption>
<p>Winter coat, scarf, zip hoodie, jeans, winter boots</p>
<p>By <a href="https://twitter.com/lara_belem_">Lara Belém</a></p>
</figcaption>
</figure>
</ref-gallery>
<h3>Workout</h3>
<ref-gallery>
<figure>
<img src="@/assets/refs/clothes/workout/fullbody.png" alt="Full Body" />
<figcaption>
<p>
<strong>Full body:</strong> Snapback hat, tank top, fingerless
gloves, shorts, sneakers
</p>
<p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/clothes/workout/closeup.jpg" alt="Close-up" />
<figcaption>
<p>
<strong>Close-up:</strong> Snapback hat, headphones, tank top,
fingerless gloves, shorts, smartwatch
</p>
<p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p>
</figcaption>
</figure>
</ref-gallery>
<h3>"Doesn't need to leave the house today" Style</h3>
<ref-gallery>
<figure>
<img src="@/assets/refs/clothes/lazy/pants.jpg" alt="Tank Top" />
<figcaption>
<p>Tracksuit pants (optional)</p>
</figcaption>
</figure>
<figure>
<img src="@/assets/refs/clothes/lazy/undies.jpg" alt="Shorts" />
<figcaption>
<p>Topless w/ jockstrap/boxer briefs</p>
</figcaption>
</figure>
</ref-gallery>
</prose>
</template>
<script>
import Prose from "@/components/Prose.vue";
import RefGallery from "@/components/Gallery.vue";
export default {
components: { Prose, RefGallery },
};
</script>
<style lang="scss"></style>

24
src/views/General.vue Normal file
View file

@ -0,0 +1,24 @@
<template>
<prose>
<h2>General</h2>
<p>Here's some general information about Sebin to get you started.</p>
<data-table :dataset="getSebinData.generic" />
</prose>
</template>
<script>
import Prose from "@/components/Prose.vue";
import DataTable from "@/components/DataTable.vue";
import Sebin from "@/mixins/Sebin.js";
import Helper from "@/mixins/Helper.js";
export default {
components: { Prose, DataTable },
mixins: [Sebin, Helper],
};
</script>
<style lang="scss"></style>

24
src/views/Home.vue Normal file
View file

@ -0,0 +1,24 @@
<template>
<prose>
<welcome>
<template #main>Sebin Nyshkim</template>
<template #sub>Character Reference Page</template>
</welcome>
<h3>Welcome to Sebin's Ref Page</h3>
<p>
Want to learn more about this handsome dragon? You've come to the right
place!
</p>
</prose>
</template>
<script>
import Prose from "@/components/Prose.vue";
import Welcome from "@/components/Welcome.vue";
export default {
name: "Home",
components: { Prose, Welcome },
};
</script>

146
src/views/Overdrive.vue Normal file
View file

@ -0,0 +1,146 @@
<template>
<prose>
<h2>Overdrive Form</h2>
<ref-figure>
<template #img>
<div>
<img
src="@/assets/refs/sebin-overdrive_ref-hires.jpg"
alt="Sebin in Overdrive"
/>
</div>
</template>
<template #caption>
<label>Sebin in Overdrive</label>
</template>
<template #copyright>
<a href="https://twitter.com/CVictorrosso">CVictorrosso</a>
</template>
</ref-figure>
<p>
Sebin can enter an Overdrive Form which greatly increases his strength and
abilities but it comes at a cost.
</p>
<p>
He enters Overdrive by engulfing himself in a pillar of flames which
transforms his exterior physique. During Overdrive transformation his hair
ignites and flickers with blue flames. The corners of his eyes flicker
with long green flames. His arms and legs become part carbon black and are
crossed by several glowing veins which pulsate like flowing lava. Fire in
this form burns several degrees hotter than usual because his body becomes
a living blast furnace, which is why his limbs have to be of more
fire-proof material to withstand the increased heat.
</p>
<p>
To complete the transformation he inhales the flames from the pillar
surrounding him which heats up his body from within. Even if Sebin is a
fire dragon who can sustain high degrees of heat he is essentially
overheating himself from the inside. Because of this he can't maintain
this form for more than a few hours before he does permanent damage to his
own body.
</p>
<p>
Direct body contact with Sebin during overdrive causes 3rd degree burns as
he emits an extreme temperature, although less than he keeps inside his
body. His immediate surroundings are likely to burn or melt.
</p>
<h3>Attacks</h3>
<table class="overdrive-attacks">
<tr>
<td><strong>Fire Breath</strong> (improved)</td>
<td>
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>
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>
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>
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>
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>
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>
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>
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>
</prose>
</template>
<script>
import Prose from "@/components/Prose.vue";
import RefFigure from "@/components/Figure.vue";
export default {
components: { Prose, RefFigure },
};
</script>
<style lang="scss">
.overdrive-attacks {
max-width: 55rem;
margin: auto;
}
</style>