78 lines
No EOL
2.6 KiB
Vue
78 lines
No EOL
2.6 KiB
Vue
<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">
|
|
Aktuelles Ziel
|
|
</div>
|
|
<ChangeBlinkingBox :blink-seconds="currentTarget === null ? 0 : 10" :value="currentTarget" class="text-7 md:text-10">
|
|
{{ currentTarget ?? "Niemand" }}
|
|
</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ächstes Ziel
|
|
<span class="whitespace-nowrap">
|
|
[{{
|
|
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">{{ nextStepWithChange.target }}</div>
|
|
</div>
|
|
<div class="flex-grow overflow-hidden flex flex-col">
|
|
<div class="font-bold text-3.5 tracking-wider uppercase">
|
|
Nachricht
|
|
</div>
|
|
<MessageDisplay/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style module>
|
|
|
|
</style>
|
|
|
|
<script lang="ts" setup>
|
|
import { useRoute } from "vue-router/auto"
|
|
import { computed } from "vue"
|
|
import { current, getNextValidPosition, getSceneIndex, getStep, ShowPosition } from "@/state"
|
|
import ChangeBlinkingBox from "../../../components/ChangeBlinkingBox.vue"
|
|
import MessageDisplay from "@/components/MessageDisplay.vue"
|
|
|
|
const route = useRoute("/for/followspot-operator/[side]")
|
|
const isLeft = computed(() => route.params.side === "left")
|
|
const targetProperty = computed<"leftSpotTarget" | "rightSpotTarget">(() => isLeft.value ? "leftSpotTarget" : "rightSpotTarget")
|
|
const currentTarget = computed(() => current.step[targetProperty.value])
|
|
|
|
interface StepWithChange {
|
|
delta: number
|
|
position: ShowPosition
|
|
target: string
|
|
}
|
|
|
|
const nextStepWithChange = computed<StepWithChange | null>(() => {
|
|
let position: ShowPosition | null = getNextValidPosition(current.step.position)
|
|
let lastTarget: string | null = currentTarget.value
|
|
|
|
while (position !== null) {
|
|
const step = getStep(position)
|
|
|
|
if (step[targetProperty.value] !== null && step[targetProperty.value] !== lastTarget) {
|
|
return {
|
|
position: step.position,
|
|
delta: getSceneIndex(step.position) - current.sceneIndex,
|
|
target: step[targetProperty.value]!
|
|
}
|
|
}
|
|
|
|
lastTarget = step[targetProperty.value]
|
|
position = getNextValidPosition(position)
|
|
}
|
|
|
|
return null
|
|
})
|
|
</script> |