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

Resolved merge conflict

Browse source
This commit is contained in:
Sebin Nyshkim 2019-11-06 18:55:51 +01:00
commit 743826e56b
6 changed files with 241 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

27
Sebin.md
View file

@ -69,15 +69,24 @@ He is also a naughty hornball sometimes. He knows what he's got and he's not afr
* truculent * truculent
## Clothing style ## Clothing style
### Style 1 ### Warm Weather
* muscle shirt * Tank Top
* short shorts (knee-long) with dangling bands * Short shorts (knee-long) with dangling bands
* sweater bound around waist * Sweater/Hoodie tied around waist
* Air Jordans * Sneakers (Air Jordan style)
### Style 2 ### Cold Weather
* comfortable loose jeans * Coat
* * Checkered scarf with short cords
* Hoodie
* Loose Jeans
* Boots
### Workout
* Sleeveless Hoodie (hood goes on)
* Fingerless Gloves
* Short Shorts
* (barefoot)
## Abilities ## Abilities
@ -103,7 +112,7 @@ Direct body contact with Sebin during overdrive causes 3rd degree burns as he em
### Attacks in Overdrive Form ### Attacks in Overdrive Form
In this form he is able to burst fire shots emanating from the veins crossing by his arms directly from his hands. This way he doesn't need to spit balls of fire into his hands to use his fire grenades, instead he just creates them from his hands. In this form he is able to burst fire shots emanating from the veins crossing by his arms directly from his hands. This way he doesn't need to spit balls of fire into his hands to use his fire grenades, instead he just creates them from his hands. He can combine the fire from both hands when he holds them close together (think Goku's Kamehame-ha from Dragon Ball Z).
The reach of his fire breath increases dramatically and he can fire it with much greater speed. The reach of his fire breath increases dramatically and he can fire it with much greater speed.

162
src/App.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div id="app"> <div id="app">
<header> <header>
<h1>Sebin Nyshkim Character Reference Page</h1> <h1>{{ appName }}</h1>
</header> </header>
<h2>Quick info</h2> <h2>Quick info</h2>
@ -15,17 +15,21 @@
<section class="prose"> <section class="prose">
<h2>Anatomy</h2> <h2>Anatomy</h2>
<rich-figure
imgSrc="/img/fullbody-ref.jpg"
imgPos="left"
imgW="20em"
caption="Sebin Full Body reference"
></rich-figure>
<p> <p>
<img Sebin is a bipedal plantigrade. His body is mostly covered by red scales
class="float left" with yellow chest plates running from below his chin over his torso all
src="/img/fullbody-ref.jpg" the way down between his legs and underside of his tail. His physique is
alt="Full Body Reference" athletic to muscular. His fingers and toes are equipped sharp black
/>Sebin is a bipedal plantigrade. His body is mostly covered by red claws. Brown spikes run along his spine down to the tip of his tail. His
scales with yellow chest plates running from below his chin over his tail is about one meter in length.
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> </p>
<p> <p>
His wing span is around 3-4 meters. He has them closed when on the His wing span is around 3-4 meters. He has them closed when on the
@ -35,8 +39,14 @@
fly short distances. Longer distances become difficult due to fatigue of fly short distances. Longer distances become difficult due to fatigue of
having to carry his own weight with his wings alone. having to carry his own weight with his wings alone.
</p> </p>
<img-p imgPos="top" imgSrc="/img/head-ref.jpg"
>He has round pupils instead of the slit ones typical for reptilians. He <rich-figure
imgSrc="/img/head-ref.jpg"
caption="Sebin's Expressions"
></rich-figure>
<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 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 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. out of his head which are mostly straight but slightly curve downwards.
@ -44,14 +54,17 @@
ears which he can move to determine the origin of sounds around him. He 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 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 throat are glands that produce a mixture that allows him to breathe
fire. His tongue has a pointy tip.</img-p fire. His tongue has a pointy tip.
> </p>
<rich-figure
imgSrc="/img/penis-erect-ref.jpg"
imgPos="right"
caption="Sebin's manly parts"
></rich-figure>
<p> <p>
<img Despite his majorly reptilian appearance he has nipples, a feature of
class="float right"
src="/img/penis-erect-ref.jpg"
alt="Penis Reference (Erect)"
/>Despite his majorly reptilian appearance he has nipples, a feature of
the human side of his family, which also shows with his external 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 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 sheath, with the tip slightly peeking out of it. His penis is mainly
@ -106,17 +119,112 @@
<template v-for="(style, index) in clothingStyles"> <template v-for="(style, index) in clothingStyles">
<h3 :key="style.name">{{ style.name }}</h3> <h3 :key="style.name">{{ style.name }}</h3>
<ul :key="index"> <ul :key="index">
<li v-for="(part, index) in style.clothes" :key="index">{{ part }}</li> <li v-for="(part, index) in style.clothes" :key="index">
{{ part }}
</li>
</ul> </ul>
</template> </template>
</section> </section>
<section class="prose">
<h2>Abilities</h2>
<p>
Since Sebin is a fire dragon there’s a myriad of abilities he has at his
disposal for his defense.
</p>
<h3>Attacks</h3>
<p>
Sebin is able to breath fire at his opponents in either a straight line
or in short bursts of fire balls directly from his mouth.
</p>
<p>
He can also spit fireballs into his hands to throw them at his
opponents. His scales are fireproof and can withstand the high
temperatures. On impact these fire balls explode to a bigger ball of
flames with a diameter of 1-2 meters. He can also combine two fireballs
into a bigger one.
</p>
<p>
During aerial combat Sebin can use his fire breath to engulf himself in
flames while spinning to become a fire tornado that singes opponents.
</p>
<h2>Overdrive Form</h2>
<p>
Sebin can enter an Overdrive Form which greatly increases his strength
and abilities but comes at a cost.
</p>
<rich-figure></rich-figure>
<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, as do the corners of his
eyes with long green flames. His arms and legs become
<a href="https://www.furaffinity.net/view/31065788/"
>3/4 carbon black and are crossed by several glowing veins which
pulsate like flowing lava</a
>. 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 again which heats
up his body from within. Even if Sebin is a fire dragon which allows him
to sustain great heat, even in his regular form, 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 in Overdrive Form</h3>
<p>
In this form he is able to burst fire shots emanating from the veins
crossing by his arms directly from his hands. This way he doesn't need
to spit balls of fire into his hands to use his fire grenades, instead
he just creates them from his hands. He can combine the fire from both
hands when he holds them close together (think Goku's Kamehame-ha from
Dragon Ball Z).
</p>
<p>
The reach of his fire breath increases dramatically and he can fire it
with much greater speed.
</p>
<p>
Another technique useful for both defense and attack is a ring of fire
balls diagonally circling around his body. Sebin summons them by
spinning around in a circle once with stretched out arms and rapidly
releasing fire balls from his opened hands. By circling his body
diagonally he can still move his arms relatively freely.
</p>
<p>
Overdrive also allows Sebin to transform his fire balls into rings by
sticking his fingers into the fire balls and spinning them around on his
finger until they expand into rings. He can throw these at opponents
like shurikens.
</p>
<p>
He is not only able to emit fire from his hands in overdrive but also
his legs in two ways. One way is to do a backflip and let out a blade of
fire at his opponents. The other way is by stomping on the ground with
his heels to create a fiery explosion.
</p>
</section>
</div> </div>
</template> </template>
<script> <script>
import DataTable from "./components/DataTable.vue"; import DataTable from "./components/DataTable.vue";
import ImgP from "./components/ImageParagraph.vue";
import Gallery from "./components/Gallery.vue"; import Gallery from "./components/Gallery.vue";
import RichFigure from "./components/RichFigure.vue";
import Sebin from "./mixins/Sebin.js"; import Sebin from "./mixins/Sebin.js";
import Helper from "./mixins/Helper.js"; import Helper from "./mixins/Helper.js";
@ -125,12 +233,14 @@ export default {
name: "app", name: "app",
components: { components: {
DataTable, DataTable,
ImgP, Gallery,
Gallery RichFigure
}, },
data() { data() {
return { return {
muscleRefs: this.getMuscleRefPics(17) appName: "Sebin Nyshkim Character Reference Page",
muscleRefs: this.getMuscleRefPics(17),
kittens: this.getKittens(17)
}; };
}, },
mixins: [Sebin, Helper] mixins: [Sebin, Helper]
@ -138,7 +248,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap'); @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
:root { :root {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;

11
src/components/DataTable.vue
View file

@ -8,9 +8,9 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(tuple, rowNo) in dataset.data" :key="rowNo"> <tr v-for="(tuple, row) in dataset.data" :key="row">
<template v-for="(item, index) in tuple"> <template v-for="(item, col) in tuple">
<td :key="index" v-if="index === 1 && !isHexValue(item)" colspan="2"> <td :key="col" v-if="col === 1 && !isHexValue(item)" colspan="2">
{{ item }} {{ item }}
</td> </td>
<td :key="item[0]" v-else>{{ item }}</td> <td :key="item[0]" v-else>{{ item }}</td>
@ -29,7 +29,10 @@
export default { export default {
name: "DataTable", name: "DataTable",
props: { props: {
dataset: Object dataset: {
type: Object,
required: true
}
}, },
methods: { methods: {
isHexValue(value) { isHexValue(value) {

104
src/components/ImageParagraph.vue
View file

@ -1,104 +0,0 @@
<template>
<div class="image-paragraph" :class="imgPos">
<div class="image">
<img :src="imgSrc" alt="Image" />
</div>
<div class="text">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "ImageParagraph",
props: {
imgSrc: String,
imgPos: String
}
};
</script>
<style lang="scss" scoped>
.image-paragraph {
margin: 1em 0;
display: flex;
flex-flow: row;
&.right div,
&.left div {
align-self: center;
}
&.left .text {
@media (min-width: 35em) {
padding-left: 1em;
}
}
&.right .text {
@media (min-width: 35em) {
padding-right: 1em;
}
}
&.left,
&.right {
flex-wrap: wrap;
@media (min-width: 35em) {
flex-wrap: nowrap;
}
.image {
flex: 0 1 100%;
@media (min-width: 35em) {
flex: 1;
}
}
.text {
flex: 1;
}
}
&.top,
&.bottom {
flex-wrap: wrap;
justify-content: center;
.image {
flex: 0 1 auto;
}
.text {
flex: 0 1 100%;
}
}
&.top .text {
margin-top: 1em;
}
&.bottom .text {
margin-bottom: 1em;
}
@media (min-width: 35em) {
&.bottom .image,
&.right .image {
order: 2;
}
}
.image {
text-align: center;
img {
max-width: 100%;
}
}
}
</style>

61
src/components/RichFigure.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<figure :class="[{ float: imgPos }, imgPos]">
<img :src="imgSrc" :alt="caption" />
<figcaption>{{ caption }}</figcaption>
</figure>
</template>
<script>
export default {
name: "rich-figure",
props: {
imgSrc: { type: String, required: true },
imgPos: String,
imgW: String,
caption: { type: String, required: true }
}
};
</script>
<style lang="scss" scoped>
figure {
position: relative;
overflow: hidden;
margin: 0;
line-height: 1;
figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
line-height: 1.5;
background: rgba(#000, 0.5);
color: #fff;
text-align: center;
}
img {
width: 100%;
}
}
.float {
width: 100%;
@media (min-width: 35em) {
width: 20em;
&.left {
float: left;
margin: 0 0.75em 0.375em 0;
}
&.right {
float: right;
margin: 0 0 1em 1em;
}
}
}
</style>

19
src/mixins/Helper.js
View file

@ -11,6 +11,25 @@ export default {
return muscles; return muscles;
}, },
getKittens(count) {
let kittens = [];
for (let i = 0; i < count; i++) {
let width = this.getRandomInt(300, 600);
let height = this.getRandomInt(300, 600);
kittens.push(`https://placekitten.com/${width}/${height}`);
}
return kittens;
},
getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
max++; // make it inclusive
return Math.floor(Math.random() * (max - min)) + min;
},
getClientLocale() { getClientLocale() {
if (navigator.language) { if (navigator.language) {
return navigator.languages[0]; return navigator.languages[0];