Compare commits
2
Commits
b5d84e5f65
...
1e1ac4e91d
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1e1ac4e91d | ||
|
|
e22043f9db |
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
+54
-7
@@ -283,8 +283,26 @@ input.invalid { border-color: var(--red); }
|
||||
.schedule span b { color: var(--gold); font-weight: 700; }
|
||||
|
||||
/* ---------- プレイ画面 ---------- */
|
||||
.table-page { display: flex; flex-direction: column; min-height: 100dvh; }
|
||||
.table-page .wrap { padding-top: 16px; padding-bottom: 0; flex: 1; display: flex; flex-direction: column; width: 100%; }
|
||||
/* プレイ画面はスクロールさせない。
|
||||
iOS Safari は body の overflow: hidden だけではスクロール・バウンスが止まらないため、
|
||||
body を position: fixed で画面に固定し、全体を画面の高さに収める(1本指の touchmove は table.js で止める) */
|
||||
html:has(body.table-page) { overflow: hidden; overscroll-behavior: none; }
|
||||
body.table-page {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
touch-action: manipulation; /* ダブルタップでの拡大を防ぐ(ピンチ拡大は残す) */
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
.table-page input { -webkit-user-select: text; user-select: text; }
|
||||
.table-page .wrap { padding-top: 12px; padding-bottom: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
|
||||
|
||||
.table-header { display: flex; align-items: center; gap: 12px; }
|
||||
.table-header h1 {
|
||||
@@ -319,8 +337,8 @@ input.invalid { border-color: var(--red); }
|
||||
.felt-area {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 340px;
|
||||
margin: 20px 0 24px;
|
||||
min-height: 0;
|
||||
margin: 46px 0 40px; /* 上下の席が楕円の外にはみ出す分 */
|
||||
}
|
||||
.felt {
|
||||
position: absolute;
|
||||
@@ -438,9 +456,12 @@ input.invalid { border-color: var(--red); }
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
flex: none;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
max-height: 62%;
|
||||
overflow-y: auto; /* サイドポットが多いときだけ中でスクロール */
|
||||
overscroll-behavior: contain;
|
||||
background: #161c19;
|
||||
padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
|
||||
}
|
||||
@@ -586,7 +607,6 @@ input.invalid { border-color: var(--red); }
|
||||
.pot-tag { font-size: 9px; background: rgba(255, 255, 255, 0.2); padding: 0 4px; border-radius: 4px; margin-right: 4px; }
|
||||
|
||||
/* 7人以上 */
|
||||
.felt-area.crowded { min-height: 420px; }
|
||||
.crowded .seat { width: 80px; }
|
||||
.crowded .avatar { width: 46px; height: 46px; }
|
||||
.crowded .avatar svg { width: 22px; height: 22px; }
|
||||
@@ -618,6 +638,33 @@ input.invalid { border-color: var(--red); }
|
||||
.raise-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--orange); height: 28px; }
|
||||
.raise-row input[type="number"] { width: 100px; flex: none; font-size: 16px; padding: 8px 10px; }
|
||||
|
||||
/* 背の低い画面(iPhone SE など)では詰める */
|
||||
@media (max-height: 700px) {
|
||||
.table-page .wrap { padding-top: 8px; }
|
||||
.table-header .icon-btn { width: 38px; height: 38px; font-size: 16px; }
|
||||
.table-header h1 { font-size: 18px; }
|
||||
.host-controls { margin: 8px 0 6px; }
|
||||
.host-controls .btn { padding: 7px 14px; }
|
||||
.host-spacer { height: 6px; }
|
||||
.level-bar { padding: 8px 14px; }
|
||||
.level-sub { display: none; }
|
||||
.felt-area { margin: 40px 0 34px; }
|
||||
.pot { font-size: 30px; }
|
||||
.avatar { width: 46px; height: 46px; }
|
||||
.avatar svg { width: 22px; height: 22px; }
|
||||
.action-bar { padding-top: 8px; }
|
||||
.my-stack { font-size: 20px; }
|
||||
.me-row { margin-bottom: 2px; }
|
||||
.status-line { margin-bottom: 6px; }
|
||||
.actions .btn { min-height: 46px; padding: 10px 4px; }
|
||||
.crowded .avatar { width: 34px; height: 34px; border-width: 2px; }
|
||||
.crowded .avatar svg { width: 16px; height: 16px; }
|
||||
.crowded .nameplate { margin-top: -6px; padding: 2px 5px; min-width: 64px; }
|
||||
.crowded .nameplate .pname { font-size: 10px; }
|
||||
.crowded .nameplate .pstack { font-size: 11px; }
|
||||
.crowded .chip-marker { width: 20px; height: 20px; font-size: 10px; }
|
||||
}
|
||||
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
/* ---------- ユーティリティ(CSP で style 属性を使わないため) ---------- */
|
||||
|
||||
@@ -504,5 +504,21 @@
|
||||
toast('サイトのリンクをコピーしました');
|
||||
});
|
||||
|
||||
// iOS Safari は CSS だけではページのスクロール・引っ張り(バウンス)を止められないので、
|
||||
// 1本指のドラッグを止める。スライダーと、中身がはみ出している操作エリアは除く。
|
||||
// 2本指(ピンチ拡大)はアクセシビリティのため止めない。
|
||||
document.addEventListener(
|
||||
'touchmove',
|
||||
(e) => {
|
||||
if (e.touches.length !== 1) return;
|
||||
const t = e.target;
|
||||
if (t.closest && t.closest('input[type="range"]')) return;
|
||||
const bar = t.closest && t.closest('.action-bar');
|
||||
if (bar && bar.scrollHeight > bar.clientHeight) return;
|
||||
if (e.cancelable) e.preventDefault();
|
||||
},
|
||||
{ passive: false }
|
||||
);
|
||||
|
||||
ensureName();
|
||||
})();
|
||||
@@ -6,6 +6,7 @@
|
||||
<meta name="theme-color" content="#24493b">
|
||||
<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>
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<meta name="theme-color" content="#24493b">
|
||||
<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>
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<meta name="theme-color" content="#24493b">
|
||||
<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>
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<meta name="theme-color" content="#24493b">
|
||||
<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">
|
||||
|
||||
@@ -67,6 +67,7 @@ const tables = new TableManager();
|
||||
|
||||
// ---------- 認証不要 ----------
|
||||
app.use('/assets', express.static(path.join(PUBLIC, 'assets'), { index: false, dotfiles: 'deny' }));
|
||||
app.get('/favicon.ico', (req, res) => res.sendFile(path.join(PUBLIC, 'assets', 'favicon.ico')));
|
||||
app.get('/robots.txt', (req, res) => res.type('text/plain').send('User-agent: *\nDisallow: /\n'));
|
||||
app.get('/key', (req, res) => {
|
||||
if (auth.isAuthed(req)) return res.redirect(auth.safeNext(req.query.next));
|
||||
|
||||
Reference in new issue
Block a user