horoli/ssessesse-ki-battle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add battle action shortcuts and clarify selection UI

Browse Source
This commit is contained in:
horoli
2026-10-19 11:37:53 +09:00
parent dd914d7181
commit 65c3941e29
4 changed files with 39 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/match.css
+9 -3
View File
@@ -15,7 +15,7 @@ body:is([data-screen=match], [data-screen=result]) main { padding: 0; min-height
#match {
--stage-top: calc(120px + env(safe-area-inset-top));
--stage-bottom: 24px;
--fighter-size: min(32vw, calc((100cqh - 38px) * .866667), 460px);
--fighter-size: min(32vw, calc((100cqh - 62px) * .866667), 460px);
--edge: clamp(20px, 3vw, 56px);
--self-position: 26.63%;
position: relative; isolation: isolate; flex: 1; width: 100%; max-width: none;
@@ -47,6 +47,8 @@ body:is([data-screen=match], [data-screen=result]) main { padding: 0; min-height
}
/* Fighter slots stay fixed so effects and the controls share the same coordinates. */
#match .fighter { position: static; width: 43%; }
#match .fighter-position { margin-bottom: 8px; color: #59665d; font-size: 13px; line-height: 16px; text-align: center; }
#match .fighter.self .fighter-position { color: #242526; font-weight: 700; }
#match .avatar, #match[data-phase=finished] .avatar {
width: var(--fighter-size);
max-width: none; margin: 0; left: 50%; translate: -50% 0;
@@ -101,6 +103,10 @@ body:is([data-screen=match], [data-screen=result]) main { padding: 0; min-height
grid-row: span 2; align-self: center; width: 28px; height: 28px;
}
#match .action-buttons strong { font-size: 13px; white-space: nowrap; }
#match .action-shortcut { display: none; font: 600 10px/1.2 var(--ui-body, sans-serif); border: 1px solid currentColor; padding: 1px 4px; }
@media (orientation: landscape) {
#match .action-shortcut { display: inline-block; }
}
#match .action-buttons small { color: #58604f; font-size: 10px; }
#match .action-buttons button:hover:not(:disabled) { background: #fff9e9; border-color: var(--action-color); transform: translateY(-2px); }
#match .action-buttons button:active:not(:disabled) { transform: translateY(1px); }
@@ -147,7 +153,7 @@ body:is([data-screen=match], [data-screen=result]) #reconnect {
--edge: 16px; --stage-bottom: 16px;
--self-position: 25.09%;
--stage-top: calc(100px + env(safe-area-inset-top));
--fighter-size: min(48vw, calc((100cqh - 38px) * .866667), 288px);
--fighter-size: min(48vw, calc((100cqh - 62px) * .866667), 288px);
}
#match[data-self="1"] { --self-position: 74.91%; }
#match[data-phase=finished] { --stage-top: calc(210px + env(safe-area-inset-top)); }
@@ -187,7 +193,7 @@ body:is([data-screen=match], [data-screen=result]) #reconnect {
--edge: max(16px, env(safe-area-inset-left)); --stage-bottom: 8px;
--stage-top: calc(78px + env(safe-area-inset-top));
--self-position: 28.34%;
--fighter-size: min(26vw, calc((100cqh - 38px) * .866667), 260px);
--fighter-size: min(26vw, calc((100cqh - 62px) * .866667), 260px);
}
#match[data-self="1"] { --self-position: 71.66%; }
#match[data-phase=finished] { --stage-top: calc(96px + env(safe-area-inset-top)); }