From 031a4525583eb2de8e42aaaf51bc76a7f012d75c Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Mon, 27 Jan 2025 16:23:32 -0800
Subject: [PATCH] improve front page

---
 resources/images/DiscordIcon.svg          |   1 +
 resources/images/QuestionMarkIcon.svg     |  45 ++++++++
 src/client/PublicLobby.ts                 |   2 +-
 src/client/UsernameInput.ts               |   2 +-
 src/client/graphics/layers/Leaderboard.ts |   6 +-
 src/client/index.html                     | 128 ++++++++++++++++------
 6 files changed, 143 insertions(+), 41 deletions(-)
 create mode 100644 resources/images/DiscordIcon.svg
 create mode 100644 resources/images/QuestionMarkIcon.svg

diff --git a/resources/images/DiscordIcon.svg b/resources/images/DiscordIcon.svg
new file mode 100644
index 000000000..4cadbc7f7
--- /dev/null
+++ b/resources/images/DiscordIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#5865f2" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
\ No newline at end of file
diff --git a/resources/images/QuestionMarkIcon.svg b/resources/images/QuestionMarkIcon.svg
new file mode 100644
index 000000000..86512f4fe
--- /dev/null
+++ b/resources/images/QuestionMarkIcon.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 100 125"
+   style="enable-background:new 0 0 100 100;"
+   xml:space="preserve"
+   id="svg110"
+   sodipodi:docname="QuestionMarkIcon.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs114" /><sodipodi:namedview
+     id="namedview112"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="5.3400704"
+     inkscape:cx="49.812077"
+     inkscape:cy="62.545992"
+     inkscape:window-width="1807"
+     inkscape:window-height="1167"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg110" /><g
+     id="g104"><g
+       id="g102"><g
+         id="g100"><path
+           d="M50,85c-19.3,0-35-15.7-35-35s15.7-35,35-35s35,15.7,35,35C85,69.3,69.3,85,50,85z M50,21C33.9,21,20.9,34,20.9,50     s13,29.1,29.1,29.1s29.1-13,29.1-29.1C79,34,66,21,50,21z"
+           id="path94" /><path
+           d="M49.1,59.7c-1.6,0-3-1.3-3-3c0-4.6,3-8.6,7.3-9.9c1.9-0.6,3.2-2.3,3.1-4.3c0-3.6-3-6.6-6.6-6.6c-3.6,0-6.6,3-6.6,6.6     c0,1.6-1.3,3-3,3c-1.6,0-3-1.3-3-3C37.5,35.6,43.1,30,50,30s12.5,5.6,12.5,12.5c0,4.6-3,8.6-7.3,9.9c-1.9,0.6-3.2,2.3-3.1,4.3     C52.1,58.3,50.7,59.7,49.1,59.7C49.1,59.7,49.1,59.7,49.1,59.7z"
+           id="path96" /><circle
+           cx="49.1"
+           cy="65.9"
+           r="3.6"
+           id="circle98" /></g></g></g></svg>
diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts
index 46d2f3384..9581b75d8 100644
--- a/src/client/PublicLobby.ts
+++ b/src/client/PublicLobby.ts
@@ -64,7 +64,7 @@ export class PublicLobby extends LitElement {
         return html`
     <button
         @click=${() => this.lobbyClicked(lobby)}
-        class="w-full max-w-3xl mx-auto py-3 px-4 md:py-6 md:px-8 ${this.isLobbyHighlighted
+        class="w-full mx-auto p-16 md:py-6 md:px-8 ${this.isLobbyHighlighted
                 ? 'bg-gradient-to-r from-green-600 to-green-500'
                 : 'bg-gradient-to-r from-blue-600 to-blue-500'
             } text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90"
diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts
index 7992d26a7..99c9f9ff6 100644
--- a/src/client/UsernameInput.ts
+++ b/src/client/UsernameInput.ts
@@ -37,7 +37,7 @@ export class UsernameInput extends LitElement {
                 @change=${this.handleChange}
                 placeholder="Enter your username"
                 maxlength="${MAX_USERNAME_LENGTH}"
-                class="w-72 px-4 py-2 bg-white border border-gray-300 rounded-xl shadow-sm text-2xl text-gray-900 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full px-4 py-2 bg-white border border-gray-300 rounded-xl shadow-sm text-2xl text-gray-900 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             >
             ${this.validationError
                 ? html`<div class="mt-2 px-3 py-1 text-lg text-red-600 bg-white border border-red-600 rounded">${this.validationError}</div>`
diff --git a/src/client/graphics/layers/Leaderboard.ts b/src/client/graphics/layers/Leaderboard.ts
index d451b3fbe..3781b65b1 100644
--- a/src/client/graphics/layers/Leaderboard.ts
+++ b/src/client/graphics/layers/Leaderboard.ts
@@ -165,9 +165,9 @@ export class Leaderboard extends LitElement implements Layer {
 
   players: Entry[] = [];
 
-  createRenderRoot() {
-    return this;
-  }
+  // createRenderRoot() {
+  //   return this;
+  // }
   @state()
   private _hidden = true;
 
diff --git a/src/client/index.html b/src/client/index.html
index 01b31b326..379155105 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -5,6 +5,56 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>OpenFront (ALPHA)</title>
+
+	<!-- Preload critical assets -->
+	<link rel="preload" href="../../resources/images/OpenFrontLogo.svg" as="image">
+	<link rel="preload" href="../../resources/images/DiscordIcon.svg" as="image">
+
+	<!-- Critical CSS to prevent FOUC -->
+	<style>
+		.preload * {
+			-webkit-transition: none !important;
+			-moz-transition: none !important;
+			-ms-transition: none !important;
+			-o-transition: none !important;
+			transition: none !important;
+		}
+
+		html {
+			visibility: visible;
+			opacity: 1;
+		}
+
+		html.preload {
+			visibility: hidden;
+			opacity: 0;
+		}
+
+		body::before {
+			content: '';
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			backdrop-filter: blur(4px);
+			-webkit-backdrop-filter: blur(4px);
+			z-index: -1;
+		}
+
+		/* Critical styles to prevent layout shift */
+		.container {
+			opacity: 1;
+			transition: opacity 0.3s ease-in-out;
+		}
+	</style>
+
+	<!-- Immediate execution to prevent FOUC -->
+	<script>
+		document.documentElement.className = 'preload';
+	</script>
+
+	<!-- Analytics -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763"></script>
 	<script>
 		window.dataLayer = window.dataLayer || [];
@@ -15,54 +65,55 @@
 </head>
 
 <body
-	class="h-full overflow-hidden select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out invisible opacity-0">
+	class="h-full overflow-hidden select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out">
 	<!-- Main container with responsive padding -->
+	<!-- Logo section remains the same -->
 	<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
-		<!-- Logo section with responsive scaling -->
 		<img src="../../resources/images/OpenFrontLogo.svg" alt="OpenFront.io"
-			class="h-auto w-1/2 lg:w-1/4 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175">
+			class="pt-6 md:pt-12 h-auto w-3/4 lg:w-1/4 mx-auto transform sm:scale-125 md:scale-150 lg:scale-175">
+		<h3 class="font-sans text-center text-black pb-6 md:pb-12 text-sm sm:text-base lg:text-lg">(v0.14.0)</h3>
 
-		<!-- Version text scales with screen size -->
-		<h3 class="font-sans text-center text-black pb-4 text-sm sm:text-base lg:text-lg">(v0.14.0)</h3>
-
-		<div class="p-2 flex items-center justify-center min-h-full w-full">
-			<username-input></username-input>
+		<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4">
+			<username-input class="w-full"></username-input>
 		</div>
 
-		<!-- Public lobby section with responsive spacing -->
-		<div class="w-full pb-4 p-2 flex items-center justify-center min-h-full">
-			<public-lobby></public-lobby>
+		<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2">
+			<public-lobby class="w-full"></public-lobby>
 		</div>
 
-		<!-- Button container with responsive width and spacing -->
-		<div
-			class="flex flex-col sm:flex-row gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto">
-			<!-- Single Player button -->
-			<button id="single-player" class="bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 
-                       font-bold text-lg sm:text-xl lg:text-2xl rounded-lg 
-                       flex-1 border-none cursor-pointer transition-colors duration-300">
+		<div class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto">
+			<button id="host-lobby-button"
+				class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300">
+				Create Lobby
+			</button>
+			<button id="join-private-lobby-button"
+				class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300">
+				Join Lobby
+			</button>
+		</div>
+
+		<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4 sm:mt-6 lg:mt-8">
+			<button id="single-player"
+				class="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 font-bold text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300">
 				Single Player
 			</button>
+		</div>
 
-			<!-- Secondary buttons container -->
-			<div class="flex flex-col gap-3 sm:gap-4 lg:gap-5 flex-1">
-				<button id="host-lobby-button" class="bg-blue-100 hover:bg-blue-200 text-blue-900 
-                           p-3 sm:p-4 lg:p-5 font-medium 
-                           text-sm sm:text-base lg:text-lg rounded-md w-full 
-                           border-none cursor-pointer transition-colors duration-300">
-					Create Lobby
-				</button>
-				<button id="join-private-lobby-button" class="bg-blue-100 hover:bg-blue-200 text-blue-900 
-                           p-3 sm:p-4 lg:p-5 font-medium 
-                           text-sm sm:text-base lg:text-lg rounded-md w-full 
-                           border-none cursor-pointer transition-colors duration-300">
-					Join Lobby
-				</button>
-			</div>
+		<!-- Links section -->
+		<div class="flex justify-center mt-4">
+			<a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I" id="yt-link" target="_blank"
+				rel="noopener noreferrer"
+				class="flex items-center justify-center px-4 py-2 bg-white hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
+				<img src="../../resources/images/QuestionMarkIcon.svg" alt="Question Mark" class="w-12 h-12" />
+			</a>
+			<a href="https://discord.gg/k22YrnAzGp" id="discord-link" target="_blank" rel="noopener noreferrer"
+				class="flex items-center justify-center px-4 py-2 bg-white hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out mx-2">
+				<img src="../../resources/images/DiscordIcon.svg" alt="Discord" class="w-12 h-12" />
+			</a>
 		</div>
 	</div>
 
-	<!-- Game components with appropriate spacing -->
+	<!-- Game components -->
 	<div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
 		<ul></ul>
 	</div>
@@ -84,10 +135,15 @@
 
 	<!-- Scripts -->
 	<script>
-		window.addEventListener('DOMContentLoaded', (event) => {
-			document.body.classList.remove('invisible', 'opacity-0');
+		// Remove preload class after everything is loaded
+		window.addEventListener('load', function () {
+			requestAnimationFrame(() => {
+				document.documentElement.classList.remove('preload');
+			});
 		});
 	</script>
+
+	<!-- Analytics -->
 	<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
 		data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'></script>
 </body>