refactor: migrate General view

src/views/GeneralView.vue

@@ -1,5 +1,63 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import {
+  firstName,
+  middleName,
+  lastName,
+  dateOfBirth,
+  gender,
+  orientation,
+  position,
+  height,
+  weight,
+  tailLength,
+  wingspan,
+  hobbies,
+  kinks,
+} from "@/sebin";
+import { dateFormat, getAge, toImperial, toLbs } from "@/helpers";
+import { isWarnKey, nsfwKey, showModalKey } from "@/keys";
+import type { Kink } from "@/interfaces";
+import DataTable from "@/components/DataTable.vue";
+import QuickFacts from "@/components/QuickFacts.vue";
+import RefToggle from "@/components/RefToggle.vue";
+import RefModal from "@/components/RefModal.vue";
+
+const generalHeadings = ["Key", "Value"];
+const generalData = [
+  ["Full Name", `${firstName} ${middleName} ${lastName} `],
+  [
+    "Date of Birth",
+    `${dateFormat.format(dateOfBirth)} (${getAge(dateOfBirth)})`,
+  ],
+  ["Sex/Gender", gender],
+  ["Height", `${height} cm (${toImperial(height)})`],
+  ["Weight", `${weight} kg (${toLbs(weight)} lbs)`],
+  ["Tail Length", `${tailLength / 100} m (${toImperial(tailLength)})`],
+  ["Wingspan", `${wingspan / 100} m (${toImperial(wingspan)})`],
+];
+
+const nsfwHeadings = ["Key", "Value"];
+const nsfwData = [
+  ["Orientation", orientation],
+  ["Position", position],
+];
+
+const kinksHeadings = ["Kink", "Receive", "Give"];
+const kinksData = kinks.map((kink: Kink): Array<string> => {
+  const receive = kink.receive ? "✅" : "🚫";
+  const give = kink.give ? "✅" : "🚫";
+
+  return [kink.name, receive, give];
+});
+
+const isNsfw = inject<boolean>(nsfwKey, false);
+const isWarn = inject<boolean>(isWarnKey, false);
+const showModal = inject<Function>(showModalKey, Function);
+</script>
+
 <template>
-  <nsfw-warning v-show="$root.isWarn">
+  <RefModal v-show="isWarn">
     <template #heading>
       ⚠️⚠️⚠️<br />
       Whoa, Nelly!
@@ -12,16 +70,18 @@
 
     <template #yes>Yes, show me the goods 👀</template>
     <template #no>NO, STAHP 😱</template>
-  </nsfw-warning>
+  </RefModal>
 
-  <prose>
-    <h2>General</h2>
+  <section>
+    <h1>{{ $route.name }}</h1>
 
-    <data-table :dataset="getSebinData.generic" />
+    <DataTable :headings="generalHeadings" :data="generalData"></DataTable>
+  </section>
 
-    <h3>Personality</h3>
+  <section>
+    <h2>Personality</h2>
 
-    <quick-facts>
+    <QuickFacts>
       <ul class="col-2">
         <li>warm-hearted</li>
         <li>caring</li>
@@ -32,7 +92,7 @@
         <li>open and honest about his feelings</li>
         <li>confrontative and foul-mouthed when provoked</li>
       </ul>
-    </quick-facts>
+    </QuickFacts>
 
     <p>
       Sebin is a warm-hearted guy who cares a lot about the well-being of his
@@ -68,16 +128,18 @@
       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>
+  </section>
 
-    <h3>Hobbies</h3>
+  <section>
+    <h2>Hobbies</h2>
 
-    <quick-facts>
+    <QuickFacts>
       <ul class="col-4">
         <li v-for="(hobby, idx) in hobbies" :key="idx">
           {{ hobby }}
         </li>
       </ul>
-    </quick-facts>
+    </QuickFacts>
 
     <p>
       Sebin is passionate about his hobbies. If he notices even the smallest
@@ -93,10 +155,12 @@
       eccentric in expressing his dismay of being disrupted, possibly losing a
       very important train of thought.
     </p>
+  </section>
 
-    <h3>Food &amp; Drink</h3>
+  <section>
+    <h2>Food &amp; Drink</h2>
 
-    <quick-facts>
+    <QuickFacts>
       <ul class="col-4">
         <li>sweets</li>
         <li>savory food</li>
@@ -111,7 +175,7 @@
         <li>beef</li>
         <li>spaghetti/pasta</li>
       </ul>
-    </quick-facts>
+    </QuickFacts>
 
     <p>
       Sebin's day starts with a strong cup of black coffee and sandwiches. He's
@@ -130,13 +194,15 @@
       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>
+  </section>
 
-    <template v-if="$root.nsfw">
-      <h3>Sexual Preferences</h3>
+  <section>
+    <template v-if="isNsfw">
+      <h2>Sexual Preferences</h2>
 
-      <data-table :dataset="getSebinData.preferences" />
+      <DataTable :headings="nsfwHeadings" :data="nsfwData" />
 
-      <quick-facts>
+      <QuickFacts>
         <ul class="col-2">
           <li>Supremely horny</li>
           <li>Confident, knows what he's got</li>
@@ -146,7 +212,7 @@
           <li>Likes to wear bottomless undies, esp. jockstraps</li>
           <li>Enjoys the attention from flaunting</li>
         </ul>
-      </quick-facts>
+      </QuickFacts>
 
       <p>
         But above all Sebin is a very naughty hornball. He knows what he's got
@@ -161,57 +227,33 @@
         where he wants it. After all he is well endowed enough to peddle it
         around.
       </p>
+
+      <DataTable class="kinks" :headings="kinksHeadings" :data="kinksData" />
     </template>
 
     <template v-else>
-      <h3>But, wait! There's more...</h3>
+      <h2>But, wait! There's more...</h2>
 
       <p>
         Let's... get... <strong><em>scandalous!</em></strong>
       </p>
 
       <p>
-        <nsfw-switch
-          id="nsfw-switch-kinky"
-          v-model="$root.nsfw"
-          @change="$root.showWarning()"
-        />
+        <RefToggle id="nsfw-switch-kinky" v-model="isNsfw" @click="showModal()">
+          <template #off>😇</template>
+          <template #on>😈</template>
+        </RefToggle>
       </p>
     </template>
-  </prose>
+  </section>
 </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, QuickFacts, NsfwSwitch, NsfwWarning },
-  mixins: [Sebin, Helper],
-};
-</script>
-
 <style lang="scss">
-@import "@/scss/_mixins.scss";
-
-ul {
-  @include mq-desktop {
-    &.col-2 {
-      columns: 2 auto;
-    }
-
-    &.col-3 {
-      columns: 3 auto;
-    }
-
-    &.col-4 {
-      columns: 4 auto;
+.kinks {
+  tbody {
+    td:nth-child(2),
+    td:nth-child(3) {
+      text-align: center;
     }
   }
 }