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