From 3db5202cdff1723c7074ec8b3affd5f9b723b06f Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Sun, 1 Oct 2023 20:53:30 +0100 Subject: [PATCH 1/2] 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 From a82c033da038cbacf13ecf76813f6b2edfdf5f3e Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Mon, 2 Oct 2023 07:15:00 +0100 Subject: [PATCH 2/2] Timeout much shorter when server is paused to reduce update lag --- client/src/panels/connectionstatuspanel.ts | 41 +++++++++------------- client/src/server/servermanager.ts | 26 ++++++++++++-- 2 files changed, 40 insertions(+), 27 deletions(-) diff --git a/client/src/panels/connectionstatuspanel.ts b/client/src/panels/connectionstatuspanel.ts index 7e0a331e..2621b26a 100644 --- a/client/src/panels/connectionstatuspanel.ts +++ b/client/src/panels/connectionstatuspanel.ts @@ -1,36 +1,27 @@ -import { getApp } from ".."; import { Panel } from "./panel"; export class ConnectionStatusPanel extends Panel { - #previousMissionElapsedTime:number = 0; - constructor(ID: string) { super( ID ); } - - update(connected: boolean) { - - 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 ); - - } + 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; + } }