UI improvements, hover effects, mobile fixes, brightened icons, added…

… missing faceplates, cyan fix, etc. etc. etc.
ZainGS · Apr 14, 2024 · 876226e · 876226e
1 parent be4a78c
commit 876226e
Show file tree

Hide file tree

Showing 26 changed files with 259 additions and 123 deletions.
diff --git a/ClientApp/src/app/home/home.component.html b/ClientApp/src/app/home/home.component.html
diff --git a/ClientApp/src/app/home/home.component.scss b/ClientApp/src/app/home/home.component.scss
@@ -150,27 +150,28 @@ background-color: transparent;
   max-height: 8vw;
   width: 8vw;
   height: 8vw;
+  min-width: fit-content;
+  min-height: fit-content;
   transform: scale(1.2);
   padding: -100px;
   background-color: transparent;
   border: 5px solid rgba(255,255,255,.05);
   border-radius: 10px;
-  backdrop-filter: blur(10px);
   position: relative;
   overflow: visible;
+
 }
 
 .reset-button {
   z-index: 100;
   max-width: 8vw;
-  max-height: 8vw;
-  width: 8vw;
-  height: 8vw;
+  min-width: fit-content;
+  min-height: fit-content;
   transform: scale(1.2);
   background-color: transparent;
   border: 5px solid rgba(255,255,255,.05);
   border-radius: 10px;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(30px);
   margin-left: 3vw;
 }
 
@@ -254,9 +255,9 @@ position: absolute;
 top: 40%;
 left: 20px;
 z-index: 100;
-max-width: 4px;
+max-width: 1.5vh;
 transform: scale(.6);
-min-height: 70px;
+min-height: 10vh;
 border-radius: 10px;
 border-width: 0px;
 background-color: white;
@@ -358,6 +359,7 @@ right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
+filter: brightness(.95) blur(8px);
 }
 
 .title-container {
@@ -434,17 +436,104 @@ max-width: 100%;
 margin-bottom: -16px;
 }
 
+mat-expansion-panel-header:hover {
+    background-color: black !important;
+    color: deeppink !important;
+}
+
+mat-expansion-panel-header:hover mat-panel-title {
+  background-color: black !important;
+  color: deeppink !important;
+}
+
+.tool-image {
+  opacity: .9;
+  transform-origin: center;
+}
+
+.reset-button:hover .tool-image {
+  opacity: 1;
+  transform-origin: center;
+}
+
+.randomizer-button:hover .tool-image {
+  opacity: 1;
+  transform-origin: center;
+}
+
+.cycle-container {
+  position: absolute;
+  max-width: 60px;
+  max-height: 60px;
+  width: 60px;
+  height: 60px;
+  margin-left: 5vh !important;
+  margin-top: -5px;
+  transform: scale(.8);
+  background-color: rgba(255,255,255,.06);
+  border: 4px solid rgba(255,255,255,.01);
+  border-radius: 50px;
+}
+
+.cycle-image {
+  transform: scale(1);
+  transform-origin: center;
+  opacity: .9;
+  filter: sepia(1) hue-rotate(220deg) saturate(50) brightness(8);
+}
+
+.cycle-container:hover .cycle-image {
+  transform: scale(1);
+  transform-origin: center;
+  opacity: 1;
+  filter: sepia(1) hue-rotate(220deg) saturate(50) brightness(8);
+}
+
+.modern-dpad-image {
+  margin-top: 14px;
+  margin-left: 2px;
+  opacity: .8;
+}
+
+.classic-dpad-image {
+  margin-bottom: 12px;
+  margin-left: 2px;
+  opacity: .8;
+}
+
+.toggle-image {
+  transform: rotate(-90deg) scale(1);
+  opacity: .7;
+}
+
+.toggle-image:hover {
+  opacity: 1;
+}
+
 .mat-mdc-slider.mat-accent {
---mdc-slider-handle-color: rgba(175, 195, 201,0);
---mdc-slider-focus-handle-color: rgba(255,255,255,0);
---mdc-slider-focus-handle--shadow-color: rgba(255,255,255,0);
---mdc-slider-active-track-color: rgba(255,255,255,.3);
---mdc-slider-inactive-track-color: rgba(255,255,255,.5);
---mdc-slider-inactive-track-height: 16px;
---mdc-slider-inactive-track-shape: 8px;
---mdc-slider-active-track-height: 8px;
---mdc-slider-handle-height: 8px;
---mdc-slider-handle-width: 8px;
+  --mdc-slider-handle-color: rgba(175, 195, 201,0);
+  --mdc-slider-focus-handle-color: rgba(255,255,255,0);
+  --mdc-slider-focus-handle--shadow-color: rgba(255,255,255,0);
+  --mdc-slider-active-track-color: rgba(255,255,255,.7);
+  --mdc-slider-inactive-track-color: rgba(255,255,255,.5);
+  --mdc-slider-inactive-track-height: 16px;
+  --mdc-slider-inactive-track-shape: 8px;
+  --mdc-slider-active-track-height: 8px;
+  --mdc-slider-handle-height: 8px;
+  --mdc-slider-handle-width: 8px;
+}
+
+.mat-mdc-slider.mat-accent:hover {
+  --mdc-slider-handle-color: rgba(175, 195, 201,0);
+  --mdc-slider-focus-handle-color: rgba(255,255,255,0);
+  --mdc-slider-focus-handle--shadow-color: rgba(255,255,255,0);
+  --mdc-slider-active-track-color: rgba(255,255,255,1);
+  --mdc-slider-inactive-track-color: rgba(255,255,255,.5);
+  --mdc-slider-inactive-track-height: 16px;
+  --mdc-slider-inactive-track-shape: 8px;
+  --mdc-slider-active-track-height: 8px;
+  --mdc-slider-handle-height: 8px;
+  --mdc-slider-handle-width: 8px;
 }
 
 .mat-ripple .mat-mdc-focus-indicator .mat-ripple-element .mat-mdc-slider-active-ripple {
@@ -945,7 +1034,7 @@ sub-title-container-mobile {
 .selection-container-mobile {
     display: inline-flex;
     gap: 3vw;
-    transform: scale(2.25);
+    transform: scale(2);
     margin-top: 4vh;
 }
 
@@ -968,8 +1057,8 @@ sub-title-container-mobile {
   backdrop-filter: blur(10px);
   min-width: 8vw;
   min-height: 8vw;
-  max-width: 8vw;
-  max-height: 8vw;
+  max-width: 10vw;
+  max-height: 10vw;
   width: 100%;
 }
 
@@ -988,7 +1077,7 @@ sub-title-container-mobile {
   width: 100%; /* Responsive width */
   max-width: 600px; /* Optional: maximum width */
   margin: auto; /* Centers the container */
-  transform: scale(2.5); /* Adjust scale for mobile, start with scale(1) and adjust as needed */
+  transform: scale(2); /* Adjust scale for mobile, start with scale(1) and adjust as needed */
   pointer-events: none;
 }
 
@@ -1185,39 +1274,39 @@ sub-title-container-mobile {
     font-weight: 100;
     border: none;
     background-color: transparent;
+    }
+
+    .randomizer-button {
+      z-index: 100;
+      max-width: 5vw;
+      max-height: 5vw;
+      width: 5vw;
+      height: 5vw;
+      transform: scale(1.2);
+      padding: -100px;
+      background-color: transparent;
+      border: 5px solid rgba(255,255,255,.05);
+      border-radius: 10px;
+      backdrop-filter: blur(10px);
+      position: relative;
+      overflow: visible;
+    }
+
+    .reset-button {
+      z-index: 100;
+      max-width: 5vw;
+      max-height: 5vw;
+      min-width: fit-content !important;
+      min-height: fit-content !important;
+      transform: scale(1.2);
+      background-color: transparent;
+      border: 5px solid rgba(255,255,255,.05);
+      border-radius: 10px;
+      backdrop-filter: blur(10px);
+      margin-left: 3vw;
+    }
   }
 
-  .randomizer-button {
-    z-index: 100;
-    max-width: 5vw;
-    max-height: 5vw;
-    width: 5vw;
-    height: 5vw;
-    transform: scale(1.2);
-    padding: -100px;
-    background-color: transparent;
-    border: 5px solid rgba(255,255,255,.05);
-    border-radius: 10px;
-    backdrop-filter: blur(10px);
-    position: relative;
-    overflow: visible;
-  }
-
-  .reset-button {
-    z-index: 100;
-    max-width: 5vw;
-    max-height: 5vw;
-    width: 5vw;
-    height: 5vw;
-    transform: scale(1.2);
-    background-color: transparent;
-    border: 5px solid rgba(255,255,255,.05);
-    border-radius: 10px;
-    backdrop-filter: blur(10px);
-    margin-left: 3vw;
-  }
-}
-
 @media (max-width: 1100px) and (max-height: 430px) {
   .submit-box {
     position: relative;
@@ -1334,6 +1423,7 @@ sub-title-container-mobile {
   }
 }
 
+
 /* Base styles - assume landscape by default */
 .mobile-container {
   display: none; /* Hide mobile-container by default */

diff --git a/ClientApp/src/app/home/home.component.ts b/ClientApp/src/app/home/home.component.ts
@@ -88,7 +88,10 @@ export class HomeComponent {
     'Tiara Teal': '#08ffb1',
     'Toxic Waste': '#00ff1a',
     'Electro City': '#a30036',
-    'Retro Shapes': '#d9d9d9'
+    'Retro Shapes': '#d9d9d9',
+    'Liquid Metal': '#ededed',
+    'Lavender Haze': '#efe0ff',
+    'Solar Orbit': '#426CA6'
   };
 
   // For Sidenav and Parts

diff --git a/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.html b/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.html
@@ -12,7 +12,7 @@ <h4>
     <div class="part-container">
       <img class="part-image" src="assets/candycon_controller.png" style="margin-top: 5px !important; margin-bottom: 35px !important; margin-left: 20px !important; width: 150px !important; max-width: 150px !important" />
       <div class="right-align">
-        <a href="{{faceplateData!.productUrl}}" target="_blank"><button class="view-button">PURCHASE BASE UNIT</button></a>
+        <a href="https://www.gamestop.com/gaming-accessories/controllers/nintendo-switch/products/candy-con-wireless-base-controller/402221.html" target="_blank"><button class="view-button">PURCHASE BASE UNIT</button></a>
       </div>
     </div>
   </div>

diff --git a/ClientApp/src/app/models/candycon-faceplate/candycon-faceplates.data.ts b/ClientApp/src/app/models/candycon-faceplate/candycon-faceplates.data.ts
@@ -3,7 +3,6 @@ import { CandyconFaceplate } from './candycon-faceplate.model';
 
 var baseUrl = 'https://www.gamestop.com/gaming-accessories/skins/nintendo-switch/products/candy-con-face-plate--';
 export const FACEPLATES: CandyconFaceplate[] = [
-
   {
     id: -1,
     UPC: 840305903848,
@@ -36,6 +35,22 @@ export const FACEPLATES: CandyconFaceplate[] = [
     productHeight: 5.31,
     productWeight: 0.33
   },
+  {
+    id: -6,
+    UPC: 840305903831,
+    brandName: 'CANDY CON',
+    vendorPartNumber: '24VG-GSPL-CC-Combo-OceanMirage',
+    name: 'CANDY CON Faceplate',
+    description: 'Welcome to CANDY CON, the newest line in customizable controllers. Grab your BASE Customizable Controller, Pick D-Pads, Thumb Sticks, and a Face Plate and create your own unique Controller. Craft your CANDY CON masterpiece and show off your incredible combos in style. The FACE PLATE comes ready to add to your new CANDY CON Controller, over 10 colors to choose from to easily mix and match. CREATE. PLAY. REPEAT Mix with CANDY CON BASE UNIT, sold separately',
+    imageUrls: ['assets/products/faceplate_oceanmirage.png'],
+    productUrl: 'https://www.gamestop.com/gaming-accessories/controllers/nintendo-switch/products/candy-con-combo-pack-controller-kit---ocean-mirage/402224.html',
+    partColor: 'Ocean Mirage',
+    price: 14.99,
+    productLength: 6.89,
+    productWidth: 1.38,
+    productHeight: 5.31,
+    productWeight: 0.33
+  },
   {
     id: 1,
     UPC: 840305904548,
@@ -196,4 +211,52 @@ export const FACEPLATES: CandyconFaceplate[] = [
     productHeight: 6.89,
     productWeight: 	0.18
   },
+  {
+    id: -5,
+    UPC: 840305903817,
+    brandName: 'CANDY CON',
+    vendorPartNumber: '24VG-GSPL-CC-PRP-LavendarHaze',
+    name: 'CANDY CON Faceplate',
+    description: 'Welcome to CANDY CON, the newest line in customizable controllers. Grab your BASE Customizable Controller, Pick D-Pads, Thumb Sticks, and a Face Plate and create your own unique Controller. Craft your CANDY CON masterpiece and show off your incredible combos in style. The FACE PLATE comes ready to add to your new CANDY CON Controller, over 10 colors to choose from to easily mix and match. CREATE. PLAY. REPEAT Mix with CANDY CON BASE UNIT, sold separately',
+    imageUrls: ['assets/products/faceplate_lavenderhaze.png'],
+    productUrl: 'https://www.gamestop.com/gaming-accessories/controllers/nintendo-switch/products/candy-con-player-ready-pack-controller---lavendar-haze/402222.html',
+    partColor: 'Lavender Haze',
+    price: 49.99,
+    productLength: 6.89,
+    productWidth: 2.95,
+    productHeight: 5.31,
+    productWeight: 0.66
+  },
+  {
+    id: -3,
+    UPC: 840305903848,
+    brandName: 'CANDY CON',
+    vendorPartNumber: '24VG-GSPL-CC-PRP-SolarOrbit',
+    name: 'CANDY CON Faceplate',
+    description: 'Welcome to CANDY CON, the newest line in customizable controllers. Grab your BASE Customizable Controller, Pick D-Pads, Thumb Sticks, and a Face Plate and create your own unique Controller. Craft your CANDY CON masterpiece and show off your incredible combos in style. The FACE PLATE comes ready to add to your new CANDY CON Controller, over 10 colors to choose from to easily mix and match. CREATE. PLAY. REPEAT Mix with CANDY CON BASE UNIT, sold separately',
+    imageUrls: ['assets/products/faceplate_solarorbit.png'],
+    productUrl: 'https://www.gamestop.com/gaming-accessories/controllers/nintendo-switch/products/candy-con-player-ready-pack-controller---solar-orbit/402223.html',
+    partColor: 'Solar Orbit',
+    price: 49.99,
+    productLength: 6.89,
+    productWidth: 2.95,
+    productHeight: 5.31,
+    productWeight: 0.66
+  },
+  {
+    id: -4,
+    UPC: 840305904593,
+    brandName: 'CANDY CON',
+    vendorPartNumber: '24VG-GSPL-CC-PRP-LiquidMetal',
+    name: 'CANDY CON Faceplate',
+    description: 'Welcome to CANDY CON, the newest line in customizable controllers. Grab your BASE Customizable Controller, Pick D-Pads, Thumb Sticks, and a Face Plate and create your own unique Controller. Craft your CANDY CON masterpiece and show off your incredible combos in style. The FACE PLATE comes ready to add to your new CANDY CON Controller, over 10 colors to choose from to easily mix and match. CREATE. PLAY. REPEAT Mix with CANDY CON BASE UNIT, sold separately',
+    imageUrls: ['assets/products/faceplate_liquidmetal.png'],
+    productUrl: 'https://www.gamestop.com/gaming-accessories/controllers/nintendo-switch/products/candy-con-player-ready-pack-controller---liquid-metal/402253.html',
+    partColor: 'Liquid Metal',
+    price: 49.99,
+    productLength: 6.89,
+    productWidth: 2.95,
+    productHeight: 5.31,
+    productWeight: 0.66
+  },
 ];