PetschStudios/scrum-poker-internal
3
0
Fork 0
mirror of https://github.com/ericasch6/scrum-poker-internal.git synced 2026-10-13 15:52:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix:minor fixes in Layout

Browse Source
This commit is contained in:
Eric
2026-08-16 14:50:47 +02:00
parent 4340ca9e12
commit 4639baa9ae
4 changed files with 47 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/layouts/PublicLayout.vue
+1 -6
View File
@@ -2,10 +2,6 @@
import { ref } from 'vue'
const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Features', href: '#' },
{ name: 'Marketplace', href: '#' },
{ name: 'Company', href: '#' },
]
const mobileMenuOpen = ref(false)
@@ -27,8 +23,7 @@
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a v-for="item in navigation" :key="item.name" :href="item.href"
class="text-sm/6 font-semibold text-white">{{ item.name }}</a>
<h1 class="font-extrabold text-2xl">Scrum Poker</h1>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" class="text-sm/6 font-semibold text-white">Log in <span
resources/js/pages/rooms/Show.vue
+26 -34
View File
@@ -10,28 +10,10 @@ import {
Trash2,
} from '@lucide/vue';
import { computed, ref, watch } from 'vue';
import type { CSSProperties } from 'vue';
import { nextRound, reset as resetRound, reveal } from '@/routes/room';
import { store as storeVote } from '@/routes/room/vote';
type PokerCard = {
key: string;
label: string;
};
type Player = {
id: number;
name: string;
is_moderator: boolean;
has_voted: boolean;
vote: string | null;
};
type SeatStyle = CSSProperties & {
'--card-x': string;
'--card-y': string;
};
import type { PokerCard, RoomPlayer, SeatStyle } from '@/types/room';
const props = defineProps<{
room: {
@@ -45,7 +27,7 @@ const props = defineProps<{
name: string;
cards: PokerCard[];
};
players: Player[];
players: RoomPlayer[];
};
currentPlayer: {
id: number;
@@ -60,7 +42,7 @@ const voteForm = useForm({
});
const revealForm = useForm<{ room?: string }>({});
const nextRoundForm = useForm<{ room?: string }>({});
const resetForm = useForm({});
const resetForm = useForm<{ room?: string }>({});
const copied = ref(false);
usePoll(2_000, {
@@ -84,10 +66,11 @@ const positionedPlayers = computed(() => {
const angle = Math.PI / 2 + (index * Math.PI * 2) / playerCount;
const horizontalRadius = 39;
const verticalRadius = 40;
const cardDistance = 88;
const cardDistance = 96;
return {
...player,
isTopSeat: Math.sin(angle) < -0.25,
seatStyle: {
left: `${50 + Math.cos(angle) * horizontalRadius}%`,
top: `${48 + Math.sin(angle) * verticalRadius}%`,
@@ -166,11 +149,11 @@ function cardLabel(value: string | null): string {
);
}
function isCurrentPlayer(player: Player): boolean {
function isCurrentPlayer(player: RoomPlayer): boolean {
return player.id === props.currentPlayer.id;
}
function playerVote(player: Player): string | null {
function playerVote(player: RoomPlayer): string | null {
if (isCurrentPlayer(player)) {
return props.currentPlayer.current_vote;
}
@@ -189,24 +172,19 @@ function playerVote(player: Player): string | null {
class="mx-auto flex max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
>
<div>
<p
class="mb-1 text-xs font-semibold tracking-[0.22em] text-cyan-300 uppercase"
>
Runde {{ room.current_round }} · {{ room.deck.name }}
</p>
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
<h1 class="text-2xl font-bold sm:text-3xl">
{{ room.title ?? 'Scrum Poker' }}
</h1>
</div>
<button
type="button"
class="flex w-fit items-center gap-3 rounded-2xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700"
class="flex w-fit items-center gap-3 rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700"
@click="copyInviteLink"
>
<span>
<span
class="block text-[10px] tracking-[0.18em] text-slate-400 uppercase"
class="block text-sm tracking-[0.18em] text-slate-400"
>
Raumcode
</span>
@@ -292,7 +270,12 @@ function playerVote(player: Player): string | null {
>
</div>
<div class="mt-2 flex flex-col items-center gap-1">
<div
class="player-details mt-2 flex flex-col items-center gap-1"
:class="{
'player-details-above': player.isTopSeat,
}"
>
<p
class="player-name max-w-32 text-center text-sm leading-tight font-semibold text-slate-100"
>
@@ -476,6 +459,10 @@ function playerVote(player: Player): string | null {
overflow-wrap: anywhere;
}
.player-details-above {
transform: translateY(calc(-100% - 4.5rem));
}
.moderator-controls {
position: absolute;
right: 1.5rem;
@@ -498,7 +485,7 @@ function playerVote(player: Player): string | null {
.seat-card {
position: absolute;
top: 50%;
top: 1.75rem;
left: 50%;
width: 3.15rem;
height: 4.35rem;
@@ -627,6 +614,10 @@ function playerVote(player: Player): string | null {
width: 6.5rem;
}
.player-details-above {
transform: translateY(calc(-100% - 4rem));
}
.moderator-controls {
right: 1rem;
bottom: 1rem;
@@ -638,6 +629,7 @@ function playerVote(player: Player): string | null {
}
.seat-card {
top: 1.5rem;
width: 2.65rem;
height: 3.65rem;
transform: translate(-50%, -50%) translate(var(--card-x), var(--card-y))
resources/js/types/index.ts
+1
View File
@@ -1,3 +1,4 @@
export * from './auth';
export * from './navigation';
export * from './room';
export * from './ui';
resources/js/types/room.ts
+19
View File
@@ -0,0 +1,19 @@
import type { CSSProperties } from 'vue';
export type PokerCard = {
key: string;
label: string;
};
export type RoomPlayer = {
id: number;
name: string;
is_moderator: boolean;
has_voted: boolean;
vote: string | null;
};
export type SeatStyle = CSSProperties & {
'--card-x': string;
'--card-y': string;
};