Merge pull request #421 from Pax1601/419-server-is-paused

User now alerted when server is paused.

client/public/stylesheets/panels/connectionstatus.css

@@ -16,4 +16,25 @@
 
 #connection-status-panel[data-is-connected] dd::after {
 	background: var(--accent-green);
+}
+
+#connection-status-panel[data-is-paused] dt::before {
+	content: "Server paused";
+}
+
+#connection-status-panel[data-is-paused] dd {
+	animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+#connection-status-panel[data-is-paused] dd::after {
+	background: var(--accent-amber);
 }

client/public/themes/olympus/theme.css

@@ -20,6 +20,7 @@
     --unit-background-red: #FF5858;
 
     /*** UI Colours **/
+    --accent-amber: #ffd828;
     --accent-green: #8bff63;
     --accent-light-blue: #5ca7ff;
     --transparent-accent-light-blue: rgba(92, 167, 255, .33);

client/src/panels/connectionstatuspanel.ts

@@ -1,12 +1,27 @@
 import { Panel } from "./panel";
 
 export class ConnectionStatusPanel extends Panel {
+
     constructor(ID: string) {
         super( ID );
     }
 
-    
-    update(connected: boolean) {
-        this.getElement().toggleAttribute( "data-is-connected", connected );
+
+    showDisconnected() {
+        this.getElement().toggleAttribute( "data-is-connected", false );
+        this.getElement().toggleAttribute( "data-is-paused", false );
     }
+
+
+    showConnected() {
+        this.getElement().toggleAttribute( "data-is-connected", true );
+        this.getElement().toggleAttribute( "data-is-paused", false );
+    }
+
+
+    showServerPaused() {
+        this.getElement().toggleAttribute( "data-is-connected", false );
+        this.getElement().toggleAttribute( "data-is-paused", true );
+    }
+    
 }

client/src/server/servermanager.ts

@@ -17,6 +17,8 @@ export class ServerManager {
     #sessionHash: string | null = null;
     #lastUpdateTimes: {[key: string]: number} = {}
     #demoEnabled = false;
+    #previousMissionElapsedTime:number = 0;  //  Track if mission elapsed time is increasing (i.e. is the server paused)
+    #serverIsPaused: boolean = false;
 
     constructor() {
         this.#lastUpdateTimes[UNITS_URI] = Date.now();
@@ -426,9 +428,25 @@ export class ServerManager {
                     var time = getApp().getUnitsManager()?.update(buffer); 
                     return time;
                 }, true);
-                (getApp().getPanelsManager().get("connectionStatus") as ConnectionStatusPanel).update(this.getConnected());
+
+                const elapsedMissionTime         = getApp().getMissionManager().getDateAndTime().elapsedTime;
+                this.#serverIsPaused             = ( elapsedMissionTime === this.#previousMissionElapsedTime );
+                this.#previousMissionElapsedTime = elapsedMissionTime;
+
+                const csp = (getApp().getPanelsManager().get("connectionStatus") as ConnectionStatusPanel);
+
+                if ( this.getConnected() ) {
+                    if ( this.getServerIsPaused() ) {
+                        csp.showServerPaused();
+                    } else {
+                        csp.showConnected();
+                    }
+                } else {
+                    csp.showDisconnected();
+                }
+
             }
-        }, 5000);
+        }, ( this.getServerIsPaused() ? 500 : 5000 ));
 
         window.setInterval(() => {
             if (!this.getPaused() && getApp().getMissionManager().getCommandModeOptions().commandMode != NONE) {
@@ -502,4 +520,8 @@ export class ServerManager {
     getPaused() {
         return this.#paused;
     }
+
+    getServerIsPaused() {
+        return this.#serverIsPaused;
+    }
 }