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..2621b26a 100644 --- a/client/src/panels/connectionstatuspanel.ts +++ b/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 ); + } + } \ No newline at end of file diff --git a/client/src/server/servermanager.ts b/client/src/server/servermanager.ts index 34c90cf4..12f20206 100644 --- a/client/src/server/servermanager.ts +++ b/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; + } }