commit #22

src/main/kotlin/de/moritzruth/lampenfieber/act/First.kt

@@ -105,7 +105,7 @@ fun ShowBuilderContext.firstAct() = act("Erster Akt") {
         }
     }
 
-    scene("1") {
+    scene("Szene 1") {
         step(StepCue.MusicEnd) {
             actors {
                 +"Richy / durch den Mittelgang"
@@ -183,7 +183,7 @@ fun ShowBuilderContext.firstAct() = act("Erster Akt") {
         }
     }
 
-    scene("2") {
+    scene("Szene 2") {
         step(StepCue.Light(StepCue.Light.State.OFF, false)) {
             actors {
                 +"David / sitzt am Klavier"
@@ -210,7 +210,7 @@ fun ShowBuilderContext.firstAct() = act("Erster Akt") {
         }
     }
 
-    scene("3") {
+    scene("Szene 3") {
         step(StepCue.Custom("Paula sitzt")) {
             actors {
                 +"Tina / von rechts, mit Tasche"
@@ -241,7 +241,7 @@ fun ShowBuilderContext.firstAct() = act("Erster Akt") {
         }
     }
 
-    scene("5") {
+    scene("Szene 5") {
         step(StepCue.Text("Maria", "Schreib mich auch dazu!")) {
             actors {
                 -"Tina"

src/main/kotlin/de/moritzruth/lampenfieber/act/Fourth.kt

@@ -17,7 +17,7 @@ import kotlin.time.Duration.Companion.minutes
 import kotlin.time.Duration.Companion.seconds
 
 fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
-    scene("1") {
+    scene("Szene 1") {
         step(StepCue.MusicStart("Ende der Pause", 69.seconds)) {
             val sideColor = Color(60.degrees, saturation = 10.percent)
             sideLight.color1.static(sideColor)
@@ -88,7 +88,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("2") {
+    scene("Szene 2") {
         step(StepCue.MusicEnd) {
             curtainState = CurtainState.CLOSED
         }
@@ -146,7 +146,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("3") {
+    scene("Szene 3") {
         step(StepCue.MusicStart("?", 69.seconds)) {
             actors {
                 +"Paula"
@@ -167,7 +167,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("4") {
+    scene("Szene 4") {
         step(StepCue.MusicEnd) {
             actors {
             }
@@ -202,7 +202,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("5") {
+    scene("Szene 5") {
         step(StepCue.MusicEnd) {
             onRun {
                 sideLight.fadeColorsToClassroom(5.seconds)
@@ -232,7 +232,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("6") {
+    scene("Szene 6") {
         step(StepCue.MusicEnd) {
             actors {
                 -"Richy"
@@ -270,7 +270,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("7") {
+    scene("Szene 7") {
         step(StepCue.Text("David", "Aber auf jeden Fall nicht hier.")) {
             actors {
                 +"Theaterlehrer"
@@ -366,7 +366,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("8") {
+    scene("Szene 8") {
         step(StepCue.MusicStart("Angstballet", 69.seconds)) {
             onRun {
                 // TODO: Song
@@ -374,7 +374,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("9") {
+    scene("Szene 9") {
         step(StepCue.MusicEnd) {
             actors {
                 +"Kai"
@@ -402,7 +402,7 @@ fun ShowBuilderContext.fourthAct() = act("Vierter Akt") {
         }
     }
 
-    scene("10") {
+    scene("Szene 10") {
         step(StepCue.Text("Kai", "Hilfe, los, runter!")) {
             curtainState = CurtainState.OPEN
 

src/main/kotlin/de/moritzruth/lampenfieber/act/Second.kt

@@ -14,7 +14,7 @@ import kotlin.time.Duration.Companion.milliseconds
 import kotlin.time.Duration.Companion.seconds
 
 fun ShowBuilderContext.secondAct() = act("Zweiter Akt") {
-    scene("1") {
+    scene("Szene 1") {
         step(StepCue.MusicStart("Umbaumusik", 69.seconds)) {
             onRun {
                 // TODO
@@ -22,7 +22,7 @@ fun ShowBuilderContext.secondAct() = act("Zweiter Akt") {
         }
     }
 
-    scene("2") {
+    scene("Szene 2") {
         step(StepCue.MusicEnd) {
             actors {
                 +"Heike"
@@ -35,7 +35,7 @@ fun ShowBuilderContext.secondAct() = act("Zweiter Akt") {
         }
     }
 
-    scene("3") {
+    scene("Szene 3") {
         step(StepCue.Text("Sven", "Okay!")) {
             actors {
                 -"Heike"
@@ -110,7 +110,7 @@ fun ShowBuilderContext.secondAct() = act("Zweiter Akt") {
         }
     }
 
-    scene("4") {
+    scene("Szene 4") {
         step(StepCue.MusicEnd) {
         }
 

src/main/kotlin/de/moritzruth/lampenfieber/act/Third.kt

@@ -15,7 +15,7 @@ import kotlin.time.Duration.Companion.seconds
 
 @Suppress("DuplicatedCode")
 fun ShowBuilderContext.thirdAct() = act("Dritter Akt") {
-    scene("1") {
+    scene("Szene 1") {
         step(StepCue.Stub) {
             actors {
                 +"Jacob"
@@ -34,14 +34,14 @@ fun ShowBuilderContext.thirdAct() = act("Dritter Akt") {
         }
     }
 
-    scene("2") {
+    scene("Szene 2") {
         step(StepCue.Stub) {
         }
 
         // Licht aus am Ende
     }
 
-    scene("3") {
+    scene("Szene 3") {
         step(StepCue.MusicStart("Tischballet", 69.seconds)) {
             actors {
                 +"David"
@@ -64,7 +64,7 @@ fun ShowBuilderContext.thirdAct() = act("Dritter Akt") {
         }
     }
 
-    scene("4") {
+    scene("Szene 4") {
         step(StepCue.MusicEnd) {
             onRun {
                 FrontLights.all.forEach { it.brightness.fade(75.percent, 8.seconds) }
@@ -98,7 +98,7 @@ fun ShowBuilderContext.thirdAct() = act("Dritter Akt") {
         }
     }
 
-    scene("5") {
+    scene("Szene 5") {
         step(StepCue.Custom("Kathi ruft Paula")) {
             actors {
                 +"Paula"
@@ -131,7 +131,7 @@ fun ShowBuilderContext.thirdAct() = act("Dritter Akt") {
         }
     }
 
-    scene("6") {
+    scene("Szene 6") {
         step(StepCue.MusicStart("Umbaumusik", 69.seconds)) {
             Tops.both.forEach {
                 it.pointAtStageMiddleOffCenterMarking()
@@ -291,7 +291,7 @@ fun ShowBuilderContext.thirdAct() = act("Dritter Akt") {
         }
     }
 
-    scene("7") {
+    scene("Szene 7") {
         step(StepCue.MusicEnd) {
         }
 
@@ -309,7 +309,7 @@ fun ShowBuilderContext.thirdAct() = act("Dritter Akt") {
         }
     }
 
-    scene("8") {
+    scene("Szene 8") {
         step(StepCue.MusicEnd) {
         }
 

ui/src/components/CueBox.vue

@@ -40,7 +40,7 @@
 				  ? ArrowsInLineHorizontalIcon
 				  : ArrowsOutLineHorizontalIcon
 
-		  case "LIGHTS": return HeadlightsIcon
+		  case "LIGHT": return HeadlightsIcon
 		  case "TEXT": return ChatCircleTextIcon
 		  case "MUSIC_START": return MusicNoteIcon
 		  case "MUSIC_END": return StopIcon
@@ -59,7 +59,7 @@
 				  return cue.whileMoving ? "Der Vorhang schließt sich" : "Der Vorhang ist geschlossen"
 			  }
 
-		  case "LIGHTS":
+		  case "LIGHT":
 			  if (cue.state === "on") {
 				  return cue.whileFading ? "Das Licht geht an" : "Das Licht ist an"
 			  } else {

ui/src/components/MotionsList.vue

@@ -1,71 +1,18 @@
 <template>
   <div class="flex flex-col space-y-5" :class="scrollable ? 'overflow-y-auto' : 'overflow-hidden'">
-    <div
+    <div v-for="(act, actIndex) in show.acts">
-      v-for="(scene, sceneIndex) in scenes"
+	    <MotionsListAct :act="act" :center-current="Boolean(centerCurrent)"/>
-      :key="sceneIndex"
-    >
-      <div class="text-gray-400 pl-3 text-5">
-        Szene {{ scene.name }}
-      </div>
-      <div class="flex flex-col">
-	      <template v-for="step in scene.steps" :key="step.position">
-		      <MotionsListStep
-			      v-if="step.actorEntrances.length > 0 || step.actorExits.length > 0"
-			      :step="step"
-			      :center-current="Boolean(centerCurrent)"
-		      />
-	      </template>
-      </div>
     </div>
     <div class="h-[50%] flex-shrink-0"/>
   </div>
 </template>
 
 <script setup lang="ts">
-	import { Scene, show, ShowPosition, Step } from "../state"
+  import MotionsListAct from "./MotionsListAct.vue"
-  import { computed } from "vue"
+  import { show } from "../state"
-  import MotionsListStep from "./MotionsListStep.vue"
 
   const props = defineProps<{
 		centerCurrent?: boolean
 	  scrollable?: boolean
   }>()
-
-	interface MotionStep extends Step {
-		morePositions: ShowPosition[]
-	}
-
-	interface MotionScene extends Scene {
-		steps: MotionStep[]
-	}
-
-  const scenes = computed(() => {
-		const all = show.value.acts.flatMap(a => a.scenes)
-	  const result: MotionScene[] = []
-
-	  for (const scene of all) {
-		  const steps: MotionStep[] = []
-		  let accStep: MotionStep | null = null
-
-		  for (const step of scene.steps) {
-			  if (step.actorEntrances.length > 0 || step.actorExits.length > 0) {
-				  if (accStep !== null) steps.push(accStep)
-
-					accStep = {
-						...step,
-						morePositions: []
-					}
-			  } else {
-					if (accStep !== null) accStep.morePositions.push(step.position)
-			  }
-		  }
-
-			if (steps.length > 0) result.push({
-				...scene,
-				steps: steps
-			})
-	  }
-
-	  return result
-  })
 </script>

ui/src/components/MotionsListAct.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="pt-2">
+		<div class="font-bold text-7 flex gap-5 items-center pb-4">
+			<span class="flex-grow h-2px bg-white"></span>
+			<span>{{ act.name }}</span>
+			<span class="flex-grow h-2px bg-white"></span>
+		</div>
+		<div class="flex flex-col gap-2">
+			<div
+				v-for="(scene, sceneIndex) in scenes"
+				:key="sceneIndex"
+			>
+				<div class="text-gray-400 pl-3 text-5">
+					{{ scene.name }}
+				</div>
+				<div class="flex flex-col">
+					<template v-for="step in scene.steps" :key="step.position">
+						<MotionsListStep
+							:step="step"
+							:more-positions="step.morePositions"
+							:center-current="centerCurrent"
+						/>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style module>
+
+</style>
+
+<script setup lang="ts">
+	import { Act, Scene, ShowPosition, Step } from "../state"
+	import { computed } from "vue"
+	import MotionsListStep from "./MotionsListStep.vue"
+
+	const props = defineProps<{
+		act: Act
+		centerCurrent: boolean
+	}>()
+
+	interface MotionStep extends Step {
+		morePositions: ShowPosition[]
+	}
+
+	interface MotionScene extends Scene {
+		steps: MotionStep[]
+	}
+
+	const scenes = computed(() => {
+		const all = props.act.scenes
+		const result: MotionScene[] = []
+
+		for (const scene of all) {
+			const steps: MotionStep[] = []
+			let accStep: MotionStep | null = null
+
+			for (const step of scene.steps) {
+				if ((step.position.step === 0) || step.actorEntrances.length > 0 || step.actorExits.length > 0) {
+					if (accStep !== null) steps.push(accStep)
+
+					accStep = {
+						...step,
+						morePositions: []
+					}
+				} else {
+					if (accStep !== null) accStep.morePositions.push(step.position)
+				}
+			}
+
+			if (accStep !== null) steps.push(accStep)
+
+			if (steps.length > 0) result.push({
+				...scene,
+				steps: steps
+			})
+		}
+
+		return result
+	})
+</script>

ui/src/components/MotionsListScene.vue

@@ -1,7 +0,0 @@
-<template>
-
-</template>
-
-<script setup lang="ts">
-
-</script>

ui/src/components/MotionsListStep.vue

@@ -2,8 +2,8 @@
 	<div class="transition p-3" :class="isActive && 'bg-green-800'">
 		<div class="flex space-x-2">
 			<div class="flex-grow">
-				<CueBox text-class="text-7" :step="step"/>
+				<CueBox text-class="text-6" :step="step"/>
-				<div class="py-2 pl-8 space-y-2 text-7">
+				<div v-if="step.actorEntrances.length + step.actorExits.length > 0" class="py-2 pl-8 space-y-2 text-7">
 					<div class="flex flex-col space-y-1">
 						<div
 							v-for="motion in step.actorEntrances"

ui/src/components/StepSelectionAct.vue

@@ -1,6 +1,13 @@
 <template>
-	<div>
+	<div class="pt-2">
-		<StepSelectionScene v-for="scene in act.scenes" :key="scene" :scene="scene"/>
+		<div class="font-bold text-7 flex gap-5 items-center">
+			<span class="flex-grow h-2px bg-white"></span>
+			<span>{{ act.name }}</span>
+			<span class="flex-grow h-2px bg-white"></span>
+		</div>
+		<div class="flex flex-col gap-2">
+			<StepSelectionScene v-for="scene in act.scenes" :key="scene" :scene="scene"/>
+		</div>
 	</div>
 </template>
 

ui/src/components/StepSelectionScene.vue

@@ -1,10 +1,10 @@
 <template>
 	<div
-		class="border-b border-dark-300 transition"
+		class="not-last:border-b border-dark-300 transition"
 		:class="scene === current.scene ? 'bg-green-900' : ''"
 	>
-		<div class="pb-1 pt-4 px-4 text-4 font-bold">
+		<div class="pb-1 px-4 text-4 font-bold">
-			Szene {{ scene.name }}
+			{{ scene.name }}
 		</div>
 		<div class="flex flex-col pb-2">
 			<StepSelectionStep v-for="step in scene.steps" :key="step.position" :step="step"/>

ui/src/pages/control.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="flex flex-col h-full">
+	  <h1 class="font-800 text-9 p-4 pb-0">
+		  {{ current.act === null ? "" : `${current.act.name} — `}}{{ current.scene.name }}
+	  </h1>
     <div class="h-full flex space-x-4 p-10 pt-8 flex-grow overflow-hidden">
       <StepSelection class="w-1/2"/>
       <div class="w-1/2 flex flex-col space-y-4">

ui/src/pages/kiosk/stage.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-col h-full">
+	<div class="flex flex-col h-full">
-    <h1 class="font-800 text-9 p-4 pb-0">
+		<h1 class="font-800 text-9 p-4 pb-0">
-      Szene {{ current.scene.name }}
+			{{ current.act === null ? "" : `${current.act.name} — `}}{{ current.scene.name }}
-    </h1>
+		</h1>
     <div class="h-full flex space-x-4 p-4 pt-8 flex-grow overflow-hidden">
       <MotionsList center-current class="w-3/7"/>
       <div class="w-4/7 flex flex-col space-y-4">

ui/src/pages/microphones.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col h-full">
+	<div class="flex flex-col h-full">
-    <h1 class="font-800 text-9 p-4 pb-0">
+		<h1 class="font-800 text-9 p-4 pb-0">
-      Szene {{ current.scene.name }}
+			{{ current.act === null ? "" : `${current.act.name} — `}}{{ current.scene.name }}
-    </h1>
+		</h1>
     <div class="h-full flex space-x-4 p-4 pt-8 flex-grow overflow-hidden">
       <MotionsList scrollable center-current class="w-3/7"/>
       <div class="w-4/7 flex flex-col space-y-4">
-        <ActorsOnStageBox class="h-full text-6"/>
+        <ActorsOnStageBox class="h-full text-7"/>
         <MessageEdit class="h-40"/>
       </div>
     </div>

ui/src/state.ts

@@ -121,7 +121,12 @@ export function getStep(position: ShowPosition) {
 
 export function getScene(position: ShowPosition) {
   if (position.act === -1) return START_SCENE
-  return show.value.acts[position.act].scenes[position.scene]
+  return getAct(position)!.scenes[position.scene]
+}
+
+export function getAct(position: ShowPosition) {
+  if (position.act === -1) return null
+  return show.value.acts[position.act]
 }
 
 export function getActiveMusicAt(position: ShowPosition): ShowMusic | null {
@@ -155,10 +160,12 @@ export function getActiveMusicAt(position: ShowPosition): ShowMusic | null {
 }
 
 export const current = reactiveComputed<{
+  act: Act | null
   scene: Scene
   step: Step
   activeMusic: ShowMusic | null
 }>(() => ({
+  act: getAct(state.position),
   scene: getScene(state.position),
   step: getStep(state.position),
   activeMusic: state.activeMusic