From dc37362350be17e4244f2c3720f3a51e352eaf91 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:26:43 +0000
Subject: [PATCH 1/5] Initial plan


From f448523f4a7a7a6613da6723a2f791fe17095a35 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:41:14 +0000
Subject: [PATCH 2/5] feat: improve play screen visual style and mobile layout

Agent-Logs-Url: https://github.com/ut-code/hitori-mahjong/sessions/524100d1-262c-4708-a498-c01c3cd15cd9

Co-authored-by: tknkaa <145080781+tknkaa@users.noreply.github.com>
---
 app/routes/play.tsx | 151 ++++++++++++++++++++++++++------------------
 1 file changed, 88 insertions(+), 63 deletions(-)

diff --git a/app/routes/play.tsx b/app/routes/play.tsx
index 2bf9c3e..09f1f56 100644
--- a/app/routes/play.tsx
+++ b/app/routes/play.tsx
@@ -1,4 +1,5 @@
 import { sql } from "drizzle-orm";
+import { Form } from "react-router";
 import { getAuth } from "~/lib/auth";
 import { getDB } from "~/lib/db";
 import { haiyama } from "~/lib/db/schema";
@@ -94,96 +95,120 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 	}));
 
 	return (
-		<div className="p-4">
+		<div className="min-h-screen bg-[#1A472A] p-4 md:p-8 font-serif text-white">
 			{isAgari && (
 				<dialog id="agari_modal" className="modal" open>
-					<div className="modal-box">
-						<h3 className="font-bold text-lg">ツモ！</h3>
+					<div className="modal-box bg-[#0F2918] border border-yellow-700 text-white">
+						<h3 className="font-bold text-2xl text-yellow-400">ツモ！</h3>
+						<p className="mt-2 text-sm text-gray-200">
+							お見事です。和了を確定しますか？
+						</p>
 						<div className="modal-action">
-							<form method="post" action="/api/agari">
+							<Form method="post" action="/api/agari">
 								<input type="hidden" value={junme} name="junme" />
-								<button className="btn" type="submit">
+								<button
+									className="btn bg-yellow-600 text-white border-none"
+									type="submit"
+								>
 									確認
 								</button>
-							</form>
+							</Form>
 						</div>
 					</div>
 				</dialog>
 			)}
 			{isRyukyoku && (
 				<dialog id="ryukyoku_modal" className="modal" open>
-					<div className="modal-box">
-						<h3 className="font-bold text-lg">流局</h3>
+					<div className="modal-box bg-[#0F2918] border border-yellow-700 text-white">
+						<h3 className="font-bold text-2xl text-yellow-400">流局</h3>
+						<p className="mt-2 text-sm text-gray-200">
+							この局は終了です。結果を確定しますか？
+						</p>
 						<div className="modal-action">
-							<form method="post" action="/api/ryukyoku">
-								<button className="btn" type="submit">
+							<Form method="post" action="/api/ryukyoku">
+								<button
+									className="btn bg-yellow-600 text-white border-none"
+									type="submit"
+								>
 									確認
 								</button>
-							</form>
+							</Form>
 						</div>
 					</div>
 				</dialog>
 			)}
 
-			<div className="flex justify-between items-center mb-4">
-				<p className="text-xl">
-					東{kyoku}局 | 巡目: {junme} | 残りツモ: {remainTsumo}
-				</p>
-				<p className="text-xl">
-					スコア: {score} | シャンテン:{" "}
-					{shantenResult.shanten === -1 ? "和了" : shantenResult.shanten}
-				</p>
-			</div>
-
-			{/* Sutehai grid (3x6) */}
-			<div className="mb-6">
-				<h3 className="text-lg mb-2">捨て牌</h3>
-				<div className="grid grid-cols-6 gap-0 w-max min-h-48">
-					{indexedSutehai.map((hai) => (
-						<img
-							key={hai.index}
-							src={`/hai/${hai.kind}_${hai.value}.png`}
-							alt={`${hai.kind} ${hai.value}`}
-							className="w-12 h-16"
-						/>
-					))}
+			<div className="max-w-6xl mx-auto">
+				<div className="mb-4 md:mb-6">
+					<h1 className="text-2xl md:text-3xl font-bold text-yellow-400">対局中</h1>
+				</div>
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 mb-4 md:mb-6 text-sm md:text-xl bg-[#0F2918] rounded-lg p-3 md:p-4 border border-[#1A472A]">
+					<p>
+						東{kyoku}局 | 巡目: {junme} | 残りツモ: {remainTsumo}
+					</p>
+					<p className="md:text-right">
+						スコア: {score} | シャンテン:{" "}
+						{shantenResult.shanten === -1 ? "和了" : shantenResult.shanten}
+					</p>
 				</div>
-			</div>
 
-			{/* Tehai and Tsumohai */}
-			<div className="flex items-center gap-4">
-				<div>
-					<h3 className="text-lg mb-2">手牌</h3>
-					<div className="flex gap-0">
-						{indexedTehai.map((hai) => (
-							<form key={hai.index} method="post" action="/api/tedashi">
-								<input type="hidden" name="index" value={hai.index} />
-								<button type="submit">
-									<img
-										src={`/hai/${hai.kind}_${hai.value}.png`}
-										alt={`${hai.kind} ${hai.value}`}
-										className="w-12 h-16 cursor-pointer hover:scale-105 transition-transform"
-									/>
-								</button>
-							</form>
-						))}
+				<div className="mb-6">
+					<h3 className="text-base md:text-lg mb-2 text-yellow-300">捨て牌</h3>
+					<div className="overflow-x-auto pb-2">
+						<div className="grid grid-cols-6 gap-0 w-max min-h-40 md:min-h-48 bg-[#0F2918] rounded-md p-2 border border-[#1A472A]">
+							{indexedSutehai.map((hai) => (
+								<img
+									key={hai.index}
+									src={`/hai/${hai.kind}_${hai.value}.png`}
+									alt={`${hai.kind} ${hai.value}`}
+									className="w-10 h-14 md:w-12 md:h-16"
+								/>
+							))}
+						</div>
 					</div>
 				</div>
 
-				{tsumohai && (
+				<div className="flex flex-col md:flex-row md:items-end gap-4 md:gap-6">
 					<div>
-						<h3 className="text-lg mb-2">ツモ牌</h3>
-						<form method="post" action="/api/tsumogiri">
-							<button type="submit">
-								<img
-									src={`/hai/${tsumohai.kind}_${tsumohai.value}.png`}
-									alt={`${tsumohai.kind} ${tsumohai.value}`}
-									className="w-12 h-16 object-contain cursor-pointer hover:scale-105 transition-transform"
-								/>
-							</button>
-						</form>
+						<h3 className="text-base md:text-lg mb-2 text-yellow-300">手牌</h3>
+						<div className="overflow-x-auto pb-2">
+							<div className="flex gap-0 bg-[#0F2918] rounded-md p-2 border border-[#1A472A] w-max">
+								{indexedTehai.map((hai) => (
+									<Form key={hai.index} method="post" action="/api/tedashi">
+										<input type="hidden" name="index" value={hai.index} />
+										<button
+											type="submit"
+											aria-label={`手牌 ${hai.kind} ${hai.value} を切る`}
+										>
+											<img
+												src={`/hai/${hai.kind}_${hai.value}.png`}
+												alt={`${hai.kind} ${hai.value}`}
+												className="w-10 h-14 md:w-12 md:h-16 cursor-pointer hover:scale-105 transition-transform"
+											/>
+										</button>
+									</Form>
+								))}
+							</div>
+						</div>
 					</div>
-				)}
+
+					{tsumohai && (
+						<div>
+							<h3 className="text-base md:text-lg mb-2 text-yellow-300">
+								ツモ牌
+							</h3>
+							<Form method="post" action="/api/tsumogiri">
+								<button type="submit" aria-label="ツモ牌を切る">
+									<img
+										src={`/hai/${tsumohai.kind}_${tsumohai.value}.png`}
+										alt={`${tsumohai.kind} ${tsumohai.value}`}
+										className="w-10 h-14 md:w-12 md:h-16 object-contain cursor-pointer hover:scale-105 transition-transform"
+									/>
+								</button>
+							</Form>
+						</div>
+					)}
+				</div>
 			</div>
 		</div>
 	);

From b8b63bd30374b57b3ff01c785ace5654ca41161b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:47:36 +0000
Subject: [PATCH 3/5] fix: refine play tile action labels for accessibility

Agent-Logs-Url: https://github.com/ut-code/hitori-mahjong/sessions/524100d1-262c-4708-a498-c01c3cd15cd9

Co-authored-by: tknkaa <145080781+tknkaa@users.noreply.github.com>
---
 app/routes/play.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/routes/play.tsx b/app/routes/play.tsx
index 09f1f56..2a755c7 100644
--- a/app/routes/play.tsx
+++ b/app/routes/play.tsx
@@ -178,7 +178,7 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 										<input type="hidden" name="index" value={hai.index} />
 										<button
 											type="submit"
-											aria-label={`手牌 ${hai.kind} ${hai.value} を切る`}
+											aria-label={`捨てる ${hai.kind} ${hai.value}`}
 										>
 											<img
 												src={`/hai/${hai.kind}_${hai.value}.png`}
@@ -198,7 +198,10 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 								ツモ牌
 							</h3>
 							<Form method="post" action="/api/tsumogiri">
-								<button type="submit" aria-label="ツモ牌を切る">
+								<button
+									type="submit"
+									aria-label={`ツモ切り ${tsumohai.kind} ${tsumohai.value}`}
+								>
 									<img
 										src={`/hai/${tsumohai.kind}_${tsumohai.value}.png`}
 										alt={`${tsumohai.kind} ${tsumohai.value}`}

From 0ab3a59871e5d66d8bdfe3d1a7805f266015bb30 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Apr 2026 00:45:37 +0000
Subject: [PATCH 4/5] fix: compact play layout and split mobile hand rows

Agent-Logs-Url: https://github.com/ut-code/hitori-mahjong/sessions/759a3c00-1f4d-44bb-b1ea-d389cad1c20e

Co-authored-by: tknkaa <145080781+tknkaa@users.noreply.github.com>
---
 app/routes/play.tsx | 152 ++++++++++++++++++++++++++------------------
 1 file changed, 91 insertions(+), 61 deletions(-)

diff --git a/app/routes/play.tsx b/app/routes/play.tsx
index 2a755c7..d11d741 100644
--- a/app/routes/play.tsx
+++ b/app/routes/play.tsx
@@ -93,16 +93,15 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 		...hai,
 		index,
 	}));
+	const firstRowTehai = indexedTehai.slice(0, 7);
+	const secondRowTehai = indexedTehai.slice(7);
 
 	return (
-		<div className="min-h-screen bg-[#1A472A] p-4 md:p-8 font-serif text-white">
+		<div className="min-h-screen bg-[#1A472A] p-3 md:p-4 font-serif text-white">
 			{isAgari && (
 				<dialog id="agari_modal" className="modal" open>
 					<div className="modal-box bg-[#0F2918] border border-yellow-700 text-white">
-						<h3 className="font-bold text-2xl text-yellow-400">ツモ！</h3>
-						<p className="mt-2 text-sm text-gray-200">
-							お見事です。和了を確定しますか？
-						</p>
+						<h3 className="font-bold text-2xl text-yellow-400">和了</h3>
 						<div className="modal-action">
 							<Form method="post" action="/api/agari">
 								<input type="hidden" value={junme} name="junme" />
@@ -121,9 +120,6 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 				<dialog id="ryukyoku_modal" className="modal" open>
 					<div className="modal-box bg-[#0F2918] border border-yellow-700 text-white">
 						<h3 className="font-bold text-2xl text-yellow-400">流局</h3>
-						<p className="mt-2 text-sm text-gray-200">
-							この局は終了です。結果を確定しますか？
-						</p>
 						<div className="modal-action">
 							<Form method="post" action="/api/ryukyoku">
 								<button
@@ -139,10 +135,10 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 			)}
 
 			<div className="max-w-6xl mx-auto">
-				<div className="mb-4 md:mb-6">
-					<h1 className="text-2xl md:text-3xl font-bold text-yellow-400">対局中</h1>
+				<div className="mb-2 md:mb-3">
+					<h1 className="text-xl md:text-2xl font-bold text-yellow-400">対局中</h1>
 				</div>
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4 mb-4 md:mb-6 text-sm md:text-xl bg-[#0F2918] rounded-lg p-3 md:p-4 border border-[#1A472A]">
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-1 md:gap-2 mb-2 md:mb-3 text-sm md:text-base bg-[#0F2918] rounded-lg p-2 md:p-3 border border-[#1A472A]">
 					<p>
 						東{kyoku}局 | 巡目: {junme} | 残りツモ: {remainTsumo}
 					</p>
@@ -152,65 +148,99 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 					</p>
 				</div>
 
-				<div className="mb-6">
-					<h3 className="text-base md:text-lg mb-2 text-yellow-300">捨て牌</h3>
-					<div className="overflow-x-auto pb-2">
-						<div className="grid grid-cols-6 gap-0 w-max min-h-40 md:min-h-48 bg-[#0F2918] rounded-md p-2 border border-[#1A472A]">
-							{indexedSutehai.map((hai) => (
-								<img
-									key={hai.index}
-									src={`/hai/${hai.kind}_${hai.value}.png`}
-									alt={`${hai.kind} ${hai.value}`}
-									className="w-10 h-14 md:w-12 md:h-16"
-								/>
-							))}
-						</div>
+				<div className="mb-3">
+					<h3 className="text-sm md:text-base mb-1 text-yellow-300">捨て牌</h3>
+					<div className="grid grid-cols-6 gap-0 min-h-28 md:min-h-32 bg-[#0F2918] rounded-md p-1 md:p-2 border border-[#1A472A] w-fit">
+						{indexedSutehai.map((hai) => (
+							<img
+								key={hai.index}
+								src={`/hai/${hai.kind}_${hai.value}.png`}
+								alt={`${hai.kind} ${hai.value}`}
+								className="w-8 h-11 md:w-10 md:h-14"
+							/>
+						))}
 					</div>
 				</div>
 
-				<div className="flex flex-col md:flex-row md:items-end gap-4 md:gap-6">
-					<div>
-						<h3 className="text-base md:text-lg mb-2 text-yellow-300">手牌</h3>
-						<div className="overflow-x-auto pb-2">
-							<div className="flex gap-0 bg-[#0F2918] rounded-md p-2 border border-[#1A472A] w-max">
-								{indexedTehai.map((hai) => (
-									<Form key={hai.index} method="post" action="/api/tedashi">
-										<input type="hidden" name="index" value={hai.index} />
-										<button
-											type="submit"
-											aria-label={`捨てる ${hai.kind} ${hai.value}`}
-										>
-											<img
-												src={`/hai/${hai.kind}_${hai.value}.png`}
-												alt={`${hai.kind} ${hai.value}`}
-												className="w-10 h-14 md:w-12 md:h-16 cursor-pointer hover:scale-105 transition-transform"
-											/>
-										</button>
-									</Form>
-								))}
-							</div>
-						</div>
-					</div>
+				<div>
+					<h3 className="text-sm md:text-base mb-1 text-yellow-300">手牌</h3>
 
-					{tsumohai && (
-						<div>
-							<h3 className="text-base md:text-lg mb-2 text-yellow-300">
-								ツモ牌
-							</h3>
-							<Form method="post" action="/api/tsumogiri">
-								<button
-									type="submit"
-									aria-label={`ツモ切り ${tsumohai.kind} ${tsumohai.value}`}
-								>
+					<div className="hidden md:flex items-end gap-2 bg-[#0F2918] rounded-md p-2 border border-[#1A472A] w-fit">
+						{indexedTehai.map((hai) => (
+							<Form key={hai.index} method="post" action="/api/tedashi">
+								<input type="hidden" name="index" value={hai.index} />
+								<button type="submit" aria-label={`捨てる ${hai.kind} ${hai.value}`}>
 									<img
-										src={`/hai/${tsumohai.kind}_${tsumohai.value}.png`}
-										alt={`${tsumohai.kind} ${tsumohai.value}`}
-										className="w-10 h-14 md:w-12 md:h-16 object-contain cursor-pointer hover:scale-105 transition-transform"
+										src={`/hai/${hai.kind}_${hai.value}.png`}
+										alt={`${hai.kind} ${hai.value}`}
+										className="w-10 h-14 cursor-pointer hover:scale-105 transition-transform"
 									/>
 								</button>
 							</Form>
+						))}
+						{tsumohai && (
+							<div className="ml-1">
+								<Form method="post" action="/api/tsumogiri">
+									<button
+										type="submit"
+										aria-label={`ツモ切り ${tsumohai.kind} ${tsumohai.value}`}
+									>
+										<img
+											src={`/hai/${tsumohai.kind}_${tsumohai.value}.png`}
+											alt={`${tsumohai.kind} ${tsumohai.value}`}
+											className="w-10 h-14 object-contain cursor-pointer hover:scale-105 transition-transform"
+										/>
+									</button>
+								</Form>
+							</div>
+						)}
+					</div>
+
+					<div className="md:hidden bg-[#0F2918] rounded-md p-2 border border-[#1A472A] w-fit">
+						<div className="grid grid-cols-7 gap-0">
+							{firstRowTehai.map((hai) => (
+								<Form key={hai.index} method="post" action="/api/tedashi">
+									<input type="hidden" name="index" value={hai.index} />
+									<button type="submit" aria-label={`捨てる ${hai.kind} ${hai.value}`}>
+										<img
+											src={`/hai/${hai.kind}_${hai.value}.png`}
+											alt={`${hai.kind} ${hai.value}`}
+											className="w-8 h-11 cursor-pointer hover:scale-105 transition-transform"
+										/>
+									</button>
+								</Form>
+							))}
 						</div>
-					)}
+
+						<div className="grid grid-cols-7 gap-0 mt-1">
+							{secondRowTehai.map((hai) => (
+								<Form key={hai.index} method="post" action="/api/tedashi">
+									<input type="hidden" name="index" value={hai.index} />
+									<button type="submit" aria-label={`捨てる ${hai.kind} ${hai.value}`}>
+										<img
+											src={`/hai/${hai.kind}_${hai.value}.png`}
+											alt={`${hai.kind} ${hai.value}`}
+											className="w-8 h-11 cursor-pointer hover:scale-105 transition-transform"
+										/>
+									</button>
+								</Form>
+							))}
+							{tsumohai && (
+								<Form method="post" action="/api/tsumogiri">
+									<button
+										type="submit"
+										aria-label={`ツモ切り ${tsumohai.kind} ${tsumohai.value}`}
+									>
+										<img
+											src={`/hai/${tsumohai.kind}_${tsumohai.value}.png`}
+											alt={`${tsumohai.kind} ${tsumohai.value}`}
+											className="w-8 h-11 object-contain cursor-pointer hover:scale-105 transition-transform"
+										/>
+									</button>
+								</Form>
+							)}
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>

From f584bc9be40d5d165d0c8b70d9ef7b0d28a8dd63 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 14 Apr 2026 00:52:08 +0000
Subject: [PATCH 5/5] fix: remove desktop gap between non-tsumo hand tiles

Agent-Logs-Url: https://github.com/ut-code/hitori-mahjong/sessions/ecb176d7-ab6e-4a6c-ac50-8fb4a8daf9ba

Co-authored-by: tknkaa <145080781+tknkaa@users.noreply.github.com>
---
 app/routes/play.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/play.tsx b/app/routes/play.tsx
index d11d741..b3a664c 100644
--- a/app/routes/play.tsx
+++ b/app/routes/play.tsx
@@ -165,7 +165,7 @@ export default function Page({ loaderData }: Route.ComponentProps) {
 				<div>
 					<h3 className="text-sm md:text-base mb-1 text-yellow-300">手牌</h3>
 
-					<div className="hidden md:flex items-end gap-2 bg-[#0F2918] rounded-md p-2 border border-[#1A472A] w-fit">
+					<div className="hidden md:flex items-end gap-0 bg-[#0F2918] rounded-md p-2 border border-[#1A472A] w-fit">
 						{indexedTehai.map((hai) => (
 							<Form key={hai.index} method="post" action="/api/tedashi">
 								<input type="hidden" name="index" value={hai.index} />