From 0a5148cf3762dd517efe55e43743ca21dc27244b Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Mon, 24 Mar 2025 17:30:30 +0100
Subject: [PATCH] commit 97

---
 ui/src/components/PropBox.vue          |  2 +-
 ui/src/components/StageTopDownView.vue |  2 +-
 ui/src/pages/for/fly-crew.vue          | 44 ++++++++++++++------------
 ui/src/syncing.ts                      |  4 ++-
 4 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/PropBox.vue b/ui/src/components/PropBox.vue
index 0ba0e89..8f0b343 100755
--- a/ui/src/components/PropBox.vue
+++ b/ui/src/components/PropBox.vue
@@ -1,6 +1,6 @@
 <template>
   <ChangeBlinkingBox :blink-seconds="20" :value="prop" class="flex flex-col items-center">
-    <div class="text-s1 tracking-wide text-gray-400">
+    <div class="text-4 text-center tracking-wide text-gray-400">
       {{ positionName }}
     </div>
     <div class="flex-grow w-full">
diff --git a/ui/src/components/StageTopDownView.vue b/ui/src/components/StageTopDownView.vue
index ca5941a..0fc3d8b 100755
--- a/ui/src/components/StageTopDownView.vue
+++ b/ui/src/components/StageTopDownView.vue
@@ -5,7 +5,7 @@
         Publikum
       </div>
     </div>
-    <div :class="$style.row" class="border-t border-b border-dark-300 h-20">
+    <div :class="$style.row" class="border-t border-b border-dark-300 h-24">
       <PropBox :prop="current.step.props.PROSCENIUM_RIGHT" position-name="Rechte Vorbühne"/>
       <PropBox :prop="current.step.props.PROSCENIUM_CENTER" position-name="Mitte der Vorbühne"/>
       <PropBox :prop="current.step.props.PROSCENIUM_LEFT" position-name="Linke der Vorbühne"/>
diff --git a/ui/src/pages/for/fly-crew.vue b/ui/src/pages/for/fly-crew.vue
index dd0b2ef..e1fa092 100644
--- a/ui/src/pages/for/fly-crew.vue
+++ b/ui/src/pages/for/fly-crew.vue
@@ -1,29 +1,32 @@
 <template>
-  <div class="h-full flex flex-col gap-10">
-    <div class="flex-grow flex-shrink-0 flex flex-col gap-2">
-      <div class="text-gray text-2xl">
-        Aktuelle Anweisung
+  <div class="grid lg:grid-cols-2 gap-6 h-full">
+    <div class="h-full flex flex-col gap-10">
+      <div class="flex-grow flex-shrink-0 flex flex-col gap-2">
+        <div class="text-gray text-2xl">
+          Aktuelle Anweisung
+        </div>
+        <ChangeBlinkingBox :blink-seconds="10" :value="currentState" class="text-7 md:text-10">
+          {{ getDisplayedCommand(currentState)  }}
+        </ChangeBlinkingBox>
       </div>
-      <ChangeBlinkingBox :blink-seconds="10" :value="currentState" class="text-7 md:text-10">
-        {{ getDisplayedCommand(currentState)  }}
-      </ChangeBlinkingBox>
-    </div>
-    <div v-if="nextStepWithChange !== null" class="flex-grow flex-shrink-0 flex flex-col gap-2">
-      <div class="text-gray text-6">
-        Nächste Anweisung
-        <span class="whitespace-nowrap">
+      <div v-if="nextStepWithChange !== null" class="flex-grow flex-shrink-0 flex flex-col gap-2">
+        <div class="text-gray text-6">
+          Nächste Anweisung
+          <span class="whitespace-nowrap">
             [{{
-            nextStepWithChange.delta === 0
-                ? "in dieser Szene"
-                : nextStepWithChange.delta === 1
-                    ? "in der nächsten Szene"
-                    : `in ${nextStepWithChange.delta} Szenen`
-          }}]
+              nextStepWithChange.delta === 0
+                  ? "in dieser Szene"
+                  : nextStepWithChange.delta === 1
+                      ? "in der nächsten Szene"
+                      : `in ${nextStepWithChange.delta} Szenen`
+            }}]
           </span>
+        </div>
+        <div class="text-7 md:text-10">{{ getDisplayedCommand(nextStepWithChange.state) }}</div>
       </div>
-      <div class="text-7 md:text-10">{{ getDisplayedCommand(nextStepWithChange.state) }}</div>
+      <MessageEdit class="flex-grow"/>
     </div>
-    <MessageEdit class="flex-grow"/>
+    <StageTopDownView class="<lg:hidden"/>
   </div>
 </template>
 
@@ -37,6 +40,7 @@
   import ChangeBlinkingBox from "@/components/ChangeBlinkingBox.vue"
   import MessageDisplay from "@/components/MessageDisplay.vue"
   import MessageEdit from "@/components/MessageEdit.vue"
+  import StageTopDownView from "@/components/StageTopDownView.vue"
 
   const currentState = computed(() => current.step.curtainState)
 
diff --git a/ui/src/syncing.ts b/ui/src/syncing.ts
index 76a8345..df8945f 100755
--- a/ui/src/syncing.ts
+++ b/ui/src/syncing.ts
@@ -22,8 +22,10 @@ export const connect = () => new Promise<void>(resolve => {
     url.protocol = "ws"
     url.pathname = "/api/ws"
     socket = new ReconnectingWebSocket(url.toString(), [], {
+        minUptime: 1000,
+        connectionTimeout: 2000,
         reconnectionDelayGrowFactor: 1,
-        minReconnectionDelay: 1000
+        minReconnectionDelay: 100
     })
 
     let isFirstMessage = true