Merge pull request #438 from Pax1601/432-display-in-game-time-and-elapsed-time

432 display in game time and elapsed time

client/public/stylesheets/panels/connectionstatus.css

@@ -1,8 +1,15 @@
-#connection-status-panel dt::before {
+#connection-status-panel {
+	align-items: center;
+	display:flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+#connection-status-panel #connection-status-message::before {
 	content: "No connection";
 }
 
-#connection-status-panel dd::after {
+#connection-status-light {
 	border-radius: 50%;
 	background: red;
 	content: " ";
@@ -10,19 +17,35 @@
 	width: 12px;
 }
 
-#connection-status-panel[data-is-connected] dt::before {
-	content: "Connected";
+#connection-status-panel[data-is-connected] #connection-status-message::before {
+	content: "";
 }
 
-#connection-status-panel[data-is-connected] dd::after {
+#connection-status-panel .time-display {
+	display:none;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+#connection-status-panel[data-is-connected] .mission-elapsed-time,
+#connection-status-panel[data-is-connected]:not([data-mission-time]) .mission-time {
+	display:none;
+}
+
+#connection-status-panel[data-is-connected]:not([data-mission-time]) .mission-elapsed-time,
+#connection-status-panel[data-is-connected][data-mission-time] .mission-time {
+	display:block;
+}
+
+#connection-status-panel[data-is-connected] #connection-status-light {
 	background: var(--accent-green);
 }
 
-#connection-status-panel[data-is-paused] dt::before {
+#connection-status-panel[data-is-paused] #connection-status-message::before {
 	content: "Server paused";
 }
 
-#connection-status-panel[data-is-paused] dd {
+#connection-status-panel[data-is-paused] #connection-status-light {
 	animation: pulse 1s infinite;
 }
 
@@ -35,6 +58,6 @@
 	}
 }
 
-#connection-status-panel[data-is-paused] dd::after {
+#connection-status-panel[data-is-paused] #connection-status-light {
 	background: var(--accent-amber);
 }

client/src/mission/missionmanager.ts

@@ -87,6 +87,7 @@ export class MissionManager {
 
             /* Set the date and time data */
             this.#dateAndTime = data.mission.dateAndTime;
+            data.mission.dateAndTime.time.s -= 1;  //  ED has seconds 1-60 and not 0-59?!
 
             /* Set the coalition countries */
             this.#coalitions = data.mission.coalitions;

client/src/panels/connectionstatuspanel.ts

@@ -2,10 +2,31 @@ import { Panel } from "./panel";
 
 export class ConnectionStatusPanel extends Panel {
 
+    #elapsedTimeElement:HTMLElement;
+    #missionTimeElement:HTMLElement;
+
     constructor(ID: string) {
         super( ID );
+        this.#elapsedTimeElement = <HTMLElement>this.getElement().querySelector( ".mission-elapsed-time" );
+        this.#missionTimeElement = <HTMLElement>this.getElement().querySelector( ".mission-time" );
+
+        this.#elapsedTimeElement.addEventListener( "click", () => {
+            this.#toggleTime();
+        });
+
+        this.#missionTimeElement.addEventListener( "click", () => {
+            this.#toggleTime();
+        });
+        
     }
 
+    setElapsedTime( time:string ) {
+        this.#elapsedTimeElement.innerText = `ET: ${time}`;
+    }
+
+    setMissionTime( time:string ) {
+        this.#missionTimeElement.innerText = `MT: ${time} L`;
+    }
 
     showDisconnected() {
         this.getElement().toggleAttribute( "data-is-connected", false );
@@ -24,4 +45,7 @@ export class ConnectionStatusPanel extends Panel {
         this.getElement().toggleAttribute( "data-is-paused", true );
     }
     
+    #toggleTime() {
+        this.getElement().toggleAttribute( "data-mission-time" );
+    }
 }

client/src/server/servermanager.ts

@@ -6,6 +6,7 @@ import { LogPanel } from '../panels/logpanel';
 import { Popup } from '../popups/popup';
 import { ConnectionStatusPanel } from '../panels/connectionstatuspanel';
 import { AirbasesData, BullseyesData, GeneralSettings, MissionData, Radio, ServerRequestOptions, TACAN } from '../interfaces';
+import { zeroAppend } from '../other/utils';
 
 export class ServerManager {
     #connected: boolean = false;
@@ -467,6 +468,23 @@ export class ServerManager {
             }
         }, ( this.getServerIsPaused() ? 500 : 5000 ));
 
+        //  Mission clock and elapsed time
+        window.setInterval( () => {
+            
+            if ( !this.getConnected() || this.#serverIsPaused ) {
+                return;
+            }
+
+            const elapsedMissionTime = getApp().getMissionManager().getDateAndTime().elapsedTime;
+
+            const csp = (getApp().getPanelsManager().get("connectionStatus") as ConnectionStatusPanel);
+            const mt  = getApp().getMissionManager().getDateAndTime().time;
+
+            csp.setMissionTime( [ mt.h, mt.m, mt.s ].map( n => zeroAppend( n, 2 )).join( ":" ) );
+            csp.setElapsedTime( new Date( elapsedMissionTime * 1000 ).toISOString().substring( 11, 19 ) );
+
+        }, 1000 );
+
         window.setInterval(() => {
             if (!this.getPaused() && getApp().getMissionManager().getCommandModeOptions().commandMode != NONE) {
                 this.getWeapons((buffer: ArrayBuffer) => {

client/views/panels/connectionstatus.ejs

@@ -1,6 +1,7 @@
 <div id="connection-status-panel" class="ol-panel" oncontextmenu="return false;">
-    <dl class="ol-data-grid">
-        <dt></dt>
-        <dd></dd>
-    </dl>
+    <div id="connection-status-message">
+        <abbr title="Elapsed time. Click to toggle." class="time-display mission-elapsed-time"></abbr>
+        <abbr title="Mission time (local). Click to toggle." class="time-display mission-time"></abbr>
+    </div>
+    <div id="connection-status-light"></div>
 </div>