From 3db5202cdff1723c7074ec8b3affd5f9b723b06f Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Sun, 1 Oct 2023 20:53:30 +0100
Subject: [PATCH] User now alerted when server is paused.

---
 .../stylesheets/panels/connectionstatus.css   | 21 +++++++++++++++
 client/public/themes/olympus/theme.css        |  1 +
 client/src/panels/connectionstatuspanel.ts    | 26 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/client/public/stylesheets/panels/connectionstatus.css b/client/public/stylesheets/panels/connectionstatus.css
index 2b7dcec4..b785c023 100644
--- a/client/public/stylesheets/panels/connectionstatus.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/client/public/themes/olympus/theme.css b/client/public/themes/olympus/theme.css
index 520d6927..df1c6244 100644
--- a/client/public/themes/olympus/theme.css
+++ b/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);
diff --git a/client/src/panels/connectionstatuspanel.ts b/client/src/panels/connectionstatuspanel.ts
index 6ab2997e..7e0a331e 100644
--- a/client/src/panels/connectionstatuspanel.ts
+++ b/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 );
+
+        }
+
     }
 }
\ No newline at end of file