Oronemu/game-marathon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add invite links

Browse Source
This commit is contained in:
Oronemu
2025-12-14 20:39:26 +07:00
parent d0b8eca600
commit 5db2f9c48d
11 changed files with 290 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@@ -14,6 +14,7 @@ import { MarathonPage } from '@/pages/MarathonPage'
import { LobbyPage } from '@/pages/LobbyPage'
import { PlayPage } from '@/pages/PlayPage'
import { LeaderboardPage } from '@/pages/LeaderboardPage'
import { InvitePage } from '@/pages/InvitePage'
// Protected route wrapper
function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -43,6 +44,9 @@ function App() {
<Route path="/" element={<Layout />}>
<Route index element={<HomePage />} />
{/* Public invite page */}
<Route path="invite/:code" element={<InvitePage />} />
<Route
path="login"
element={

8
frontend/src/api/marathons.ts
View File

@@ -1,5 +1,5 @@
import client from './client'
import type { Marathon, MarathonListItem, LeaderboardEntry, ParticipantWithUser, ParticipantRole, GameProposalMode } from '@/types'
import type { Marathon, MarathonListItem, MarathonPublicInfo, LeaderboardEntry, ParticipantWithUser, ParticipantRole, GameProposalMode } from '@/types'
export interface CreateMarathonData {
title: string
@@ -21,6 +21,12 @@ export const marathonsApi = {
return response.data
},
getByCode: async (inviteCode: string): Promise<MarathonPublicInfo> => {
// Public endpoint - no auth required
const response = await client.get<MarathonPublicInfo>(`/marathons/by-code/${inviteCode}`)
return response.data
},
create: async (data: CreateMarathonData): Promise<Marathon> => {
const response = await client.post<Marathon>('/marathons', data)
return response.data

168
frontend/src/pages/InvitePage.tsx Normal file
View File

@@ -0,0 +1,168 @@
import { useState, useEffect } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { marathonsApi } from '@/api'
import type { MarathonPublicInfo } from '@/types'
import { useAuthStore } from '@/store/auth'
import { Button, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
import { Users, Loader2, Trophy, UserPlus, LogIn } from 'lucide-react'
export function InvitePage() {
const { code } = useParams<{ code: string }>()
const navigate = useNavigate()
const { isAuthenticated, setPendingInviteCode } = useAuthStore()
const [marathon, setMarathon] = useState<MarathonPublicInfo | null>(null)
const [isLoading, setIsLoading] = useState(true)
const [isJoining, setIsJoining] = useState(false)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
loadMarathon()
}, [code])
const loadMarathon = async () => {
if (!code) return
try {
const data = await marathonsApi.getByCode(code)
setMarathon(data)
} catch {
setError('Марафон не найден или ссылка недействительна')
} finally {
setIsLoading(false)
}
}
const handleJoin = async () => {
if (!code) return
setIsJoining(true)
try {
const joined = await marathonsApi.join(code)
navigate(`/marathons/${joined.id}`)
} catch (err: unknown) {
const apiError = err as { response?: { data?: { detail?: string } } }
const detail = apiError.response?.data?.detail
if (detail === 'Already joined this marathon') {
// Already a member, just redirect
navigate(`/marathons/${marathon?.id}`)
} else {
setError(detail || 'Не удалось присоединиться')
}
} finally {
setIsJoining(false)
}
}
const handleAuthRedirect = (path: string) => {
if (code) {
setPendingInviteCode(code)
}
navigate(path)
}
if (isLoading) {
return (
<div className="flex justify-center py-12">
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
</div>
)
}
if (error || !marathon) {
return (
<div className="max-w-md mx-auto">
<Card>
<CardContent className="text-center py-8">
<div className="text-red-400 mb-4">{error || 'Марафон не найден'}</div>
<Link to="/marathons">
<Button variant="secondary">К списку марафонов</Button>
</Link>
</CardContent>
</Card>
</div>
)
}
const statusText = {
preparing: 'Подготовка',
active: 'Активен',
finished: 'Завершён',
}[marathon.status]
return (
<div className="max-w-md mx-auto">
<Card>
<CardHeader className="text-center">
<CardTitle className="flex items-center justify-center gap-2">
<Trophy className="w-6 h-6 text-primary-500" />
Приглашение в марафон
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{/* Marathon info */}
<div className="text-center">
<h2 className="text-2xl font-bold text-white mb-2">{marathon.title}</h2>
{marathon.description && (
<p className="text-gray-400 text-sm mb-4">{marathon.description}</p>
)}
<div className="flex items-center justify-center gap-4 text-sm text-gray-400">
<span className="flex items-center gap-1">
<Users className="w-4 h-4" />
{marathon.participants_count} участников
</span>
<span className={`px-2 py-0.5 rounded text-xs ${
marathon.status === 'active' ? 'bg-green-900/50 text-green-400' :
marathon.status === 'preparing' ? 'bg-yellow-900/50 text-yellow-400' :
'bg-gray-700 text-gray-400'
}`}>
{statusText}
</span>
</div>
<p className="text-gray-500 text-xs mt-2">
Организатор: {marathon.creator_nickname}
</p>
</div>
{marathon.status === 'finished' ? (
<div className="text-center text-gray-400">
Этот марафон уже завершён
</div>
) : isAuthenticated ? (
/* Authenticated - show join button */
<Button
className="w-full"
onClick={handleJoin}
isLoading={isJoining}
>
<UserPlus className="w-4 h-4 mr-2" />
Присоединиться к марафону
</Button>
) : (
/* Not authenticated - show login/register options */
<div className="space-y-3">
<p className="text-center text-gray-400 text-sm">
Чтобы присоединиться, войдите или зарегистрируйтесь
</p>
<Button
className="w-full"
onClick={() => handleAuthRedirect('/login')}
>
<LogIn className="w-4 h-4 mr-2" />
Войти
</Button>
<Button
variant="secondary"
className="w-full"
onClick={() => handleAuthRedirect('/register')}
>
<UserPlus className="w-4 h-4 mr-2" />
Зарегистрироваться
</Button>
</div>
)}
</CardContent>
</Card>
</div>
)
}

16
frontend/src/pages/LoginPage.tsx
View File

@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { useAuthStore } from '@/store/auth'
import { marathonsApi } from '@/api'
import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
const loginSchema = z.object({
@@ -15,7 +16,7 @@ type LoginForm = z.infer<typeof loginSchema>
export function LoginPage() {
const navigate = useNavigate()
const { login, isLoading, error, clearError } = useAuthStore()
const { login, isLoading, error, clearError, consumePendingInviteCode } = useAuthStore()
const [submitError, setSubmitError] = useState<string | null>(null)
const {
@@ -31,6 +32,19 @@ export function LoginPage() {
clearError()
try {
await login(data)
// Check for pending invite code
const pendingCode = consumePendingInviteCode()
if (pendingCode) {
try {
const marathon = await marathonsApi.join(pendingCode)
navigate(`/marathons/${marathon.id}`)
return
} catch {
// If join fails (already member, etc), just go to marathons
}
}
navigate('/marathons')
} catch {
setSubmitError(error || 'Ошибка входа')

21
frontend/src/pages/MarathonPage.tsx
View File

@@ -34,9 +34,14 @@ export function MarathonPage() {
}
}
const copyInviteCode = () => {
const getInviteLink = () => {
if (!marathon) return ''
return `${window.location.origin}/invite/${marathon.invite_code}`
}
const copyInviteLink = () => {
if (marathon) {
navigator.clipboard.writeText(marathon.invite_code)
navigator.clipboard.writeText(getInviteLink())
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
@@ -229,16 +234,16 @@ export function MarathonPage() {
</Card>
</div>
{/* Invite code */}
{/* Invite link */}
{marathon.status !== 'finished' && (
<Card className="mb-8">
<CardContent>
<h3 className="font-medium text-white mb-3">Код приглашения</h3>
<h3 className="font-medium text-white mb-3">Ссылка для приглашения</h3>
<div className="flex items-center gap-3">
<code className="flex-1 px-4 py-2 bg-gray-900 rounded-lg text-primary-400 font-mono">
{marathon.invite_code}
<code className="flex-1 px-4 py-2 bg-gray-900 rounded-lg text-primary-400 font-mono text-sm overflow-hidden text-ellipsis">
{getInviteLink()}
</code>
<Button variant="secondary" onClick={copyInviteCode}>
<Button variant="secondary" onClick={copyInviteLink}>
{copied ? (
<>
<Check className="w-4 h-4 mr-2" />
@@ -253,7 +258,7 @@ export function MarathonPage() {
</Button>
</div>
<p className="text-sm text-gray-500 mt-2">
Поделитесь этим кодом с друзьями, чтобы они могли присоединиться к марафону
Поделитесь этой ссылкой с друзьями, чтобы они могли присоединиться к марафону
</p>
</CardContent>
</Card>

16
frontend/src/pages/RegisterPage.tsx
View File

@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { useAuthStore } from '@/store/auth'
import { marathonsApi } from '@/api'
import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
const registerSchema = z.object({
@@ -27,7 +28,7 @@ type RegisterForm = z.infer<typeof registerSchema>
export function RegisterPage() {
const navigate = useNavigate()
const { register: registerUser, isLoading, error, clearError } = useAuthStore()
const { register: registerUser, isLoading, error, clearError, consumePendingInviteCode } = useAuthStore()
const [submitError, setSubmitError] = useState<string | null>(null)
const {
@@ -47,6 +48,19 @@ export function RegisterPage() {
password: data.password,
nickname: data.nickname,
})
// Check for pending invite code
const pendingCode = consumePendingInviteCode()
if (pendingCode) {
try {
const marathon = await marathonsApi.join(pendingCode)
navigate(`/marathons/${marathon.id}`)
return
} catch {
// If join fails, just go to marathons
}
}
navigate('/marathons')
} catch {
setSubmitError(error || 'Ошибка регистрации')

15
frontend/src/store/auth.ts
View File

@@ -9,21 +9,25 @@ interface AuthState {
isAuthenticated: boolean
isLoading: boolean
error: string | null
pendingInviteCode: string | null
login: (data: LoginData) => Promise<void>
register: (data: RegisterData) => Promise<void>
logout: () => void
clearError: () => void
setPendingInviteCode: (code: string | null) => void
consumePendingInviteCode: () => string | null
}
export const useAuthStore = create<AuthState>()(
persist(
(set) => ({
(set, get) => ({
user: null,
token: null,
isAuthenticated: false,
isLoading: false,
error: null,
pendingInviteCode: null,
login: async (data) => {
set({ isLoading: true, error: null })
@@ -77,6 +81,14 @@ export const useAuthStore = create<AuthState>()(
},
clearError: () => set({ error: null }),
setPendingInviteCode: (code) => set({ pendingInviteCode: code }),
consumePendingInviteCode: () => {
const code = get().pendingInviteCode
set({ pendingInviteCode: null })
return code
},
}),
{
name: 'auth-storage',
@@ -84,6 +96,7 @@ export const useAuthStore = create<AuthState>()(
user: state.user,
token: state.token,
isAuthenticated: state.isAuthenticated,
pendingInviteCode: state.pendingInviteCode,
}),
}
)

9
frontend/src/types/index.ts
View File

@@ -70,6 +70,15 @@ export interface MarathonCreate {
game_proposal_mode: GameProposalMode
}
export interface MarathonPublicInfo {
id: number
title: string
description: string | null
status: MarathonStatus
participants_count: number
creator_nickname: string
}
export interface LeaderboardEntry {
rank: number
user: User