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