From b793dbc735f81af827b428b84c3d7d0d006e5950 Mon Sep 17 00:00:00 2001 From: DJ Cross Date: Tue, 21 Jan 2025 19:18:52 +1300 Subject: [PATCH] 42 add successful connection and connection lost screen (#47) * Initial connect and disconnect animation * Bug fixes for animation and make it not display on first load * Fix connected animation issue * Speed up animations --- index.html | 3 + pages/globaldefault/js/animations.js | 99 ++++++++++++++++++++++++++++ pages/globaldefault/js/keymenu.js | 8 ++- pages/globaldefault/js/websocket.js | 20 +++++- 4 files changed, 127 insertions(+), 3 deletions(-) create mode 100644 pages/globaldefault/js/animations.js diff --git a/index.html b/index.html index f3302e8..f06e49e 100644 --- a/index.html +++ b/index.html @@ -196,6 +196,9 @@

Language

+ + + diff --git a/pages/globaldefault/js/animations.js b/pages/globaldefault/js/animations.js new file mode 100644 index 0000000..aef4c35 --- /dev/null +++ b/pages/globaldefault/js/animations.js @@ -0,0 +1,99 @@ +function connectedAnim(){ + // create div coverintg the whole screen + var cover = document.createElement('div'); + cover.style.position = "fixed"; + cover.style.bottom = "-250vmax"; + cover.style.right = "calc(-250vmax + 10vw)"; + cover.style.width = "0"; + cover.style.height = "0"; + cover.style.pointerEvents = "none"; + cover.style.opacity = 0.5; + cover.style.zIndex = "99"; + cover.style.background = 'radial-gradient(circle, rgba(122,255,100,0) 0%, rgba(60,219,107,1) 30%, rgba(122,255,100,0) 67%)'; + + setTimeout(() => { + cover.style.transition = "opacity 1.5s, width 1.5s, height 1.5s"; + cover.style.width = "500vmax"; + cover.style.height = "500vmax";; + }, 50); + + setTimeout(() => { + cover.style.opacity = 0; + setTimeout(() => { + document.body.removeChild(cover); + }, 2000); + }, 750); + + displayToast("Connected to client.", "rgb(50, 101, 66)"); + + // display onscreen + document.body.appendChild(cover); +} + +function disconnectedAnim(){ + // create div coverintg the whole screen + var cover1 = document.createElement('div'); + cover1.style.position = "fixed"; + cover1.style.bottom = "-250vmax"; + cover1.style.right = "calc(-250vmax + 10vw)"; + cover1.style.width = "500vmax"; + cover1.style.height = "500vmax";; + cover1.style.pointerEvents = "none"; + cover1.style.opacity = 0.5; + cover1.style.zIndex = "99"; + cover1.style.background = 'radial-gradient(circle, rgba(122,255,100,0) 0%, rgb(219, 60, 60) 30%, rgba(122,255,100,0) 67%)'; + + setTimeout(() => { + cover1.style.transition = "opacity 1s, width 1s cubic-bezier(.26,.35,.84,.05), height 1s cubic-bezier(.26,.35,.84,.05)"; + cover1.style.width = "0"; + cover1.style.height = "0"; + }, 50); + + setTimeout(() => { + cover1.style.opacity = 0; + setTimeout(() => { + document.body.removeChild(cover1); + }, 2500); + }, 750); + + displayToast("Disconnected from client.", "rgb(101, 50, 50)"); + + // display onscreen + document.body.appendChild(cover1); +} + +function displayToast(content, colour){ + // connected message + var message = document.createElement('span'); + message.style.position = "absolute"; + message.style.opacity = 0; + message.style.bottom = "0.5em"; + message.style.right = "1em"; + message.style.color = "white"; + message.style.fontFamily = "sans-serif"; + message.style.fontSize = "1.3em"; + message.textContent = content; + message.style.backgroundColor = colour; + message.style.padding = "0.65em 1.15em"; + message.style.borderRadius = "0.35em"; + message.style.transition = "opacity 0.3s, bottom 0.3s"; + message.style.zIndex = "100"; + + // display animation + setTimeout(() => { + message.style.opacity = 1; + message.style.bottom = "1em"; + }, 400); + + // removal animation + setTimeout(() => { + message.style.opacity = 0; + message.style.bottom = "1.5em"; + setTimeout(() => { + document.body.removeChild(message); + }, 300); + }, 3000); + + // display onscreen + document.body.appendChild(message); +} \ No newline at end of file diff --git a/pages/globaldefault/js/keymenu.js b/pages/globaldefault/js/keymenu.js index b0275d0..e26bcd8 100644 --- a/pages/globaldefault/js/keymenu.js +++ b/pages/globaldefault/js/keymenu.js @@ -48,7 +48,7 @@ function updateKeyLabel(event){ saveState(); } -// hide menu +// hide menu when clicking outside of it document.addEventListener("click", function (event) { if (activeKey != null && !menuDialog.contains(event.target) && !activeKey.contains(event.target) && ![...selectedKeys].some(x => x.element.contains(event.target)) && !event.shiftKey){ @@ -196,6 +196,7 @@ function keyInteract(elmnt) { function elementResizeBoth(e) {{ e = e || window.event; e.preventDefault(); + hideDialog(); // calculate the new cursor position to add to width and height width += (e.clientX - oldPosX); @@ -215,6 +216,7 @@ function keyInteract(elmnt) { function elementResizeWidth(e) { e = e || window.event; e.preventDefault(); + hideDialog(); // calculate the new cursor position to add to width width += (e.clientX - oldPosX); @@ -229,6 +231,7 @@ function keyInteract(elmnt) { function elementResizeHeight(e) { e = e || window.event; e.preventDefault(); + hideDialog(); // calculate the new cursor position to add to height height += (e.clientY - oldPosY); @@ -243,6 +246,9 @@ function keyInteract(elmnt) { function elementDrag(e) { e = e || window.event; e.preventDefault(); + + hideDialog(); + // calculate the new cursor position: xDiff = e.clientX - oldPosX; diff --git a/pages/globaldefault/js/websocket.js b/pages/globaldefault/js/websocket.js index ee5cfb3..cb32455 100644 --- a/pages/globaldefault/js/websocket.js +++ b/pages/globaldefault/js/websocket.js @@ -7,6 +7,7 @@ var latestInputs = new Array(); // logs inputs of keys var defaultWSI = "ws://127.0.0.1:32312/"; var knownWSI = "ws://127.0.0.1/" var useDefault = true; +var firstDisconnect = false; function changeDefaultWSI(optionalCustomWSI) { @@ -20,14 +21,29 @@ function changeDefaultWSI(optionalCustomWSI) { function connect() { // websocket const wsUri = useDefault ? defaultWSI : knownWSI; + const websocket = new WebSocket(wsUri); + // action when websocket connects - websocket.onopen = (e) => { console.log("Connected to server."); }; + websocket.onopen = (e) => { + console.log("Connected to server."); + if (Date.now() - performance.timing.navigationStart > 3000) { + // stops the animation playing every refresh + connectedAnim(); + } else { + displayToast("Connected to client.", "rgb(50, 101, 66)"); + } + firstDisconnect = true; + }; // action if websocket closes websocket.onclose = (e) => { console.log("Socket is closed. Reconnect will be attempted in 3 seconds."); + if (firstDisconnect) { + disconnectedAnim(); + firstDisconnect = false; + } // swap websocket address to handle older versions of the server useDefault = !useDefault; // reset key input values @@ -40,7 +56,7 @@ function connect() { websocket.onmessage = (e) => { update(`${e.data}`); }; // when websocket recieves an error - websocket.onerror = (e) => { console.log("Error. " + e.data); }; + websocket.onerror = (e) => { if(firstDisconnect) console.log("Error. " + e.data); }; } // function to update the display on the screen