Files
scrum-poker-internal/resources/js/pages/rooms/Show.vue
T

68 lines
2.2 KiB
Vue

<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3';
import { computed, ref } from 'vue';
import RoomHeader from '@/components/rooms/RoomHeader.vue';
import RoomRetentionNotice from '@/components/rooms/RoomRetentionNotice.vue';
import RoomTable from '@/components/rooms/RoomTable.vue';
import RoomVoteDeck from '@/components/rooms/RoomVoteDeck.vue';
import { useRoomRealtime } from '@/composables/useRoomRealtime';
import type { RoomPageProps } from '@/types/room';
const props = defineProps<RoomPageProps>();
const page = usePage();
const presenterMode = ref(false);
const roomNotice = computed(() => page.props.roomNotice);
const canFavorite = computed(
() => page.props.auth.user?.id != props.room.owner_id,
);
const {
room: realtimeRoom,
currentPlayer: realtimeCurrentPlayer,
setCurrentVote,
} = useRoomRealtime(
() => props.room,
() => props.currentPlayer,
);
</script>
<template>
<Head :title="realtimeRoom.title ?? 'Scrum Poker'" />
<main
class="-m-6 min-h-[calc(100svh-4rem)] bg-slate-900 px-3 py-6 text-white sm:px-6 md:flex md:h-[calc(100dvh-4rem-1px)] md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
>
<RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
<RoomHeader
:id="realtimeRoom.id"
:title="realtimeRoom.title"
:join_code="realtimeRoom.join_code"
:is_favorite="realtimeRoom.is_favorite"
:can-favorite="canFavorite"
:is-moderator="realtimeCurrentPlayer.is_moderator"
:allow-participant-controls="
realtimeRoom.allow_participant_controls
"
v-model:presenter-mode="presenterMode"
/>
<RoomTable
:room="realtimeRoom"
:current-player="realtimeCurrentPlayer"
:presenter-mode="presenterMode"
/>
<RoomVoteDeck
:room-id="realtimeRoom.id"
:revealed="realtimeRoom.revealed"
:cards="realtimeRoom.deck.cards"
:current-vote="realtimeCurrentPlayer.current_vote"
:presenter-mode="presenterMode"
@vote-changed="setCurrentVote"
/>
</main>
</template>