Skip to content

Commit b6adcf1

Browse files
tknkaatknkaa
committed
iikannji
1 parent 51c1a4b commit b6adcf1

File tree

4 files changed

+76
-21
lines changed

4 files changed

+76
-21
lines changed

‎app/routes/play.tedashi.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1+
import { redirect } from "react-router";
12
import { getAuth } from "~/lib/auth";
23
import { type GameState, getRedisClient, tedashi } from "~/lib/redis";
34
import type { Route } from "./+types/play.tedashi";
45

5-
export async function action({
6-
context,
7-
request,
8-
}: Route.ActionArgs): Promise<GameState> {
6+
export async function action({ context, request }: Route.ActionArgs) {
97
const { env } = context.cloudflare;
108
const auth = getAuth(env);
119
const session = await auth.api.getSession({ headers: request.headers });
@@ -31,7 +29,7 @@ export async function action({
3129
const gameState = gameStateJSON ? JSON.parse(gameStateJSON) : null;
3230

3331
await redisClient.quit();
34-
return gameState;
32+
return redirect("/play");
3533
} catch (error) {
3634
await redisClient.quit();
3735
const errorMessage = error instanceof Error ? error.message : String(error);

‎app/routes/play.tsumogiri.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1+
import { redirect } from "react-router";
12
import { getAuth } from "~/lib/auth";
23
import { type GameState, getRedisClient, tsumogiri } from "~/lib/redis";
34
import type { Route } from "./+types/play.tsumogiri";
45

5-
export async function action({
6-
context,
7-
request,
8-
}: Route.ActionArgs): Promise<GameState> {
6+
export async function action({ context, request }: Route.ActionArgs) {
97
const { env } = context.cloudflare;
108
const auth = getAuth(env);
119
const session = await auth.api.getSession({ headers: request.headers });
@@ -24,7 +22,7 @@ export async function action({
2422
const gameState = gameStateJSON ? JSON.parse(gameStateJSON) : null;
2523

2624
await redisClient.quit();
27-
return gameState;
25+
return redirect("/play");
2826
} catch (error) {
2927
await redisClient.quit();
3028
const errorMessage = error instanceof Error ? error.message : String(error);

‎app/routes/play.tsx‎

Lines changed: 69 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { sql } from "drizzle-orm";
2+
import { Form } from "react-router";
23
import { getAuth } from "~/lib/auth";
34
import { getDB } from "~/lib/db";
45
import { hai, haiyama } from "~/lib/db/schema";
5-
import { dbHaiToHai } from "~/lib/hai";
6+
import { dbHaiToHai, sortTehai } from "~/lib/hai";
67
import { type GameState, getRedisClient, init } from "~/lib/redis";
78
import type { Route } from "./+types/play";
89

@@ -70,15 +71,73 @@ export async function loader({
7071
}
7172

7273
export default function Page({ loaderData }: Route.ComponentProps) {
73-
const exampleHai = loaderData.haiyama[0];
74+
let { haiyama, sutehai, tsumohai, junme, kyoku, tehai } = loaderData;
75+
tehai = sortTehai(tehai);
76+
const indexedSutehai = sutehai.map((hai, index) => ({
77+
...hai,
78+
index: index,
79+
}));
80+
const indexedTehai = tehai.map((hai, index) => ({
81+
...hai,
82+
index: index,
83+
}));
84+
7485
return (
75-
<>
76-
<p>Play Page</p>
77-
<img
78-
src={`/hai/${exampleHai.kind}_${exampleHai.value}.png`}
79-
alt={`${hai.kind} ${hai.value}`}
80-
className="cursor-pointer"
81-
/>
82-
</>
86+
<div className="p-4">
87+
<p className="text-xl mb-4">
88+
Play Page - 局 {kyoku} 巡目 {junme}
89+
</p>
90+
91+
{/* Sutehai grid (3x6) */}
92+
<div className="mb-6">
93+
<h3 className="text-lg mb-2">捨て牌</h3>
94+
<div className="grid grid-cols-6 gap-0 w-max min-h-48">
95+
{indexedSutehai.map((hai) => (
96+
<img
97+
key={hai.index}
98+
src={`/hai/${hai.kind}_${hai.value}.png`}
99+
alt={`${hai.kind} ${hai.value}`}
100+
className="w-12 h-16"
101+
/>
102+
))}
103+
</div>
104+
</div>
105+
106+
{/* Tehai and Tsumohai */}
107+
<div className="flex items-center gap-4">
108+
<div>
109+
<h3 className="text-lg mb-2">手牌</h3>
110+
<div className="flex gap-0">
111+
{indexedTehai.map((hai) => (
112+
<Form key={hai.index} method="post" action="/play/tedashi">
113+
<input type="hidden" name="index" value={hai.index} />
114+
<button type="submit">
115+
<img
116+
src={`/hai/${hai.kind}_${hai.value}.png`}
117+
alt={`${hai.kind} ${hai.value}`}
118+
className="w-12 h-16 cursor-pointer hover:scale-105 transition-transform"
119+
/>
120+
</button>
121+
</Form>
122+
))}
123+
</div>
124+
</div>
125+
126+
{tsumohai && (
127+
<div>
128+
<h3 className="text-lg mb-2">ツモ牌</h3>
129+
<Form method="post" action="/play/tsumogiri">
130+
<button type="submit">
131+
<img
132+
src={`/hai/${tsumohai.kind}_${tsumohai.value}.png`}
133+
alt={`${tsumohai.kind} ${tsumohai.value}`}
134+
className="w-12 h-16 object-contain cursor-pointer hover:scale-105 transition-transform"
135+
/>
136+
</button>
137+
</Form>
138+
</div>
139+
)}
140+
</div>
141+
</div>
83142
);
84143
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"postinstall": "npm run cf-typegen",
1212
"preview": "bun run build && vite preview",
1313
"typecheck": "npm run cf-typegen && react-router typegen && tsc -b",
14-
"format": "bunx @biomejs/biome format . --write"
14+
"format": "bunx @biomejs/biome check . --write"
1515
},
1616
"dependencies": {
1717
"@neondatabase/serverless": "^1.0.2",

0 commit comments

Comments
 (0)