プレイ画面UIをトップ画面基調に統一し、PC/スマホで手牌まで1画面に収まるレイアウトへ改善 by Copilot · Pull Request #126 · ut-code/hitori-mahjong

Copilot · 2026-04-13T14:26:44Z

プレイ画面がトップページとデザイン的に分断されており、モバイルでの視認性/操作性と、ツモ・流局時の表示が弱い状態でした。
今回の変更では、既存のルーティング/loader-action構成を維持したまま、見た目と操作体験をプレイ画面内で調整しています。

UIトーン統一（トップページとの整合）
- play.tsx のルートコンテナをトップと同系統の配色・フォント（和風トーン）へ統一
- 情報ヘッダ（局/巡目/残りツモ/スコア/シャンテン）をカード化し、色と余白を整理
- 手牌/捨て牌セクションの見出し・背景・境界線を統一
PCレイアウト調整（スクロール不要化）
- 余白・見出し・文字サイズ・牌サイズを圧縮
- 進行情報・河・手牌が、PC表示時に1画面内へ収まりやすい構成に変更
- 手牌表示でツモ牌以外は隙間なく隣接するように調整（ツモ牌との区切りは維持）
モバイル最適化（固定2段手牌）
- 手牌を 1段目7枚 / 2段目6枚 + ツモ牌 の構成で表示
- 横スクロールなしで手牌を確認・操作できるよう調整
ツモ/流局モーダル表示の調整
- 見出し文言を簡潔化し、「和了」「流局」 のみ表示
操作UIのアクセシビリティ
- 牌操作ボタンに aria-label を追加（手牌切り/ツモ切りを明示）
再レンダリング課題について
- 「牌を切るたびに全体が再描画される」点は、現行の loader/action 主体の設計では構造変更なしに根治が難しいため、今回のスコープでは未変更

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>

tknkaa

PCで開いたときに手牌を見るのにスクロールが必要になってしまうのがあまり嬉しくないので、スクロールしなくても、ゲームの進行状況、河、手牌が画面に収まるようにしてほしい。また、スマホのUIについても手牌を見るのにスクロールが必要なのがあまり嬉しくないので、一段目に7枚、二段目に6枚 + ツモ牌、という感じにしてほしい。

tknkaa · 2026-04-14T00:37:27Z

app/routes/play.tsx

+					<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">
+							お見事です。和了を確定しますか？


単に「和了」でいい

モーダル文言を「和了」のみに修正しました。反映コミット: 0ab3a59。スクリーンショット: https://github.com/user-attachments/assets/e8266e0c-6ac7-4899-a507-47e4d103945e

tknkaa · 2026-04-14T00:37:55Z

app/routes/play.tsx

+					<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">
+							この局は終了です。結果を確定しますか？


単に「流局」でいい

モーダル文言を「流局」のみに修正しました。反映コミット: 0ab3a59。スクリーンショット: https://github.com/user-attachments/assets/e8266e0c-6ac7-4899-a507-47e4d103945e

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>

Copilot · 2026-04-14T00:46:51Z

PCで開いたときに手牌を見るのにスクロールが必要になってしまうのがあまり嬉しくないので、スクロールしなくても、ゲームの進行状況、河、手牌...

対応しました。PCでは進行情報・河・手牌が1画面に収まるよう余白/牌サイズを調整し、スマホでは手牌を1段目7枚・2段目6枚+ツモ牌の2段固定に変更しています。反映コミット: 0ab3a59。スクリーンショット: https://github.com/user-attachments/assets/e8266e0c-6ac7-4899-a507-47e4d103945e / https://github.com/user-attachments/assets/10c243db-0966-4b3d-87f6-25b11f5e831b

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

sparrow.cloudflare.com
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hitori-mahjong/hitori-mahjong/node_modules/wrangler/wrangler-dist/cli.js types (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hitori-mahjong/hitori-mahjong/node_modules/wrangler/wrangler-dist/cli.js d1 migrations apply hitori-mahjong-db --local (dns block)
workers.cloudflare.com
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hitori-mahjong/hitori-mahjong/node_modules/wrangler/wrangler-dist/cli.js types (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hitori-mahjong/hitori-mahjong/node_modules/.bin/react-router dev --host 0.0.0.0 --port 4173 -main/dist/gh-gpgsign/gh-gpgsign-linux-x86_64 (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hitori-mahjong/hitori-mahjong/node_modules/.bin/react-router dev --host 0.0.0.0 --port 4173 cal/bin/git host 0.0.0.0 --port 4173 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

tknkaa

PC版のUIで、ツモ牌以外の牌は隙間なく隣り合うようにしてほしい。

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>

Copilot · 2026-04-14T00:53:07Z

PC版のUIで、ツモ牌以外の牌は隙間なく隣り合うようにしてほしい。

PC版手牌コンテナの gap を 0 に調整し、ツモ牌以外の牌が隙間なく隣り合うように修正しました（ツモ牌との区切り余白は維持）。反映コミット: f584bc9。スクリーンショット: https://github.com/user-attachments/assets/10c243db-0966-4b3d-87f6-25b11f5e831b

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

sparrow.cloudflare.com
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hitori-mahjong/hitori-mahjong/node_modules/wrangler/wrangler-dist/cli.js types (dns block)
workers.cloudflare.com
- Triggering command: /opt/hostedtoolcache/node/24.14.1/x64/bin/node /opt/hostedtoolcache/node/24.14.1/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hitori-mahjong/hitori-mahjong/node_modules/wrangler/wrangler-dist/cli.js types (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Initial plan

dc37362

Copilot AI assigned Copilot and tknkaa Apr 13, 2026

Copilot started work on behalf of tknkaa April 13, 2026 14:26 View session

Copilot AI linked an issue Apr 13, 2026 that may be closed by this pull request

プレイ画面のUIを直す #118

Closed

Copilot AI and others added 2 commits April 13, 2026 14:41

feat: improve play screen visual style and mobile layout

f448523

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>

fix: refine play tile action labels for accessibility

b8b63bd

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>

Copilot AI changed the title ~~[WIP] Update play screen UI for better compatibility~~ プレイ画面UIをトップ画面基調に統一し、モバイル操作性と局結果モーダルの視認性を改善 Apr 13, 2026

Copilot AI requested a review from tknkaa April 13, 2026 14:49

Copilot finished work on behalf of tknkaa April 13, 2026 14:49

tknkaa requested changes Apr 14, 2026

View reviewed changes

Copilot started work on behalf of tknkaa April 14, 2026 00:41 View session

fix: compact play layout and split mobile hand rows

0ab3a59

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>

Copilot AI changed the title ~~プレイ画面UIをトップ画面基調に統一し、モバイル操作性と局結果モーダルの視認性を改善~~ プレイ画面UIをトップ画面基調に統一し、PC/スマホで手牌まで1画面に収まるレイアウトへ改善 Apr 14, 2026

Copilot AI requested a review from tknkaa April 14, 2026 00:48

Copilot finished work on behalf of tknkaa April 14, 2026 00:48

tknkaa requested changes Apr 14, 2026

View reviewed changes

Copilot started work on behalf of tknkaa April 14, 2026 00:50 View session

fix: remove desktop gap between non-tsumo hand tiles

f584bc9

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>

Copilot finished work on behalf of tknkaa April 14, 2026 00:54

Copilot AI requested a review from tknkaa April 14, 2026 00:54

tknkaa marked this pull request as ready for review April 14, 2026 04:05

tknkaa merged commit dde1496 into main Apr 14, 2026

tknkaa deleted the copilot/improve-play-screen-ui branch April 14, 2026 04:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

プレイ画面UIをトップ画面基調に統一し、PC/スマホで手牌まで1画面に収まるレイアウトへ改善#126

プレイ画面UIをトップ画面基調に統一し、PC/スマホで手牌まで1画面に収まるレイアウトへ改善#126
tknkaa merged 5 commits intomainfrom
copilot/improve-play-screen-ui

Copilot AI commented Apr 13, 2026 •

edited

Loading

Uh oh!

tknkaa left a comment

Uh oh!

tknkaa Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

tknkaa Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI commented Apr 14, 2026 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

tknkaa left a comment

Uh oh!

Copilot AI commented Apr 14, 2026 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tknkaa left a comment

Choose a reason for hiding this comment

Uh oh!

tknkaa Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

tknkaa Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

tknkaa left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Apr 13, 2026 •

edited

Loading

Copilot AI commented Apr 14, 2026 •

edited

Loading

Copilot AI commented Apr 14, 2026 •

edited

Loading