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

Refactored Sebin's data as Vue mixin

Browse source
This commit is contained in:
Sebin Nyshkim 2019-11-05 17:02:52 +01:00
parent a2f6cb3236
commit 674bfdedc4
2 changed files with 216 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

243
src/App.vue
View file

@ -15,183 +15,124 @@
<section class="prose">
<h2>Anatomy</h2>
<img-p
imgPos="left"
imgSrc="/img/fullbody-ref.jpg"
>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.</img-p>
<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>
<img-p
imgPos="top"
imgSrc="/img/head-ref.jpg"
>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.</img-p>
<img-p
imgPos="right"
imgSrc="/img/penis-erect-ref.jpg"
>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. 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 erect his charcoal black shaft protrudes from the pouch, its base girded by the sheath like a ring.</img-p>
<img-p imgPos="left" imgSrc="/img/fullbody-ref.jpg"
>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.</img-p
>
<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>
<img-p imgPos="top" imgSrc="/img/head-ref.jpg"
>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.</img-p
>
<img-p imgPos="right" imgSrc="/img/penis-erect-ref.jpg"
>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. 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
erect his charcoal black shaft protrudes from the pouch, its base girded
by the sheath like a ring.</img-p
>
</section>
<section class="prose">
<h2>Musculature</h2>
<img-p
imgPos="left"
imgSrc="/img/chest-ref.jpg"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p>
<img-p
imgPos="right"
imgSrc="/img/muscle-ref1.jpg"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p>
<img-p
imgPos="bottom"
imgSrc="/img/muscle-ref2.jpg"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p>
<img-p
imgPos="bottom"
imgSrc="/img/iu-17.jpeg"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p>
<img-p imgPos="left" imgSrc="/img/chest-ref.jpg"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo
quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente
soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p
>
<img-p imgPos="right" imgSrc="/img/muscle-ref1.jpg"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo
quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente
soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p
>
<img-p imgPos="bottom" imgSrc="/img/muscle-ref2.jpg"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo
quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente
soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p
>
<img-p imgPos="bottom" imgSrc="/img/iu-17.jpeg"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nemo
quaerat eaque in illum deserunt dolore suscipit eveniet atque sapiente
soluta quia sint sed tempore minima omnis enim quos? Neque!</img-p
>
</section>
<section class="prose">
<h2>Personality</h2>
<p>Sebin is an affectionate guy who cares immensely for his loved ones. If he notices someone having a hard time he always tries to lift them back up again. He will protect them no matter what. Not being able to help a friend in need equals to failing them for him and he will feel extremely guilty for it.</p>
<p>He is honest and direct about his feelings and doesn't mince words, which some people might find brash.</p>
<p>He likes to laugh and is easily amused, sometimes to the point of being utterly childish and immature. He doesn't take himself too serious. His vocabulary is often vulgar, he's not afraid to curse, though he still knows when it's better to stay rationally diplomatic.</p>
<p>He's very enthusiastic about his hobbies and will talk your ears off if he notices the slightest common interest. Sometimes his passion for certain things might get the better of him though and he gets stubborn, hotheaded and even outright rude in disagreements.</p>
<p>
Sebin is an affectionate guy who cares immensely for his loved ones. If
he notices someone having a hard time he always tries to lift them back
up again. He will protect them no matter what. Not being able to help a
friend in need equals to failing them for him and he will feel extremely
guilty for it.
</p>
<p>
He is honest and direct about his feelings and doesn't mince words,
which some people might find brash.
</p>
<p>
He likes to laugh and is easily amused, sometimes to the point of being
utterly childish and immature. He doesn't take himself too serious. His
vocabulary is often vulgar, he's not afraid to curse, though he still
knows when it's better to stay rationally diplomatic.
</p>
<p>
He's very enthusiastic about his hobbies and will talk your ears off if
he notices the slightest common interest. Sometimes his passion for
certain things might get the better of him though and he gets stubborn,
hotheaded and even outright rude in disagreements.
</p>
<p>He can also be quite impatient at times.</p>
<p>He is also a naughty hornball sometimes. He knows what he's got and he's not afraid to show it off playfully. He loves to wear jockstraps and bottomless briefs. He is vers, with a preference to top.</p>
<p>
He is also a naughty hornball sometimes. He knows what he's got and he's
not afraid to show it off playfully. He loves to wear jockstraps and
bottomless briefs. He is vers, with a preference to top.
</p>
</section>
<gallery :images="images"></gallery>
</div>
</template>
<script>
import DataTable from "./components/DataTable.vue";
import ImgP from "./components/ImageParagraph.vue";
import Gallery from "./components/Gallery.vue";
import Sebin from "./mixins/Sebin.js";
export default {
name: "app",
components: {
DataTable,
ImgP
ImgP,
Gallery
},
data() {
return {
firstName: "Sebin",
middleName: "Antario",
lastName: "Nyshkim",
dateOfBirth: new Date("1988-04-25"),
gender: "male",
height: 210, // cm
weight: 97, // kg
wingspan: 400, // cm
colors: {
hairPrimary: "#4b608f",
hairSecondary: "#6684c0",
eyes: "#31c215",
scalesPrimary: "#c64c35",
scalesSecondary: "#eda958",
eyebrows: "#eda958",
tailspikes: "#7f4539",
horns: "#413a3a",
claws: "#413a3a",
nipples: "#413a3a",
penis: "#413a3a"
},
penis: {
shape: "humanoid",
type: "grower",
special: "ridged",
size: 20, // cm
girth: 5 // cm
}
images: []
};
},
computed: {
fullName() {
return `${this.firstName} ${this.middleName} ${this.lastName}`;
},
birthdate() {
const locale = this.getClientLocale();
return this.dateOfBirth.toLocaleDateString(locale, {
year: "numeric",
month: "long",
day: "2-digit"
});
},
getSebinData() {
const generic = {
headers: ["Key", "Value"],
data: [
["Full Name", this.fullName],
["Date of Birth", this.birthdate],
["Sex/Gender", this.gender],
["Height", `${this.height} cm (${this.toImperial(this.height)})`],
["Weight", `${this.weight} kg (${this.toLbs(this.weight)} lbs)`],
[
"Wingspan",
`${this.wingspan / 100} m (${this.toImperial(this.wingspan)})`
]
]
};
const colors = {
headers: ["Body Part", "Color Value (hex)", "Color"],
data: [
["Primary Scale Color", this.colors.scalesPrimary],
["Secondary Scale Color", this.colors.scalesSecondary],
["Primary Hair Color", this.colors.hairPrimary],
["Secondary Hair Color", this.colors.hairSecondary],
["Eyes", this.colors.eyes],
["Eyebrows", this.colors.eyebrows],
["Horns / Claws / Nipples", this.colors.horns],
["Tail Spikes", this.colors.tailspikes]
]
};
const penis = {
headers: ["Key", "Value", "Color"],
data: [
["Shape", this.penis.shape],
["Type", this.penis.type],
["Special Traits", this.penis.special],
["Color", this.colors.penis],
["Length", `${this.penis.size} cm (${this.toInch(this.penis.size)})`],
["Girth", `${this.penis.girth} cm (${this.toInch(this.penis.girth)})`]
]
};
return { generic, colors, penis };
}
},
methods: {
getClientLocale() {
if (navigator.language) {
return navigator.languages[0];
} else if (navigator.userLanguage) {
return navigator.userLanguage; // IE < 11
} else if (navigator.browserLanguage) {
return navigator.userLanguage;
} else if (navigator.systemLanguage) {
return navigator.systemLanguage;
}
// return navigator.language ? navigator.languages[0] : navigator.language;
},
toImperial(cm) {
const realFeet = (cm * 0.3937) / 12;
const feet = Math.floor(realFeet);
const inches = Math.round((realFeet - feet) * 12);
return `${feet}'${inches}"`;
},
toInch(cm) {
return `${Math.round(cm / 2.45)} in`;
},
toLbs(kg) {
const nearExact = kg / 0.45359237;
const lbs = Math.floor(nearExact);
return lbs;
}
}
mixins: [Sebin]
};
</script>