40 lines
No EOL
1.3 KiB
Vue
40 lines
No EOL
1.3 KiB
Vue
<template>
|
|
<div class="h-full p-4 pt-0">
|
|
<transition name="fade" mode="out-in">
|
|
<div v-if="game.sortedInteractionQueue.length === 0" class="h-full flex flex-col justify-center items-center gap-4 p-6">
|
|
<div class="text-xl text-center text-gray-200">
|
|
Noch keine Interaktionen zum Abstimmen vorhanden.
|
|
</div>
|
|
<button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-800 text-lg" @click="emit('switch-screen', 'interactions')">
|
|
<ArrowRightIcon/>
|
|
<span class="relative top-1px">Interagieren</span>
|
|
</button>
|
|
</div>
|
|
<transition-group v-else tag="div" name="list" class="flex flex-col gap-4 relative">
|
|
<InteractionQueueItemCard
|
|
v-for="(item, index) in game.sortedInteractionQueue"
|
|
:key="item.id"
|
|
:style="{ zIndex: 1000 - index }"
|
|
:item="item"
|
|
mode="audience"
|
|
/>
|
|
</transition-group>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import InteractionQueueItemCard from "../components/InteractionQueueItemCard.vue"
|
|
import { useGame } from "../game"
|
|
import ArrowRightIcon from "virtual:icons/ph/arrow-right"
|
|
|
|
const emit = defineEmits<{
|
|
"switch-screen": [string]
|
|
}>()
|
|
|
|
const game = useGame()
|
|
</script> |