diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss index 63ad8f1..c3b6453 100644 --- a/client/src/assets/css/colors.scss +++ b/client/src/assets/css/colors.scss @@ -10,7 +10,6 @@ $text-error-color: #ff8000; $background-overlay-color: rgba(40, 40, 56, 90%); - // Box $box-primary-background-color: $background-primary-color; $box-primary-text-color: $text-primary-color; @@ -33,4 +32,8 @@ $button-disabled-border: 4px solid #004060; // Topbar $topbar-background-color: #006898; -$topbar-separator-color: #ffffff; \ No newline at end of file +$topbar-separator-color: #ffffff; + +// Alert +$alert-border: 2px solid #F0A0A0; +$alert-background-color: #A06060; diff --git a/client/src/components/AlertBox.vue b/client/src/components/AlertBox.vue new file mode 100644 index 0000000..02442fb --- /dev/null +++ b/client/src/components/AlertBox.vue @@ -0,0 +1,35 @@ + + + + + \ No newline at end of file diff --git a/client/src/composables/engine/fetchUpdate.ts b/client/src/composables/engine/fetchUpdate.ts index 24e3441..b1b774c 100644 --- a/client/src/composables/engine/fetchUpdate.ts +++ b/client/src/composables/engine/fetchUpdate.ts @@ -23,7 +23,21 @@ export async function fetchUpdate() { // TODO: parse answer this.version = parseInt(response.version) + this.isConnected.value = true + this.retry.value = 0 + + // apply rate limit + const now = new Date() + const last = this.lastFetched.splice(0, 1) + this.lastFetched.push(now) + if (now.getTime() - last[0].getTime() < 1000) { + console.warn('engine: respawning too fast, throttling down') + delay = 5000 + } } catch (e) { + this.isConnected.value = false + this.retry.value++ + if (e.response) { // callApi() threw an exception const { status, statusText } = e.response @@ -31,7 +45,11 @@ export async function fetchUpdate() { delay = 1000 } else { console.warn(`HTTP ${status} ${statusText}`) - delay = 5000 + if (this.retry.value <= 15) { + delay = 1000 + } else { + delay = 5000 + } this.version = -1 } } else { diff --git a/client/src/composables/engine/startStop.ts b/client/src/composables/engine/startStop.ts index 402a1e1..5ac28ff 100644 --- a/client/src/composables/engine/startStop.ts +++ b/client/src/composables/engine/startStop.ts @@ -12,7 +12,8 @@ export function start(): void { this.isActive = true this.shouldStop = false - + this.isConnected.value = true + this.fetchUpdate() console.log('start engine') } @@ -20,6 +21,7 @@ export function start(): void { export function stop(): void { if (this.isActive) { this.shouldStop = true + this.isConnected.value = true console.log('shut down engine') } } \ No newline at end of file diff --git a/client/src/composables/useEngine.ts b/client/src/composables/useEngine.ts index 553d685..d07d36a 100644 --- a/client/src/composables/useEngine.ts +++ b/client/src/composables/useEngine.ts @@ -1,3 +1,4 @@ +import { Ref, ref } from 'vue' import { callApi, QueryParams } from '@/composables/engine/callApi' import { start, stop } from '@/composables/engine/startStop' import { fetchUpdate } from '@/composables/engine/fetchUpdate' @@ -6,26 +7,37 @@ interface EngineContext { isActive: boolean shouldStop: boolean version: number + lastFetched: Array + isConnected: Ref + retry: Ref fetchUpdate: () => void callApi: (url: string, queryParams?: QueryParams) => Promise } export interface useEngine { + isConnected: Ref + retry: Ref start(): void stop(): void fetchUpdate(): void } export default (): useEngine => { + const now = new Date(0) const context: EngineContext = { + lastFetched: [now, now, now, now, now], isActive: false, shouldStop: false, version: -1, + isConnected: ref(false), + retry: ref(0), callApi, fetchUpdate, } return { + isConnected: context.isConnected, + retry: context.retry, start: () => start.apply(context), stop: () => stop.apply(context), fetchUpdate: () => fetchUpdate.apply(context), diff --git a/client/src/pages/play.vue b/client/src/pages/play.vue index c0d1c52..8cc65ac 100644 --- a/client/src/pages/play.vue +++ b/client/src/pages/play.vue @@ -1,6 +1,10 @@ @@ -18,7 +22,7 @@ try { navigateTo('/', { replace: true }) } -const { start: startEngine, stop: stopEngine } = useEngine() +const { start: startEngine, stop: stopEngine, isConnected, retry } = useEngine() onMounted(() => startEngine()) onBeforeUnmount(() => stopEngine()) diff --git a/server/data/users/d06fb83a-51eb-477e-b57c-6138a38eecb5.json b/server/data/users/d06fb83a-51eb-477e-b57c-6138a38eecb5.json index 942e5ff..150834c 100644 --- a/server/data/users/d06fb83a-51eb-477e-b57c-6138a38eecb5.json +++ b/server/data/users/d06fb83a-51eb-477e-b57c-6138a38eecb5.json @@ -1 +1 @@ -{"authcode":"123456","name":"Harry","role":"player","game":"663576f0-1378-496b-a970-578bdcb222af","created":1650831122,"lastLoggedIn":1659540828} \ No newline at end of file +{"authcode":"123456","name":"Harry","role":"player","game":"663576f0-1378-496b-a970-578bdcb222af","created":1650831122,"lastLoggedIn":1659718327} \ No newline at end of file