Refactored Sebin's data as Vue mixin

src/mixins/Sebin.js

@@ -0,0 +1,124 @@
+export default {
+  data() {
+    return {
+      firstName: "Sebin",
+      middleName: "Antario",
+      lastName: "Nyshkim",
+      dateOfBirth: new Date("1988-04-25"),
+      gender: "male",
+      height: 210, // cm
+      weight: 97, // kg
+      wingspan: 400, // cm
+      colors: {
+        hairPrimary: "#4b608f",
+        hairSecondary: "#6684c0",
+        eyes: "#31c215",
+        scalesPrimary: "#c64c35",
+        scalesSecondary: "#eda958",
+        eyebrows: "#eda958",
+        tailspikes: "#7f4539",
+        horns: "#413a3a",
+        claws: "#413a3a",
+        nipples: "#413a3a",
+        penis: "#413a3a"
+      },
+      penis: {
+        shape: "humanoid",
+        type: "grower",
+        special: "ridged",
+        size: 20, // cm
+        girth: 5 // cm
+      }
+    };
+  },
+
+  computed: {
+    fullName() {
+      return `${this.firstName} ${this.middleName} ${this.lastName}`;
+    },
+    birthdate() {
+      const locale = this.getClientLocale();
+
+      return this.dateOfBirth.toLocaleDateString(locale, {
+        year: "numeric",
+        month: "long",
+        day: "2-digit"
+      });
+    },
+    getSebinData() {
+      const generic = {
+        headers: ["Key", "Value"],
+        data: [
+          ["Full Name", this.fullName],
+          ["Date of Birth", this.birthdate],
+          ["Sex/Gender", this.gender],
+          ["Height", `${this.height} cm (${this.toImperial(this.height)})`],
+          ["Weight", `${this.weight} kg (${this.toLbs(this.weight)} lbs)`],
+          [
+            "Wingspan",
+            `${this.wingspan / 100} m (${this.toImperial(this.wingspan)})`
+          ]
+        ]
+      };
+
+      const colors = {
+        headers: ["Body Part", "Color Value (hex)", "Color"],
+        data: [
+          ["Primary Scale Color", this.colors.scalesPrimary],
+          ["Secondary Scale Color", this.colors.scalesSecondary],
+          ["Primary Hair Color", this.colors.hairPrimary],
+          ["Secondary Hair Color", this.colors.hairSecondary],
+          ["Eyes", this.colors.eyes],
+          ["Eyebrows", this.colors.eyebrows],
+          ["Horns / Claws / Nipples", this.colors.horns],
+          ["Tail Spikes", this.colors.tailspikes]
+        ]
+      };
+
+      const penis = {
+        headers: ["Key", "Value", "Color"],
+        data: [
+          ["Shape", this.penis.shape],
+          ["Type", this.penis.type],
+          ["Special Traits", this.penis.special],
+          ["Color", this.colors.penis],
+          ["Length", `${this.penis.size} cm (${this.toInch(this.penis.size)})`],
+          ["Girth", `${this.penis.girth} cm (${this.toInch(this.penis.girth)})`]
+        ]
+      };
+
+      return { generic, colors, penis };
+    }
+  },
+
+  methods: {
+    getClientLocale() {
+      if (navigator.language) {
+        return navigator.languages[0];
+      } else if (navigator.userLanguage) {
+        return navigator.userLanguage; // IE < 11
+      } else if (navigator.browserLanguage) {
+        return navigator.userLanguage;
+      } else if (navigator.systemLanguage) {
+        return navigator.systemLanguage;
+      }
+      // return navigator.language ? navigator.languages[0] : navigator.language;
+    },
+    toImperial(cm) {
+      const realFeet = (cm * 0.3937) / 12;
+      const feet = Math.floor(realFeet);
+      const inches = Math.round((realFeet - feet) * 12);
+
+      return `${feet}'${inches}"`;
+    },
+    toInch(cm) {
+      return `${Math.round(cm / 2.45)} in`;
+    },
+    toLbs(kg) {
+      const nearExact = kg / 0.45359237;
+      const lbs = Math.floor(nearExact);
+
+      return lbs;
+    }
+  }
+};