feat: Add skin tone generator.

Starciad · Jan 24, 2024 · 92aca4c · 92aca4c
1 parent 27add98
commit 92aca4c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -16,12 +16,16 @@
 
     <!-- Collections -->
     <script src="scripts/collections/names/EUANamesCollection.js" type="module"></script>
-    <script src="scripts/collections/OccupationsCollection.js" type="module"></script>
-    <script src="scripts/collections/CountriesCollection.js" type="module"></script>
-    <script src="scripts/collections/CivilStatusCollection.js" type="module"></script>
-    <script src="scripts/collections/BloodTypeCollection.js" type="module"></script>
-    <script src="scripts/collections/HeightCollection.js" type="module"></script>
-    <script src="scripts/collections/WeightCollection.js" type="module"></script>
+
+    <script src="scripts/collections/general/OccupationsCollection.js" type="module"></script>
+    <script src="scripts/collections/general/CountriesCollection.js" type="module"></script>
+    <script src="scripts/collections/general/CivilStatusCollection.js" type="module"></script>
+
+    <script src="scripts/collections/physical/BloodTypeCollection.js" type="module"></script>
+    <script src="scripts/collections/physical/HeightCollection.js" type="module"></script>
+    <script src="scripts/collections/physical/WeightCollection.js" type="module"></script>
+
+    <script src="scripts/collections/appearance/SkinToneCollection.js" type="module"></script>
 
     <!-- Core -->
     <script src="scripts/main.js" type="module" defer></script>
@@ -219,7 +223,7 @@ <h2 align="center">Spark your imagination by creating unique characters</h2>
                             <tbody>
                                 <tr>
                                     <td>Skin Tone</td>
-                                    <td id="cs-appearence-skin-tone">Empty</td>
+                                    <td id="cs-appearance-skin-tone">Empty</td>
                                 </tr>
                             </tbody>
                         </table>

diff --git a/scripts/collections/appearance/SkinToneCollection.js b/scripts/collections/appearance/SkinToneCollection.js
@@ -0,0 +1,16 @@
+import { random } from "../../math/random.js";
+
+export const SkinToneCollection = Object.freeze({
+    skinTones: [
+        "Light",
+        "Fair",
+        "Medium",
+        "Olive",
+        "Tan",
+        "Black"
+    ],
+
+    getRandomSkinTone: function () {
+        return random.getRandomArrayElement(this.skinTones);
+    },
+});
diff --git a/scripts/core/dataGenerator.js b/scripts/core/dataGenerator.js
@@ -7,6 +7,7 @@ import { OccupationsCollection } from "../collections/general/OccupationsCollect
 import { WeightCollection } from "../collections/physical/WeightCollection.js";
 import { random } from "../math/random.js";
 import { updateCharacterSheetTable } from "./pageUpdater.js";
+import { SkinToneCollection } from "../collections/appearance/SkinToneCollection.js";
 
 export function SCSGenerator(nameStyleType, sexType, ageRangeType) {
     // General
@@ -25,6 +26,9 @@ export function SCSGenerator(nameStyleType, sexType, ageRangeType) {
     let char_blood_type = getRandomBloodType();
     let char_rh_factor = getRandomRhFactor();
 
+    // Appearance
+    let char_appearance_skin_tone = getRandomSkinTone();
+
     updateCharacterSheetTable({
         // General
         firstName: char_fullname.firstName,
@@ -41,7 +45,10 @@ export function SCSGenerator(nameStyleType, sexType, ageRangeType) {
         height: char_height,
         weight: char_weight,
         bloodType: char_blood_type,
-        rhFactor: char_rh_factor
+        rhFactor: char_rh_factor,
+
+        // Appearance
+        skinTone: char_appearance_skin_tone,
     });
 }
 
@@ -154,4 +161,10 @@ function getRandomBloodType() {
 function getRandomRhFactor() {
     return BloodTypeCollection.getRandomRhFactor();
 }
+//#endregion
+
+//#region Appearance
+function getRandomSkinTone() {
+    return SkinToneCollection.getRandomSkinTone();
+}
 //#endregion
diff --git a/scripts/core/pageUpdater.js b/scripts/core/pageUpdater.js
@@ -14,6 +14,10 @@ export function updateCharacterSheetTable(characterInfos) {
     document.querySelector("#cs-physical-height").innerHTML = characterInfos.height;
     document.querySelector("#cs-physical-weight").innerHTML = characterInfos.weight;
     document.querySelector("#cs-physical-blood-type").innerHTML = characterInfos.bloodType + characterInfos.rhFactor;
+
+    // Appearance
+    document.querySelector("#cs-appearance-skin-tone").innerHTML = characterInfos.skinTone;
+
 }
 
 function getFormattedDate(date) {