polish + menu

4 files changed, 55 insertions, 13 deletions

diff --git a/source/client/helper.ts b/source/client/helper.ts
index 37da7b9..31e500a 100644
--- a/source/client/helper.ts
+++ b/source/client/helper.ts
@@ -4,7 +4,7 @@ import { parameters } from "./index.ts"
 
 export function get_query_params(): { [key: string]: string } {
     const q: { [key: string]: string } = {}
-    for (const kv of window.location.search.substring(1).split("&")) {
+    for (const kv of window.location.hash.substring(1).split("&")) {
         const [key, value] = kv.split("=")
         q[decodeURIComponent(key)] = decodeURIComponent(value)
     }
@@ -41,4 +41,3 @@ export function parameter_string(name: string, def: string): string {
     if (!v) return def
     return v
 }
-
diff --git a/source/client/index.ts b/source/client/index.ts
index 16118a6..d3c3fcc 100644
--- a/source/client/index.ts
+++ b/source/client/index.ts
@@ -2,6 +2,7 @@
 
 import { get_query_params } from "./helper.ts"
 import { log } from "./logger.ts"
+import { create_menu } from "./menu.ts";
 import { Room } from "./room.ts"
 
 export const servers: RTCConfiguration = {
@@ -19,31 +20,40 @@ export const parameters = get_query_params()
 window.onload = () => main()
 
 export function main() {
+    document.body.querySelector("p")?.remove()
     log("*", "starting up")
     if (window.location.pathname.startsWith("/room/")) {
         const room_name = window.location.pathname.substring("/room/".length)
         const room = new Room(room_name)
+        create_menu(room)
         document.body.append(room.el)
     } else {
+        create_menu()
         document.body.append(create_start_screen())
     }
 }
 
 function create_start_screen() {
-    const el = document.createElement("div")
-    const header = document.createElement("h2")
-    header.textContent = "keks meet"
-    const para = document.createElement("p")
-    para.textContent = "Hier kann man dann irgendwann mal sinnvollen text hinschreiben..."
+    const with_text_content = (a: string) => (b: string) => {
+        const e = document.createElement(a)
+        e.textContent = b
+        return e
+    }
+    const p = with_text_content("p")
+    const h2 = with_text_content("h2")
 
-    // const room_input_label = document.createElement("label")
-    // room_input_label.textContent = "Room ID: "
-    // room_input_label.htmlFor = "room-id-input"
+    const el = document.createElement("div")
+    el.append(
+        h2("keks-meet"),
+        p("A web conferencing application using webrtc"),
+        p("keks-meet is free! It is licenced under the terms of the third version of the GNU Affero General Public Licence only."),
+        p("To get started, just enter a unique idenfier, then share the URL with your partner.")
+    )
 
     const room_input = document.createElement("input")
     room_input.type = "text"
     room_input.id = "room-id-input"
-    room_input.placeholder = "room id "
+    room_input.placeholder = "room id"
 
     const submit = document.createElement("input")
     submit.type = "button"
@@ -54,6 +64,7 @@ function create_start_screen() {
     submit.value = "Join room"
 
     el.classList.add("start-box")
-    el.append(header, para, room_input, document.createElement("br"), submit)
+    el.append(room_input, document.createElement("br"), submit)
+
     return el
 }
diff --git a/source/client/logger.ts b/source/client/logger.ts
index 1f7139c..e00b1d0 100644
--- a/source/client/logger.ts
+++ b/source/client/logger.ts
@@ -7,6 +7,7 @@ const log_tag_color = {
     ws: "#44FFFF",
     rnnoise: "#2222FF",
     usermodel: "#44FF44",
+    error: "#FF0000",
 }
 export type LogTag = keyof typeof log_tag_color
 
@@ -29,7 +30,7 @@ export function log(tag: LogTag, message: string, ...data: any[]) {
         logger_container.append(e)
         setTimeout(() => {
             e.remove()
-        }, 6000)
+        }, tag == "error" ? 60000 : 6000)
     }
 }
 
@@ -42,3 +43,8 @@ globalThis.addEventListener("load", () => {
     // clear the console every hour so logs dont accumulate
     setInterval(() => console.clear(), 1000 * 60 * 60)
 })
+
+globalThis.onerror = (_ev, source, line, col, err) => {
+    log("error", `${err?.name} ${err?.message}`, err)
+    log("error", `on ${source}:${line}:${col}`, err)
+}
\ No newline at end of file
diff --git a/source/client/menu.ts b/source/client/menu.ts
new file mode 100644
index 0000000..1401b42
--- /dev/null
+++ b/source/client/menu.ts
@@ -0,0 +1,26 @@
+import { Room } from "./room.ts";
+
+export function create_menu(room?: Room) {
+    const menu = document.createElement("div")
+    menu.classList.add("menu-overlay")
+    document.body.append(menu)
+
+    const item = (name: string, cb: (() => void) | string) => {
+        const p = document.createElement("p")
+        const a = document.createElement("a")
+        a.classList.add("menu-item")
+        a.textContent = name
+        if (typeof cb == "string") a.href = cb
+        else a.addEventListener("click", cb), a.href = "#"
+        p.append(a)
+        return p
+    }
+
+    if (room) menu.append(
+        item("Settings", () => alert("todo, refer to the url parameters in the docs for now"))
+    )
+    menu.append(
+        item("Licence", "/licence"),
+        item("Sources / Documentation", "https://codeberg.org/metamuffin/keks-meet"),
+    )
+}
\ No newline at end of file