feat(frontend): username

Erb3 · May 24, 2024 · b23669a · b23669a
1 parent 8c82a4e
commit b23669a
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 20 deletions.
diff --git a/frontend/landing.html b/frontend/landing.html
@@ -6,41 +6,76 @@
     <title>Sveio - Landing</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="/static/ui.css" />
     <style>
       h2 {
         margin: 0;
       }
 
-      a.button {
-        margin-top: 1.3vh;
-        margin-bottom: -1vh;
+      input {
+        border-radius: 999rem 0 0 999rem;
+      }
+
+      button {
+        border-radius: 0 999rem 999rem 0 !important;
+        border: 1px solid var(--primary) !important;
+      }
+
+      form {
+        gap: 0 !important;
       }
     </style>
   </head>
   <body>
     <main class="flex flex-col">
       <h1>Sveio</h1>
       <h2>
-        A geography game by <a href="https://github.com/Erb3">Erb3</a> inspired by
-        <a href="https://github.com/abrenaut/posio">Posio</a>.
+        A geography game by <a href="https://github.com/Erb3">Erb3</a> inspired
+        by <a href="https://github.com/abrenaut/posio">Posio</a>.
       </h2>
 
       <p class="text-center">
-        You will be greeted by a map.<br />The name of a location will appear, click where you think it is.
-        <br />Compete with your opponents to see who gets closest!
+        You will be greeted by a map.<br />The name of a location will appear,
+        click where you think it is. <br />Compete with your opponents to see
+        who gets closest!
       </p>
 
       <div class="flex flex-col">
-        <a class="button" href="/game">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 -960 960 960">
-            <path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z" />
-          </svg>
-          Join Game
-        </a>
+        <form class="flex">
+          <input
+            type="text"
+            name="username"
+            id="username"
+            placeholder="Username"
+            autocomplete="username"
+          />
+          <button type="submit" class="button">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              width="24px"
+              viewBox="0 -960 960 960"
+            >
+              <path
+                d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"
+              />
+            </svg>
+            Join
+          </button>
+        </form>
         <a href="https://github.com/Erb3/Sveio">View Code</a>
       </div>
     </main>
+    <script defer>
+      document.querySelector("form").addEventListener("submit", (e) => {
+        e.preventDefault();
+        location.href =
+          "/game?username=" + document.querySelector("input").value;
+      });
+    </script>
   </body>
 </html>
diff --git a/frontend/ui.css b/frontend/ui.css
@@ -35,10 +35,10 @@ main {
   padding: 0;
   height: 100%;
   width: 100%;
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
-  font-variation-settings: 'slnt' 0;
+  font-variation-settings: "slnt" 0;
 }
 
 main {
@@ -56,7 +56,7 @@ a:hover {
   color: var(--primary-active);
 }
 
-a.button {
+.button {
   background-color: var(--primary);
   color: var(--background);
   font-size: 1rem;
@@ -68,12 +68,23 @@ a.button {
   line-height: 1.1875;
   text-decoration: none;
   transition: all 0.3s;
+  border: 0;
 }
 
-a.button:hover {
+.button:hover {
   background-color: var(--primary-active);
 }
 
+input {
+  width: 12vw;
+  height: 6vh;
+  font-size: large;
+  border-radius: 999rem;
+  text-align: center;
+  border: 0;
+  padding: 0;
+}
+
 h1 {
   font-size: 4rem;
   font-weight: 600;

diff --git a/src/main.rs b/src/main.rs
@@ -68,7 +68,7 @@ impl AppState {
 async fn main() -> Result<(), Box<dyn std::error::Error>> {
     tracing::subscriber::set_global_default(FmtSubscriber::default())?;
     info!("👋 Sveio says hi!");
-    info!("👋 Loading environment variables!");
+    info!("⚙️ Loading environment variables!");
     let _ = dotenv();
 
     info!("⏳ Loading cities!");
@@ -109,7 +109,7 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
     .await
     .unwrap();
 
-    info!("✅ Listening on {}", listener.local_addr().unwrap());
+    info!("✅ Listening on http://{}", listener.local_addr().unwrap());
     axum::serve(listener, app).await.unwrap();
     Ok(())
 }