diff --git a/client/public/stylesheets/panels/connectionstatus.css b/client/public/stylesheets/panels/connectionstatus.css index b785c023..989ae9f4 100644 --- a/client/public/stylesheets/panels/connectionstatus.css +++ b/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); } \ No newline at end of file diff --git a/client/src/mission/missionmanager.ts b/client/src/mission/missionmanager.ts index 17b24bf4..599ca900 100644 --- a/client/src/mission/missionmanager.ts +++ b/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; diff --git a/client/src/panels/connectionstatuspanel.ts b/client/src/panels/connectionstatuspanel.ts index 2621b26a..cd363de1 100644 --- a/client/src/panels/connectionstatuspanel.ts +++ b/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 = this.getElement().querySelector( ".mission-elapsed-time" ); + this.#missionTimeElement = 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" ); + } } \ No newline at end of file diff --git a/client/src/server/servermanager.ts b/client/src/server/servermanager.ts index 1d36200f..be2bfb5e 100644 --- a/client/src/server/servermanager.ts +++ b/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) => { diff --git a/client/views/panels/connectionstatus.ejs b/client/views/panels/connectionstatus.ejs index ac92da78..067f9abd 100644 --- a/client/views/panels/connectionstatus.ejs +++ b/client/views/panels/connectionstatus.ejs @@ -1,6 +1,7 @@
-
-
-
-
+
+ + +
+
\ No newline at end of file