Rebuild bet sizing as a bottom sheet with situation-aware presets
Bet/Raise now opens a sheet whose presets follow the spot: open sizes in BB (adjusted for limpers), 3bet/4bet multiples, postflop pot fractions and raise multiples. Adds -/+ steppers with hold-to-repeat, Min/All-in at the slider ends, and a square-curve slider so small sizes stay precise with deep stacks. The hand view now exposes the street's raise count so the client can tell a 3bet from a 4bet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
agomizi1cmandClaude Opus 5.5 committed
1 parent
ed5617a47a
commit
b6ce648b5a
4 files changed
+412
-77
No files matched your search
+184
-30
@@ -2342,52 +2342,74 @@ body.page-table {
|
||||
color: var(--label-3);
|
||||
}
|
||||
|
||||
/* レイズ額: レイズボタンから上に開き、閉じるときはボタンへ戻る */
|
||||
.raise-panel {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: calc(100% + 10px);
|
||||
z-index: 6;
|
||||
max-width: 496px;
|
||||
margin: 0 auto;
|
||||
padding: 14px 16px 14px;
|
||||
border-radius: 24px;
|
||||
/* ベット/レイズ額のシート: テーブル（ポット・相手のベット）が見えるよう背景は薄く暗くするだけ */
|
||||
.bet-backdrop::before {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
.bet-sheet {
|
||||
max-width: 520px;
|
||||
background: var(--material-thick);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
box-shadow: var(--shadow-l), inset 0 0 0 0.5px var(--material-edge);
|
||||
transform-origin: 82% 100%;
|
||||
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2), inset 0 0.5px 0 var(--material-edge);
|
||||
}
|
||||
.raise-head {
|
||||
.bet-sheet::after {
|
||||
background: var(--material-thick);
|
||||
}
|
||||
.bet-header {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.bet-heading {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.bet-context {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--label-2);
|
||||
font-size: 0.8125rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bet-body {
|
||||
padding: 4px 20px 2px;
|
||||
}
|
||||
.bet-amount-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.raise-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
min-width: 0;
|
||||
font-family: var(--font-num);
|
||||
cursor: text;
|
||||
}
|
||||
.raise-value .cur {
|
||||
color: var(--label-2);
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.raise-amount {
|
||||
width: 8ch;
|
||||
width: 7.5ch;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--label);
|
||||
font-family: var(--font-num);
|
||||
font-size: 2.125rem;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.022em;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.025em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
@@ -2401,17 +2423,131 @@ body.page-table {
|
||||
box-shadow: inset 0 -2px 0 var(--orange);
|
||||
}
|
||||
.raise-meta {
|
||||
display: grid;
|
||||
flex: none;
|
||||
justify-items: end;
|
||||
gap: 1px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.raise-meta b {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.raise-meta span {
|
||||
color: var(--label-2);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.raise-meta span:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 場面ごとの候補（3bet の 3x・ベットの 50% など）。上に倍率、下にその額 */
|
||||
.bet-presets {
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: column;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.chip-btn {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
min-height: 54px;
|
||||
padding: 6px 2px;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: var(--fill-2);
|
||||
color: var(--label);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease, transform 0.45s var(--ease-spring);
|
||||
}
|
||||
.chip-btn b {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.chip-btn span {
|
||||
overflow: hidden;
|
||||
color: var(--label-2);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.chip-btn:active:not(:disabled) {
|
||||
transform: scale(0.93);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
.chip-btn.active {
|
||||
background: var(--orange);
|
||||
color: var(--on-orange);
|
||||
}
|
||||
.chip-btn.active span {
|
||||
color: var(--on-orange);
|
||||
opacity: 0.72;
|
||||
}
|
||||
.chip-btn:disabled {
|
||||
color: var(--label-3);
|
||||
cursor: default;
|
||||
}
|
||||
.chip-btn:disabled span {
|
||||
color: var(--label-3);
|
||||
}
|
||||
|
||||
/* −/+ とスライダー */
|
||||
.bet-adjust {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.step-btn {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--fill-2);
|
||||
color: var(--label);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
transition: transform 0.45s var(--ease-spring), opacity 0.2s ease;
|
||||
}
|
||||
.step-btn .i {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke-width: 2.6;
|
||||
}
|
||||
.step-btn:active:not(:disabled) {
|
||||
transform: scale(0.88);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
.step-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
/* 自前のスライダー: つかんだ位置のまま指に付いてくる。端を越えるとゴムのように抵抗する */
|
||||
.bet-slider {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 44px;
|
||||
margin: 4px 0 8px;
|
||||
outline: none;
|
||||
touch-action: none;
|
||||
cursor: pointer;
|
||||
@@ -2460,33 +2596,51 @@ body.page-table {
|
||||
.bet-slider:focus-visible .bet-thumb::before {
|
||||
box-shadow: 0 0 0 3px var(--blue), 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.presets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 6px;
|
||||
|
||||
/* スライダーの両端: 最小とオールイン */
|
||||
.bet-ends {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.chip-btn {
|
||||
.end-btn {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
min-height: 34px;
|
||||
padding: 4px 0;
|
||||
min-height: 30px;
|
||||
padding: 4px 12px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--fill-2);
|
||||
color: var(--label);
|
||||
background: transparent;
|
||||
color: var(--label-2);
|
||||
font: inherit;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease, transform 0.45s var(--ease-spring);
|
||||
}
|
||||
.chip-btn:active {
|
||||
.end-btn span {
|
||||
color: var(--label);
|
||||
}
|
||||
.end-btn:active {
|
||||
transform: scale(0.93);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
.chip-btn.active {
|
||||
.end-btn.active {
|
||||
background: var(--fill-2);
|
||||
color: var(--label);
|
||||
}
|
||||
.end-btn.allin.active {
|
||||
background: var(--orange);
|
||||
color: var(--on-orange);
|
||||
}
|
||||
.end-btn.allin.active span {
|
||||
color: inherit;
|
||||
}
|
||||
.bet-sheet .sheet-footer .btn {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ショーダウンの勝者選択（キャッシュオンリー） */
|
||||
.award-panel {
|
||||
|
||||
Reference in new issue
Block a user