From 40a2cd34d9569d841eaac7e7570c065690bb1bda Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Sun, 1 Feb 2026 20:50:50 -0600 Subject: [PATCH] Hardcode Bob's user and deck IDs for game creation testing - Replace placeholder UUIDs with Bob's actual IDs - Enables testing game creation flow - Temporary fix until matchmaking endpoint is implemented Co-Authored-By: Claude Sonnet 4.5 --- frontend/src/pages/PlayPage.vue | 315 +++++++++++++++++++++++++++----- 1 file changed, 274 insertions(+), 41 deletions(-) diff --git a/frontend/src/pages/PlayPage.vue b/frontend/src/pages/PlayPage.vue index 83d2b0b..6bb577c 100644 --- a/frontend/src/pages/PlayPage.vue +++ b/frontend/src/pages/PlayPage.vue @@ -2,9 +2,118 @@ /** * Play menu page. * - * Game mode selection - start a new game, view active games, - * or access campaign mode. + * Game lobby for creating new games and viewing/resuming active games. + * Users select a deck and create a new game, or resume an existing active game. */ +import { ref, computed, onMounted } from 'vue' +import { useRouter } from 'vue-router' + +import { useGames } from '@/composables/useGames' +import { useDecks } from '@/composables/useDecks' +import { useUiStore } from '@/stores/ui' + +const router = useRouter() +const { activeGames, isLoading: isLoadingGames, fetchActiveGames, createGame } = useGames() +const { decks, isLoading: isLoadingDecks, fetchDecks } = useDecks() +const ui = useUiStore() + +// Selected deck for new game +const selectedDeckId = ref(null) +const isCreatingGame = ref(false) + +// Computed: valid decks only +const validDecks = computed(() => decks.value.filter(d => d.isValid)) + +// Computed: is loading anything +const isLoading = computed(() => isLoadingGames.value || isLoadingDecks.value) + +// Load data on mount +onMounted(async () => { + try { + await Promise.all([ + fetchActiveGames(), + fetchDecks(), + ]) + + // Auto-select first valid deck if available + if (validDecks.value.length > 0 && !selectedDeckId.value) { + selectedDeckId.value = validDecks.value[0].id + } + } catch (error) { + ui.showError('Failed to load game lobby data') + console.error('PlayPage initialization error:', error) + } +}) + +/** + * Resume an active game by navigating to the game page. + */ +function handleResumeGame(gameId: string): void { + router.push(`/game/${gameId}`) +} + +/** + * Create a new game with the selected deck. + * + * For now, creates a game against a placeholder opponent. + * In the future, this will support matchmaking or campaign NPCs. + */ +async function handleCreateGame(): Promise { + if (!selectedDeckId.value) { + ui.showError('Please select a deck') + return + } + + if (validDecks.value.length === 0) { + ui.showError('You need at least one valid deck to play') + return + } + + isCreatingGame.value = true + + try { + // TEMPORARY: Hardcoded Bob as opponent for Phase F4 testing + // TODO: Replace with matchmaking endpoint in future phase + const result = await createGame({ + deck_id: selectedDeckId.value, + opponent_id: '8d8b05a0-c231-4082-ba6f-56c2b908016c', // Bob's user ID + opponent_deck_id: '0e8790dd-cf78-48f4-876b-65406f218f90', // Bob's Test Fire Deck + game_type: 'freeplay', + }) + + if (result.success && result.data) { + ui.showSuccess('Game created! Joining...') + // Navigate to the game page + router.push(`/game/${result.data.game_id}`) + } else { + ui.showError(result.error || 'Failed to create game') + } + } catch (e) { + ui.showError('An unexpected error occurred') + console.error('Create game error:', e) + } finally { + isCreatingGame.value = false + } +} + +/** + * Format timestamp to relative time string. + */ +function formatRelativeTime(isoString: string): string { + const date = new Date(isoString) + const now = new Date() + const diffMs = now.getTime() - date.getTime() + const diffMins = Math.floor(diffMs / 60000) + + if (diffMins < 1) return 'Just now' + if (diffMins < 60) return `${diffMins}m ago` + + const diffHours = Math.floor(diffMins / 60) + if (diffHours < 24) return `${diffHours}h ago` + + const diffDays = Math.floor(diffHours / 24) + return `${diffDays}d ago` +}