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 @@