mirror of
https://github.com/ericasch6/scrum-poker-internal.git
synced 2026-10-13 14:12:08 +00:00
99 lines
3.1 KiB
Vue
99 lines
3.1 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 { RoomExperienceProps } from '@/types/room';
|
|
|
|
const props = withDefaults(defineProps<RoomExperienceProps>(), {
|
|
embedded: false,
|
|
});
|
|
|
|
const page = usePage();
|
|
const presenterMode = ref(false);
|
|
const roomNotice = computed(() => page.props.roomNotice);
|
|
const isAuthenticated = computed(() => page.props.auth.user !== null);
|
|
const embeddedBackgroundColor = computed(() => {
|
|
if (!props.embedded) {
|
|
return undefined;
|
|
}
|
|
|
|
const backgroundColor = new URL(
|
|
page.url,
|
|
'https://embedded.invalid',
|
|
).searchParams.get('background_color');
|
|
|
|
return backgroundColor && /^#[0-9a-f]{6}$/i.test(backgroundColor)
|
|
? backgroundColor
|
|
: undefined;
|
|
});
|
|
const canFavorite = computed(
|
|
() => !props.embedded && 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="min-h-svh bg-slate-900 px-3 py-6 text-white sm:px-6 md:flex md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
|
|
:style="
|
|
embeddedBackgroundColor
|
|
? { backgroundColor: embeddedBackgroundColor }
|
|
: undefined
|
|
"
|
|
:class="
|
|
embedded
|
|
? 'md:h-dvh'
|
|
: '-m-6 min-h-[calc(100svh-4rem)] md:h-[calc(100dvh-4rem-1px)]'
|
|
"
|
|
>
|
|
<RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
|
|
|
|
<RoomHeader
|
|
:id="realtimeRoom.id"
|
|
:title="realtimeRoom.title"
|
|
:join_code="realtimeRoom.join_code"
|
|
:is_favorite="realtimeRoom.is_favorite"
|
|
:players="realtimeRoom.players"
|
|
:can-favorite="canFavorite"
|
|
:can-manage-participants="
|
|
realtimeCurrentPlayer.is_moderator ||
|
|
realtimeRoom.allow_participants_to_manage_rounds
|
|
"
|
|
:current-player-id="realtimeCurrentPlayer.id"
|
|
:can-logout="embedded && isAuthenticated"
|
|
:player-name="realtimeCurrentPlayer.name"
|
|
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>
|