Many optimizations and UX improvements

ClientApp/src/app/app.module.ts

@@ -21,6 +21,7 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatRippleModule } from '@angular/material/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 
 
@@ -46,6 +47,7 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatCardModule,
     DragDropModule,
     MatExpansionModule,
+    MatTooltipModule,
     BrowserAnimationsModule,
     RouterModule.forRoot([
       { path: '', component: HomeComponent, pathMatch: 'full' },

ClientApp/src/app/home/home.component.html

@@ -90,9 +90,19 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                     mat-button mat-stroked-button
                     (mouseenter)='mouseEnterProduct(product)'
                     (mouseleave)='mouseLeaveProduct(product)'
-                    (click)="sidebarClicked(product)">
+                    (click)="sidebarOptionClicked(product)">
               <span style="display: contents; flex-shrink: 1; white-space: nowrap;">{{product.partColor.toUpperCase()}}</span>
+              <span *ngIf="!product.isComboPack && !product.isPlayerReadyPack" style="margin-left: auto; z-index: 1000; opacity: .15;">
+                <!-- <img src="assets/faceplate.svg" /> -->
+              </span>
+              <span *ngIf="product.isComboPack" style="margin-left: auto; z-index: 1000;" matTooltip="This item is part of a CANDY CON Combo Pack (Faceplate, Thumbsticks, & DPads included)" matTooltipPosition="right">
+                <img class="detail-hover" style="transform: scale(.8);" src="assets/warning.svg" />
+              </span>
+              <span *ngIf="product.isPlayerReadyPack" style="margin-left: auto; z-index: 1000;" matTooltip="This item is part of a Player Ready Pack (Base Unit, Faceplate, Thumbsticks, & DPads included)" matTooltipPosition="right">
+              <img class="detail-hover" style="transform: scale(.7);" src="assets/asterisk.svg" />
+              </span>
             </button>
+
             <button *ngIf="category.name == 'LEFT THUMBSTICKS'"
                     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',
@@ -101,7 +111,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                     mat-button mat-stroked-button
                     (mouseenter)='mouseEnterProduct(product, "left")'
                     (mouseleave)='mouseLeaveProduct(product, "left")'
-                    (click)="sidebarClicked(product, 'left')">
+                    (click)="sidebarOptionClicked(product, 'left')">
               <span style="display: contents; flex-shrink: 1; white-space: nowrap;">{{product.partColor.toUpperCase()}}</span>
             </button>
             <button *ngIf="category.name == 'RIGHT THUMBSTICKS'"
@@ -112,7 +122,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                     mat-button mat-stroked-button
                     (mouseenter)='mouseEnterProduct(product, "right")'
                     (mouseleave)='mouseLeaveProduct(product, "right")'
-                    (click)="sidebarClicked(product, 'right')">
+                    (click)="sidebarOptionClicked(product, 'right')">
               <span style="display: contents; flex-shrink: 1; white-space: nowrap;">{{product.partColor.toUpperCase()}}</span>
             </button>
             <button *ngIf="category.name == 'DPADS'"
@@ -123,7 +133,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                     mat-button mat-stroked-button
                     (mouseenter)='mouseEnterProduct(product)'
                     (mouseleave)='mouseLeaveProduct(product)'
-                    (click)="sidebarClicked(product)">
+                    (click)="sidebarOptionClicked(product)">
               <span style="display: contents; flex-shrink: 1; white-space: nowrap;">{{product.partColor.toUpperCase()}}</span>
             </button>
           </ng-container>
@@ -144,7 +154,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
 
     <!-- Background Video -->
     <video #videoPlayer id="vid" autoplay muted loop onloadedmetadata="this.muted=true" preload="auto" class="bgVideo">
-      <source src="https://cclab.blob.core.windows.net/part-images/bg_video.mp4" type="video/mp4">
+      <source src="https://cclab.blob.core.windows.net/part-images/bg_video_compressed.mp4" type="video/mp4">
     </video>
 
     <!-- Video Loading Overlay -->
@@ -238,7 +248,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                   </div>
                   <!-- DPAD Switcher -->
                   <div class="selection-box-setting">
-                    <div class="mat-elevation-z3" style="max-width: 3vw; margin-left: 3vw; border-radius: 10px; padding-top: 5px; padding-bottom: 5px;">
+                    <div class="mat-elevation-z3" style="max-width: 60px; margin-left: 3.25vw; border-radius: 10px; padding-top: 5px; padding-bottom: 5px;">
                       <!-- Top Toggle: Classic DPad -->
                       <div>
                         <img src="assets/classic_dpad.svg" alt="visibility icon" class="classic-dpad-image" width="24px" />

ClientApp/src/app/home/home.component.scss

@@ -261,6 +261,7 @@ min-height: 10vh;
 border-radius: 10px;
 border-width: 0px;
 background-color: white;
+will-change: background-color;
 }
 
 .sidenav-expansion-button:hover {
@@ -270,6 +271,7 @@ background-color: deeppink;
 .floating-anim {
 transform: rotateZ(-2.4deg) rotateY(-20deg);
 animation: rotating 6s ease-in-out infinite alternate;
+will-change: transform;
 }
 
 @keyframes rotating {
@@ -279,16 +281,17 @@ transform: rotateZ(1.2deg) rotateY(20deg);
 }
 
 .text-jump-anim span {
-position: relative;
-font-size: 18px;
-top: 0px;
-display: inline-block;
-animation: bounce 0.3s ease infinite alternate;
+  position: relative;
+  font-size: 18px;
+  top: 0px;
+  display: inline-block;
+  animation: bounce 0.3s ease infinite alternate;
+  will-change: transform;
 }
 
 @keyframes bounce {
 100% {
-top: -2px;
+transform: translateY(-2px);
 /*
 text-shadow: 0 1px #ccc, 
           0 2px #ccc, 
@@ -359,7 +362,7 @@ right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
-filter: brightness(.95) blur(8px);
+filter: brightness(.85) blur(8px);
 }
 
 .title-container {
@@ -378,6 +381,7 @@ text-align: center;
 -webkit-animation: glow 2s ease-in-out infinite alternate;
 -moz-animation: glow 1s ease-in-out infinite alternate;
 animation: glow 2s ease-in-out infinite alternate;
+will-change: text-shadow;
 }
 
 .glow-anim-mobile {
@@ -449,16 +453,15 @@ mat-expansion-panel-header:hover mat-panel-title {
 .tool-image {
   opacity: .9;
   transform-origin: center;
+  will-change: opacity;
 }
 
 .reset-button:hover .tool-image {
   opacity: 1;
-  transform-origin: center;
 }
 
 .randomizer-button:hover .tool-image {
   opacity: 1;
-  transform-origin: center;
 }
 
 .cycle-container {
@@ -480,13 +483,11 @@ mat-expansion-panel-header:hover mat-panel-title {
   transform-origin: center;
   opacity: .9;
   filter: sepia(1) hue-rotate(220deg) saturate(50) brightness(8);
+  will-change: opacity;
 }
 
 .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 {
@@ -504,6 +505,7 @@ mat-expansion-panel-header:hover mat-panel-title {
 .toggle-image {
   transform: rotate(-90deg) scale(1);
   opacity: .7;
+  will-change: opacity;
 }
 
 .toggle-image:hover {
@@ -524,16 +526,7 @@ mat-expansion-panel-header:hover mat-panel-title {
 }
 
 .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 {
@@ -1454,3 +1447,8 @@ sub-title-container-mobile {
     display: block; /* Show desktop container in landscape mode */
   }
 }
+
+.lockin-button-text:hover {
+  filter: brightness(1.2);
+  transform: scale(1.01);
+}

ClientApp/src/app/home/home.component.ts

@@ -4,7 +4,7 @@ import { THUMBSTICKS } from '../models/candycon-thumbstick/candycon-thumbsticks.
 import { DPADS } from '../models/candycon-dpad/candycon-dpads.data';
 import { FACEPLATES } from '../models/candycon-faceplate/candycon-faceplates.data';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { LockinDialogComponent } from './lockin-dialog/lockin-dialog.component';
 import { MatDrawerMode } from '@angular/material/sidenav';
 
@@ -124,6 +124,9 @@ export class HomeComponent {
   // For dark/light mode theming
   mode = '#fff';
 
+  // Lock In Dialog
+  dialogRef?: MatDialogRef<LockinDialogComponent>;
+
   dynamicSidenavContentStyle = {
     'background': 'conic-gradient(from -45deg at calc(100%/3) calc(100%/3), #ffffff 90deg, #0000 0), conic-gradient(from -135deg at calc(100%/3) calc(2*100%/3), #ffffff 90deg, #fcfbfe 0 135deg, #0000 0), conic-gradient(from 135deg at calc(2*100%/3) calc(2*100%/3), #ffffff 90deg, #fcfbfe 0 135deg, #0000 0), conic-gradient(from 45deg at calc(2*100%/3) calc(100%/3), #ffffff 90deg, #fcfbfe 0 135deg, #0000 0,#ffffff 0 225deg,#fcfbfe 0)',
     'background-size': '40px 40px'
@@ -134,35 +137,6 @@ export class HomeComponent {
     this.adjustSidenavMode();
   }
 
-  /*
-  @ViewChild('videoPlayer') videoPlayer!: ElementRef<HTMLVideoElement>;
-  isVideoLoading: boolean = true;
-    
-  ngBeforeViewInit(): void {
-    if (this.videoPlayer.nativeElement.readyState >= 1) {
-      this.initializeComponent();
-    }
-  }
-
-  ngAfterViewInit(): void {
-
-    // Check if the video is already loaded
-    if (this.videoPlayer.nativeElement.readyState >= 1) {
-      this.initializeComponent();
-    }
-    // Use addEventListener to attach the loadedmetadata event handler
-    // can also try canplaythrough
-    this.videoPlayer.nativeElement.addEventListener('loadedmetadata', () => {
-      this.initializeComponent();
-    });
-  }
-
-  initializeComponent() {
-    this.isVideoLoading = false;
-  }
-
-  */
-
   // Listen to window resize events
   @HostListener('window:resize', ['$event'])
   onResize(event: any) {
@@ -175,6 +149,12 @@ export class HomeComponent {
   }
 
   ngOnInit(): void {
+
+    // Pre-instantiate Lock In dialog
+    this.dialogRef = this.dialog.open(LockinDialogComponent, { disableClose: true });
+    this.dialogRef.close(); // immediately close
+
+    // Set initial state
     this.updateSelectedCount();
     this.expandedCategory = "FACEPLATES";
     localStorage.getItem('mode')?.includes('dark') ? this.mode = 'black' : this.mode = 'white';
@@ -185,13 +165,14 @@ export class HomeComponent {
   }
 
   openDialog(controllerData: any): void {
-    const dialogRef = this.dialog.open(LockinDialogComponent, {
+
+    this.dialogRef = this.dialog.open(LockinDialogComponent, {
       width: '600px',
       data: controllerData,
       panelClass: 'dialog-container'
     });
 
-    dialogRef.afterClosed().subscribe(result => {
+    this.dialogRef.afterClosed().subscribe(result => {
       // Handle dialog close result if needed
     });
   }
@@ -220,7 +201,7 @@ export class HomeComponent {
     }
   }
 
-  sidebarClicked(product: any, type?: string): void {
+  sidebarOptionClicked(product: any, type?: string): void {
 
     if (product.name.includes('Faceplate')) {
 

ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.html

@@ -86,3 +86,9 @@ <h4>
 <div>
   <a href="https://www.gamestop.com/search/?q=CANDY+CON+COMBO+PACK&lang=default&start=0&sz=20" target="_blank"><img class="overflow-image mat-elevation-z5" src="assets/COMBO_PACKS_2.png" style="margin-top: 200px;"/></a>
 </div>
+<!--<div>
+  <img hidden class="details-image mat-elevation-z5" src="assets/details.png" style="margin-top: 200px;" />
+</div>-->
+<div>
+  <img hidden class="promo-image mat-elevation-z5" src="assets/promo.png" />
+</div>

ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss

@@ -88,6 +88,12 @@ button {
   width: fit-content;
   height: 70px;
   line-height: .9;
+  will-change: transform, brightness;
+}
+
+.view-button:hover {
+  filter: brightness(1.25);
+  transform: scale(1.025);
 }
 
 .overflow-image {
@@ -98,6 +104,42 @@ button {
   transform: scale(.3);
   border-radius: 50px;
   filter: drop-shadow(20px 20px 0.45rem black);
+  will-change: transform, filter;
+}
+
+.overflow-image:hover {
+  filter: brightness(1.2);
+  transform: scale(.304);
+}
+
+/*.details-image {
+  position: absolute;
+  bottom: -53vw;*/ /* Adjust as necessary */
+  /*right: -15vw;*/ /* Adjust as necessary */
+  /*z-index: 1000;*/ /* Ensure it's above the dialog but below modal overlay if needed */
+  /*transform: scale(.2);
+  border-radius: 50px;
+  filter: drop-shadow(20px 20px 0.45rem black) contrast(1.25);
+}*/
+
+/*.promo-image {
+  position: absolute;
+  bottom: 0vw;*/ /* Adjust as necessary */
+  /*right: 22vw;*/ /* Adjust as necessary */
+  /*z-index: 1000;*/ /* Ensure it's above the dialog but below modal overlay if needed */
+  /*transform: scale(.4);
+  border-radius: 50px;
+  filter: drop-shadow(20px 20px 0.45rem black) contrast(1.5);
+}*/
+
+.promo-image {
+  position: absolute;
+  bottom: -300px; /* Adjust as necessary */
+  right: -800px; /* Adjust as necessary */
+  z-index: 1000; /* Ensure it's above the dialog but below modal overlay if needed */
+  transform: scale(.35);
+  border-radius: 50px;
+  filter: drop-shadow(20px 20px 0.45rem black) contrast(1.5);
 }
 
 @media (max-width: 1800px) {