diff --git a/frontend/public/global.css b/frontend/public/global.css index 602e030..fc94e0e 100644 --- a/frontend/public/global.css +++ b/frontend/public/global.css @@ -39,6 +39,16 @@ body { line-height: 1.75; } +.pre--loading-screen { + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; + overflow: hidden; + background-color: var(--background-color-1); +} + .h1 { font-size: 2.488rem; } diff --git a/frontend/public/index.html b/frontend/public/index.html index f587b4b..a2282ab 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -13,5 +13,6 @@ +
heating up the crt...
diff --git a/frontend/src/components/pages/main/Main.svelte b/frontend/src/components/pages/main/Main.svelte index b363e41..e63274d 100644 --- a/frontend/src/components/pages/main/Main.svelte +++ b/frontend/src/components/pages/main/Main.svelte @@ -1,19 +1,35 @@ + - -
- - -
+{#if $gatewayStatus.ready} +
+ + +
+{:else} +
+ connecting... +
+{/if} diff --git a/frontend/src/gateway.js b/frontend/src/gateway.js index 1dc9e4b..b547174 100644 --- a/frontend/src/gateway.js +++ b/frontend/src/gateway.js @@ -25,6 +25,7 @@ export const GatewayEventType = { export default { ws: null, authenticated: false, + open: false, heartbeatInterval: null, user: null, channels: null, @@ -43,6 +44,7 @@ export default { if (this.reconnectTimeout) { clearTimeout(this.reconnectTimeout); } + this.open = true; this.dispatch(GatewayEventType.Open, null); console.log("[gateway] open"); }; @@ -86,6 +88,7 @@ export default { this.authenticated = false; this.user = null; this.channels = null; + this.open = false; if (this.heartbeatInterval) { clearInterval(this.heartbeatInterval); } diff --git a/frontend/src/main.js b/frontend/src/main.js index 5dd9d09..5f0c8a7 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -5,6 +5,12 @@ import { initStorageDefaults } from './storage'; initStorageDefaults(); gateway.init(); +// Remove loading screen +const loadingElement = document.getElementById("pre--loading-screen"); +if (loadingElement) { + loadingElement.parentElement.removeChild(loadingElement); +} + const app = new App({ target: document.body }); diff --git a/frontend/src/stores.js b/frontend/src/stores.js index a442fa8..8d6cc43 100644 --- a/frontend/src/stores.js +++ b/frontend/src/stores.js @@ -1,11 +1,20 @@ import gateway, { GatewayEventType } from "./gateway"; -export const channels = { - _handlers: [], - _value: [], - _didInit: false, +class Store { + constructor() { + this._handlers = []; + this._didInit = false; + } + + _tryInit() { + if (!this._didInit && this._init) { + this._init(); + this._didInit = true; + } + } + subscribe(handler) { - this._init(); + this._tryInit(); const newLength = this._handlers.push(handler); const handlerIndex = newLength - 1; @@ -13,20 +22,23 @@ export const channels = { return () => { this._handlers.splice(handlerIndex, 1); }; - }, + } + _dispatchUpdate() { this._handlers.forEach(e => { e(this._value); }); - }, + } +} + +class ChannelsStore extends Store { + constructor() { + super(); + + this._value = []; + } + _init() { - window.__WAFFLE_CHANNELS_STORE = this; - - if (this._didInit) - return; - - this._didInit = true; - const channels = gateway.channels; if (channels) { this._value = channels; @@ -66,4 +78,35 @@ export const channels = { this._dispatchUpdate(); }); } -}; +} + +class GatewayStatusStore extends Store { + constructor() { + super(); + this._value = { open: false, ready: false }; + } + + _init() { + this._value.open = gateway.open; + this._value.ready = gateway.authenticated; + + gateway.subscribe(GatewayEventType.Open, () => { + this._value.open = true; + this._dispatchUpdate(); + }); + + gateway.subscribe(GatewayEventType.Close, () => { + this._value.open = false; + this._value.ready = false; + this._dispatchUpdate(); + }); + + gateway.subscribe(GatewayEventType.Ready, () => { + this._value.ready = true; + this._dispatchUpdate(); + }); + } +} + +export const channels = new ChannelsStore(); +export const gatewayStatus = new GatewayStatusStore();