agomizi1cm/Poker
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rebuild the UI in an Apple style with spring-driven motion

Browse Source 
Replace the look of every page (key, lobby, create, table, range, review)
with light/dark semantic colors, translucent materials, iOS-style grouped
lists and system typography. Add fluid.js, a small spring engine with
interruptible, velocity-aware animations, and use it for draggable bottom
sheets, sliding segmented controls, a custom bet slider with rubber-banding,
swipe-to-delete in the lobby, and dealt/flipped cards. Seats and cards are
now reused between renders so animations are not cut off. Honors reduced
motion, reduced transparency and increased contrast.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
agomizi1cmandClaude Opus 5.5 committed 2026-10-21 21:44:21 +09:00
1 parent d5ef2d310f
commit c3fbfdd12e
18 files changed
+4877 -1278
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/table.html
+95 -59
View File
@@ -3,28 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#24493b">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#eceef1">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#070c0a">
<meta name="robots" content="noindex, nofollow">
<title>テーブル - Hold'em Night</title>
<link rel="icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="/assets/style.css">
</head>
<body class="table-page">
<div class="conn-lost" id="conn-lost" hidden>接続が切れました。再接続中…</div>
<body class="page-table">
<div class="conn-lost" id="conn-lost" role="status" hidden><span class="spinner" aria-hidden="true"></span>接続が切れました。再接続中…</div>
<main class="wrap" id="main" hidden>
<div class="table-header">
<button class="icon-btn leave" id="leave" aria-label="退席する" title="退席する">⏏</button>
<main class="table-main" id="main" hidden>
<header class="table-bar">
<button class="glass-btn" id="leave" aria-label="退席する" title="退席する">
<svg class="i icon-leave" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h3.5A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5H14"/><path d="M10 8l-4 4 4 4M6 12h9"/></svg>
<svg class="i icon-back" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>
</button>
<h1 id="table-name"></h1>
<!-- ホストだけに表示 -->
<span class="host-controls" id="host-controls" hidden>
<button class="btn btn-green btn-sm" id="start">START</button>
<button class="icon-btn" id="pause" aria-label="一時停止" title="一時停止">⏸</button>
<button class="btn btn-tint btn-sm" id="start">START</button>
<button class="glass-btn" id="pause" aria-label="一時停止" title="一時停止">
<svg class="i i-fill icon-pause" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5" width="4" height="14" rx="1.3"/><rect x="13.5" y="5" width="4" height="14" rx="1.3"/></svg>
<svg class="i i-fill icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.6v12.8a1 1 0 0 0 1.5.86l10.2-6.4a1 1 0 0 0 0-1.72L9.5 4.74A1 1 0 0 0 8 5.6z"/></svg>
</button>
</span>
<!-- レビュー付きCPU戦のみ -->
<button class="icon-btn" id="review-open" aria-label="直前のハンドのレビュー" title="直前のハンドのレビュー" hidden>📝</button>
<button class="icon-btn" id="share" aria-label="サイトのリンクをコピー" title="サイトのリンクをコピー">🔗</button>
</div>
<button class="glass-btn" id="review-open" aria-label="直前のハンドのレビュー" title="直前のハンドのレビュー" hidden>
<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>
</button>
<button class="glass-btn" id="share" aria-label="サイトのリンクをコピー" title="サイトのリンクをコピー">
<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2"/><path d="M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2"/></svg>
</button>
</header>
<div class="level-bar">
<span class="lv" id="level"></span>
@@ -37,52 +48,59 @@
</div>
<div class="felt-area" id="felt-area">
<div class="felt">
<div class="pot-label">POT</div>
<div class="pot" id="pot">$0</div>
<div class="board" id="board" hidden></div>
<div class="phase"><span id="phase">WAITING</span><span class="hand-no" id="hand-no"></span></div>
<div class="result" id="result" hidden></div>
<div class="rail">
<div class="felt">
<div class="pot-label">POT</div>
<div class="pot" id="pot">$0</div>
<div class="board" id="board" hidden></div>
<div class="phase"><span id="phase">WAITING</span><span class="hand-no" id="hand-no"></span></div>
<div class="result" id="result" hidden></div>
</div>
</div>
<div id="seats"></div>
</div>
<div class="spectator-note" id="spectator-note" hidden>
<span id="spectator-text">満席のため観戦中です</span>
<button class="btn btn-orange btn-sm" id="take-seat" hidden>空席に座る</button>
<button class="btn btn-tint btn-sm" id="take-seat" hidden>空席に座る</button>
</div>
</main>
<div class="action-bar" id="action-bar" hidden>
<section class="action-bar" id="action-bar" hidden>
<!-- レイズ額: レイズボタンから上に開く（すりガラスを重ねないよう .inner の外に置く） -->
<div class="raise-panel" id="raise-panel" hidden>
<div class="raise-head">
<div class="raise-value"><span class="cur" aria-hidden="true">$</span><input type="number" class="raise-amount" id="raise-amount" inputmode="numeric" aria-label="レイズ額"></div>
<span class="raise-meta" id="raise-meta"></span>
</div>
<div class="bet-slider" id="raise-range" role="slider" tabindex="0" aria-label="レイズ額">
<div class="bet-track"><div class="bet-fill"></div></div>
<div class="bet-thumb"></div>
</div>
<div class="presets" id="presets">
<button type="button" class="chip-btn" data-preset="min">Min</button>
<button type="button" class="chip-btn" data-preset="half">½ Pot</button>
<button type="button" class="chip-btn" data-preset="threeq">¾ Pot</button>
<button type="button" class="chip-btn" data-preset="pot">Pot</button>
<button type="button" class="chip-btn" data-preset="max">All-in</button>
</div>
</div>
<div class="inner">
<div class="me-row">
<div class="my-cards" id="my-cards" hidden></div>
<div class="me-info">
<div class="my-stack"><span class="wallet">👛</span><span id="my-stack">$0</span></div>
<div class="my-stack" id="my-stack">$0</div>
<div class="me-sub"><span class="my-hand" id="my-hand"></span><span id="my-net"></span><span class="my-bet" id="my-bet"></span></div>
</div>
<button class="btn btn-ghost btn-sm" id="sit-out" title="次のハンドから参加しません">離席</button>
<button class="btn btn-sm" id="sit-out" title="次のハンドから参加しません">離席</button>
</div>
<div class="status-line" id="status-line"></div>
<div class="status-line" id="status-line" aria-live="polite"></div>
<div class="award-panel" id="award-panel" hidden>
<div id="award-pots"></div>
<button class="btn btn-orange btn-block" id="award-confirm" disabled>確定</button>
</div>
<div class="raise-panel" id="raise-panel" hidden>
<div class="presets" id="presets">
<button class="btn btn-dark btn-sm" data-preset="min">Min</button>
<button class="btn btn-dark btn-sm" data-preset="half">½</button>
<button class="btn btn-dark btn-sm" data-preset="threeq">¾</button>
<button class="btn btn-dark btn-sm" data-preset="pot">Pot</button>
<button class="btn btn-dark btn-sm" data-preset="max">All-in</button>
</div>
<div class="raise-row">
<input type="range" id="raise-range" aria-label="レイズ額">
<input type="number" id="raise-amount" inputmode="numeric" aria-label="レイズ額">
</div>
<div class="award-pots" id="award-pots"></div>
<button class="btn btn-tint btn-lg btn-block" id="award-confirm" disabled>確定</button>
</div>
<div class="actions" id="actions">
@@ -91,49 +109,67 @@
<button class="btn act-raise" id="act-raise" disabled>Raise</button>
</div>
<div class="actions raising" id="raise-actions" hidden>
<button class="btn btn-dark" id="raise-cancel">戻る</button>
<button class="btn" id="raise-cancel">戻る</button>
<button class="btn act-raise" id="raise-confirm">Raise</button>
</div>
<div class="actions raising" id="review-actions" hidden>
<button class="btn btn-dark" id="review-show">レビュー</button>
<button class="btn btn-orange" id="review-next">次のハンドへ</button>
<button class="btn" id="review-show">レビュー</button>
<button class="btn btn-tint" id="review-next">次のハンドへ</button>
</div>
<div class="actions single" id="alt-actions" hidden>
<button class="btn btn-orange" id="sit-in">復帰する</button>
<button class="btn btn-tint" id="sit-in">復帰する</button>
<button class="btn btn-blue" id="rebuy">リバイ</button>
</div>
</div>
</div>
</section>
<div class="center-message" id="not-found" hidden>
<div class="badge-icon" aria-hidden="true"><svg class="i" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.5v.01"/></svg></div>
<h2 id="not-found-title">テーブルが見つかりません</h2>
<p id="not-found-text">終了したか、URLが間違っている可能性があります。</p>
<a class="btn btn-blue" href="/">ロビーへ戻る</a>
<a class="btn btn-tint btn-lg" href="/">ロビーへ戻る</a>
</div>
<div class="modal-backdrop" id="review-modal" hidden>
<div class="modal review-modal" role="dialog" aria-labelledby="review-title">
<h2 id="review-title">ハンドのレビュー</h2>
<div id="review-body"></div>
<div class="review-buttons">
<button type="button" class="btn btn-dark" id="review-close">閉じる</button>
<button type="button" class="btn btn-orange" id="review-modal-next">次のハンドへ</button>
<!-- 直前のハンドのレビュー（下から出るシート。つまみを下へ払うと閉じる） -->
<div class="sheet-backdrop" id="review-modal" hidden>
<div class="sheet review-sheet" role="dialog" aria-modal="true" aria-labelledby="review-title" tabindex="-1">
<div class="sheet-header" data-sheet-drag>
<span class="sheet-grabber" aria-hidden="true"></span>
<h2 class="sheet-title" id="review-title">ハンドのレビュー</h2>
</div>
<div class="sheet-scroll">
<div id="review-body"></div>
<button type="button" class="btn btn-block mt-12" id="review-copy">
<svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 3.5l1.6 4.4L16 9.5l-4.4 1.6L10 15.5l-1.6-4.4L4 9.5l4.4-1.6z"/><path d="M18 14l.8 2.2L21 17l-2.2.8L18 20l-.8-2.2L15 17l2.2-.8z"/></svg>AIに質問する用にコピー
</button>
<div class="list mt-12">
<a class="cell cell-link" id="review-link" href="/review" target="_blank" rel="noopener">
<span class="cell-title">対局全体のレビュー<span class="cell-sub">点数表・成績・リプレイ</span></span>
<svg class="i chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</div>
<div class="sheet-footer">
<div class="btn-row">
<button type="button" class="btn btn-lg" id="review-close">閉じる</button>
<button type="button" class="btn btn-tint btn-lg" id="review-modal-next">次のハンドへ</button>
</div>
</div>
<button type="button" class="btn btn-dark review-copy" id="review-copy">🤖 AIに質問する用にコピー</button>
<a class="link-gold review-link" id="review-link" href="/review" target="_blank" rel="noopener">対局全体のレビュー（点数表・成績・リプレイ）→</a>
</div>
</div>
<div class="modal-backdrop" id="name-modal" hidden>
<form class="modal" id="name-form">
<h2>名前を入力</h2>
<p class="hint">テーブルで表示される名前です</p>
<input id="name-input" type="text" maxlength="12" placeholder="例: とらのすけ" class="mt-12" autocomplete="nickname">
<button class="btn btn-orange btn-block mt-12" type="submit">参加する</button>
<!-- 名前の入力（閉じられないシート） -->
<div class="sheet-backdrop" id="name-modal" hidden>
<form class="sheet sheet-form" id="name-form" role="dialog" aria-modal="true" aria-labelledby="name-title" tabindex="-1">
<h2 class="sheet-title" id="name-title">名前を入力</h2>
<p class="hint mt-8">テーブルで表示される名前です</p>
<input id="name-input" class="field mt-12" type="text" maxlength="12" placeholder="例: とらのすけ" autocomplete="nickname" aria-labelledby="name-title">
<button class="btn btn-tint btn-lg btn-block mt-12" type="submit">参加する</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/assets/fluid.js"></script>
<script src="/assets/common.js"></script>
<script src="/assets/table.js"></script>
</body>