small stuff

src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/websockets/ConsoleWS.kt

@@ -59,28 +59,26 @@ object ConsoleWS: WebSocket() {
                 forbidden = { allowExecution = false }
             )
 
-            if (allowExecution) {
-                runCatching {
-                    incoming.consumeEach { frame ->
-                        if (frame is Frame.Text) {
-                            val receivedText = frame.readText()
-                            logger.info("Launching command: $receivedText")
+            runCatching {
+                incoming.consumeEach { frame ->
+                    if (frame is Frame.Text && allowExecution) {
+                        val receivedText = frame.readText()
+                        logger.info("Launching command: $receivedText")
 
-                            try {
-                                if (MinecraftServerHandler.server != null) {
-                                    MinecraftServerHandler.server!!.commandManager.executeWithPrefix(
-                                        MinecraftServerHandler.server!!.commandSource,
-                                        receivedText
-                                    )
-                                }
-                            } catch (e: Exception) {
-                                e.stackTrace.forEach { logger.error(it.toString()) }
+                        try {
+                            if (MinecraftServerHandler.server != null) {
+                                MinecraftServerHandler.server!!.commandManager.executeWithPrefix(
+                                    MinecraftServerHandler.server!!.commandSource,
+                                    receivedText
+                                )
                             }
+                        } catch (e: Exception) {
+                            e.stackTrace.forEach { logger.error(it.toString()) }
                         }
                     }
-                }.onFailure { exception ->
-                    logger.error("WebSocket exception: $exception")
                 }
+            }.onFailure { exception ->
+                logger.error("WebSocket exception: $exception")
             }
         }
     }

src/main/web/sass/_header.scss

@@ -104,6 +104,7 @@ $logos-size: 50px;
             transition: left 0.3s ease, background-color 0.3s ease;
             padding-top: 10px;
             padding-bottom: 10px;
+            z-index: 50;
 
             ul {
                 margin: 0;

src/main/web/sass/_stuff.scss

@@ -1,35 +1,40 @@
-.forbidden {
-    $width: 423px;
-    $height: 96px;
-    position: relative;
+@mixin forbidden($width) {
+    .forbidden {
+        $height: calc($width / 4);
+        position: relative;
 
-    &:before {
-        content: "";
-        background-color: red;
-        width: #{$width + 35px};
-        height: #{$height + 35px};
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) rotate(-45deg);
-        border-radius: 15px;
-    }
+        &:before {
+            content: "";
+            background-color: red;
+            width: calc($width + 35px);
+            height: calc($height + 35px);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(-45deg);
+            border-radius: 15px;
+            z-index: 10;
+        }
 
-    &:after {
-        content: "FORBIDDEN";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) rotate(-45deg);
-        font-size: 70px;
-        color: white;
-        background: red;
-        border: solid 10px white;
-        border-radius: 10px;
-        font-weight: 900;
-        width: #{$width + 3px};
-        height: #{$height + 3px};
-        text-align: center;
+        &:after {
+            content: "FORBIDDEN";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(-45deg);
+            font-size: calc($width / 6);
+            color: white;
+            background: red;
+            border: solid 10px white;
+            border-radius: 10px;
+            font-weight: 900;
+            width: calc($width + 3px);
+            height: calc($height + 3px);
+            text-align: center;
+            display: flex;
+            align-items: center;
+            z-index: 10;
+        }
     }
 }
 

src/main/web/sass/tabs/_console.scss

@@ -1,8 +1,9 @@
 @use "../variables" as vars;
+@use "../stuff" as stuff;
 
 $console-width: 100%;
 $console-height: calc($console-width * 0.8);
-$console-input-height: 24px; // 
+$console-input-height: 24px;
 
 #console-tab {
     .container {
@@ -37,6 +38,7 @@ $console-input-height: 24px; //
                     color: #597cef;
                 }
             }
+            @include stuff.forbidden(130px);
 
             .console {
                 width: $console-width;
@@ -82,6 +84,7 @@ $console-input-height: 24px; //
                     overflow-x: hidden;
                     scroll-behavior: smooth;
                 }
+                @include stuff.forbidden(423px);
 
                 .total-messages {
                     position: absolute;

src/main/web/sass/tabs/_settings.scss

@@ -22,6 +22,8 @@
                 border-radius: 2px;
                 transition: left 0.3s ease, width 0.3s ease;
                 pointer-events: none;
+
+                left: 0px; width: 126px; // needs for initial position, idk why, but first time function sets left 0 and width 0
             }
 
             .separator {

src/main/web/ts/tabs/console.ts

@@ -133,18 +133,31 @@ async function connect() {
 
         ws.onclose = () => {
             inputField.removeEventListener("keypress", event => onEnter(event));
-            ToastSystem.showInfo("Connection closed");
-            ToastSystem.showInfo("Reconnecting... In 30 seconds");
-            setTimeout(() => {
-                connect();
-                console.log("Reconnecting...");
-            }, 30000);
+
+            if (!document.hidden) {
+                ToastSystem.showInfo("Connection closed");
+                ToastSystem.showInfo("Reconnecting... In 30 seconds");
+                setTimeout(() => {
+                    connect();
+                    console.log("Reconnecting...");
+                }, 30000);
+            }
         };
 
         ws.onerror = () => {
             ToastSystem.showError("Connection error");
         };
 
+        const visibilitychangeListener = (event: Event) => {
+            if (document.hidden) {
+                ws.close();
+            } else {
+                connect();
+                document.removeEventListener('visibilitychange', visibilitychangeListener);
+            }
+          };
+          document.addEventListener('visibilitychange', visibilitychangeListener);
+
         sendCommand = function (command: string) {
             ws.send(command);
         }
@@ -193,14 +206,27 @@ async function connectStats() {
         };
 
         ws.onclose = () => {
-            setTimeout(() => {
-                connect();
-            }, 30000);
+            if (!document.hidden) {
+                setTimeout(() => {
+                    connectStats();
+                }, 30000);
+            }
         };
 
         ws.onerror = (error) => {
             console.error(error);
         };
+
+        const visibilitychangeListener = (event: Event) => {
+            if (document.hidden) {
+                ws.close();
+            } else {
+                connectStats();
+                document.removeEventListener('visibilitychange', visibilitychangeListener);
+            }
+        };
+        document.addEventListener('visibilitychange', visibilitychangeListener);
+
     }
 
 }

src/main/web/ts/tabs/settings.ts

@@ -24,10 +24,6 @@ function underlineProcessing() {
         underline.style.width = `${width}px`
     }
 
-    setTimeout(() => {
-        updateUnderline();
-    }, 100) //Needs to default check, idk normal solutions, seems like we just waiting for styling
-
     container.addEventListener("change", updateUnderline);
     window.addEventListener("resize", updateUnderline);
 }