Add a welcome message / login sequence transition.

rdaum · Nov 4, 2023 · f9efe5f · f9efe5f
1 parent 346e1e3
commit f9efe5f
Show file tree

Hide file tree

Showing 4 changed files with 249 additions and 81 deletions.
diff --git a/crates/web-host/src/client/root.html b/crates/web-host/src/client/root.html
@@ -64,7 +64,7 @@
             let data = new URLSearchParams();
             data.set("player", form.player.value);
             data.set("password", form.password.value);
-            let result = await fetch("/ws/auth/connect", {
+            let result = await fetch("/auth/connect", {
                 method: "POST",
                 body: data
             });
@@ -98,6 +98,12 @@
             context.token = paseto_token;
             context.ws = ws;
             ws.onmessage = handle_narrative_event
+
+            // Show the narrative panel, and hide the welcome panel.
+            let welcome_panel = document.getElementById("welcome");
+            welcome_panel.style.display = "none";
+            let narrative = document.getElementById("narrative");
+            narrative.style.display = "inherit";
         }
 
         async function handle_input(e) {
@@ -108,20 +114,38 @@
             output_narrative_gap();
         }
 
+        async function retrieve_welcome(welcome_panel) {
+            let result = await fetch("/welcome");
+            if (result.ok) {
+                let welcome_text = await result.json();
+                // "welcome_text" is a json array of strings, which we will append to the welcome panel as
+                // individual <p> elements.
+                for (let i = 0; i < welcome_text.length; i++) {
+                    let p = document.createElement("p");
+                    p.innerHTML = welcome_text[i];
+                    welcome_panel.appendChild(p);
+                }
+            } else {
+                console.log("Failed to retrieve welcome text!");
+            }
+        }
+
         // Attach event handlers to our elements in the DOM.
         document.addEventListener("DOMContentLoaded", function () {
             let connect_form = document.getElementById("connect_form");
             let entry_form = document.getElementById("entry");
 
             connect_form.addEventListener("submit", connect);
             entry_form.addEventListener("submit", handle_input);
+
+            let welcome_panel = document.getElementById("welcome");
+            retrieve_welcome(welcome_panel);
         });
 
 
     </script>
     <style>
         body {
-            font-family: monospace;
             background-color: #7fdbff;
         }
 
@@ -143,6 +167,9 @@
             height: 10px;
         }
         #narrative {
+            padding: 5px;
+            font-family: monospace;
+            display: none;
             border-radius: 5px;
             border-width: thick;
             border-style: solid;
@@ -152,30 +179,46 @@
             height: calc(100vh - 100px);
             margin-bottom: 10px;
         }
-
+        #welcome {
+            padding: 10px;
+            font-family: arial,sans-serif;
+            border-radius: 5px;
+            border-width: thick;
+            border-style: solid;
+            border-color: black;
+            background-color: white;
+        }
 
         #anchor {
             overflow-anchor: auto;
             height: 1px;
         }
 
         #command_input {
+            font-family: monospace;
             width: calc(100% - 100px);
         }
 
+        #connect_form {
+            text-align: center;
+        }
     </style>
 </head>
 <body>
-<!-- output area, where narrative is displayed, new messages are added at bottom, and scroll is locked to bottom -->
-<div id="narrative">
-    <!-- messages always get added prior to this -->
-    <div id="anchor"></div>
+<!-- welcome message, shown until user connects -->
+<div id="welcome">
+
 </div>
 <form id="connect_form">
     <input type="text" name="player"/>
     <input type="text" name="password"/>
     <button type="submit">Connect</button>
 </form>
+<!-- output area, where narrative is displayed, new messages are added at bottom, and scroll is locked to bottom -->
+<div id="narrative">
+    <!-- messages always get added prior to this -->
+    <div id="anchor"></div>
+</div>
 <form id="entry" style="display: none;">
     <input type="text" name="command" id="command_input"/>
     <button type="submit">Send</button>

diff --git a/crates/web-host/src/host/mod.rs b/crates/web-host/src/host/mod.rs
@@ -1,7 +1,43 @@
+pub mod web_host;
 mod ws_connection;
-pub mod ws_host;
 
-pub use ws_host::WebSocketHost;
-pub use ws_host::{
-    connect_auth_handler, create_auth_handler, ws_connect_attach_handler, ws_create_attach_handler,
+use moor_values::var::variant::Variant;
+use moor_values::var::Var;
+use serde_derive::{Deserialize, Serialize};
+use serde_json::{json, Number};
+
+pub use web_host::WebHost;
+pub use web_host::{
+    connect_auth_handler, create_auth_handler, welcome_message_handler, ws_connect_attach_handler,
+    ws_create_attach_handler,
 };
+
+#[derive(Serialize, Deserialize)]
+struct OID(i64);
+
+#[derive(Serialize, Deserialize)]
+struct Error {
+    code: u8,
+    msg: String,
+}
+
+pub fn var_as_json(v: &Var) -> serde_json::Value {
+    match v.variant() {
+        Variant::None => serde_json::Value::Null,
+        Variant::Str(s) => serde_json::Value::String(s.to_string()),
+        Variant::Obj(o) => json!(OID(o.0)),
+        Variant::Int(i) => serde_json::Value::Number(Number::from(*i)),
+        Variant::Float(f) => json!(*f),
+        Variant::Err(e) => json!(Error {
+            code: (*e) as u8,
+            msg: e.message().to_string(),
+        }),
+        Variant::List(l) => {
+            let mut v = Vec::new();
+            for e in l.iter() {
+                v.push(var_as_json(e));
+            }
+            serde_json::Value::Array(v)
+        }
+    }
+}