feat: inform user if engine is trying to reconnect

client/src/composables/engine/fetchUpdate.ts

@@ -31,13 +31,13 @@ export async function fetchUpdate() {
         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
+            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
@@ -55,6 +55,11 @@ export async function fetchUpdate() {
         } else {
             // request aborted or other causes
             console.warn(e.message)
+
+            this.retry.value = -1
+            this.isActive = false
+            this.shouldStop = false
+            console.debug('engine stopped')
             return
         }
     }

client/src/pages/play.vue

@@ -3,7 +3,7 @@
     <TopBar />
     <AlertBox v-if="!isConnected" mode="alert">
       connection to server broken
-      <div>retrying {{'...'.slice(0, retry % 4)}}</div>
+      <div v-if="retry >= 0">retrying {{'...'.slice(0, retry % 4)}}</div>
     </AlertBox>
     wohoo!
   </div>