Multi-Color support (#3)

Also includes a revamp of the stored data structure, skeleton loading (not fully fledged), removal of the dependency on data-driven-forms to allow for color fields (yay good UX!!!)
WalkQuackBack · Apr 3, 2024 · 8bc0647 · 8bc0647
1 parent 32687f4
commit 8bc0647
Show file tree

Hide file tree

Showing 65 changed files with 891 additions and 465 deletions.
diff --git a/index.html b/index.html
@@ -8,8 +8,11 @@
     <title>B2 Fish Customizer</title>
   </head>
   <body>
-    <noscript>Enable JavaScript to use this application</noscript>
-    <div id="root"></div>
+    <div id="root">
+      <div id="side_panel_skeleton">
+        <noscript>Enable JavaScript to use this application</noscript>
+      </div>
+    </div>
     <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,8 +13,6 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.0",
-    "@data-driven-forms/ant-component-mapper": "^3.22.3",
-    "@data-driven-forms/react-form-renderer": "^3.22.3",
     "@reduxjs/toolkit": "^2.1.0",
     "antd": "^5.14.0",
     "react": "^18.2.0",

diff --git a/...etic_images_postprocess/accessory/b2.webp → ...ges_postprocess/accessory/b2 primary.webp b/...etic_images_postprocess/accessory/b2.webp → ...ges_postprocess/accessory/b2 primary.webp
diff --git a/...c_images_postprocess/accessory/beard.webp → ..._postprocess/accessory/beard primary.webp b/...c_images_postprocess/accessory/beard.webp → ..._postprocess/accessory/beard primary.webp
diff --git a/...images_postprocess/accessory/bow_tie.webp → ...ostprocess/accessory/bow_tie primary.webp b/...images_postprocess/accessory/bow_tie.webp → ...ostprocess/accessory/bow_tie primary.webp
diff --git a/..._images_postprocess/accessory/goatee.webp → ...postprocess/accessory/goatee primary.webp b/..._images_postprocess/accessory/goatee.webp → ...postprocess/accessory/goatee primary.webp
diff --git a/...ages_postprocess/accessory/handlebar.webp → ...tprocess/accessory/handlebar primary.webp b/...ages_postprocess/accessory/handlebar.webp → ...tprocess/accessory/handlebar primary.webp
diff --git a/...ages_postprocess/accessory/moustache.webp → ...tprocess/accessory/moustache primary.webp b/...ages_postprocess/accessory/moustache.webp → ...tprocess/accessory/moustache primary.webp
diff --git a/...ic_images_postprocess/effect/bubbles.webp → ...s_postprocess/effect/bubbles nocolor.webp b/...ic_images_postprocess/effect/bubbles.webp → ...s_postprocess/effect/bubbles nocolor.webp
diff --git a/...metic_images_postprocess/effect/fire.webp → ...ages_postprocess/effect/fire nocolor.webp b/...metic_images_postprocess/effect/fire.webp → ...ages_postprocess/effect/fire nocolor.webp
diff --git a/...images_postprocess/effect/green_fire.webp → ...ostprocess/effect/green_fire nocolor.webp b/...images_postprocess/effect/green_fire.webp → ...ostprocess/effect/green_fire nocolor.webp
diff --git a/...etic_images_postprocess/effect/storm.webp → ...ges_postprocess/effect/storm nocolor.webp b/...etic_images_postprocess/effect/storm.webp → ...ges_postprocess/effect/storm nocolor.webp
diff --git a/...images_postprocess/eyewear/eyelashes.webp → ...ostprocess/eyewear/eyelashes nocolor.webp b/...images_postprocess/eyewear/eyelashes.webp → ...ostprocess/eyewear/eyelashes nocolor.webp
diff --git a/...c_images_postprocess/eyewear/glasses.webp → ..._postprocess/eyewear/glasses primary.webp b/...c_images_postprocess/eyewear/glasses.webp → ..._postprocess/eyewear/glasses primary.webp
diff --git a/...c_images_postprocess/eyewear/goggles.webp → ..._postprocess/eyewear/goggles primary.webp b/...c_images_postprocess/eyewear/goggles.webp → ..._postprocess/eyewear/goggles primary.webp
diff --git a/public/cosmetic_images_postprocess/eyewear/monocle primary.webp b/public/cosmetic_images_postprocess/eyewear/monocle primary.webp
diff --git a/public/cosmetic_images_postprocess/eyewear/monocle secondary.webp b/public/cosmetic_images_postprocess/eyewear/monocle secondary.webp
diff --git a/public/cosmetic_images_postprocess/eyewear/monocle.webp b/public/cosmetic_images_postprocess/eyewear/monocle.webp
diff --git a/...metic_images_postprocess/fin/default.webp → ...ages_postprocess/fin/default primary.webp b/...metic_images_postprocess/fin/default.webp → ...ages_postprocess/fin/default primary.webp
diff --git a/...osmetic_images_postprocess/fin/gills.webp → ...images_postprocess/fin/gills primary.webp b/...osmetic_images_postprocess/fin/gills.webp → ...images_postprocess/fin/gills primary.webp
diff --git a/...osmetic_images_postprocess/fin/jewel.webp → ...images_postprocess/fin/jewel primary.webp b/...osmetic_images_postprocess/fin/jewel.webp → ...images_postprocess/fin/jewel primary.webp
diff --git a/...etic_images_postprocess/hat/back_cap.webp → ...ges_postprocess/hat/back_cap primary.webp b/...etic_images_postprocess/hat/back_cap.webp → ...ges_postprocess/hat/back_cap primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/banana primary.webp b/public/cosmetic_images_postprocess/hat/banana primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/banana secondary.webp b/public/cosmetic_images_postprocess/hat/banana secondary.webp
diff --git a/public/cosmetic_images_postprocess/hat/beach_hat primary.webp b/public/cosmetic_images_postprocess/hat/beach_hat primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/beach_hat secondary.webp b/public/cosmetic_images_postprocess/hat/beach_hat secondary.webp
diff --git a/...smetic_images_postprocess/hat/beanie.webp → ...mages_postprocess/hat/beanie primary.webp b/...smetic_images_postprocess/hat/beanie.webp → ...mages_postprocess/hat/beanie primary.webp
diff --git a/...osmetic_images_postprocess/hat/beret.webp → ...images_postprocess/hat/beret primary.webp b/...osmetic_images_postprocess/hat/beret.webp → ...images_postprocess/hat/beret primary.webp
diff --git a/...ic_images_postprocess/hat/bucket_hat.webp → ...s_postprocess/hat/bucket_hat primary.webp b/...ic_images_postprocess/hat/bucket_hat.webp → ...s_postprocess/hat/bucket_hat primary.webp
diff --git a/.../cosmetic_images_postprocess/hat/cap.webp → ...c_images_postprocess/hat/cap primary.webp b/.../cosmetic_images_postprocess/hat/cap.webp → ...c_images_postprocess/hat/cap primary.webp
diff --git a/...etic_images_postprocess/hat/chef_hat.webp → ...ges_postprocess/hat/chef_hat primary.webp b/...etic_images_postprocess/hat/chef_hat.webp → ...ges_postprocess/hat/chef_hat primary.webp
diff --git a/...osmetic_images_postprocess/hat/crown.webp → ...images_postprocess/hat/crown primary.webp b/...osmetic_images_postprocess/hat/crown.webp → ...images_postprocess/hat/crown primary.webp
diff --git a/...etic_images_postprocess/hat/hard_hat.webp → ...ges_postprocess/hat/hard_hat primary.webp b/...etic_images_postprocess/hat/hard_hat.webp → ...ges_postprocess/hat/hard_hat primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/jameson primary.webp b/public/cosmetic_images_postprocess/hat/jameson primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/jameson secondary.webp b/public/cosmetic_images_postprocess/hat/jameson secondary.webp
diff --git a/public/cosmetic_images_postprocess/hat/party_hat primary.webp b/public/cosmetic_images_postprocess/hat/party_hat primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/party_hat secondary.webp b/public/cosmetic_images_postprocess/hat/party_hat secondary.webp
diff --git a/...images_postprocess/hat/propeller_hat.webp → ...ostprocess/hat/propeller_hat nocolor.webp b/...images_postprocess/hat/propeller_hat.webp → ...ostprocess/hat/propeller_hat nocolor.webp
diff --git a/...metic_images_postprocess/hat/soldier.webp → ...ages_postprocess/hat/soldier primary.webp b/...metic_images_postprocess/hat/soldier.webp → ...ages_postprocess/hat/soldier primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/top_hat primary.webp b/public/cosmetic_images_postprocess/hat/top_hat primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/top_hat secondary.webp b/public/cosmetic_images_postprocess/hat/top_hat secondary.webp
diff --git a/public/cosmetic_images_postprocess/hat/viking primary.webp b/public/cosmetic_images_postprocess/hat/viking primary.webp
diff --git a/public/cosmetic_images_postprocess/hat/viking secondary.webp b/public/cosmetic_images_postprocess/hat/viking secondary.webp
diff --git a/public/cosmetic_images_postprocess/hat/viking tertiary.webp b/public/cosmetic_images_postprocess/hat/viking tertiary.webp
diff --git a/...osmetic_images_postprocess/hat/weezy.webp → ...images_postprocess/hat/weezy primary.webp b/...osmetic_images_postprocess/hat/weezy.webp → ...images_postprocess/hat/weezy primary.webp
diff --git a/...tic_images_postprocess/mouth/default.webp → ...es_postprocess/mouth/default nocolor.webp b/...tic_images_postprocess/mouth/default.webp → ...es_postprocess/mouth/default nocolor.webp
diff --git a/...ic_images_postprocess/mouth/lipstick.webp → ...s_postprocess/mouth/lipstick nocolor.webp b/...ic_images_postprocess/mouth/lipstick.webp → ...s_postprocess/mouth/lipstick nocolor.webp
diff --git a/...metic_images_postprocess/mouth/morty.webp → ...ages_postprocess/mouth/morty nocolor.webp b/...metic_images_postprocess/mouth/morty.webp → ...ages_postprocess/mouth/morty nocolor.webp
diff --git a/...metic_images_postprocess/mouth/small.webp → ...ages_postprocess/mouth/small nocolor.webp b/...metic_images_postprocess/mouth/small.webp → ...ages_postprocess/mouth/small nocolor.webp
diff --git a/src/App.css b/src/App.css
@@ -16,26 +16,38 @@
   width: 60%;
 }
 
-.hexColorApplet {
-  position: fixed;
-  display: flex;
-  z-index: 10;
-  padding: 6px;
-  margin: 24px;
-  border-radius: 6px;
-
-  left: 0;
-  bottom: 0;
-  background-color: var(--light-1);
-  box-shadow: 0 0 12px 2px rgba(0 0 0 / 0.1);
-}
-
 #changeThemeBtn {
   position: absolute;
   top: 12px;
   right: 12px;
 }
 
+.formElementContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
+}
+
+.formElementContainer > label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: 32px;
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 14px;
+}
+
+.colorContainer > label {
+  height: 24px;
+}
+
+.colorContainer {
+  background-color: var(--light-1);
+  padding: 8px;
+  border-radius: 6px;
+}
+
 /* Small devices (portrait tablets and large phones, 768px and down) */
 @media only screen and (max-width: 768px) {
   #root {
@@ -57,10 +69,20 @@
   }
 }
 
-body.dark .hexColorApplet {
+body.dark #side_panel {
+  background-color: var(--dark-1);
+}
+
+body.dark .formElementContainer > label {
+  color: #ffffff;
+}
+
+body.dark .colorContainer {
   background-color: var(--dark-2);
 }
 
-body.dark #side_panel {
-  background-color: var(--dark-1);
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -20,7 +20,6 @@ function App() {
           theme.darkAlgorithm,
       }}
     >
-      <HexColorApplet />
       <div id="side_panel">
         <CustomizationPanel />
       </div>

diff --git a/src/app/features/fishData/fishDataSlice.tsx b/src/app/features/fishData/fishDataSlice.tsx
@@ -1,34 +1,54 @@
 import { createSlice } from "@reduxjs/toolkit";
-
+import customizationData from "../../../customizationData";
 export const fishDataSlice = createSlice({
   name: "fishData",
   initialState: {
-    bodyColor: "#FF0000",
-    hatColor: "#fffd16",
-    hat: "none",
-    accessoryColor: "#fffd16",
-    accessory: "none",
-    eyewearColor: "#fffd16",
-    eyewear: "none",
-    mouth: "default",
-    finColor: "#fffd16",
-    fin: "none",
-    effect: "none",
+    accessory: customizationData.accessory.defaultValue,
+    accessoryColorPrimary: customizationData.accessoryColorPrimary.defaultValue,
+    accessoryColorSecondary:
+      customizationData.accessoryColorSecondary.defaultValue,
+    accessoryColorTertiary:
+      customizationData.accessoryColorTertiary.defaultValue,
+    bodyColor: customizationData.bodyColor.defaultValue,
+    effect: customizationData.effect.defaultValue,
+    eyewear: customizationData.eyewear.defaultValue,
+    eyewearColorPrimary: customizationData.eyewearColorPrimary.defaultValue,
+    eyewearColorSecondary: customizationData.eyewearColorSecondary.defaultValue,
+    eyewearColorTertiary: customizationData.eyewearColorTertiary.defaultValue,
+    fin: customizationData.fin.defaultValue,
+    finColorPrimary: customizationData.finColorPrimary.defaultValue,
+    finColorSecondary: customizationData.finColorSecondary.defaultValue,
+    finColorTertiary: customizationData.finColorTertiary.defaultValue,
+    hat: customizationData.hat.defaultValue,
+    hatColorPrimary: customizationData.hatColorPrimary.defaultValue,
+    hatColorSecondary: customizationData.hatColorSecondary.defaultValue,
+    hatColorTertiary: customizationData.hatColorTertiary.defaultValue,
+    mouth: customizationData.mouth.defaultValue,
   },
   reducers: {
     updateData: (state, action) => {
       const payload = action.payload;
-      state.bodyColor = payload.bodyColor;
-      state.hatColor = payload.hatColor;
-      state.hat = payload.hat;
-      state.accessoryColor = payload.accessoryColor;
-      state.accessory = payload.accessory;
-      state.eyewearColor = payload.eyewearColor;
-      state.eyewear = payload.eyewear;
-      state.mouth = payload.mouth;
-      state.finColor = payload.finColor;
-      state.fin = payload.fin;
-      state.effect = payload.effect;
+      const identifier:
+        | "accessory"
+        | "accessoryColorPrimary"
+        | "accessoryColorSecondary"
+        | "accessoryColorTertiary"
+        | "bodyColor"
+        | "effect"
+        | "eyewear"
+        | "eyewearColorPrimary"
+        | "eyewearColorSecondary"
+        | "eyewearColorTertiary"
+        | "fin"
+        | "finColorPrimary"
+        | "finColorSecondary"
+        | "finColorTertiary"
+        | "hat"
+        | "hatColorPrimary"
+        | "hatColorSecondary"
+        | "hatColorTertiary"
+        | "mouth" = payload.identifier;
+      state[identifier] = payload.value;
     },
   },
 });