fix: make signup collapsible

If you are using a session account, we make the actual form portion
collapsible so that you can hide it and play.

diff --git a/src/server/views/player-bar.ts b/src/server/views/player-bar.ts
index d02ea682928a310f8066a82772099e232c7d053b..9092eeeb61e0f825fbf43c9c122907ab8235f421 100644 (file)
--- a/src/server/views/player-bar.ts
+++ b/src/server/views/player-bar.ts
@@ -4,21 +4,23 @@ import { expToLevel, maxHp, Player } from "../../shared/player";
 
 function displayLoginSignupForm(): string {
   return `
-<div id="signup-prompt" hx-swap-oob="true">
-  <p>Hey there! It looks like you're using a SESSION account. This allows you to play right away, but the account is tied to your current device, and will be lost if you ever clear your cookies.</p><p>
-  <form id="signup" hx-post="/auth" hx-swap="none">
-  <div class="form-group">
-  <label>Username:</label>
-  <input type="text" name="username">
-  </div>
-  <div class="form-group">
-  <label>Password:</label>
-  <input type="password" name="password">
-  </div>
-  <button type="submit" name="authType" value="signup">Create your Account</button>
-  <button type="submit" name="authType" value="login" id="login">Login To Existing Account</button>
-  </form></p>
-</div>
+  <details id="signup-prompt" hx-swap-oob="true" open>
+    <summary>
+      Hey there! It looks like you're using a SESSION account. This allows you to play right away, but the account is tied to your current device, and will be lost if you ever clear your cookies.
+    </summary>
+    <form id="signup" hx-post="/auth" hx-swap="none">
+      <div class="form-group">
+        <label>Username:</label>
+        <input type="text" name="username">
+      </div>
+      <div class="form-group">
+        <label>Password:</label>
+        <input type="password" name="password">
+      </div>
+      <button type="submit" name="authType" value="signup">Create your Account</button>
+      <button type="submit" name="authType" value="login" id="login">Login To Existing Account</button>
+    </form>
+  </details>
 `
 
 }