Image preloaders and optimizations

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

@@ -1,6 +1,41 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
-
-<mat-sidenav-container style="margin-top:-15px;" >
+<link rel="preload" href="/assets/products/faceplate_arcticwhite.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_boltyellow.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_chillired.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_cyanblast.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_electrocity.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_midnightpurple.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_orangecrush.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_princesspink.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_retroshapes.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_tiarateal.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_toxicwaste.png" as="image">
+<link rel="preload" href="/assets/products/dpads_arcticwhite.png" as="image">
+<link rel="preload" href="/assets/products/dpads_boltyellow.png" as="image">
+<link rel="preload" href="/assets/products/dpads_chillired.png" as="image">
+<link rel="preload" href="/assets/products/dpads_cyanblast.png" as="image">
+<link rel="preload" href="/assets/products/dpads_lemonburst.png" as="image">
+<link rel="preload" href="/assets/products/dpads_midnightpurple.png" as="image">
+<link rel="preload" href="/assets/products/dpads_oceanmirage.png" as="image">
+<link rel="preload" href="/assets/products/dpads_onyxblack.png" as="image">
+<link rel="preload" href="/assets/products/dpads_orangecrush.png" as="image">
+<link rel="preload" href="/assets/products/dpads_princesspink.png" as="image">
+<link rel="preload" href="/assets/products/dpads_tiarateal.png" as="image">
+<link rel="preload" href="/assets/products/dpads_toxicwaste.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_arcticwhite.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_boltyellow.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_chillired.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_cyanblast.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_lemonburst.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_midnightpurple.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_oceanmirage.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_onyxblack.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_orangecrush.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_princesspink.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_tiarateal.png" as="image">
+<link rel="preload" href="/assets/products/thumbsticks_toxicwaste.png" as="image">
+
+<mat-sidenav-container style="margin-top:-15px;">
   <mat-sidenav [mode]="sidenavMode" [(opened)]="isSidenavOpen" style="max-width: 500px;">
     <div style="position: sticky; top: 0; z-index: 100;">
       <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
@@ -113,9 +148,8 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
       <div style="position: relative; top:40%; margin-right: 300px; font-size: 72px;">Loading...</div>
     </div>
     -->
-
     <!-- DESKTOP: Base Div (Container) -->
-    <div *ngIf="browserWindow.innerWidth/browserWindow.innerHeight >= 1" class="desktop-container">
+    <div class="desktop-container">
       <div style="color: white; position: absolute; top: 0%; left: 0%; width:100%;">
         <div>
           <div class="flex-container">
@@ -181,7 +215,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                   <img *ngIf="selectedLeftThumbstick != null" class="selection-img cropped-selection-thumbstick" width="100%" [src]="selectedLeftThumbstick.imageUrls[0]" alt="Left Thumbstick icon" style="margin-top: -40px;">
                   <img *ngIf="selectedRightThumbstick != null" class="selection-img cropped-selection-thumbstick" width="100%" [src]="selectedRightThumbstick.imageUrls[0]" alt="Right Thumbstick icon" style="margin-top: 20px;">
 
-                   <!-- THUMBSTICK Swapper Button -->
+                  <!-- THUMBSTICK Swapper Button -->
                   <button *ngIf="selectedLeftThumbstick != null && selectedRightThumbstick != null" (click)="swapThumbsticks()" style="position: absolute; max-width: 80px; max-height: 80px; width: 66px; height: 66px; margin-left: 22px; margin-top: -5px; transform: scale(.6); background-color: transparent; border: 5px solid rgba(255,255,255,.01); border-radius: 20px;">
                     <img [@rotate]="rotateState" src="assets/cycle.svg" alt="visibility icon" style="transform: scale(1); transform-origin:center; opacity: .5" />
                   </button>
@@ -298,7 +332,8 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
         <span class="noselect nodrag" style="font-size: 20px; position: relative; top: 0%; min-width: max-content; text-align-last: center;">
           <div class="versioning">
             <span style="position: fixed; bottom: 0; right: 0; font-size: 12px; margin-right: 10px;">
-              <span class="text-jump-anim ms-3">
+
+              <span class="ms-3">
                 <span style="color:yellow">&nbsp;●&nbsp;</span>
                 <span style="color:tomato">●&nbsp;</span>
                 <span style="color:cyan">●&nbsp;</span>
@@ -308,6 +343,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                 <span style="color:teal">●&nbsp;</span>
                 <span style="color:limegreen">●&nbsp;</span>
               </span>
+
               Beta v0.2
             </span>
           </div>
@@ -316,7 +352,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
     </div>
 
     <!-- MOBILE: Base Div (Container) -->
-    <div *ngIf="browserWindow.innerWidth/browserWindow.innerHeight < 1" class="mobile-container">
+    <div class="mobile-container">
       <div style="color: white; position: absolute; top: 0%; left: 0%; width:100%;">
         <div>
           <div class="flex-container-mobile">
@@ -327,7 +363,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                 <span class="glow" style="color: #FF0095; font-weight:500; white-space:nowrap;">CANDY CON LAB</span>
               </div>
               <div class="noselect nodrag sub-title-container-mobile">
-                <span class="shadow-text glow-anim sub-title-text" style="margin-left: 7vw;">BUILD YOUR CONTROLLER</span>
+                <span class="shadow-text glow-anim-mobile sub-title-text" style="margin-left: 7vw;">BUILD YOUR CONTROLLER</span>
 
               </div>
               <span class="faded-repeat-text" style="margin-left: 7vw; position: absolute; opacity: .2; font-size: 30px; margin-top: -48px;">CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT.</span>
@@ -476,7 +512,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                 </button>
               </div>
               <div class="candycon-logo-container-mobile">
-                
+
                 <img class="noselect nodrag candycon-logo" src="assets/candycon_logo_light.png" alt="CandyConLab">
               </div>
               <div class="candycon-slogan">
@@ -509,6 +545,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
         <span class="noselect nodrag" style="font-size: 20px; position: relative; top: 0%; min-width: max-content; text-align-last: center;">
           <div class="versioning">
             <span style="position: fixed; bottom: 0; right: 0; font-size: 12px; margin-right: 10px;">
+              <!--
               <span class="text-jump-anim ms-3">
                 <span style="color:yellow">&nbsp;●&nbsp;</span>
                 <span style="color:tomato">●&nbsp;</span>
@@ -519,6 +556,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                 <span style="color:teal">●&nbsp;</span>
                 <span style="color:limegreen">●&nbsp;</span>
               </span>
+              -->
               Beta v0.2
             </span>
           </div>
@@ -527,4 +565,4 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
     </div>
 
   </mat-sidenav-content>
- </mat-sidenav-container>
+</mat-sidenav-container>

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

@@ -342,6 +342,10 @@ text-align: center;
 animation: glow 2s ease-in-out infinite alternate;
 }
 
+.glow-anim-mobile {
+  text-align: center;
+}
+
 @-webkit-keyframes glow {
 from {
 text-shadow: 0 0 10px #fafafa, 0 0 20px #fafafa, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;