diff --git a/src/locutus.ts b/src/locutus.ts index b021184..6634ee9 100644 --- a/src/locutus.ts +++ b/src/locutus.ts @@ -148,9 +148,18 @@ export class App { this.windows.appendChild(win); } - addMessage(message: string) { + addMessage(id: string, message: string, delivered: boolean = true) { + const test = document.getElementById(`msg-${id}`); + if (test) return; + const msg = document.createElement("div"); + msg.id = `msg-${id}`; msg.classList.add("message"); + if (delivered) { + msg.classList.add("delivered"); + } else { + msg.classList.add("pending"); + } msg.innerText = message; @@ -161,6 +170,14 @@ export class App { chat.scrollTop = chat.scrollHeight; } + confirmMessage(id: string) { + const msg = document.getElementById(`msg-${id}`); + if (!msg) return; + + msg.classList.remove("pending"); + msg.classList.add("delivered"); + } + addLoginWindow() { const win = document.createElement("div"); win.classList.add("window-login"); @@ -243,21 +260,28 @@ export class App { const input = document.getElementsByTagName("input")[0]; if (!input) throw new Error("Element not found"); - input.addEventListener("keyup", async event => { + input.addEventListener("keydown", event => { if (event.key === "Enter" && input.value.length > 0) { if (!this.session) throw new Error("No session found"); - this.addMessage(input.value); + const id = crypto.randomUUID(); const val = input.value; - input.value = ""; - await this.session.newEvent("24595934-4540-4333-ac2b-78796ac3f25f", { - message: val, + this.addMessage(id, input.value, false); + + this.session.newEvent( + "24595934-4540-4333-ac2b-78796ac3f25f", + {message: val}, + id + ).then(() => { + this.confirmMessage(id); }); + + input.value = ""; } }); this.session.subscribe(event => { - this.addMessage(event.data.message); - }); + this.addMessage(event.id, event.data.message); + }).then(); } } diff --git a/src/main.ts b/src/main.ts index ed6248b..ed5eda1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,8 +9,8 @@ window.addEventListener("DOMContentLoaded", () => { } const locutus = new Locutus.App(); + if (isMobilePlatform()) { - console.log("MOBILE"); document.addEventListener("visibilitychange", () => { if (document.visibilityState === 'hidden') { locutus.sleep(); @@ -18,12 +18,11 @@ window.addEventListener("DOMContentLoaded", () => { locutus.wakeup().then(); } }); - } else { - console.log("DESKTOP"); - window.addEventListener("beforeunload", (evt) => { - locutus.close(); - }); } + + window.addEventListener("beforeunload", () => { + locutus.close(); + }); }); function isMobilePlatform(): boolean { diff --git a/src/usimp.ts b/src/usimp.ts index 3e9d17a..b439afa 100644 --- a/src/usimp.ts +++ b/src/usimp.ts @@ -34,7 +34,7 @@ interface EventJson { data: { message: string, } - uuid: string, + id: string, } interface WellKnownJson { @@ -390,11 +390,12 @@ export class Session { return response; } - async newEvent(roomId: string, data: any) { + async newEvent(roomId: string, data: any, id: string | undefined = undefined) { return this.send("new_event", { room_id: roomId, events: [{ - data: data + data: data, + id: id, }], }); } diff --git a/www/res/styles/styles.css b/www/res/styles/styles.css index 462cee3..74cddce 100644 --- a/www/res/styles/styles.css +++ b/www/res/styles/styles.css @@ -235,6 +235,10 @@ main .chat .message { font-size: 0.875rem; } +main .chat .message.pending { + border-color: #C00000; +} + main .chat ::-webkit-scrollbar { width: 4px; }