<template>
  <div id="app">
    <label class="nsfw-switch" for="nsfw-switch">
      <div>😇</div>
      <div class="toggle-wrap">
        <input v-model="nsfw" type="checkbox" name="nsfw" id="nsfw-switch" />
        <div class="toggle"></div>
      </div>
      <div>😈</div>
    </label>
    <header>
      <div>
        <img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" />
      </div>
      <div>
        <h1>{{ appName }}</h1>
        <h2>{{ appSubtitle }}</h2>
      </div>
    </header>

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

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

    <section v-if="nsfw">
      <details>
        <summary>
          <h2>Penis</h2>
        </summary>
        <data-table :dataset="getSebinData.penis"></data-table>
      </details>
    </section>

    <section class="prose">
      <details>
        <summary>
          <h2>Anatomy</h2>
        </summary>
        <rich-figure
          imgSrc="/img/fullbody-ref.jpg"
          caption="Sebin Full Body reference"
          copyright="FA:SirBoburto"
        ></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>

        <rich-figure
          imgSrc="/img/head-ref.jpg"
          caption="Sebin's Expressions"
          copyright="FA:SirBoburto"
        ></rich-figure>

        <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/sebin-hairstyle-short.jpg"
          caption="Sebin with short hair"
          copyright="@LeoboArt"
        ></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
          v-if="nsfw"
          imgSrc="/img/penis-ref.jpg"
          caption="Sebin's manly parts"
          copyright="@Zodim87"
        ></rich-figure>

        <p v-if="nsfw">
          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>
      </details>
    </section>

    <section class="prose">
      <details>
        <summary>
          <h2>Muscle Reference</h2>
        </summary>
        <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>

        <rich-figure
          imgSrc="/img/upper-body-ref.png"
          caption="Sebin's upper body closeup"
          copyright="@NidtheDragon"
        ></rich-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 References</h3>
        <gallery :images="muscleRefs"></gallery>
      </details>
    </section>

    <section class="prose">
      <details>
        <summary>
          <h2>Personality</h2>
        </summary>
        <p>
          Sebin is a warmhearted guy who cares a lot about his loved ones. He
          has a keen sense for bad vibes and is always willing to do something
          about it, either by listening to the problems of others or with
          well-meant advice. Not being able to help a friend in need is the same
          for him as abandoning them.
        </p>
        <p>
          He is open and honest with his feelings and does not mince his words.
          However, some people may find this brazen or tactless.
        </p>
        <p>
          Sebin likes to laugh and is therefore easy to amuse, often up to a
          point where he becomes utterly childish and immature. He also doesn't
          take himself too seriously and can laugh at himself -- even if only
          after a while. His vocabulary is rather vulgar and he rarely shies
          away from cursing. But he knows when a more diplomatic choice of words
          is appropriate.
        </p>
        <p>
          However, if he feels that his points of view are right, his ambition
          may well run away with him. If he gets the feeling during ongoing
          discussions that the other side is not paying any attention to his
          point of view, he can go from persistent to stubborn to hot-headed and
          even become downright rude.
        </p>
        <p>
          Sebin is very enthusiastic about his hobbies. If he notices even the
          slightest overlap of interests, he may chew your ear off. Sometimes he
          is also very impatient.
        </p>
        <p>
          But above all Sebin is a very naughty hornball. He knows what he’s got
          and enjoys the reactions when he shows it off. He is a generally
          dominant lover who likes to have it rough. But he is not lacking in
          tenderness. However, that doesn't mean that he doesn't let others have
          their fun with him too from time to time. It always depends on his
          playmates. He loves to wear bottomless jockstraps and boxer briefs to
          direct the attention of the viewer exactly where he wants it. After
          all he is well endowed enough to peddle it around.
        </p>
      </details>
    </section>

    <section>
      <details>
        <summary>
          <h2>Clothing Styles</h2>
        </summary>
        <template v-for="(style, index) in clothingStyles">
          <h3 :key="style.name">{{ style.name }}</h3>

          <gallery :key="style.name + index" :images="clothes[index]"></gallery>

          <ul :key="index">
            <li v-for="(part, index) in style.clothes" :key="index">
              {{ part }}
            </li>
          </ul>
        </template>
      </details>
    </section>

    <section class="prose">
      <details>
        <summary>
          <h2>Abilities</h2>
        </summary>
        <p>
          Since Sebin is a fire dragon there’s a myriad of abilities he has at
          his disposal to defend himself.
        </p>

        <h3>Overdrive Form</h3>
        <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
          <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 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>

        <h2>Attacks</h2>
        <h3>Normal Form</h3>
        <p>
          <strong>Fire Breath:</strong> Either a long breath of fire or short
          bursts fired directly from Sebin's mouth.
        </p>

        <p>
          <strong>Flame Toss:</strong> Sebin spits fireballs into his hands to
          throw them at his opponents. His scales are fireproof and can
          withstand the high temperatures. On impact these fireballs explode
          into a bigger fire bursts with a diameter of 1-2 meters. He can also
          combine two fireballs into a bigger one for bigger impact.
        </p>

        <p>
          <strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can
          also greatly increase the speed of the projectiles by a strong punch
          or kick.
        </p>

        <p>
          <strong>Burning Twister:</strong> An attack for aerial combat, Sebin
          can use his fire breath to engulf his body in flames while spinning to
          become a fire tornado that singes opponents.
        </p>

        <h3>Attacks in Overdrive Form</h3>
        <p>
          <strong>Fire Breath:</strong> The reach of Sebin's Fire Breath
          increases as well as the frequency at which he can fire shots from his
          mouth.
        </p>

        <p>
          <strong>Flame Toss:</strong> 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.
        </p>

        <p>
          <strong>Searing Discus:</strong> 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.
        </p>

        <p>
          <strong>Combustion Flare:</strong> A devastating firestorm by
          combining the power of both hands from his fire-infused arms. The
          impact of the two carbon-like palms against each other is like the
          clash of two flints, used to ignite the attack. 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.
        </p>

        <p>
          <strong>Blazing Pandemonium:</strong> 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 <em>Burning Twister</em>, the
          flames that previously surrounded Sebin's body are forced through the
          newly created furrows, transforming the scene into an inferno.
        </p>

        <p>
          <strong>Scorching Edge:</strong> 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.
        </p>

        <p>
          <strong>Circling Fire Shield:</strong> 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.
        </p>
      </details>
    </section>

    <footer>
      © 2020 Sebin Nyshkim
    </footer>
  </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",
      appSubtitle: "Character Reference Page",
      muscleRefs: this.getMuscleRefPics(17),
      kittens: this.getKittens(17),
      clothes: this.getClothesPics(),
      nsfw: false
    };
  },
  mixins: [Sebin, Helper]
};
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Exo:300,300i,900,900i|Fira+Sans+Extra+Condensed:300,700&display=swap");

:root {
  font-family: "Fira Sans Extra Condensed", 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: 40em;
  margin: auto;
  transition: all ease-in-out 0.25s;

  @media (min-width: 50em) {
    font-size: 1.25em;
  }

  @media (min-width: 160em) {
    font-size: 1.5em;
  }
}

.nsfw-switch {
  font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
    "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
    "segoe ui symbol";
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  background-color: #fff;
  border-radius: 0.5em;
  box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
  padding: 0.5em;
  margin: 0.5em;

  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;

  > div {
    flex: 0 1 33%;
    align-self: center;
    line-height: 1;
    text-align: center;
  }

  .toggle-wrap {
    margin: 0 0.5em;
  }

  .toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    background-color: #e6e6e6;
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all 0.3s linear;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      width: 42px;
      height: 22px;
      background-color: #fff;
      border-radius: 11px;
      transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
      transition: all 0.25s linear;
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      width: 22px;
      height: 22px;
      background-color: #fff;
      border-radius: 11px;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
      transform: translate3d(2px, 2px, 0);
      transition: all 0.2s ease-in-out;
    }
  }

  &:active {
    .toggle::after {
      width: 28px;
      transform: translate3d(2px, 2px, 0);
    }

    input {
      &:checked + .toggle::after {
        transform: translate3d(16px, 2px, 0);
      }
    }
  }

  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;

    &:checked + .toggle {
      background-color: #4bd763;

      &::before {
        transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
      }

      &::after {
        transform: translate3d(22px, 2px, 0);
      }
    }
  }
}

header {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;

  @media (min-width: 35em) {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  div {
    flex: 0 1 100%;

    &:first-child {
      flex: 0 1 50%;

      @media (min-width: 35em) {
        flex: 0 1 30%;
      }
    }

    img {
      width: 100%;
      border-radius: 50%;
      border: 0.375em solid #fff;
      box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
    }
  }

  h1,
  h2 {
    font-family: "Exo", sans-serif;
    margin: 0;
    text-align: center;
  }

  h1 {
    font-size: 2.125em;
    font-weight: 900;
    font-style: italic;

    @media (min-width: 35em) {
      font-size: 2.75em;
    }
  }

  h2 {
    font-size: 1em;
    font-weight: 300;
    font-style: italic;
  }
}

.prose {
  text-align: justify;
  hyphens: auto;
}

section {
  margin: 2em 0;
  padding: 1em;
  box-shadow: 0 0 2em rgba(#000, 0.3), 0 0 2em rgba(#000, 0.1) inset;
  background-color: #fff;

  h2 {
    border-bottom: 0.0625em #000 solid;
  }

  h3 {
    border-bottom: 0.125em #000 dotted;
  }
}

summary h2 {
  display: inline;
  border-bottom: none;
}

footer {
  margin: 2em 0;
  text-align: center;
}

.float {
  max-width: 15em;

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

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