aarbit/scavengerhunt-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds display of Team members

Browse Source
This commit is contained in:
aarbit
2026-05-18 17:12:43 -05:00
parent 6e4edd96ce
commit 86866f4db7
4 changed files with 84 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/api/index.ts
View File

@@ -1,6 +1,7 @@
import {BASE_URL, client} from './client'
import type {
HunterLeaderboardResponse,
HunterSummaryResponse,
HuntResponse,
ItemResponse,
LoginResponse,
@@ -60,6 +61,9 @@ export const apiCreateTeam = (huntId: string, name: string) =>
export const apiGetTeam = (huntId: string, teamId: string) =>
client.get<TeamResponse>(`/hunt/${huntId}/team/${teamId}`)
export const apiGetTeamHunters = (huntId: string, teamId: string) =>
client.get<HunterSummaryResponse[]>(`/hunt/${huntId}/team/${teamId}/hunter`)
// ── Items ─────────────────────────────────────────────────────────────────────
export const apiGetItems = (huntId: string) =>

5
src/lib/api/types.ts
View File

@@ -51,3 +51,8 @@ export interface HunterLeaderboardResponse {
hunterName: string
score: number
}
export interface HunterSummaryResponse {
id: string
name: string
}

36
src/routes/hunter/HuntList.svelte
View File

@@ -6,10 +6,11 @@
apiGetHunterTeam,
apiGetOngoingHunts,
apiGetUnstartedHunts,
apiGetTeamHunters,
apiJoinTeam,
apiListTeams,
} from '../../lib/api/index'
import type {HuntResponse, TeamResponse} from '../../lib/api/types'
import type {HuntResponse, HunterSummaryResponse, TeamResponse} from '../../lib/api/types'
import StatusBadge from '../../lib/components/StatusBadge.svelte'
import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
@@ -53,6 +54,7 @@
let sheetHunt = $state<HuntResponse | null>(null)
let sheetTeams = $state<TeamResponse[]>([])
let sheetMembers = $state<HunterSummaryResponse[]>([])
let sheetLoading = $state(false)
let newTeamName = $state('')
let creatingTeam = $state(false)
@@ -63,9 +65,20 @@
sheetHunt = hunt
sheetError = ''
newTeamName = ''
sheetMembers = []
sheetLoading = true
try {
sheetTeams = await apiListTeams(hunt.id)
const myTeam = upcomingTeams[hunt.id]
if (myTeam) {
const [teams, members] = await Promise.all([
apiListTeams(hunt.id),
apiGetTeamHunters(hunt.id, myTeam.id),
])
sheetTeams = teams
sheetMembers = members
} else {
sheetTeams = await apiListTeams(hunt.id)
}
} catch (e: unknown) {
sheetError = e instanceof Error ? e.message : 'Failed to load teams'
} finally {
@@ -237,10 +250,21 @@
<LoadingSpinner />
{:else if myTeam}
<!-- Already on a team -->
<div class="rounded-xl border border-base-200 p-4">
<p class="text-xs font-semibold uppercase tracking-wide text-base-content/40 mb-1">Your Team</p>
<p class="text-lg font-bold">{myTeam.name}</p>
<!-- Team member list will be available once the backend exposes a members endpoint -->
<div class="rounded-xl border border-base-200 p-4 flex flex-col gap-3">
<div>
<p class="text-xs font-semibold uppercase tracking-wide text-base-content/40 mb-1">Your Team</p>
<p class="text-lg font-bold">{myTeam.name}</p>
</div>
{#if sheetMembers.length > 0}
<div>
<p class="text-xs font-semibold uppercase tracking-wide text-base-content/40 mb-2">Members</p>
<div class="flex flex-col gap-1">
{#each sheetMembers as member}
<p class="text-sm font-medium">{member.name}</p>
{/each}
</div>
</div>
{/if}
</div>
{:else}
<!-- Join or create -->

47
src/routes/hunter/HuntLobby.svelte
View File

@@ -8,13 +8,14 @@
apiGetHunterTeam,
apiGetItemPhotos,
apiGetItems,
apiGetTeamHunters,
apiGetTeamItem,
apiJoinTeam,
apiListTeams,
apiRemovePhoto,
apiSubmitPhoto
} from '../../lib/api/index'
import type {HuntResponse, ItemResponse, PhotoResponse, TeamItemResponse, TeamResponse} from '../../lib/api/types'
import type {HuntResponse, HunterSummaryResponse, ItemResponse, PhotoResponse, TeamItemResponse, TeamResponse} from '../../lib/api/types'
import StatusBadge from '../../lib/components/StatusBadge.svelte'
import AuthImage from '../../lib/components/AuthImage.svelte'
import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
@@ -174,6 +175,21 @@
const submitted = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'SUBMITTED').length)
const rejected = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'REJECTED').length)
let teamMembers = $state<HunterSummaryResponse[]>([])
let teamMembersLoading = $state(false)
let teamMembersOpen = $state(false)
async function openTeamMembers() {
if (!myTeam) return
teamMembersOpen = true
teamMembersLoading = true
try {
teamMembers = await apiGetTeamHunters(params.huntId, myTeam.id)
} finally {
teamMembersLoading = false
}
}
let searchQuery = $state('')
let filterStatus = $state<string | null>(null)
let filterPoints = $state<number | null>(null)
@@ -228,7 +244,9 @@
<StatusBadge status={huntStatus(hunt)} />
</div>
{#if myTeam}
<p class="text-sm text-base-content/50 mt-0.5">Team: <span class="font-medium text-base-content/70">{myTeam.name}</span></p>
<button class="text-sm text-base-content/50 mt-0.5 text-left" onclick={openTeamMembers}>
Team: <span class="font-medium text-base-content/70 underline decoration-dotted underline-offset-2">{myTeam.name}</span>
</button>
{#if items.length > 0}
<div class="flex items-center gap-2 mt-2">
<div class="flex-1 h-2 rounded-full overflow-hidden bg-base-300 flex">
@@ -360,6 +378,31 @@
{/if}
</div>
<!-- Team members popup -->
{#if teamMembersOpen && myTeam}
{@const team = myTeam}
<div class="fixed inset-0 z-50 flex items-center justify-center p-6" role="presentation" onclick={() => teamMembersOpen = false}>
<div class="bg-base-100 rounded-2xl shadow-2xl w-full max-w-sm p-5" role="dialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
<div class="flex items-center justify-between mb-4">
<div>
<p class="text-xs font-semibold uppercase tracking-wide text-base-content/40">Team</p>
<h3 class="font-bold text-lg leading-tight">{team.name}</h3>
</div>
<button class="btn btn-ghost btn-sm btn-circle" onclick={() => teamMembersOpen = false}>✕</button>
</div>
{#if teamMembersLoading}
<LoadingSpinner />
{:else}
<div class="flex flex-col gap-2">
{#each teamMembers as member}
<p class="text-sm font-medium py-1 border-b border-base-200 last:border-0">{member.name}</p>
{/each}
</div>
{/if}
</div>
</div>
{/if}
<!-- Photo lightbox -->
{#if expandedPhoto}
{@const photo = expandedPhoto}