From 26d522d79d43fd407e7d26f3572326d4f9f5017c Mon Sep 17 00:00:00 2001 From: ZainGS Date: Mon, 15 Apr 2024 20:00:52 -0500 Subject: [PATCH] Many optimizations and UX improvements --- ClientApp/src/app/app.module.ts | 2 + ClientApp/src/app/home/home.component.html | 22 ++++++--- ClientApp/src/app/home/home.component.scss | 40 ++++++++-------- ClientApp/src/app/home/home.component.ts | 47 ++++++------------- .../lockin-dialog.component.html | 6 +++ .../lockin-dialog.component.scss | 42 +++++++++++++++++ .../candycon-faceplates.data.ts | 18 ++++--- .../app/models/interfaces/product.model.ts | 4 ++ .../src/app/nav-menu/nav-menu.component.html | 6 +-- .../src/app/nav-menu/nav-menu.component.scss | 14 ++++-- ClientApp/src/app/theme.scss | 18 ++++++- ClientApp/src/assets/alert.svg | 1 + ClientApp/src/assets/asterisk.svg | 1 + ClientApp/src/assets/info.svg | 1 + ClientApp/src/assets/warning.svg | 1 + 15 files changed, 149 insertions(+), 74 deletions(-) create mode 100644 ClientApp/src/assets/alert.svg create mode 100644 ClientApp/src/assets/asterisk.svg create mode 100644 ClientApp/src/assets/info.svg create mode 100644 ClientApp/src/assets/warning.svg diff --git a/ClientApp/src/app/app.module.ts b/ClientApp/src/app/app.module.ts index 2a01f2d..fae3ed9 100644 --- a/ClientApp/src/app/app.module.ts +++ b/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' }, diff --git a/ClientApp/src/app/home/home.component.html b/ClientApp/src/app/home/home.component.html index efd99a0..33212ee 100644 --- a/ClientApp/src/app/home/home.component.html +++ b/ClientApp/src/app/home/home.component.html @@ -90,9 +90,19 @@
SELECT YOUR LOADOUT
mat-button mat-stroked-button (mouseenter)='mouseEnterProduct(product)' (mouseleave)='mouseLeaveProduct(product)' - (click)="sidebarClicked(product)"> + (click)="sidebarOptionClicked(product)"> {{product.partColor.toUpperCase()}} + + + + + + + + + + @@ -144,7 +154,7 @@
SELECT YOUR LOADOUT
@@ -238,7 +248,7 @@
SELECT YOUR LOADOUT
-
+
visibility icon diff --git a/ClientApp/src/app/home/home.component.scss b/ClientApp/src/app/home/home.component.scss index 348db8b..0da9ccb 100644 --- a/ClientApp/src/app/home/home.component.scss +++ b/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); +} diff --git a/ClientApp/src/app/home/home.component.ts b/ClientApp/src/app/home/home.component.ts index 47e0196..f1b1b63 100644 --- a/ClientApp/src/app/home/home.component.ts +++ b/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; + 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; - 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')) { 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 433f231..b72eb3b 100644 --- a/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.html +++ b/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.html @@ -86,3 +86,9 @@

+ +
+ +
diff --git a/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss b/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss index b45fe46..2aca53c 100644 --- a/ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss +++ b/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) { 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 962ccac..d6dd52e 100644 --- a/ClientApp/src/app/models/candycon-faceplate/candycon-faceplates.data.ts +++ b/ClientApp/src/app/models/candycon-faceplate/candycon-faceplates.data.ts @@ -17,7 +17,8 @@ export const FACEPLATES: CandyconFaceplate[] = [ productLength: 6.89, productWidth: 1.38, productHeight: 5.31, - productWeight: 0.33 + productWeight: 0.33, + isComboPack: true }, { id: -2, @@ -33,7 +34,8 @@ export const FACEPLATES: CandyconFaceplate[] = [ productLength: 6.89, productWidth: 1.38, productHeight: 5.31, - productWeight: 0.33 + productWeight: 0.33, + isComboPack: true }, { id: -6, @@ -49,7 +51,8 @@ export const FACEPLATES: CandyconFaceplate[] = [ productLength: 6.89, productWidth: 1.38, productHeight: 5.31, - productWeight: 0.33 + productWeight: 0.33, + isComboPack: true }, { id: 1, @@ -225,7 +228,8 @@ export const FACEPLATES: CandyconFaceplate[] = [ productLength: 6.89, productWidth: 2.95, productHeight: 5.31, - productWeight: 0.66 + productWeight: 0.66, + isPlayerReadyPack: true }, { id: -3, @@ -241,7 +245,8 @@ export const FACEPLATES: CandyconFaceplate[] = [ productLength: 6.89, productWidth: 2.95, productHeight: 5.31, - productWeight: 0.66 + productWeight: 0.66, + isPlayerReadyPack: true }, { id: -4, @@ -257,6 +262,7 @@ export const FACEPLATES: CandyconFaceplate[] = [ productLength: 6.89, productWidth: 2.95, productHeight: 5.31, - productWeight: 0.66 + productWeight: 0.66, + isPlayerReadyPack: true }, ]; diff --git a/ClientApp/src/app/models/interfaces/product.model.ts b/ClientApp/src/app/models/interfaces/product.model.ts index d337f5e..5455211 100644 --- a/ClientApp/src/app/models/interfaces/product.model.ts +++ b/ClientApp/src/app/models/interfaces/product.model.ts @@ -18,4 +18,8 @@ export interface Product { productHeight: number; // lbs productWeight: number; + + // For bundle checks + isPlayerReadyPack?: boolean; + isComboPack?: boolean; } diff --git a/ClientApp/src/app/nav-menu/nav-menu.component.html b/ClientApp/src/app/nav-menu/nav-menu.component.html index 3c4a604..276c1bf 100644 --- a/ClientApp/src/app/nav-menu/nav-menu.component.html +++ b/ClientApp/src/app/nav-menu/nav-menu.component.html @@ -32,7 +32,7 @@ [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{ exact: true }" > - CREATION LAB + CREATION LAB
  • - EXPLORE PARTS + EXPLORE PARTS
  • - SHOP GAMES + SHOP GAMES
  • \ No newline at end of file diff --git a/ClientApp/src/assets/asterisk.svg b/ClientApp/src/assets/asterisk.svg new file mode 100644 index 0000000..a82c566 --- /dev/null +++ b/ClientApp/src/assets/asterisk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ClientApp/src/assets/info.svg b/ClientApp/src/assets/info.svg new file mode 100644 index 0000000..788f3c0 --- /dev/null +++ b/ClientApp/src/assets/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ClientApp/src/assets/warning.svg b/ClientApp/src/assets/warning.svg new file mode 100644 index 0000000..b9dcd7c --- /dev/null +++ b/ClientApp/src/assets/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file