blob: 9eee6914b0b262691e04de69475e81488ffbf07a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import { useEffect, useState } from "react";
import { useLocation } from "wouter";
import { createApiClient } from "../api/client";
import type { components } from "../api/schema";
import ProblemColumnContent from "../components/Gaming/ProblemColumnContent";
import NavigateLink from "../components/NavigateLink";
import { APP_NAME } from "../config";
import { usePageTitle } from "../hooks/usePageTitle";
type Game = components["schemas"]["Game"];
export default function GolfProblemPreviewPage({ gameId }: { gameId: string }) {
const [, navigate] = useLocation();
const [game, setGame] = useState<Game | null>(null);
const [loading, setLoading] = useState(true);
const gameIdNum = Number(gameId);
usePageTitle(
game
? `${game.display_name} - 問題プレビュー | ${APP_NAME}`
: `問題プレビュー | ${APP_NAME}`,
);
useEffect(() => {
const apiClient = createApiClient();
apiClient
.getGame(gameIdNum)
.then(({ game }) => setGame(game))
.catch(() => navigate("/dashboard"))
.finally(() => setLoading(false));
}, [gameIdNum, navigate]);
if (loading || !game) {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<p className="text-gray-500">Loading...</p>
</div>
);
}
return (
<div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center gap-4">
<h1 className="text-3xl font-bold text-gray-800">{game.display_name}</h1>
<div className="w-full max-w-3xl flex flex-col gap-4">
<ProblemColumnContent
description={game.problem.description}
language={game.problem.language}
sampleCode={game.problem.sample_code}
/>
</div>
<div className="flex gap-4">
<NavigateLink to={`/golf/${game.game_id}/play`}>
対戦ページへ
</NavigateLink>
<NavigateLink to={`/golf/${game.game_id}/watch`}>
観戦ページへ
</NavigateLink>
</div>
<NavigateLink to="/dashboard">ダッシュボードへ戻る</NavigateLink>
</div>
);
}
|
