feat: show AlertBox if connection to server is lost

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;
@@ -34,3 +33,7 @@ $button-disabled-border: 4px solid #004060;
 // Topbar
 $topbar-background-color: #006898;
 $topbar-separator-color: #ffffff;
+
+// Alert
+$alert-border: 2px solid #F0A0A0;
+$alert-background-color: #A06060;

client/src/components/AlertBox.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="alert__container">
+        <div class="alert__box">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.alert {
+    &__container {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__box {
+        width: auto;
+        margin: 2em auto auto auto;
+        padding: 2em;
+        border: $alert-border;
+        border-radius: 10px;
+        background-color: $alert-background-color;
+        font-size: 24px;
+    }
+}
+</style>

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 {

client/src/composables/engine/startStop.ts

@@ -12,6 +12,7 @@ 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')
     }
 }

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<Date>
+    isConnected: Ref<boolean>
+    retry: Ref<number>
     fetchUpdate: () => void
     callApi: (url: string, queryParams?: QueryParams) => Promise<unknown>
 }
 
 export interface useEngine {
+    isConnected: Ref<boolean>
+    retry: Ref<number>
     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),

client/src/pages/play.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="page-play__container">
-    <TopBar T/>
+    <TopBar />
+    <AlertBox v-if="!isConnected" mode="alert">
+      connection to server broken
+      <div>retrying {{'...'.slice(0, retry % 4)}}</div>
+    </AlertBox>
     wohoo!
   </div>
 </template>
@@ -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())
 </script>

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}
+{"authcode":"123456","name":"Harry","role":"player","game":"663576f0-1378-496b-a970-578bdcb222af","created":1650831122,"lastLoggedIn":1659718327}