sganggs
51e0e60b6e
Counting rule (ui/stats.js countsTowardStats, the owner's decision of 2026-10-08: do not count the matches entered and left right away, but keep them in the history): a settled match (m.result arrived) always counts; a match given up (放弃模拟) counts once at least one of the player's battles had finished — a round cleared (the server's own rule, platform.js _quit: leaving while round k runs has passed k - 1, in its settlement k) or already eliminated. Anything earlier is history only: marked 中途退出 and 不计入统计, dimmed, listed in 对局记录, left out of every aggregate (games, wins, win rate, strategy table, titles, rounds, time, combat totals); 总览 says how many were left out. - A leaver gets no m.result, so the page records the match itself: quitMatch (放弃模拟) → recordQuit builds an `end: 'quit'` record from the app state and a tracker (observeMatch, installed in main.js) that remembers when the page first saw the match and the last round the player was seen alive in. No record for a spectator seat, a match with its settlement already there, a match the page never saw; matches the server ended and closed tabs are not recorded. Defects of PR #323 as submitted, reproduced (scratchpad/w7-stats-notes/repro-pr-bugs.mjs, loads-check*.mjs) and fixed: - the title screen loaded all 16 game data files (5.3 MB) at boot: <StatsHost/> called useGameData() at mount; now the host renders nothing until opened, the overview reads config / bands / assets and the settlement re-view loads the rest when opened (the title screen loads the same 3 files as before); - importing a file put the list oldest first (the page shows the first 20 as the newest and the cap would drop the newest); the list is newest first everywhere, also when loaded from storage; - recordResult wrote over the envelope of a NEWER build (a downgrade, against the PR's own rule); it refuses now, as saveStats does; - 1000 four-player records are ~7.2 M characters (the PR's ~1.5 kB/record is a solo match) against a ~2.5 M-character quota: MAX_RECORDS 1000 stays, plus a 800 000-character budget (the oldest go first), and only the newest 30 records keep their rows (lineup, bonds, teammates' names; the replay needs them) — older ones are compacted to the player's own summary row (~620 characters), a refused write retries with half the history; unknown fields and oversized values are dropped (a strict schema), import files are bounded (8 MB); - the re-view clobbered the app store (match.public / match.result, the route, the music); ResultScreen is split into ResultScreen (the store) and ResultView (props: result, myId, back label), so the stats page renders a stored match itself; a 自选 pick and a 补位 stand-in were dropped from the stored lineup (the replayed card drew the plain operator); DIFFICULTY_NAMES were not translated; a band cell was a display:flex <td>; the overlay stayed open when a co-op match started; the 清空 two-step blink was replaced by the shared confirm dialog. - Corrupt storage: unreadable data is moved to sp.pref.stats.damaged and the page says so; damaged rows are dropped and counted; duplicates, an oversized or unsorted list are repaired on load; a pre-`end` (PR-era) envelope reads as settled. UI: a full-screen overlay in the grammar of 干员调配 (top bar with 返回 / four tabs 总览 · 策略 · 战斗累计 · 对局记录 / 导出 导入 清空, a note line saying the data stays in this browser and that teammates' names are stored too), text sizes with max(.xxrem, N px) for phones in landscape, a 50-row history page with 显示更多, a pass-rate bar, a per-difficulty table in order; the entries use a new `chart` icon (not the ping bars), the title screen's sits beside the language menu (the connection row has no room: it squeezed the gear and wrapped the status text), the lobby / room buttons show the icon alone below 700 px (the room's title ran under the label at 640 px). docs/PLAYING.md §12, README row; 41 + 25 UI strings in en / ja / ko / zh-TW (the PR's four unused ones removed). Tests: test/ui/stats.test.js 44 / 44 (counting rule per phase, quit records, bounds, corrupt / old / newer storage, import order, aggregation, the replay payload); test/ui/stats.e2e.test.js (opt-in SP_E2E=1, real server, headless Chrome: seeded history on 1920×1080 and 844×390, the re-view, export / import / clear, corrupt and newer storage, and the real flows: a solo match given up in the briefing is history only, one given up after round 1 counts, a settled match is recorded once and not again after a reload) 6 / 6; lint 0 errors, i18n extract 0 / check --all --strict clean, check:imports, typecheck, docs and version tests, golden unchanged.
194 lines
13 KiB
CSS
194 lines
13 KiB
CSS
/* ==========================================================================================
|
||
screens/stats.css — 统计数据 (js/screens/stats.js): the local match record as a full-screen overlay in the grammar of
|
||
干员调配 (screens/loadout.css) — a top bar with the back button, four tabs (总览 / 策略 / 战斗累计 / 对局记录) and
|
||
导出 / 导入 / 清空, a note line, a scrolling body of number cards, tables, the six 评语 and the history list; a stored
|
||
match re-viewed as its settlement fills the overlay (.st--replay).
|
||
Sizes are design px ÷ 100 (theme.css root scale); text that must stay readable on phones uses max(.xxrem, N px)
|
||
(the root scale is clamped at 40 px there, so a bare .15rem would be 6 px). Ported from PR #323 by @2321Robin.
|
||
========================================================================================== */
|
||
|
||
.st {
|
||
position: fixed; inset: 0; z-index: 55; /* like .lo: above every screen (1) and the in-match banners (40), below the connection
|
||
banner (60), modals / confirm dialogs (80), toasts and tooltips */
|
||
display: flex; flex-direction: column;
|
||
padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
|
||
background: var(--bg-0);
|
||
color: var(--text-hi);
|
||
outline: none;
|
||
animation: st-in 200ms var(--ease-out) backwards;
|
||
overscroll-behavior: contain;
|
||
}
|
||
@keyframes st-in { from { opacity: 0; } }
|
||
.st__bg {
|
||
position: absolute; inset: 0; pointer-events: none;
|
||
background:
|
||
radial-gradient(70% 90% at 18% 10%, rgba(78, 216, 175, .07), transparent 60%),
|
||
radial-gradient(60% 70% at 100% 100%, rgba(246, 163, 41, .05), transparent 60%),
|
||
linear-gradient(rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
|
||
linear-gradient(90deg, rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / .6rem .6rem,
|
||
linear-gradient(180deg, #0f1312, #090b0a);
|
||
}
|
||
.st-top, .st-note, .st-body { position: relative; }
|
||
/* the app screens behind the overlay do not need to animate */
|
||
.sp-stats-open .app-root > .screen { visibility: hidden; }
|
||
/* a stored match re-viewed as its settlement (the result screen fills the overlay) */
|
||
.st--replay { background: var(--bg-0); }
|
||
|
||
/* ---- top bar ----------------------------------------------------------------------------------------------------- */
|
||
.st-top {
|
||
flex: none; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: .2rem;
|
||
height: max(1rem, 48px); padding: 0 .36rem;
|
||
background: linear-gradient(180deg, rgba(8, 10, 9, .95), rgba(10, 13, 12, .6));
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.st-top::after {
|
||
content: ''; position: absolute; left: .36rem; right: .36rem; bottom: -1px; height: 1px;
|
||
background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
|
||
}
|
||
.st-top__left { justify-self: start; display: flex; align-items: center; gap: .14rem; }
|
||
.st-top__center { display: flex; flex-direction: column; align-items: center; gap: .02rem; min-width: 0; }
|
||
.st-top__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
|
||
.st-tabs { display: flex; align-items: stretch; gap: .04rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
|
||
.st-tab {
|
||
display: inline-flex; align-items: center; padding: .02rem .16rem; font: inherit; font-size: max(.24rem, 13px); font-weight: 900;
|
||
letter-spacing: .12em; line-height: 1.2; color: var(--text-lo); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
|
||
touch-action: manipulation; white-space: nowrap;
|
||
}
|
||
.st-tab:hover { color: var(--text-hi); }
|
||
.st-tab.is-on { color: var(--text-hi); border-bottom-color: var(--mint-500); }
|
||
|
||
/* the note lines under the bar: where the data lives, what went wrong with the stored value */
|
||
.st-note {
|
||
flex: none; display: flex; align-items: center; gap: .08rem; margin: 0; padding: .07rem .36rem;
|
||
font-size: max(.15rem, 10px); color: var(--text-lo);
|
||
background: linear-gradient(90deg, rgba(78, 216, 175, .08), transparent 70%);
|
||
border-bottom: 1px solid rgba(47, 58, 53, .6);
|
||
}
|
||
.st-note .icon { width: max(.16rem, 11px); height: max(.16rem, 11px); color: var(--mint-500); flex: none; }
|
||
.st-note.is-warn { color: var(--amber); background: linear-gradient(90deg, rgba(246, 163, 41, .12), transparent 70%); }
|
||
.st-note.is-warn .icon { color: var(--amber); }
|
||
|
||
/* ---- body ------------------------------------------------------------------------------------------------------------ */
|
||
.st-body {
|
||
flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
|
||
padding: .2rem .36rem .32rem; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
|
||
}
|
||
.st-body > * { max-width: max(12.4rem, 760px); margin-left: auto; margin-right: auto; }
|
||
.st-loading { flex: 1; display: grid; place-items: center; min-height: 2rem; }
|
||
.st-empty { margin: .6rem auto; text-align: center; font-size: max(.2rem, 13px); color: var(--text-lo); letter-spacing: .06em; }
|
||
|
||
.st-sec__h { display: flex; align-items: baseline; gap: .12rem; margin: 0 0 .1rem; font-size: max(.22rem, 14px); font-weight: 800; letter-spacing: .1em; color: var(--text-hi); }
|
||
.st-sub { margin: .22rem 0 .08rem; font-size: max(.17rem, 12px); font-weight: 700; letter-spacing: .08em; color: var(--text-md); }
|
||
|
||
/* number cards */
|
||
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(1.5rem, 96px), 1fr)); gap: .08rem; }
|
||
.st-card {
|
||
display: flex; flex-direction: column; gap: .02rem; min-width: 0; padding: .08rem .12rem .07rem;
|
||
background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
|
||
}
|
||
.st-card--mint { border-color: var(--mint-800); background: var(--mint-a10); }
|
||
.st-card--gold { border-color: rgba(246, 163, 41, .45); background: rgba(246, 163, 41, .07); }
|
||
.st-card__num { font-size: max(.3rem, 17px); font-weight: 900; line-height: 1.15; color: var(--text-hi); overflow-wrap: anywhere; }
|
||
.st-card--mint .st-card__num { color: var(--mint-400); }
|
||
.st-card--gold .st-card__num { color: var(--amber); }
|
||
.st-card__label { font-size: max(.14rem, 10px); color: var(--text-md); letter-spacing: .06em; }
|
||
.st-split { display: flex; gap: .26rem; margin: .1rem 0 .14rem; font-size: max(.15rem, 11px); color: var(--text-md); }
|
||
.st-split b { margin-left: .06rem; font-size: max(.18rem, 12px); color: var(--text-hi); }
|
||
|
||
/* tables (难度 / 策略 / 对局记录) */
|
||
.st-tablewrap { overflow-x: auto; }
|
||
.st-table { width: 100%; border-collapse: collapse; font-size: max(.17rem, 11px); }
|
||
.st-table th {
|
||
padding: .05rem .1rem; text-align: left; font-size: max(.14rem, 10px); font-weight: 600; letter-spacing: .08em;
|
||
color: var(--text-lo); border-bottom: 1px solid var(--line-2); white-space: nowrap;
|
||
}
|
||
.st-table td { padding: .06rem .1rem; color: var(--text-md); border-bottom: 1px solid var(--line); vertical-align: middle; }
|
||
/* the per-difficulty and per-strategy tables stay narrow enough to read across; the history takes the width */
|
||
.st-table:not(.st-table--history) { max-width: max(9.4rem, 560px); }
|
||
.st-table th.num, .st-table td.num { text-align: right; }
|
||
.st-table tbody tr:hover td { background: rgba(78, 216, 175, .05); }
|
||
.st-table td.st-diff { color: var(--d-color, var(--text-md)); font-weight: 700; white-space: nowrap; }
|
||
.st-band { display: inline-flex; align-items: center; gap: .06rem; color: var(--text-hi); white-space: nowrap; vertical-align: middle; }
|
||
.st-band .bandicon { flex: none; }
|
||
.st-t { font-family: var(--font-num); font-size: max(.15rem, 10px); color: var(--text-lo); white-space: nowrap; }
|
||
.st-rate { white-space: nowrap; }
|
||
.st-rate b { color: var(--text-hi); font-weight: 700; }
|
||
.st-bar { display: inline-block; width: max(.8rem, 48px); height: max(.07rem, 4px); margin-right: .1rem; vertical-align: middle; background: var(--line); }
|
||
.st-bar i { display: block; height: 100%; background: var(--mint-500); }
|
||
|
||
/* 对局记录: result colours, the 不计入统计 chip, clickable rows */
|
||
.st-res { white-space: nowrap; }
|
||
.t-win { color: var(--mint-400); font-weight: 800; }
|
||
.t-lose { color: var(--red-premium); font-weight: 800; }
|
||
.t-quit { color: var(--amber); font-weight: 800; }
|
||
.st-chip {
|
||
display: inline-block; margin-left: .08rem; padding: 0 .06rem; font-style: normal; font-size: max(.12rem, 9px); letter-spacing: .04em;
|
||
color: var(--text-lo); border: 1px solid var(--line-2); white-space: nowrap;
|
||
}
|
||
.st-table tr.is-excluded td { opacity: .6; }
|
||
.st-table tr.is-clickable { cursor: pointer; }
|
||
.st-table tr.is-clickable:hover td, .st-table tr.is-clickable:focus-visible td { background: rgba(78, 216, 175, .1); color: var(--text-hi); }
|
||
.st-table tr.is-clickable:focus-visible { outline: 2px solid var(--mint-400); outline-offset: -2px; }
|
||
.st-go { width: .24rem; color: var(--text-lo); }
|
||
.st-go .icon { width: max(.18rem, 12px); height: max(.18rem, 12px); }
|
||
.st-table tr.is-clickable:hover .st-go { color: var(--mint-400); }
|
||
.st-more { display: flex; justify-content: center; margin: .14rem 0 0; }
|
||
.st-hint { margin: .1rem 0 0; font-size: max(.13rem, 10px); line-height: 1.6; color: var(--text-lo); letter-spacing: .04em; }
|
||
|
||
/* the six 评语 with their counts */
|
||
.st-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(1.9rem, 120px), 1fr)); gap: .08rem; }
|
||
.st-title { display: flex; align-items: center; gap: .08rem; min-width: 0; padding: .06rem .1rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
|
||
.st-title.is-none { opacity: .45; }
|
||
.st-title__icon { width: max(.38rem, 24px); height: max(.38rem, 24px); flex: none; object-fit: contain; }
|
||
.st-title__text { display: flex; flex-direction: column; min-width: 0; }
|
||
.st-title__text span { font-size: max(.15rem, 10px); color: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.st-title__text b { font-size: max(.22rem, 14px); font-weight: 900; color: var(--amber); line-height: 1.1; }
|
||
|
||
/* what counts (the rule of ui/stats.js countsTowardStats) */
|
||
.st-rule { display: flex; flex-wrap: wrap; align-items: center; gap: .06rem; margin: .24rem 0 0; font-size: max(.14rem, 10px); line-height: 1.6; color: var(--text-lo); }
|
||
.st-rule .icon { width: max(.16rem, 11px); height: max(.16rem, 11px); flex: none; color: var(--mint-500); }
|
||
.st-rule b { color: var(--amber); font-weight: 700; }
|
||
|
||
/* 战斗累计 */
|
||
.st-sums { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(2.4rem, 150px), 1fr)); gap: .06rem; }
|
||
.st-sum { display: flex; align-items: baseline; justify-content: space-between; gap: .08rem; padding: .08rem .12rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
|
||
.st-sum span { font-size: max(.15rem, 10px); color: var(--text-md); }
|
||
.st-sum b { font-size: max(.22rem, 14px); font-weight: 800; color: var(--text-hi); }
|
||
|
||
/* the shared Button scales with the root (40 px/rem on phones ⇒ 6–7 px text, 14–20 px tall): the overlay's own controls keep a
|
||
readable size and a tappable height */
|
||
.st .st-back { height: max(.5rem, 32px); padding: 0 max(.2rem, 10px) 0 max(.12rem, 6px); font-size: max(.18rem, 12px); }
|
||
.st .st-top__right .btn, .st .st-more .btn { height: max(.36rem, 28px); padding: 0 max(.16rem, 8px); font-size: max(.15rem, 11px); }
|
||
|
||
/* the entry buttons of the lobby / room top bars: on the narrowest phones (≤ 700 px) the icon alone — the room's top bar has
|
||
no room for another label beside 玩法说明 (its title ran under the label at 640 px); the name stays aria-label / title */
|
||
@media (max-width: 700px) {
|
||
.stats-entry .btn__icon + .btn__label {
|
||
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||
}
|
||
}
|
||
|
||
/* ---- narrow / short viewports ------------------------------------------------------------------------------------------ */
|
||
@media (max-width: 1200px) {
|
||
.st-tab { padding: .02rem .08rem; letter-spacing: .04em; }
|
||
}
|
||
/* phones in landscape (up to 932 px wide): 返回 shows its icon only (the text stays its name) */
|
||
@media (max-width: 1000px) {
|
||
.st-top .btn__icon + .btn__label {
|
||
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||
}
|
||
}
|
||
@media (max-width: 760px) {
|
||
.st-top { padding: 0 .16rem; gap: .1rem; }
|
||
.st-top::after { left: .16rem; right: .16rem; }
|
||
.st-note { padding: .07rem .16rem; }
|
||
.st-body { padding: .12rem .16rem .2rem; }
|
||
}
|
||
@media (max-height: 520px) {
|
||
.st-note { display: none; }
|
||
.st-body { padding-top: .12rem; }
|
||
.st-split { margin: .06rem 0 .08rem; }
|
||
}
|
||
.sp-coarse .st-tab, .sp-coarse .st-table tr.is-clickable td { min-height: 30px; }
|
||
@media (prefers-reduced-motion: reduce) { .st { animation: none; } }
|