72 lines
No EOL
2.6 KiB
Vue
72 lines
No EOL
2.6 KiB
Vue
<template>
|
|
<div class="flex gap-6 p-4">
|
|
<section class="w-80">
|
|
<div class="font-bold text-2xl pb-2">Raum</div>
|
|
<div class="flex flex-col overflow-y-auto bg-dark-900 bg-opacity-50 h-80vh">
|
|
<template
|
|
v-for="(room, index) in script.roomsById.values()"
|
|
:key="room.id"
|
|
>
|
|
<div v-if="index !== 0" class="w-full h-1px bg-dark-300"/>
|
|
<div class="flex-shrink-0 bg-dark-600 flex items-center">
|
|
<div class="px-3 py-2 flex-grow">
|
|
{{ room.label }}
|
|
</div>
|
|
<button v-if="game.currentRoomId === room.id" disabled class="bg-green-900 h-full px-3 text-sm cursor-not-allowed">
|
|
Aktiv
|
|
</button>
|
|
<button v-else class="bg-dark-300 h-full px-3 text-sm" @click="game.switchRoom(room.id)">
|
|
Aktivieren
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
<section class="flex-grow">
|
|
<div class="font-bold text-2xl pb-2">Versteckte Objekte</div>
|
|
<div class="grid gap-3 grid-cols-2 flex-grow auto-rows-min p-4 pt-0 relative">
|
|
<button
|
|
v-for="object in game.allObjectsById.values().filter(o => !game.visibleObjectIds.has(o.id))"
|
|
:key="object.id"
|
|
class="flex flex-col items-center gap-2 bg-dark-600 rounded-lg p-3"
|
|
@click="game.setObjectVisibility(object.id, true)"
|
|
>
|
|
<ObjectPicture :object-id="object.id"/>
|
|
<span class="text-sm text-gray-200 text-center">
|
|
{{ object.label }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<section class="w-80">
|
|
<div class="font-bold text-2xl pb-2">Interaktionen</div>
|
|
<transition name="fade" mode="out-in">
|
|
<div v-if="game.sortedInteractionQueue.length === 0" class="text-xl text-gray-200">
|
|
Keine Interaktionen vorhanden.
|
|
</div>
|
|
<transition-group v-else tag="div" name="list" class="flex flex-col gap-4 relative h-80vh">
|
|
<InteractionQueueItemCard
|
|
v-for="(item, index) in game.sortedInteractionQueue"
|
|
:key="item.id"
|
|
:style="{ zIndex: 1000 - index }"
|
|
:item="item"
|
|
mode="director"
|
|
/>
|
|
</transition-group>
|
|
</transition>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { script } from "../../shared/script"
|
|
import { useGame } from "../game"
|
|
import ObjectPicture from "../components/ObjectPicture.vue"
|
|
import InteractionQueueItemCard from "../components/InteractionQueueItemCard.vue"
|
|
|
|
const game = useGame()
|
|
</script> |