<template>
  <div id="app">
    <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>

    <ref-header
      mainHeading="Sebin Nyshkim"
      subHeading="Character Reference Page"
    />

    <main>
      <section id="general">
        <h2>General</h2>
        <data-table class="prose" :dataset="getSebinData.generic" />
      </section>

      <section id="anatomy">
        <h2>Anatomy</h2>

        <ref-figure>
          <template #img>
            <div>
              <img
                v-if="nsfw"
                src="@img/sebin-ref-body-NSFW.png"
                alt="Sebin Full Body Ref"
              />
              <img
                v-else
                src="@img/sebin-ref-body-SFW.png"
                alt="Sebin Full Body Ref"
              />
            </div>
          </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" />

        <div class="prose">
          <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>
        </div>

        <h3 id="wings">Wings</h3>
        <div class="prose">
          <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>
        </div>

        <h3 id="head">Head</h3>
        <ref-figure>
          <template #img>
            <div>
              <img
                src="@img/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>

        <div class="prose">
          <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>
        </div>

        <h3 id="upperbody">Upper Body</h3>
        <div class="prose">
          <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>
        </div>

        <ref-figure>
          <template #img>
            <div>
              <img
                src="@img/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>

        <div class="prose">
          <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>
        </div>

        <h3>Additional Muscle References</h3>
        <div class="prose" v-show="!nsfw">
          <div class="nsfw-bar">
            <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>
        </div>

        <ref-gallery v-show="nsfw">
          <figure>
            <img src="@img/muscle-ref/muscle-ref1.jpg" />
            <figcaption>
              By <a href="https://twitter.com/GrisserArt">Grisser</a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref2.jpg" />
            <figcaption>
              By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref3.jpg" />
            <figcaption>
              By
              <a href="https://www.furaffinity.net/user/Marsel-Defender">
                Marsel-Defender
              </a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref4.png" />
            <figcaption>
              By
              <a href="https://www.furaffinity.net/user/sirboburto">
                SirBoburto
              </a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref5.jpg" />
            <figcaption>
              By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref6.jpg" />
            <figcaption>
              By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref7.jpg" />
            <figcaption>
              By
              <a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref8.jpg" />
            <figcaption>
              By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref9.jpg" />
            <figcaption>
              By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref10.jpg" />
            <figcaption>
              By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/muscle-ref/muscle-ref11.jpg" />
            <figcaption>
              By
              <a href="https://www.furaffinity.net/user/Marsel-Defender">
                Marsel-Defender
              </a>
            </figcaption>
          </figure>
        </ref-gallery>

        <h3 v-show="nsfw" id="penis">Penis</h3>
        <ref-figure v-show="nsfw">
          <template #img>
            <div>
              <img src="@img/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 class="prose" v-show="nsfw" :dataset="getSebinData.penis" />

        <div class="prose" v-show="nsfw">
          <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>
        </div>
      </section>

      <section id="clothes">
        <h2>Clothing Styles</h2>

        <div class="prose">
          <p>
            <strong>
              The following photos are for illustration purposes only. The
              clothing shown is not to be taken literally. The design may
              differ!
            </strong>
          </p>
        </div>

        <h3>Casual Wear</h3>
        <ref-gallery>
          <figure>
            <img src="@img/clothes-ref/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="@img/clothes-ref/cold/coat.jpg" alt="Coat" />
            <figcaption>
              <p>Coat</p>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/clothes-ref/cold/scarf.jpg" alt="Scarf" />
            <figcaption>
              <p>Checkered scarf with short cords</p>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" />
            <figcaption>
              <p>Hoodie</p>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/clothes-ref/cold/jeans.jpg" alt="Jeans" />
            <figcaption>
              <p>Loose fit Jeans</p>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
            <figcaption>
              <p>Boots</p>
            </figcaption>
          </figure>
        </ref-gallery>

        <h3>Workout</h3>
        <ref-gallery>
          <figure>
            <img src="@img/clothes-ref/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="@img/clothes-ref/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="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
            <figcaption>
              <p>Tracksuit pants (optional)</p>
            </figcaption>
          </figure>
          <figure>
            <img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
            <figcaption>
              <p>Topless w/ jockstrap/boxer briefs</p>
            </figcaption>
          </figure>
        </ref-gallery>
      </section>

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

        <h3>Attacks</h3>

        <div class="attacks">
          <div class="row">
            <div class="col">
              <img
                src="@img/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="@img/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="@img/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="@img/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>

        <h2>Overdrive Form</h2>
        <ref-figure>
          <template #img>
            <div>
              <img
                src="@img/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>

        <div class="prose">
          <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>
        </div>

        <h3>Attacks</h3>
        <div class="prose">
          <table>
            <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>
        </div>
      </section>
    </main>

    <ref-footer />
  </div>
</template>

<script>
import QuickFacts from "@components/QuickFacts.vue";
import DataTable from "@components/DataTable.vue";
import RefGallery from "@components/Gallery.vue";
import RefFigure from "@components/Figure.vue";
import RefHeader from "@components/Header.vue";
import RefFooter from "@components/Footer.vue";
import NsfwSwitch from "@components/NsfwSwitch.vue";
import NsfwWarning from "@components/NsfwWarning.vue";

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

export default {
  name: "app",
  components: {
    QuickFacts,
    DataTable,
    RefGallery,
    RefFigure,
    RefHeader,
    RefFooter,
    NsfwSwitch,
    NsfwWarning
  },
  data() {
    return {
      nsfw: false,
      isWarn: false,
      isConfirmedHorny: false,
      version: require("../package.json").version
    };
  },
  mixins: [Sebin, Helper],
  methods: {
    showWarning() {
      if (!this.isConfirmedHorny) {
        this.isWarn = true;

        setTimeout(() => {
          this.nsfw = false;
        }, 1);
      }
    }
  }
};
</script>

<style lang="scss">
@import "@scss/base.scss";
@import "~normalize.css";

#app {
  color: $copy-color;
  font-size: 1.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all ease-in-out 0.25s;

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

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

main {
  h2,
  h3,
  p {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;

    @media (min-width: 125em) {
      max-width: 55rem;
    }
  }

  .prose {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;

    @media (min-width: 125em) {
      max-width: 55rem;
    }
  }

  @include mq-mobile {
    h2,
    h3,
    p,
    .quickfacts {
      margin-left: 1rem;
      margin-right: 1rem;
    }
  }
}

section {
  h2 {
    border-bottom: 0.0625em $copy-color solid;
  }

  h3 {
    border-bottom: 0.125em $copy-color dotted;
  }
}

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