From 586cb1738c693bfb945ed7bbdb57a042725c9265 Mon Sep 17 00:00:00 2001 From: Baipyrus Date: Thu, 2 Feb 2023 08:12:12 +0100 Subject: [PATCH] localstorage and disconnect --- index.html | 1 - js/commands.js | 25 +++++++++++++-------- js/main.js | 11 +++++---- js/networking.js | 58 ++++++++++++++++++++++++++++++++---------------- 4 files changed, 60 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 55c7358..910b170 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,6 @@ ██████╔╝██║ ██║██║██║ ██║ ██║ ██║██╗╚██████╔╝███████║ ╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚══════╝ - root@baipyr.us:~# diff --git a/js/commands.js b/js/commands.js index 4369916..9294408 100644 --- a/js/commands.js +++ b/js/commands.js @@ -152,7 +152,7 @@ function cmd_echo(input) { function cmd_nick(input) { if (input === undefined) return "No nickname was given!"; - if (user.connected) + if (!!window.localStorage.getItem("connected")) sendNickname(input[0]); else connect(input[0]); @@ -163,25 +163,23 @@ function cmd_nick(input) { function cmd_msg(input) { if (input === undefined) return "No recipient was given!"; - if (!user.connected) + if (!window.localStorage.getItem("connected")) return "You are not connected! Use the 'nick' command to connect using your username."; - if (user.name === "") + if (window.localStorage.getItem("name") === "") return "You do not have a name!"; // Get recipient username without spaces and pretext const username = input[0]; pretext.current = `Chat (${username})> `; // Set chat mode to direct messages and start pulling chatMode = `msg ${username}`; - user.chatPull = setInterval(getChatMessages, 500); + userData.chatPull = setInterval(getChatMessages, 500); } // Exit current level (example: chat -> main) function cmd_exit(error) { const level = chatMode.split(' ')[0]; - if (level === "default") { - console.log("Test!"); + if (level === "default") return "Already at top-level!"; - } // Set mode to default and reset pretext chatMode = "default"; @@ -191,7 +189,7 @@ function cmd_exit(error) { // case "chat": case "msg": // Stop chat pulling - clearInterval(user.chatPull); + clearInterval(userData.chatPull); break; } @@ -202,7 +200,7 @@ function cmd_exit(error) { // List all users to be able to chat with function cmd_ls() { - if (!user.connected) + if (!window.localStorage.getItem("connected")) return "You are not connected! Use the 'nick' command to connect using your username."; requestUsernames(); return null; @@ -210,6 +208,15 @@ function cmd_ls() { // Ping host for two-way-delay function cmd_ping() { + if (!window.localStorage.getItem("connected")) + return "You are not connected! Use the 'nick' command to connect using your username."; requestPing(); return null; +} + +// User wants to log out +function cmd_logout() { + if (!window.localStorage.getItem("connected")) + return "You are not even connected yet!"; + disconnect(); } \ No newline at end of file diff --git a/js/main.js b/js/main.js index b710281..507894b 100644 --- a/js/main.js +++ b/js/main.js @@ -1,8 +1,3 @@ -let pretext = { - original: "root@baipyr.us:~# ", - current: "root@baipyr.us:~# " -}; - // Initiating variables const length = pretext.current.length+1; let cursorPosition = 0; @@ -14,6 +9,10 @@ const tbDiv = document.getElementById("textbox"); const textIn = document.getElementById("input"); const textCur = document.getElementById("current"); const cursor = document.getElementById("cursor"); +// Set initial pretext +const pretextElement = document.createElement('a'); +pretextElement.innerHTML = pretext.original; +tbDiv.insertBefore(pretextElement, tbDiv.children[1]); // Initial cursor offset cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`; @@ -188,7 +187,7 @@ function createText(str, safe=true) { // Rename last-posted pretext to own username function renameToSelf() { const tbc = tbDiv.children; - tbc[tbc.length - 3].innerHTML = `${user.name}#${user.id}: `; + tbc[tbc.length - 3].innerHTML = `${window.localStorage.getItem("name")}#${window.localStorage.getItem("id")}: `; } // Update cursor position based on coordinates diff --git a/js/networking.js b/js/networking.js index 6f89ac1..b57c831 100644 --- a/js/networking.js +++ b/js/networking.js @@ -1,11 +1,25 @@ // Global networking variables -const user = { id: "", name: "", history: [], connected: false, chatPull: null }; +let pretext = { + original: "root@baipyr.us:~# ", + current: "root@baipyr.us:~# " +}; + +const userData = { history: [], chatPull: null }; let chatMode = "default"; +if (window.localStorage.getItem("id") === null) + window.localStorage.setItem("id", ""); +if (window.localStorage.getItem("name") === null) + window.localStorage.setItem("name", ""); +if (window.localStorage.getItem("connected") === null) + window.localStorage.setItem("connected", ""); +else if (!!window.localStorage.getItem("connected")) + pretext.original = pretext.current = `${window.localStorage.getItem("name")}@baipyr.us:~# `; + // Tell server to disconnect -document.body.onunload = document.body.onbeforeunload = () => { - if (user.connected) +function disconnect() { + if (!!window.localStorage.getItem("connected")) { fetch('/disconnect', { method: 'POST', headers: { @@ -13,15 +27,20 @@ document.body.onunload = document.body.onbeforeunload = () => { 'Content-Type': 'application/json' }, body: JSON.stringify({ - name: user.name, - id: user.id + name: window.localStorage.getItem("name"), + id: window.localStorage.getItem("id") }) }).then(res => {}); -}; + window.localStorage.setItem("id", ""); + window.localStorage.setItem("name", ""); + window.localStorage.setItem("connected", ""); + pretext.original = pretext.current = "root@baipyr.us:~# "; + } +} // Connect to server function connect(name) { - user.name = name; + window.localStorage.setItem("name", name); fetch('/connect', { method: 'POST', headers: { @@ -31,7 +50,7 @@ function connect(name) { body: JSON.stringify({ name }) }).then(res => { if (res.status === 200) { - user.connected = true; + window.localStorage.setItem("connected", "1"); return res.json(); } // No valid status code was sent @@ -41,8 +60,8 @@ function connect(name) { return; // Save provided id const { id } = res; - user.id = id; - pretext.original = pretext.current = `${user.name}@baipyr.us:~# `; + window.localStorage.setItem("id", id); + pretext.original = pretext.current = `${name}@baipyr.us:~# `; outputText({output: `Connected as '${name}#${id}'.`}); }); } @@ -50,7 +69,8 @@ function connect(name) { // Send nickname to server, receive verification function sendNickname(name) { - user.name = name; + const oldName = window.localStorage.getItem("name"); + window.localStorage.setItem("name", name); fetch('/nickname', { method: 'POST', headers: { @@ -58,8 +78,8 @@ function sendNickname(name) { 'Content-Type': 'application/json' }, body: JSON.stringify({ - oldName: user.name, - id: user.id, + id: window.localStorage.getItem("id"), + oldName, name }) }).then(res => { @@ -71,8 +91,8 @@ function sendNickname(name) { return; // Receive name and save it const { id } = res; - user.id = id; - pretext.original = pretext.current = `${user.name}@baipyr.us:~# `; + window.localStorage.setItem("id", id); + pretext.original = pretext.current = `${name}@baipyr.us:~# `; // Reply whether name is taken or not outputText({output: `Applied name '${name}#${id}'.`}); }); @@ -87,8 +107,8 @@ function getChatMessages() { 'Content-Type': 'application/json' }, body: JSON.stringify({ - name: user.name, - id: user.id + name: window.localStorage.getItem("name"), + id: window.localStorage.getItem("id") }) }).then(res => { // Incoming messages @@ -122,8 +142,8 @@ function directMessage(name, message) { }, body: JSON.stringify({ recipient: name, - name: user.name, - id: user.id, + name: window.localStorage.getItem("name"), + id: window.localStorage.getItem("id"), message }) }).then(res => {});