fix: improve SCUM map playback filters
This commit is contained in:
npc0-hue
@@ -0,0 +1,48 @@
|
||||
import type { ScumSurfaceResponse, ScumUserTrajectoryResponse } from "../../api/types";
|
||||
import type { PluginBridgeHostContext, PluginPageContract } from "../../contracts/pluginBridge";
|
||||
import type { PluginPageWorkspaceActions } from "../../contracts/pluginPageHost";
|
||||
|
||||
export const scumMapPage: PluginPageContract = {
|
||||
key: "live-map", title: "实时地图", path: "/live-map", bundleKey: "scum-server-plugin", bundleVersion: "1.0.3",
|
||||
bundleIntegritySha256: "sha256:3488b316d909e597024f8f31c7bc96ab8019f643d74a528dc442d3df0dc3d54e"
|
||||
};
|
||||
|
||||
export const scumMapContext: PluginBridgeHostContext = {
|
||||
pluginId: "game.scum", routeKey: "live-map", serverInstanceId: "map-test", permissions: ["server.read"], bridgeActions: [], aiPurposes: [],
|
||||
themeTokens: { colorScheme: "dark", accentColor: "#4ECDC4" },
|
||||
pageQuery: { focus: "mira", from: "2026-09-19T00:00:00Z", to: "2026-09-19T00:10:00Z" }
|
||||
};
|
||||
|
||||
// Deterministic fixture only: no server, Run channel, database or authenticated API is called.
|
||||
export function createScumMapFixture(): { surface: ScumSurfaceResponse; actions: PluginPageWorkspaceActions } {
|
||||
const sample = (steamId: string, displayName: string, minute: number, x: number, y: number, riding = false): ScumUserTrajectoryResponse => ({
|
||||
id: `${steamId}-${minute}`, serverInstanceId: "map-test", scumUserId: `user-${steamId}`, subjectType: "player", subjectId: steamId, steamId, displayName,
|
||||
x, y, z: 0, sampledAt: `2026-09-19T00:0${minute}:00Z`, ...(riding ? { riddenVehicleId: "vehicle-1", gameVehicleId: "car-1" } : {})
|
||||
});
|
||||
const surface: ScumSurfaceResponse = {
|
||||
users: { count: 2, items: [
|
||||
{ id: "user-mira", serverInstanceId: "map-test", steamId: "mira", displayName: "Mira", online: true, x: 0, y: 0, z: 0, riddenVehicleId: "vehicle-1", gameVehicleId: "car-1" },
|
||||
{ id: "user-nova", serverInstanceId: "map-test", steamId: "nova", displayName: "Nova", online: true, x: 1000, y: 1000, z: 0 }
|
||||
] },
|
||||
vehicles: { count: 1, items: [{ id: "vehicle-1", vehicleId: "vehicle-1", gameVehicleId: "car-1", serverInstanceId: "map-test", label: "Laika", className: "BPC_Laika_C", exists: true, functional: true, locked: true, x: 40000, y: 40000, z: 0 }] },
|
||||
userTrajectories: { count: 6, items: [sample("mira", "Mira", 0, 0, 0), sample("mira", "Mira", 4, -250000, -250000, true), sample("mira", "Mira", 8, -550000, -550000, true), sample("nova", "Nova", 0, 1000, 1000), sample("nova", "Nova", 4, 250000, 250000), sample("nova", "Nova", 8, 600000, 600000)] },
|
||||
vehicleTrajectories: { count: 0, items: [] },
|
||||
vehicleLocks: { count: 1, items: [{ id: "lock-1", serverInstanceId: "map-test", scumVehicleId: "vehicle-1", gameVehicleId: "car-1", scumUserId: "user-mira", steamId: "mira", lockedAt: "2026-09-19T00:00:00Z" }] }
|
||||
};
|
||||
const collections: Record<string, Record<string, unknown>[]> = {
|
||||
scum_squads: [{ squadId: "wolves", name: "Wolves" }],
|
||||
scum_squad_members: [{ squadId: "wolves", steamId: "mira" }, { squadId: "wolves", steamId: "nova" }],
|
||||
scum_flags: [{ flagId: "flag-1", name: "Wolves Flag", ownerPlayerId: "mira", ownerSquadId: "wolves", x: -40000, y: 40000, z: 0 }]
|
||||
};
|
||||
const actions: PluginPageWorkspaceActions = {
|
||||
pluginData: {
|
||||
list: async (collection) => ({ items: (collections[collection] ?? []).map((value, index) => ({ key: `${collection}-${index}`, value })) }),
|
||||
put: async () => undefined, delete: async () => undefined, transact: async () => undefined
|
||||
},
|
||||
scum: {
|
||||
surface: async () => surface, users: async () => surface.users, vehicles: async () => surface.vehicles,
|
||||
userTrajectories: async () => surface.userTrajectories, vehicleTrajectories: async () => surface.vehicleTrajectories, vehicleLocks: async () => surface.vehicleLocks
|
||||
}
|
||||
};
|
||||
return { surface, actions };
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SCUM 地图交互验证</title></head><body><div id="root"></div><script type="module" src="./scum-map-preview.tsx"></script></body></html>
|
||||
@@ -0,0 +1,12 @@
|
||||
import * as React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { createScumMapFixture, scumMapContext, scumMapPage } from "./fixtures/scum-map";
|
||||
import { loadPluginPageBundle } from "../utils/pluginPageBundles";
|
||||
import { applyThemePalette } from "../theme/tokens";
|
||||
import "../theme/base.css";
|
||||
|
||||
globalThis.__PLUGIN_PAGE_REACT__ = React;
|
||||
applyThemePalette("mecha-black");
|
||||
const MapPage = await loadPluginPageBundle(scumMapPage);
|
||||
const { actions } = createScumMapFixture();
|
||||
createRoot(document.getElementById("root")!).render(<main style={{ padding: 24 }}><h1>SCUM 地图交互验证</h1><p>固定测试数据，用于检查回放、缩放和详情。</p><MapPage context={scumMapContext} workspaceActions={actions} availability={{ available: true }} /></main>);
|
||||
+23
-12
@@ -460,8 +460,10 @@ to{transform:translate(-50%,-50%) rotate(calc(var(--construct-drift) + 360deg))}
|
||||
.scum-catalog-meta .provider-id{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.icon-command.is-active{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 46%,transparent)}
|
||||
.scum-workbench{padding:12px;overflow:visible}.scum-workbench>.console-record-list{gap:8px}.scum-filter-bar{margin:0;padding:0 0 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 68%,transparent)}.scum-filter-bar .console-field{flex:0 1 210px}.scum-filter-bar .console-field:first-child{flex:1 1 320px}.scum-filter-bar .page-status{margin-left:auto}.scum-layer-toggle{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;min-height:28px;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:var(--control-surface);color:var(--ink-soft);font-size:11px;font-weight:760}.scum-filter-bar .scum-layer-toggle{min-height:26px;padding:0 8px;gap:5px;font-size:11px;white-space:nowrap}.scum-filter-bar .scum-layer-toggle input{flex:0 0 auto;width:14px;height:14px;min-width:0;min-height:0;margin:0;accent-color:var(--accent)}.scum-layer-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:0 0 auto}.scum-map-summary{margin-left:auto;white-space:nowrap}.scum-table-wrap{border-color:color-mix(in srgb,var(--line) 72%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-solid) 84%,transparent),color-mix(in srgb,var(--surface) 66%,transparent));-webkit-backdrop-filter:blur(8px) saturate(.92);backdrop-filter:blur(8px) saturate(.92);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--crystal-rim) 46%,transparent)}.scum-table-wrap::before,.scum-table-wrap::after{content:none}.scum-user-table{min-width:1080px;table-layout:fixed}.scum-user-table caption{caption-side:top;padding:0 0 8px;text-align:left;color:var(--ink-faint);font-size:12px;font-weight:800}.scum-user-table th,.scum-user-table td{height:38px;padding:6px 10px;border-bottom-color:color-mix(in srgb,var(--line) 64%,transparent);white-space:nowrap;font-size:13px;line-height:1.2}.scum-user-table th{background:color-mix(in srgb,var(--accent-soft) 52%,transparent);color:color-mix(in srgb,var(--ink) 70%,var(--accent-deep))}.scum-user-table tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 24%,transparent)}.scum-user-table th:nth-child(1),.scum-user-table td:nth-child(1){width:150px}.scum-user-table th:nth-child(2),.scum-user-table td:nth-child(2){width:170px}.scum-user-table th:nth-child(3),.scum-user-table td:nth-child(3){width:76px}.scum-user-table th:nth-child(4),.scum-user-table td:nth-child(4){width:116px}.scum-user-table th:nth-child(5),.scum-user-table td:nth-child(5){width:108px}.scum-user-table th:nth-child(6),.scum-user-table td:nth-child(6){width:108px}.scum-user-table th:nth-child(7),.scum-user-table td:nth-child(7){width:156px}.scum-user-table th:last-child,.scum-user-table td:last-child{width:76px;text-align:right}.scum-user-table td>*{max-width:100%;overflow:hidden;text-overflow:ellipsis}.scum-user-table td.provider-actions-cell{padding-right:8px;overflow:visible}.scum-user-table td.provider-actions-cell>*{overflow:visible}.scum-mono-cell{font-family:var(--font-mono);font-size:12px}.scum-user-table .icon-command{min-height:28px;padding:0 9px}.inline-action-control{position:relative;display:inline-block}.inline-action-control>summary{list-style:none}.inline-action-control>summary::-webkit-details-marker{display:none}.inline-action-control[open]>summary{border-color:var(--accent);color:var(--ink)}.inline-action-control .inline-action-menu{right:0}
|
||||
.gift-definitions-surface{display:grid;gap:12px;min-width:0}.gift-toolbar{margin:0;padding:0 0 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 68%,transparent)}.gift-toolbar .console-field{flex:0 1 190px}.gift-toolbar .console-field:first-child{flex:1 1 320px}.gift-toolbar .page-status{margin-left:auto}.gift-create-command{width:auto;min-width:112px}.gift-table-wrap{min-width:0}.scum-gift-table{min-width:980px;table-layout:fixed}.scum-gift-table th,.scum-gift-table td{height:54px;padding:9px 10px;border-bottom-color:color-mix(in srgb,var(--line) 64%,transparent);vertical-align:middle;font-size:12.5px}.scum-gift-table th{background:color-mix(in srgb,var(--accent-soft) 52%,transparent);color:color-mix(in srgb,var(--ink) 70%,var(--accent-deep));white-space:nowrap}.scum-gift-table tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 24%,transparent)}.scum-gift-table th:nth-child(1),.scum-gift-table td:nth-child(1){width:170px}.scum-gift-table th:nth-child(2),.scum-gift-table td:nth-child(2){width:122px}.scum-gift-table th:nth-child(3),.scum-gift-table td:nth-child(3){width:290px}.scum-gift-table th:nth-child(4),.scum-gift-table td:nth-child(4){width:120px}.scum-gift-table th:nth-child(5),.scum-gift-table td:nth-child(5){width:86px}.scum-gift-table th:nth-child(6),.scum-gift-table td:nth-child(6){width:148px}.scum-gift-table th:last-child,.scum-gift-table td:last-child{width:142px;text-align:right}.scum-gift-table td>*{max-width:100%;overflow-wrap:anywhere}.scum-gift-table td.provider-actions-cell{padding-right:8px;overflow:visible}.scum-gift-table td.provider-actions-cell>*{overflow:visible}.scum-gift-code{font-family:var(--font-mono);font-size:11px}.scum-gift-content-cell{display:flex;align-items:center;gap:8px;min-width:0}.scum-gift-content-cell>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scum-gift-table-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}.scum-gift-table-actions .icon-command{min-height:30px;padding:0 9px;white-space:nowrap}.gift-form-wide{grid-column:1/-1}.gift-form-section{display:grid;gap:9px;padding:11px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface-solid) 64%,transparent);box-shadow:inset 0 1px 0 var(--crystal-rim)}.gift-form-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}.gift-form-section-title strong{color:var(--ink);font-size:13px}.gift-form-section-title span{color:var(--ink-faint);font-size:11px}.gift-dialog-heading{display:grid;gap:3px;min-width:0}.gift-dialog-heading h2{margin:0;color:var(--ink);font-size:18px}.gift-dialog-actions{grid-column:1/-1}.gift-dialog-actions .confirm-primary{min-width:128px}.gift-catalog-reference{margin-top:2px}
|
||||
:root[data-custom-background=true] .scum-workbench,:root[data-custom-background=true] .scum-table-wrap{background:linear-gradient(180deg,rgba(5,10,16,.76),rgba(5,10,16,.64));border-color:color-mix(in srgb,var(--line-strong) 54%,rgba(255,255,255,.18))}:root[data-custom-background=true][data-theme-palette=magical-girl] .scum-workbench,:root[data-custom-background=true][data-theme-palette=magical-girl] .scum-table-wrap{background:linear-gradient(180deg,rgba(18,19,26,.74),rgba(13,15,22,.64));border-color:rgba(250,240,249,.34)}
|
||||
@media (max-width:760px){.scum-filter-bar .page-status{margin-left:0}.scum-user-table{min-width:1040px}}
|
||||
@media (max-width:760px){.scum-map-bar>.console-field,.scum-map-bar>.scum-map-menu-field,.scum-map-bar>.map-playback-bar{flex:1 1 100%;min-width:0}.map-playback-summary{white-space:normal}}
|
||||
.provider-form input,.provider-form select,.provider-form textarea{width:100%;min-height:38px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px;background:var(--surface-solid);color:var(--ink);font:inherit}
|
||||
.provider-form textarea{min-height:120px;padding:10px;resize:vertical;font-family:var(--font-mono);font-size:13px}
|
||||
.provider-form input:focus,.provider-form select:focus,.provider-form textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-soft)}
|
||||
@@ -779,29 +781,38 @@ to{transform:translate(-50%,-50%) rotate(calc(var(--construct-drift) + 360deg))}
|
||||
.map-viewport:active{cursor:grabbing}
|
||||
.map-scene{position:absolute;top:50%;left:50%;height:100%;aspect-ratio:1;transform-origin:center;will-change:transform}
|
||||
.map-scene-image{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% 100%;background-position:center}
|
||||
.map-track-layer{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}.map-grid-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}.map-grid-line{position:absolute;background:color-mix(in srgb,var(--line) 62%,transparent)}.map-grid-line-v{top:0;bottom:0;width:1px}.map-grid-line-h{left:0;right:0;height:1px}.map-grid-label{position:absolute;transform:translate(-50%,-50%);padding:1px 5px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 72%,transparent);color:var(--ink);font:800 10px/1 var(--font-mono);text-shadow:0 1px 4px rgba(0,0,0,.55)}.map-grid-col-label{top:10px}.map-grid-row-label{left:12px}.map-surface-dot{position:absolute;z-index:3;width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 80%,transparent);transform:translate(-50%,-50%) scale(var(--map-inverse,1));cursor:pointer}.map-surface-dot img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 76%,transparent))}.map-surface-dot.map-layer-vehicles{width:26px;height:26px;background:color-mix(in srgb,var(--surface-solid) 72%,transparent)}.map-surface-dot.map-layer-flags{background:var(--gold)}.map-surface-dot.map-layer-regions{background:var(--success)}.map-surface-dot-riding{outline:2px solid var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 24%,transparent),0 0 18px color-mix(in srgb,var(--gold) 80%,transparent)}.map-view-controls{position:absolute;top:10px;right:10px;z-index:6;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
|
||||
.map-track-layer{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}.map-grid-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}.map-grid-line{position:absolute;background:color-mix(in srgb,var(--line) 62%,transparent)}.map-grid-line-v{top:0;bottom:0;width:1px}.map-grid-line-h{left:0;right:0;height:1px}.map-grid-label{position:absolute;transform:translate(-50%,-50%);padding:1px 5px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 72%,transparent);color:var(--ink);font:800 10px/1 var(--font-mono);text-shadow:0 1px 4px rgba(0,0,0,.55)}.map-grid-col-label{top:10px}.map-grid-row-label{left:12px}.map-surface-dot{position:absolute;z-index:3;width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--accent);box-shadow:0 0 0 1px var(--surface-solid);transform:translate(-50%,-50%) scale(var(--map-inverse,1));cursor:pointer}.map-surface-dot img{display:block;width:100%;height:100%;object-fit:contain}.map-surface-dot.map-layer-vehicles{width:20px;height:20px;background:color-mix(in srgb,var(--surface-solid) 72%,transparent)}.map-surface-dot.map-layer-flags{background:var(--gold)}.map-surface-dot.map-layer-regions{background:var(--success)}.map-surface-dot-riding{outline:2px solid var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 24%,transparent)}.map-view-controls{position:absolute;top:10px;right:10px;z-index:6;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
|
||||
.map-view-controls .icon-command{min-height:24px;padding:0 8px;font-size:11px}
|
||||
.map-zoom-badge{padding:0 6px;color:var(--ink-faint);font:800 10px/1 var(--font-mono)}
|
||||
.map-track-endpoint{position:absolute;z-index:4;display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--accent);border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 84%,transparent);color:var(--ink);font:800 10px/1 var(--font-mono);transform:translate(-50%,-50%) scale(var(--map-inverse,1));pointer-events:none}
|
||||
.map-track-endpoint.map-layer-vehicles{border-color:var(--gold)}
|
||||
.map-ride-marker{position:absolute;z-index:4;display:grid;place-items:center;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--gold) 70%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 76%,transparent);color:var(--gold);font:800 9px/1 var(--font-mono);transform:translate(-50%,-50%) scale(var(--map-inverse,1));pointer-events:none}
|
||||
.map-ride-marker img{width:100%;height:100%;object-fit:contain}
|
||||
.map-track-live{position:absolute;z-index:5;display:flex;align-items:center;gap:4px;transform:translate(-50%,-50%) scale(var(--map-inverse,1));pointer-events:none}
|
||||
.map-track-live{position:absolute;z-index:5;display:grid;place-items:center;width:16px;height:16px;padding:0;border:0;background:transparent;color:inherit;transform:translate(-50%,-50%) scale(var(--map-inverse,1));pointer-events:auto;cursor:pointer}
|
||||
.map-track-live-dot{width:11px;height:11px;border:2px solid var(--surface-solid);border-radius:999px;background:var(--track-color,var(--gold));box-shadow:0 0 0 2px color-mix(in srgb,var(--track-color,var(--gold)) 42%,transparent)}
|
||||
.map-track-live.is-playing .map-track-live-dot{width:16px;height:16px}
|
||||
.map-track-live-icon{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--track-color,var(--gold)) 70%,transparent))}
|
||||
.map-track-live.is-playing .map-track-live-icon{width:27px;height:27px}
|
||||
.map-track-live-label{max-width:104px;overflow:hidden;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 82%,transparent);color:var(--track-color,var(--gold));font-size:10px;white-space:nowrap;text-overflow:ellipsis}
|
||||
.map-hover-card{position:absolute;z-index:9;display:grid;gap:3px;min-width:168px;max-width:262px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--surface-solid) 94%,transparent);box-shadow:0 10px 26px color-mix(in srgb,#000 46%,transparent);transform:translate(-50%,calc(-100% - 12px)) scale(var(--map-inverse,1));transform-origin:50% 100%;pointer-events:none}
|
||||
.map-track-live.is-active .map-track-live-dot{width:16px;height:16px}
|
||||
.map-track-live-icon{width:20px;height:20px;object-fit:contain}
|
||||
.map-track-live.is-active .map-track-live-icon{width:26px;height:26px}
|
||||
.map-track-live-riding.is-active{width:26px;height:26px}
|
||||
.map-track-live:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
|
||||
.map-surface-dot-riding{width:20px;height:20px}
|
||||
.map-track-live-label{position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%);max-width:104px;overflow:hidden;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 82%,transparent);color:var(--track-color,var(--gold));font-size:10px;white-space:nowrap;text-overflow:ellipsis}
|
||||
.map-hover-card{position:absolute;z-index:9;display:grid;gap:3px;min-width:168px;max-width:262px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--surface-solid) 94%,transparent);box-shadow:0 10px 26px color-mix(in srgb,#000 46%,transparent);transform:scale(var(--map-inverse,1)) translate(-50%,calc(-100% - 12px));transform-origin:0 0;pointer-events:none}
|
||||
.map-hover-title{color:var(--ink);font-size:11px}
|
||||
.map-hover-row{display:grid;grid-template-columns:56px 1fr;gap:6px;align-items:baseline}
|
||||
.map-hover-row small{color:var(--ink-faint);font-size:10px}
|
||||
.map-hover-row b{color:var(--ink-soft);font-size:11px;font-weight:600;word-break:break-all}
|
||||
.map-track-swatch{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:999px;vertical-align:middle}
|
||||
.map-playback-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
|
||||
.map-playback-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
|
||||
.scum-map-bar>.map-playback-bar{flex:1 1 520px;min-width:320px}
|
||||
.map-playback-time{color:var(--ink-soft);font-size:12px}
|
||||
.map-playback-time{white-space:nowrap}
|
||||
.map-playback-progress{flex:0 1 160px;width:90px;min-width:70px;height:5px;accent-color:var(--accent)}
|
||||
.map-playback-bar>.primary-command{width:auto;min-width:112px;flex:0 0 auto;white-space:nowrap}
|
||||
.map-playback-summary{margin-left:0;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.map-playback-bar>.scum-map-menu{margin-left:auto}
|
||||
.map-playback-bar .page-status{margin:0}
|
||||
.map-playback-bar .scum-map-menu-body{left:auto;right:0}
|
||||
.scum-map-menu{position:relative;flex:0 0 auto}
|
||||
.scum-map-bar>.console-field,.scum-map-bar>.scum-map-menu-field{flex:0 1 210px;min-width:150px}
|
||||
.scum-map-filter-menu{display:block;min-width:0}
|
||||
.scum-map-menu.scum-map-filter-menu>summary{box-sizing:border-box;width:100%;min-height:36px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.scum-map-menu>summary{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;font-size:11px;list-style:none;cursor:pointer}
|
||||
.scum-map-menu>summary::-webkit-details-marker{display:none}
|
||||
.scum-map-menu[open]>summary{border-color:var(--accent);color:var(--ink)}
|
||||
|
||||
@@ -0,0 +1,180 @@
|
||||
/** @vitest-environment jsdom */
|
||||
|
||||
import * as React from "react";
|
||||
import { act } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { createScumMapFixture, scumMapContext, scumMapPage } from "../acceptance/fixtures/scum-map";
|
||||
import { loadPluginPageBundle } from "./pluginPageBundles";
|
||||
|
||||
let root: Root;
|
||||
let container: HTMLDivElement;
|
||||
const MapPage = await loadPluginPageBundle(scumMapPage);
|
||||
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(new Date("2026-09-19T00:10:00Z"));
|
||||
globalThis.__PLUGIN_PAGE_REACT__ = React;
|
||||
container = document.createElement("div");
|
||||
document.body.append(container);
|
||||
root = createRoot(container);
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await act(async () => root.unmount());
|
||||
container.remove();
|
||||
vi.useRealTimers();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
async function mount(fixture = createScumMapFixture(), context = scumMapContext) {
|
||||
const loadSurface = vi.spyOn(fixture.actions.scum!, "surface");
|
||||
const list = vi.spyOn(fixture.actions.pluginData!, "list");
|
||||
await act(async () => root.render(<MapPage context={context} workspaceActions={fixture.actions} availability={{ available: true }} />));
|
||||
return { ...fixture, loadSurface, list };
|
||||
}
|
||||
|
||||
function button(label: string) {
|
||||
const result = [...container.querySelectorAll<HTMLButtonElement>("button")].find((node) => node.getAttribute("aria-label") === label || node.textContent === label);
|
||||
expect(result, `button ${label}`).toBeDefined();
|
||||
return result!;
|
||||
}
|
||||
|
||||
async function click(node: HTMLElement) { await act(async () => node.click()); }
|
||||
async function tick(ms: number) { await act(async () => vi.advanceTimersByTime(ms)); }
|
||||
function zoom() { return Number(container.querySelector(".map-zoom-badge")?.textContent?.replace("×", "")); }
|
||||
|
||||
describe("SCUM map through the platform bundle host", () => {
|
||||
it("starts from the first sample, follows one player, preserves paused markers, and resets for a new selection", async () => {
|
||||
const { loadSurface, list } = await mount();
|
||||
await click(button("播放轨迹回放"));
|
||||
expect(zoom()).toBe(8);
|
||||
expect(container.querySelectorAll(".map-track-live")).toHaveLength(1);
|
||||
expect(container.querySelector(".map-track-live-riding")).toBeNull();
|
||||
const initialTransform = container.querySelector(".map-scene")?.getAttribute("style");
|
||||
await tick(6000);
|
||||
expect(container.querySelector(".map-scene")?.getAttribute("style")).not.toBe(initialTransform);
|
||||
await click(button("暂停轨迹回放"));
|
||||
const marker = container.querySelector<HTMLButtonElement>(".map-track-live")!;
|
||||
expect(marker.classList.contains("is-active")).toBe(true);
|
||||
await act(async () => marker.focus());
|
||||
expect(container.querySelector('[role="tooltip"]')?.textContent).toContain("Mira");
|
||||
expect(container.querySelector('[role="tooltip"]')?.textContent).not.toContain("乘坐Laika");
|
||||
await click(marker);
|
||||
expect(container.querySelector(".map-point-strip")?.textContent).toContain("Mira");
|
||||
await click(button("全选"));
|
||||
expect(container.querySelector(".map-playback-time")?.textContent).toContain("选择用户与时间后开始回放");
|
||||
await click(button("播放轨迹回放"));
|
||||
expect(container.querySelectorAll(".map-track-live")).toHaveLength(2);
|
||||
expect(zoom()).toBe(8);
|
||||
expect(loadSurface).toHaveBeenCalledTimes(1);
|
||||
expect(list).toHaveBeenCalledTimes(7);
|
||||
});
|
||||
|
||||
it("fits moving users together and changes ride icons at the recorded sample time", async () => {
|
||||
await mount();
|
||||
await click(button("全选"));
|
||||
await click(button("播放轨迹回放"));
|
||||
await tick(12000);
|
||||
expect(zoom()).toBeLessThan(8);
|
||||
expect(container.querySelector(".map-track-live-riding")).toBeNull();
|
||||
await tick(4000);
|
||||
const riding = container.querySelector<HTMLButtonElement>(".map-track-live-riding")!;
|
||||
expect(riding.getAttribute("aria-label")).toContain("Laika");
|
||||
expect(riding.querySelector("img")?.getAttribute("src")).toContain("ico_");
|
||||
await click(button("暂停轨迹回放"));
|
||||
await act(async () => riding.focus());
|
||||
expect(container.querySelector('[role="tooltip"]')?.textContent).toContain("乘坐Laika");
|
||||
const start = container.querySelector<HTMLInputElement>('[aria-label="轨迹开始时间"]')!;
|
||||
await act(async () => {
|
||||
Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(start, "2026-09-19T00:04");
|
||||
start.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
});
|
||||
expect(container.querySelector(".map-playback-time")?.textContent).toContain("选择用户与时间后开始回放");
|
||||
const end = container.querySelector<HTMLInputElement>('[aria-label="轨迹结束时间"]')!;
|
||||
await act(async () => {
|
||||
Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(end, "2026-09-18T00:00");
|
||||
end.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
});
|
||||
expect(container.querySelectorAll(".map-track-live")).toHaveLength(0);
|
||||
expect(container.querySelectorAll(".map-layer-players")).toHaveLength(0);
|
||||
expect(button("播放轨迹回放").disabled).toBe(true);
|
||||
});
|
||||
|
||||
it("shows player, vehicle lock and flag owner details without extra reads", async () => {
|
||||
const { loadSurface, list } = await mount();
|
||||
await act(async () => button("Laika").focus());
|
||||
expect(container.querySelector('[role="tooltip"]')?.textContent).toContain("Mira 上锁");
|
||||
expect(container.querySelector('[role="tooltip"]')?.textContent).toContain("耐久未同步");
|
||||
await act(async () => button("Wolves Flag").focus());
|
||||
const tooltip = container.querySelector('[role="tooltip"]')?.textContent;
|
||||
expect(tooltip).toContain("归属Mira（mira）");
|
||||
expect(tooltip).toContain("Wolves（wolves · 2 人）");
|
||||
expect(loadSurface).toHaveBeenCalledTimes(1);
|
||||
expect(list).toHaveBeenCalledTimes(7);
|
||||
});
|
||||
|
||||
it("excludes unselected and out-of-window players, including stale retained current positions", async () => {
|
||||
const fixture = createScumMapFixture();
|
||||
fixture.surface.users.items.push({ id: "old", serverInstanceId: "map-test", steamId: "old", displayName: "Old Player", online: false, x: 100, y: 100, lastSeenAt: "2026-09-18T00:00:00Z" });
|
||||
await mount(fixture);
|
||||
const labels = () => [...container.querySelectorAll(".map-track-live-label")].map((node) => node.textContent);
|
||||
expect(labels()).toEqual(["Mira"]);
|
||||
expect(container.querySelector('[aria-label="SCUM 地图视图"]')?.textContent).not.toContain("Nova");
|
||||
await click(button("清空"));
|
||||
expect(labels()).toEqual([]);
|
||||
expect(container.querySelectorAll(".map-layer-players")).toHaveLength(0);
|
||||
expect(button("播放轨迹回放").disabled).toBe(true);
|
||||
await click(button("时段内全部"));
|
||||
expect(labels().sort()).toEqual(["Mira", "Nova"]);
|
||||
expect(container.querySelector('[aria-label="SCUM 地图视图"]')?.textContent).not.toContain("Old Player");
|
||||
});
|
||||
|
||||
it("draws the travelled path up to the moving marker and keeps the final frame without duplicate endpoints", async () => {
|
||||
await mount();
|
||||
const start = button("播放轨迹回放");
|
||||
expect(start.closest("details")).toBeNull();
|
||||
await click(start);
|
||||
await tick(6000);
|
||||
const polyline = container.querySelector(".map-track-layer polyline")!;
|
||||
const last = polyline.getAttribute("points")!.split(" ").at(-1)!.split(",").map(Number);
|
||||
const marker = container.querySelector<HTMLElement>(".map-track-live")!;
|
||||
expect(last[0]).toBeCloseTo(parseFloat(marker.style.left) * 40.96, 0);
|
||||
expect(last[1]).toBeCloseTo(parseFloat(marker.style.top) * 40.96, 0);
|
||||
expect(polyline.getAttribute("vector-effect")).toBe("non-scaling-stroke");
|
||||
await tick(24100);
|
||||
expect(container.querySelector(".map-playback-time")?.textContent).toContain("回放结束");
|
||||
expect(container.querySelectorAll(".map-track-live")).toHaveLength(1);
|
||||
expect(container.querySelectorAll(".map-track-endpoint")).toHaveLength(0);
|
||||
expect(container.querySelector<HTMLProgressElement>("progress")?.value).toBe(1);
|
||||
});
|
||||
|
||||
it("reuses marker nodes and geometry during zoom without reparsing the loaded trajectory history", async () => {
|
||||
const fixture = createScumMapFixture();
|
||||
const sample = fixture.surface.userTrajectories.items[0];
|
||||
fixture.surface.userTrajectories.items = Array.from({ length: 1000 }, (_, index) => ({ ...sample, id: `sample-${index}`, x: index * 5, sampledAt: new Date(Date.parse("2026-09-19T00:00:00Z") + index * 500).toISOString() }));
|
||||
await mount(fixture);
|
||||
const marker = container.querySelector<HTMLElement>(".map-track-live")!;
|
||||
await click(marker);
|
||||
const line = container.querySelector(".map-track-layer polyline");
|
||||
const parse = vi.spyOn(Date, "parse");
|
||||
await click(button("地图缩小"));
|
||||
expect(container.querySelector(".map-track-live")).toBe(marker);
|
||||
expect(container.querySelector(".map-track-layer polyline")).toBe(line);
|
||||
// Only small control/detail labels may parse times; all 1,000 trajectory rows stay cached.
|
||||
expect(parse.mock.calls.length).toBeLessThan(30);
|
||||
expect(zoom()).toBeLessThan(8);
|
||||
expect(line?.getAttribute("points")?.split(" ")).toHaveLength(1000);
|
||||
});
|
||||
|
||||
it("keeps manual zoom during playback and loads only activity in a non-focused time window", async () => {
|
||||
await mount(createScumMapFixture(), { ...scumMapContext, pageQuery: { from: scumMapContext.pageQuery.from, to: scumMapContext.pageQuery.to } });
|
||||
expect(container.querySelectorAll(".map-track-live")).toHaveLength(2);
|
||||
await click(button("播放轨迹回放"));
|
||||
await click(button("地图缩小"));
|
||||
const manualZoom = zoom();
|
||||
await tick(1000);
|
||||
expect(zoom()).toBe(manualZoom);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user