- Updated API types to replace `GameStub` with `GameInfo` and added `SessionSpinResult` and `SpinOutcome` types. - Modified API requests in `api.ts` to use the new game types. - Implemented the `ForestFortuneGame` component with game logic, including spinning mechanics and win animations. - Created supporting components: `CoinFlight`, `ReelColumn`, `WinCounter`, and `WinLinesOverlay` for game UI. - Added CSS styles for the Forest Fortune game layout and animations. - Updated `GamePage` and `HomePage` to integrate the new game and reflect its status correctly.
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { Link, Navigate, useParams } from 'react-router-dom'
|
||
import { api } from '../api'
|
||
import { useAuth } from '../auth'
|
||
import { ForestFortuneGame } from '../games/forest-fortune/ForestFortuneGame'
|
||
import type { GameInfo } from '../types'
|
||
|
||
export function GamePage() {
|
||
const { slug } = useParams<{ slug: string }>()
|
||
const { user, loading } = useAuth()
|
||
const [game, setGame] = useState<GameInfo | null>(null)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
useEffect(() => {
|
||
if (!slug) return
|
||
void api
|
||
.getGame(slug)
|
||
.then(setGame)
|
||
.catch((err: unknown) => setError(err instanceof Error ? err.message : 'Не найдено'))
|
||
}, [slug])
|
||
|
||
if (!loading && user && !user.agreement_accepted) {
|
||
return <Navigate to="/" replace />
|
||
}
|
||
|
||
const playable = game?.status === 'available' && game.slug === 'forest-fortune'
|
||
|
||
return (
|
||
<main className="game-page">
|
||
<Link to="/home" className="back-link">
|
||
← Назад
|
||
</Link>
|
||
{error && <p className="error">{error}</p>}
|
||
{game && playable && <ForestFortuneGame game={game} />}
|
||
{game && !playable && (
|
||
<section className="game-stub">
|
||
<img src="/logo.png" alt="" className="game-stub__mark" />
|
||
<h1>{game.title}</h1>
|
||
<p>{game.description}</p>
|
||
<p className="game-stub__badge">В разработке</p>
|
||
</section>
|
||
)}
|
||
</main>
|
||
)
|
||
}
|