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
DjCrqss · Jan 21, 2025 · b793dbc · b793dbc
1 parent a328cbd
commit b793dbc
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -196,6 +196,9 @@ <h2 data-i18n="menus.language.title">Language</h2>
 <!-- toolbar settings related scripts -->
 <script type="text/javascript" src="pages/globaldefault/js/toolbarfunctions.js"></script>
 
+<!-- animation scripts -->
+<script type="text/javascript" src="pages/globaldefault/js/animations.js"></script>
+
 <!-- translations -->
 <script src="https://unpkg.com/@andreasremdt/simple-translator@latest/dist/umd/translator.min.js"></script>
 <script type="text/javascript" src="pages/globaldefault/data/languages.js" defer></script>

diff --git a/pages/globaldefault/js/animations.js 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);
+}
diff --git 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
@@ -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