feat: refactor game UI styles for improved loading display and transitions

Author: jeffreylanters

src/game.css

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: "Crash-a-Like";
+  src: url("/crash-a-like.ttf") format("truetype");
+}
+
 .game-container {
   position: fixed;
   top: 0;
@@ -11,7 +16,7 @@
   height: 100%;
 }
 
-.game-container > .loading-overlay {
+.game-container > .heads-up-display {
   position: absolute;
   top: 0;
   left: 0;
@@ -25,99 +30,95 @@
   gap: 20px;
   background-color: #6e4063;
   opacity: 1;
-  transition: opacity 1s ease-in-out;
+  backdrop-filter: blur(10px);
+  transition: opacity 0.5s ease-in-out, background-color 2s ease-in-out;
+}
+
+.game-container.is-loaded > .heads-up-display {
+  background-color: #6e406383;
 }
 
-.game-container > .loading-overlay.loaded {
+.game-container.is-started > .heads-up-display {
   opacity: 0;
   pointer-events: none;
 }
 
-.game-container > .loading-overlay > .game-logo {
+.game-container > .heads-up-display > .game-logo,
+.game-container > .heads-up-display > .start-button {
   width: 80%;
   max-width: 300px;
+  transition: opacity 0.3s ease-in-out, transform 0.1s ease-in-out;
 }
 
-.game-container > .loading-overlay > .loading-indicator-bar {
-  width: 80%;
-  max-width: 200px;
-  height: 20px;
-  background-color: #ffffff73;
-  border-radius: 10px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-  overflow: hidden;
+.game-container > .heads-up-display > .start-button {
+  opacity: 0;
+  pointer-events: none;
+  cursor: pointer;
 }
 
-.game-container
-  > .loading-overlay
-  > .loading-indicator-bar
-  > .loading-indicator-fill {
-  width: 0;
-  height: 100%;
-  background-image: linear-gradient(0deg, #ffa229, #ff6f61);
-  transition: width 0.5s ease-in-out;
+.game-container > .heads-up-display > .start-button:hover {
+  transform: scale(1.05);
 }
 
-.game-container > .main-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  z-index: 90;
-  background-color: rgba(110, 64, 99, 0.5);
-  backdrop-filter: blur(5px);
-  transition: opacity 0.5s ease-in-out;
+.game-container > .heads-up-display > .start-button:active {
+  transform: scale(0.95);
 }
 
-.game-container > .main-menu.started {
-  opacity: 0;
-  pointer-events: none;
+.game-container.is-started > .heads-up-display > .game-logo,
+.game-container.is-started > .heads-up-display > .start-button {
+  transform: scale(0);
 }
 
-.game-container > .main-menu > .game-logo,
-.game-container > .main-menu > .start-button {
+.game-container.is-loaded > .heads-up-display > .start-button {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.game-container > .heads-up-display > .loading-bar {
   width: 80%;
-  max-width: 300px;
+  max-width: 200px;
+  height: 20px;
+  background-color: #ffffff73;
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  transition: opacity 0.2s ease-in-out;
 }
 
-.game-container > .main-menu > .start-button {
-  cursor: pointer;
-  transition: transform 0.2s ease-in-out;
+.game-container.is-loaded > .heads-up-display > .loading-bar {
+  opacity: 0;
 }
 
-.game-container > .main-menu > .start-button:hover {
-  transform: scale(1.05);
+.game-container > .heads-up-display > .loading-bar > .loading-fill {
+  width: 0;
+  height: 100%;
+  background-image: linear-gradient(0deg, #ffa229, #ff6f61);
+  transition: width 0.1s ease-in-out;
 }
 
 .game-container > .score-display {
   position: absolute;
   top: 20px;
   left: 20px;
+  right: 20px;
   z-index: 80;
-  font-size: 60px;
-  font-family: "Trebuchet MS", sans-serif;
+  font-size: 10rem;
+  font-family: "Crash-a-Like", sans-serif;
   font-weight: bold;
-  background: linear-gradient(90deg, #ffa229, #ff6f61);
-  background-clip: text;
-  color: transparent;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  color: #ffa229;
+  text-shadow: 0 0 5px #ff6f61, 0 0 20px rgba(224, 210, 175, 0.3);
+  text-align: center;
 }
 
 .game-container > .fps-counter {
   position: absolute;
-  top: 10px;
+  bottom: 10px;
   left: 10px;
   right: 10px;
   z-index: 70;
   color: yellow;
-  font-family: "Courier New", Courier, monospace;
-  font-size: 14px;
+  font-family: monospace;
+  font-size: 1rem;
   text-align: center;
   pointer-events: none;
 }