feat: Enhance win effects and animations in OfflineView component

docker-entrypoint.sh

@@ -7,8 +7,9 @@ TARGET_PATH="/usr/share/nginx/html/env.js"
 
 if [ -f "$TEMPLATE_PATH" ]; then
   echo "Rendering runtime config from $TEMPLATE_PATH"
-  # export all variables for envsubst to access
-  # only substitute variables present in the template
+  echo "Using environment variables:"
+  printenv
+  echo "----"
   envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
 else
   echo "No runtime template found at $TEMPLATE_PATH, skipping"

public/env.js

@@ -1,5 +1,5 @@
 window.__RUNTIME_CONFIG__ = {
   API_URL: "http://localhost:9000",
-  WEBSOCKET_API_URL: "ws://localhost:9000/websocket"
+  WEBSOCKET_URL: "ws://localhost:9000/websocket"
 };
 

public/env.template.js

@@ -1,5 +1,5 @@
 window.__RUNTIME_CONFIG__ = {
   API_URL: "${API_URL}",
-  WEBSOCKET_API_URL: "${WEBSOCKET_API_URL}"
+  WEBSOCKET_URL: "${WEBSOCKET_URL}"
 };
 

src/services/ws.ts

@@ -172,6 +172,9 @@ function setupSocketHandlers(socket: WebSocket) {
 }
 
 export function connectWebSocket(url?: string): Promise<void> {
+  if (!url) {
+    url = window.__RUNTIME_CONFIG__?.WEBSOCKET_URL
+  }
   if (!url) {
     const loc = window.location;
     const protocol = loc.protocol === "https:" ? "wss:" : "ws:";

src/views/OfflineView.vue

@@ -47,28 +47,28 @@ const spin = (): void => {
   const base1 = base0 + gap;
   const base2 = base1 + gap;
   setTimeout(() => {
-    reelStates.value[0].isSpinning = false;
+    reelStates.value[0]!!.isSpinning = false;
   }, base0);
   setTimeout(() => {
-    reelStates.value[1].isSpinning = false;
+    reelStates.value[1]!!.isSpinning = false;
   }, base1);
   setTimeout(() => {
-    const firstTwoMatch = reelStates.value[0].value === reelStates.value[1].value &&
-      reelStates.value[0].value !== '❓';
+    const firstTwoMatch = reelStates.value[0]!!.value === reelStates!!.value[1]!!.value &&
+      reelStates.value[0]!!.value !== '❓';
     const extraDelay = firstTwoMatch ? 1000 : 0;
 
     glowThird.value = firstTwoMatch;
 
     setTimeout(() => {
-      reelStates.value[2].isSpinning = false;
+      reelStates.value[2]!!.isSpinning = false;
       glowThird.value = false;
       globalSpinning.value = false;
       hasSpun.value = true;
 
       const allThreeMatch =
-        reelStates.value[0].value !== '❓' &&
-        reelStates.value[0].value === reelStates.value[1].value &&
-        reelStates.value[1].value === reelStates.value[2].value;
+        reelStates.value[0]!!.value !== '❓' &&
+        reelStates.value[0]!!.value === reelStates.value[1]!!.value &&
+        reelStates.value[1]!!.value === reelStates.value[2]!!.value;
       if (allThreeMatch) {
         winFire.value = true;
         winBlink.value = true;