From 876226e74aef9d07bd03bb494a1613c6bc8b875b Mon Sep 17 00:00:00 2001 From: ZainGS Date: Sun, 14 Apr 2024 04:01:06 -0500 Subject: [PATCH] UI improvements, hover effects, mobile fixes, brightened icons, added missing faceplates, cyan fix, etc. etc. etc. --- ClientApp/src/app/home/home.component.html | 54 ++--- ClientApp/src/app/home/home.component.scss | 194 +++++++++++++----- ClientApp/src/app/home/home.component.ts | 5 +- .../lockin-dialog.component.html | 2 +- .../candycon-faceplates.data.ts | 65 +++++- .../src/app/nav-menu/nav-menu.component.html | 46 +---- ClientApp/src/app/theme.scss | 15 +- ClientApp/src/assets/bomb.svg | 1 - ClientApp/src/assets/lab_icon.kra | Bin 77004 -> 0 bytes .../products/faceplate_lavenderhaze.png | Bin 0 -> 202066 bytes .../assets/products/faceplate_liquidmetal.png | Bin 0 -> 211449 bytes .../assets/products/faceplate_oceanmirage.png | Bin 0 -> 199100 bytes .../assets/products/faceplate_solarorbit.png | Bin 0 -> 202480 bytes .../products/old/thumbsticks_arcticwhite.png | Bin 184815 -> 0 bytes .../products/old/thumbsticks_boltyellow.png | Bin 257577 -> 0 bytes .../old/thumbsticks_chillired111111.png | Bin 235223 -> 0 bytes .../products/old/thumbsticks_cyanblast.png | Bin 257360 -> 0 bytes .../products/old/thumbsticks_lemonburst.png | Bin 261738 -> 0 bytes .../old/thumbsticks_midnightpurple.png | Bin 239702 -> 0 bytes .../products/old/thumbsticks_oceanmirage.png | Bin 227879 -> 0 bytes .../products/old/thumbsticks_onyxblack.png | Bin 166367 -> 0 bytes .../products/old/thumbsticks_orangecrush.png | Bin 252465 -> 0 bytes .../products/old/thumbsticks_princesspink.png | Bin 243870 -> 0 bytes .../products/old/thumbsticks_tiarateal.png | Bin 267902 -> 0 bytes .../products/old/thumbsticks_toxicwaste.png | Bin 256153 -> 0 bytes .../assets/products/thumbsticks_cyanblast.png | Bin 115680 -> 141677 bytes 26 files changed, 259 insertions(+), 123 deletions(-) delete mode 100644 ClientApp/src/assets/bomb.svg delete mode 100644 ClientApp/src/assets/lab_icon.kra create mode 100644 ClientApp/src/assets/products/faceplate_lavenderhaze.png create mode 100644 ClientApp/src/assets/products/faceplate_liquidmetal.png create mode 100644 ClientApp/src/assets/products/faceplate_oceanmirage.png create mode 100644 ClientApp/src/assets/products/faceplate_solarorbit.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_arcticwhite.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_boltyellow.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_chillired111111.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_cyanblast.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_lemonburst.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_midnightpurple.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_oceanmirage.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_onyxblack.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_orangecrush.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_princesspink.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_tiarateal.png delete mode 100644 ClientApp/src/assets/products/old/thumbsticks_toxicwaste.png diff --git a/ClientApp/src/app/home/home.component.html b/ClientApp/src/app/home/home.component.html index 630e332..efd99a0 100644 --- a/ClientApp/src/app/home/home.component.html +++ b/ClientApp/src/app/home/home.component.html @@ -86,6 +86,7 @@
SELECT YOUR LOADOUT
style="display: flex; align-items: center; flex-wrap: nowrap; width: 100%; border-radius: 0px; border-left: 2px solid; justify-content: flex-start;" [ngStyle]="{'background-color' : product.id == selectedFaceplate?.id ? '#121212' : '#212121', 'border-left-color' : colorMapping[product.partColor]}" + class="sidenav-button" mat-button mat-stroked-button (mouseenter)='mouseEnterProduct(product)' (mouseleave)='mouseLeaveProduct(product)' @@ -96,6 +97,7 @@
SELECT YOUR LOADOUT
style="display: flex; align-items: center; flex-wrap: nowrap; width: 100%; border-radius: 0px; border-left: 2px solid; justify-content: flex-start;" [ngStyle]="{'background-color' : product.id == selectedLeftThumbstick?.id ? '#121212' : '#212121', 'border-left-color' : colorMapping[product.partColor]}" + class="sidenav-button" mat-button mat-stroked-button (mouseenter)='mouseEnterProduct(product, "left")' (mouseleave)='mouseLeaveProduct(product, "left")' @@ -106,6 +108,7 @@
SELECT YOUR LOADOUT
style="display: flex; align-items: center; flex-wrap: nowrap; width: 100%; border-radius: 0px; border-left: 2px solid; justify-content: flex-start;" [ngStyle]="{'background-color' : product.id == selectedRightThumbstick?.id ? '#121212' : '#212121', 'border-left-color' : colorMapping[product.partColor]}" + class="sidenav-button" mat-button mat-stroked-button (mouseenter)='mouseEnterProduct(product, "right")' (mouseleave)='mouseLeaveProduct(product, "right")' @@ -116,6 +119,7 @@
SELECT YOUR LOADOUT
style="display: flex; align-items: center; flex-wrap: nowrap; width: 100%; border-radius: 0px; border-left: 2px solid; justify-content: flex-start;" [ngStyle]="{'background-color' : product.id == selectedDPad?.id ? '#121212' : '#212121', 'border-left-color' : colorMapping[product.partColor]}" + class="sidenav-button" mat-button mat-stroked-button (mouseenter)='mouseEnterProduct(product)' (mouseleave)='mouseLeaveProduct(product)' @@ -186,12 +190,12 @@
SELECT YOUR LOADOUT
-
+
- visibility icon - visibility icon + visibility icon + visibility icon
@@ -217,8 +221,8 @@
SELECT YOUR LOADOUT
Right Thumbstick icon -
@@ -237,16 +241,16 @@
SELECT YOUR LOADOUT
- visibility icon + visibility icon
- +
- visibility icon + visibility icon
@@ -301,11 +305,11 @@
SELECT YOUR LOADOUT
-
@@ -342,8 +346,6 @@
SELECT YOUR LOADOUT
●  ●  - - Beta v2024.4.13
@@ -362,7 +364,7 @@
SELECT YOUR LOADOUT
CANDY CON LAB
- BUILD YOUR CONTROLLER + BUILD YOUR CONTROLLER
CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. @@ -414,12 +416,12 @@
SELECT YOUR LOADOUT
'7px double rgba(255,255,255,.05)' : '7px double rgba(' + hexToRgb(colorMapping[selectedRightThumbstick?.partColor]).join(',') + ',.1)'}"> Right Thumbstick icon - Left Thumbstick icon - Right Thumbstick icon + Left Thumbstick icon + Right Thumbstick icon - @@ -438,16 +440,16 @@
SELECT YOUR LOADOUT
- visibility icon + visibility icon
- +
- visibility icon + visibility icon
@@ -458,12 +460,12 @@
SELECT YOUR LOADOUT
- -
@@ -514,7 +516,7 @@
SELECT YOUR LOADOUT
-
+
diff --git a/ClientApp/src/app/home/home.component.scss b/ClientApp/src/app/home/home.component.scss index 0d215cc..348db8b 100644 --- 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 index f190069..47e0196 100644 --- 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 index 3037e03..433f231 100644 --- 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 @@

- +
diff --git a/ClientApp/src/app/models/candycon-faceplate/candycon-faceplates.data.ts b/ClientApp/src/app/models/candycon-faceplate/candycon-faceplates.data.ts index 4bcac24..962ccac 100644 --- 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 + }, ]; diff --git a/ClientApp/src/app/nav-menu/nav-menu.component.html b/ClientApp/src/app/nav-menu/nav-menu.component.html index 7b5e01f..3c4a604 100644 --- a/ClientApp/src/app/nav-menu/nav-menu.component.html +++ b/ClientApp/src/app/nav-menu/nav-menu.component.html @@ -2,7 +2,7 @@