create endpoint and show sample image

Author: tknkaa

app/lib/redis.ts

@@ -9,7 +9,7 @@ export function getRedisClient(env: Env) {
 	return client;
 }
 
-interface GameState {
+export interface GameState {
 	kyoku: number;
 	junme: number;
 	haiyama: Hai[];
@@ -123,3 +123,17 @@ export const jikyoku = async (
 	};
 	await setGameState(client, userId, newGameState);
 };
+
+export const getCurrentGameState = async (
+	client: ReturnType<typeof createClient>,
+	userId: string,
+): Promise<GameState | null> => {
+	return await getGameState(client, userId);
+};
+
+export const deleteGameState = async (
+	client: ReturnType<typeof createClient>,
+	userId: string,
+) => {
+	await client.del(`user:${userId}:game`);
+};

app/routes/play.tedashi.ts

@@ -0,0 +1,40 @@
+import { getAuth } from "~/lib/auth";
+import { type GameState, getRedisClient, tedashi } from "~/lib/redis";
+import type { Route } from "./+types/play.tedashi";
+
+export async function action({
+	context,
+	request,
+}: Route.ActionArgs): Promise<GameState> {
+	const { env } = context.cloudflare;
+	const auth = getAuth(env);
+	const session = await auth.api.getSession({ headers: request.headers });
+
+	if (!session?.user?.id) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+	const userId = session.user.id;
+
+	const formData = await request.formData();
+	const index = Number(formData.get("index"));
+
+	if (isNaN(index)) {
+		throw new Response("Invalid index", { status: 400 });
+	}
+
+	const redisClient = getRedisClient(env);
+	await redisClient.connect();
+
+	try {
+		await tedashi(redisClient, userId, index);
+		const gameStateJSON = await redisClient.get(`user:${userId}:game`);
+		const gameState = gameStateJSON ? JSON.parse(gameStateJSON) : null;
+
+		await redisClient.quit();
+		return gameState;
+	} catch (error) {
+		await redisClient.quit();
+		const errorMessage = error instanceof Error ? error.message : String(error);
+		throw new Response(errorMessage, { status: 400 });
+	}
+}

app/routes/play.tsumogiri.ts

@@ -0,0 +1,33 @@
+import { getAuth } from "~/lib/auth";
+import { type GameState, getRedisClient, tsumogiri } from "~/lib/redis";
+import type { Route } from "./+types/play.tsumogiri";
+
+export async function action({
+	context,
+	request,
+}: Route.ActionArgs): Promise<GameState> {
+	const { env } = context.cloudflare;
+	const auth = getAuth(env);
+	const session = await auth.api.getSession({ headers: request.headers });
+
+	if (!session?.user?.id) {
+		throw new Response("Unauthorized", { status: 401 });
+	}
+	const userId = session.user.id;
+
+	const redisClient = getRedisClient(env);
+	await redisClient.connect();
+
+	try {
+		await tsumogiri(redisClient, userId);
+		const gameStateJSON = await redisClient.get(`user:${userId}:game`);
+		const gameState = gameStateJSON ? JSON.parse(gameStateJSON) : null;
+
+		await redisClient.quit();
+		return gameState;
+	} catch (error) {
+		await redisClient.quit();
+		const errorMessage = error instanceof Error ? error.message : String(error);
+		throw new Response(errorMessage, { status: 400 });
+	}
+}

app/routes/play.tsx

@@ -3,43 +3,82 @@ import { getAuth } from "~/lib/auth";
 import { getDB } from "~/lib/db";
 import { hai, haiyama } from "~/lib/db/schema";
 import { dbHaiToHai } from "~/lib/hai";
+import { type GameState, getRedisClient, init } from "~/lib/redis";
 import type { Route } from "./+types/play";
 
-export async function loader({ context, request }: Route.LoaderArgs) {
+export async function loader({
+	context,
+	request,
+}: Route.LoaderArgs): Promise<GameState> {
 	const { env } = context.cloudflare;
 	const db = getDB(env);
 	const auth = getAuth(env);
 	const session = await auth.api.getSession({ headers: request.headers });
+
 	if (!session?.user?.id) {
 		throw new Response("Unauthorized", { status: 401 });
 	}
 	const userId = session.user.id;
 
-	const randomHaiyama = await db
-		.select()
-		.from(haiyama)
-		.orderBy(sql`RANDOM()`)
-		.limit(1);
+	// Check if game state already exists in Redis
+	const redisClient = getRedisClient(env);
+	await redisClient.connect();
+
+	try {
+		const existingGameState = await redisClient.get(`user:${userId}:game`);
+
+		if (existingGameState) {
+			// Return existing game state from Redis
+			await redisClient.quit();
+			return JSON.parse(existingGameState);
+		}
+
+		// No existing game state, so initialize from PostgreSQL
+		const randomHaiyama = await db
+			.select()
+			.from(haiyama)
+			.orderBy(sql`RANDOM()`)
+			.limit(1);
+
+		if (randomHaiyama.length === 0) {
+			await redisClient.quit();
+			throw new Response("No haiyama found", { status: 404 });
+		}
+
+		const selectedHaiyama = randomHaiyama[0];
+		const rawHaiData = await db
+			.select()
+			.from(hai)
+			.where(sql`${hai.haiyamaId} = ${selectedHaiyama.id}`)
+			.orderBy(hai.order);
+
+		const haiData = rawHaiData.map((hai) => dbHaiToHai(hai));
+
+		// Initialize game state in Redis
+		await init(redisClient, userId, haiData);
+
+		// Get the initialized game state to return
+		const gameStateJSON = await redisClient.get(`user:${userId}:game`);
+		const gameState = gameStateJSON ? JSON.parse(gameStateJSON) : null;
 
-	if (randomHaiyama.length === 0) {
-		throw new Response("No haiyama found", { status: 404 });
+		await redisClient.quit();
+		return gameState;
+	} catch (error) {
+		await redisClient.quit();
+		throw error instanceof Error ? error : new Error(String(error));
 	}
-	const selectedHaiyama = randomHaiyama[0];
-	const rawHaiData = await db
-		.select()
-		.from(hai)
-		.where(sql`${hai.haiyamaId} = ${selectedHaiyama.id}`)
-		.orderBy(hai.order);
-	const haiData = rawHaiData.map((hai) => dbHaiToHai(hai));
-	//TODO: store data in redis
-	return haiData;
 }
 
 export default function Page({ loaderData }: Route.ComponentProps) {
-	console.log(loaderData);
+	const exampleHai = loaderData.haiyama[0];
 	return (
 		<>
 			<p>Play Page</p>
+			<img
+				src={`/hai/${exampleHai.kind}_${exampleHai.value}.png`}
+				alt={`${hai.kind} ${hai.value}`}
+				className="cursor-pointer"
+			/>
 		</>
 	);
 }