<template>
  <div id="app">
    <header>
      <h1>{{ appName }}</h1>
    </header>

    <h2>Quick info</h2>
    <data-table :dataset="getSebinData.generic"></data-table>

    <h2>Colors</h2>
    <data-table :dataset="getSebinData.colors"></data-table>

    <h2>Penis</h2>
    <data-table :dataset="getSebinData.penis"></data-table>

    <section class="prose">
      <h2>Anatomy</h2>

      <rich-figure
        imgSrc="/img/fullbody-ref.jpg"
        imgPos="left"
        imgW="20em"
        caption="Sebin Full Body reference"
      ></rich-figure>

      <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>
      <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>

      <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
        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>

      <rich-figure
        imgSrc="/img/penis-erect-ref.jpg"
        imgPos="right"
        caption="Sebin's manly parts"
      ></rich-figure>

      <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. 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.
      </p>
    </section>

    <section class="prose">
      <h2>Muscle Reference</h2>
      <p>Sebin loves working out! As a result his body is very muscular.</p>
      <gallery :images="muscleRefs"></gallery>
    </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>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>
    </section>

    <section class="prose">
      <h2>Clothing Styles</h2>
      <template v-for="(style, index) in clothingStyles">
        <h3 :key="style.name">{{ style.name }}</h3>
        <ul :key="index">
          <li v-for="(part, index) in style.clothes" :key="index">
            {{ part }}
          </li>
        </ul>
      </template>
    </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>
</template>

<script>
import DataTable from "./components/DataTable.vue";
import Gallery from "./components/Gallery.vue";
import RichFigure from "./components/RichFigure.vue";

import Sebin from "./mixins/Sebin.js";
import Helper from "./mixins/Helper.js";

export default {
  name: "app",
  components: {
    DataTable,
    Gallery,
    RichFigure
  },
  data() {
    return {
      appName: "Sebin Nyshkim Character Reference Page",
      muscleRefs: this.getMuscleRefPics(17),
      kittens: this.getKittens(17)
    };
  },
  mixins: [Sebin, Helper]
};
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");

:root {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

#app {
  font-size: 1.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 40rem;
  margin: auto;
}

header {
  text-align: center;
}

.prose {
  text-align: justify;
}

.float {
  max-width: 15em;

  &.left {
    float: left;
    margin: 0 1em 1em 0;
  }

  &.right {
    float: right;
    margin: 0 0 1em 1em;
  }
}
</style>
