<script setup lang="ts">
import RefImage from "@/components/RefImage.vue";
import ColorTable from "@/components/ColorTable.vue";

const colors = [
  { name: "Front", value: "#e7c7b1" },
  { name: "Arms, legs", value: "#493428" },
  { name: "Back Main", value: "#422322" },
  { name: "Back Spine", value: "#341c1c" },
  { name: "Highlight scales, tissue", value: "#6bb9db" },
  { name: "Spikes, tail club", value: "#f8ebdd" },
  { name: "Eyes primary", value: "#a7eef1" },
  { name: "Eyes secondary", value: "#6dabd1" },
];
</script>

<template>
  <section>
    <h1>{{ $route.meta.title }}</h1>
  </section>

  <RefImage dropshadow>
    <template v-if="$route.query.nsfw">
      <source
        srcset="
          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
        type="image/avif"
      />
      <source
        srcset="
          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
        type="image/webp"
      />
      <img
        srcset="
          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
        alt="Viktor Ref by sabertoofs"
        loading="lazy"
      />
    </template>

    <template v-else>
      <source
        srcset="
          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&avif&quality=75&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
        type="image/avif"
      />
      <source
        srcset="
          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&webp&quality=100&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
        type="image/webp"
      />
      <img
        srcset="
          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&png&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
        alt="Viktor Ref by sabertoofs"
        loading="lazy"
      />
    </template>

    <template #caption>
      Viktor Ref &copy; <a href="http://twitter.com/sabertoofs">sabertoofs</a>
    </template>
  </RefImage>

  <ColorTable :colors="colors"></ColorTable>

  <section>
    <p>
      Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly
      bicolored, with several shades of brown.
    </p>

    <p>
      His forehead, nose, chest, belly and crotch are of light desert sand
      colors that run through the underside of his tail.
    </p>

    <p>
      His cheeks, shoulders, back and thighs, in contrast, stand out with a rich
      walnut brown, which is also found on the sides of his tail. From the back
      of his head, down his spine and across the top of his tail is a continuous
      strip of deep dark cedar brown. Arms and legs are distinguished by a light
      earthy brown.
    </p>
  </section>

  <RefImage dropshadow>
    <template v-if="$route.query.nsfw">
      <source
        srcset="
          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
        type="image/avif"
      />
      <source
        srcset="
          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
        type="image/webp"
      />
      <img
        srcset="
          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
        alt="Viktor frontal shot by sabertoofs"
        loading="lazy"
      />
    </template>

    <template v-else>
      <source
        srcset="
          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&avif&quality=75&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
        type="image/avif"
      />
      <source
        srcset="
          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&webp&quality=100&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
        type="image/webp"
      />
      <img
        srcset="
          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&png&withoutEnlargement&srcset
        "
        sizes="(min-width: 64em) 710px,
               (min-width: 50em) 590px,
               (min-width: 27em) 530px,
               430px"
        alt="Viktor frontal shot by sabertoofs"
        loading="lazy"
      />
    </template>

    <template #caption>
      Viktor frontal shot &copy;
      <a href="http://twitter.com/sabertoofs">sabertoofs</a>
    </template>
  </RefImage>

  <section>
    <p>
      His entire body is speckled with scattered aquamarine spots, which come in
      pairs of one large and one small spot. The only exceptions are the spots
      on his cheeks and behind his lower cheek horns, which come in threes and
      his the top side of his snout, which sports a big single spot. Mouth,
      tongue, nostrils and any other tissue of his body also feature this color.
    </p>

    <p>His eyes shine with a mixture of light sea green and electric blue.</p>

    <p>
      Horns and claws are of a typical bone white. Starting with the double pair
      of horns on his head, a parallel line of horns continues down his back,
      with additional horns adorning his shoulders and thighs. His tail is also
      armed with horns on both sides along its entire length. At the tip of the
      tail is a club-like ossification that he can use for fending off foes.
    </p>

    <p>He owes his strong, stocky physique to years of hard physical labor.</p>
  </section>
</template>
