feat: add contents to General page

src/views/General.vue

@@ -1,24 +1,217 @@
 <template>
+  <nsfw-warning v-show="$root.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>
+
   <prose>
     <h2>General</h2>
 
-    <p>Here's some general information about Sebin to get you started.</p>
+    <h3>Profile</h3>
 
     <data-table :dataset="getSebinData.generic" />
+
+    <h3>Personality</h3>
+
+    <quick-facts>
+      <ul class="col-2">
+        <li>warm-hearted</li>
+        <li>caring</li>
+        <li>quick to offer help</li>
+        <li>devestated when not being able to help</li>
+        <li>sociable</li>
+        <li>goofball who likes to laugh</li>
+        <li>open and honest about his feelings</li>
+        <li>confrontative and foul-mouthed when provoked</li>
+      </ul>
+    </quick-facts>
+
+    <p>
+      Sebin is a warm-hearted guy who cares a lot about the well-being of his
+      loved ones. Bad vibes rarely escape him and he offers his help without
+      hesitation. He also won't avoid difficult conversations in the process.
+      Not being able to help a friend in need is synonymous with failing them, a
+      realization that can leave him feeling uneasy long after the fact.
+    </p>
+
+    <p>
+      At the same time, he is very open and honest about his feelings. He does
+      not mince words and finds clear words when speaking his mind.
+      Unfortunately, Sebin sometimes forgets his good manners in the heat of the
+      moment, once he gets invested into a quarrel — especially when it comes to
+      topics that are near and dear to his heart. Anyone looking to have a bad
+      time can try their luck at pissing him off even once. This includes an
+      equally vulgar vocabulary. It is not uncommon to hear him swear.
+    </p>
+
+    <p>
+      Nevertheless, Sebin strives to put his best foot forward at all times. He
+      is of the sociable type and likes to laugh a lot, as he is easily amused.
+      Sometimes to a degree where it can become very childish and immature very
+      quickly.
+    </p>
+
+    <p>
+      Physical strength is not the only thing that plays a big role for Sebin.
+      He is of a firm believe that a healthy body must also have a healthy mind
+      in order to find a balance. But he only came to this realization at the
+      end of a rocky road. While a setback in the past could easily throw him
+      off track, today he stands much more firmly in life. Not only for his own
+      sake, but also to be a kind of anchor for others. He always keeps his
+      cool, so he can be a tower of strenth for others.
+    </p>
+
+    <h3>Hobbies</h3>
+
+    <quick-facts>
+      <ul class="col-4">
+        <li v-for="(hobby, idx) in hobbies" :key="idx">
+          {{ hobby }}
+        </li>
+      </ul>
+    </quick-facts>
+
+    <p>
+      Sebin is passionate about his hobbies. If he notices even the smallest
+      spark of interest in his hobbies you should bring a lot of time, as he
+      will chew your ear off first. Patience is known to be a virtue — one
+      unknown to this dragon.
+    </p>
+
+    <p>
+      When he indulges in his hobbies, he does so with devotion. Every move has
+      to be right and everything has to be in perfect harmony. Once he is in his
+      flow, he must not be disturbed, otherwise he can sometimes become quite
+      eccentric in expressing his dismay of being disrupted, possibly losing a
+      very important train of thought.
+    </p>
+
+    <h3>Food &amp; Drink</h3>
+
+    <quick-facts>
+      <ul class="col-4">
+        <li>sweets</li>
+        <li>savory food</li>
+        <li>spicy food</li>
+        <li>coffee</li>
+        <li>beer</li>
+        <li>cocktails</li>
+        <li>cheese</li>
+        <li>sausage</li>
+        <li>pancakes</li>
+        <li>chicken</li>
+        <li>beef</li>
+        <li>spaghetti/pasta</li>
+      </ul>
+    </quick-facts>
+
+    <p>
+      Sebin's day starts with a strong cup of black coffee and sandwiches. He's
+      also a massive sweet tooth which sounds like a big detriment to his
+      fitness routine. That's because it is and it's often very hard for him to
+      resist.
+    </p>
+
+    <p>
+      Besides snacking, Sebin also likes to eat hearty and savory things. He
+      doesn't disdain a cheese platter with a wide selection, nor a medium-rare
+      steak.
+    </p>
+
+    <p>
+      Sebin rarely says no to a good beer with friends, just as he rarely says
+      no to a bar tour to try new and interesting cocktails.
+    </p>
+
+    <template v-if="$root.nsfw">
+      <h3>Sexual Preferences</h3>
+
+      <data-table :dataset="getSebinData.preferences" />
+
+      <quick-facts>
+        <ul class="col-3">
+          <li>Supremely horny</li>
+          <li>Confident, knows what he's got</li>
+          <li>Dominant lover, likes it rough but is no brute</li>
+          <li>Service top</li>
+          <li>Depending on partner also bottoms</li>
+          <li>Likes to wear bottomless undies, esp. jockstraps</li>
+          <li>Enjoys the attention from flaunting</li>
+        </ul>
+      </quick-facts>
+
+      <p>
+        But above all Sebin is a very naughty hornball. He knows what he's got
+        and he's not afraid to flaunt it. He is a generally dominant lover who
+        likes to have it rough. But he is not lacking in tenderness. He
+        considers himself somewhat of a "service top", who doesn't only have his
+        own fun in mind. His job is only done if he's benn able to satisfy.
+        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,
+        which makes him effectively a switch. He loves to wear bottomless
+        jockstraps and boxer briefs to direct the attention of onlookers exactly
+        where he wants it. After all he is well endowed enough to peddle it
+        around.
+      </p>
+    </template>
+
+    <template v-else>
+      <h3>But, wait! There's more...</h3>
+
+      <p>
+        Let's... get... <strong><em>scandalous!</em></strong>
+      </p>
+
+      <nsfw-switch
+        class="flex flex--row flex--nowrap flex--center"
+        id="nsfw-switch-kinky"
+        v-model="$root.nsfw"
+        @change="$root.showWarning()"
+      />
+    </template>
   </prose>
 </template>
 
 <script>
 import Prose from "@/components/Prose.vue";
 import DataTable from "@/components/DataTable.vue";
+import QuickFacts from "@/components/QuickFacts.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 {
-  components: { Prose, DataTable },
+  components: { Prose, DataTable, QuickFacts, NsfwSwitch, NsfwWarning },
   mixins: [Sebin, Helper],
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+@import "@/scss/base.scss";
+
+ul {
+  &.col-2 {
+    columns: 2 auto;
+  }
+
+  &.col-3 {
+    columns: 3 auto;
+  }
+
+  &.col-4 {
+    columns: 4 auto;
+  }
+}
+</style>