User now alerted when server is paused.

client/public/stylesheets/panels/connectionstatus.css

@@ -17,3 +17,24 @@
 #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,36 @@
+import { getApp } from "..";
 import { Panel } from "./panel";
 
 export class ConnectionStatusPanel extends Panel {
+
+    #previousMissionElapsedTime:number = 0;
+
     constructor(ID: string) {
         super( ID );
     }
 
     
     update(connected: boolean) {
-        this.getElement().toggleAttribute( "data-is-connected", connected );
+
+        if ( connected ) {
+
+            const missionElapsedTime = getApp().getMissionManager().getDateAndTime().elapsedTime;
+    
+            if ( missionElapsedTime === this.#previousMissionElapsedTime ) {
+                this.getElement().toggleAttribute( "data-is-connected", false );
+                this.getElement().toggleAttribute( "data-is-paused", true );
+            } else {
+                this.getElement().toggleAttribute( "data-is-connected", true );
+                this.getElement().toggleAttribute( "data-is-paused", false );
+            }
+
+            this.#previousMissionElapsedTime = missionElapsedTime;
+
+        } else {
+
+            this.getElement().toggleAttribute( "data-is-connected", false );
+
+        }
+
     }
 }