+
+
+
DIABLO II: LORD OF DESTRUCTION
+
正在下载游戏资源 · LOADING RESOURCES
+
+
+ 正在下载:
+ initializing...
+ (0/0)
+
+
+
diff --git a/src/client/main.ts b/src/client/main.ts
index e60fa0d..f15619f 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -41,6 +41,10 @@ import {
TileAtlasGpuCache,
renderSceneSourceFrame,
} from './scene/world-renderer.ts'
+import {
+ BootProgressTracker,
+ type BootProgressSnapshot,
+} from './ui/boot-progress.ts'
import { HudManager } from './ui/hud-manager.ts'
import { Minimap } from './ui/minimap.ts'
import { CommandMapper } from './input/command-mapper.ts'
@@ -77,6 +81,8 @@ const PRELOAD_MONSTER_IDS = [
export interface PlayAppController {
readonly ready: boolean
+ readonly bootProgress: BootProgressSnapshot
+ readonly bootProgressTracker: BootProgressTracker
readonly settings: SettingsStore
readonly settingsStore: SettingsStore
readonly session: OnlineSession
@@ -104,6 +110,7 @@ export interface PlayAppController {
declare global {
interface Window {
__d2SkipAutoBoot?: boolean
+ __d2BootProgress?: BootProgressSnapshot
__d2PlayApp?: PlayAppController
__d2Play?: PlayAppController
}
@@ -156,6 +163,8 @@ async function bootPlayApp(): Promise
{
throw new Error('Missing required DOM elements in play.html')
}
+ const bootProgress = new BootProgressTracker({ stageEl }).install()
+
const settingsStore = getGlobalSettingsStore()
const initialSettings = settingsStore.get()
setLang(initialSettings.lang)
@@ -198,6 +207,7 @@ async function bootPlayApp(): Promise {
onPanAutomap: (dx, dy) => minimap.pan(dx, dy),
})
await hudManager.load('/ui')
+ bootProgress.setStageFloor(25, 'manifest.json')
let mapService: MapService | null = null
try {
@@ -205,6 +215,7 @@ async function bootPlayApp(): Promise {
} catch {
mapService = null
}
+ bootProgress.setStageFloor(45, 'drlg-bundle.bin')
// Kick off asynchronous GPU atlas preloading for WebGL2 world rendering
tileGpuCache.ensureActPalette(1)
@@ -646,6 +657,11 @@ async function bootPlayApp(): Promise {
})
await frontendRenderer.load('/ui/frontend')
+ bootProgress.setStageFloor(78, 'bg-main-menu.png')
+ await assetsReadyPromise
+ bootProgress.setStageFloor(96, 'items-atlas.png')
+ await bootProgress.waitForIdle(2500)
+ bootProgress.complete()
// Subscribe to OnlineSession state changes & disconnects
session.onStateChange((snap) => {
@@ -850,6 +866,8 @@ async function bootPlayApp(): Promise {
const controller: PlayAppController = {
ready: true,
+ bootProgress: bootProgress.getSnapshot(),
+ bootProgressTracker: bootProgress,
settings: settingsStore,
settingsStore,
session,
diff --git a/src/client/ui/boot-progress.ts b/src/client/ui/boot-progress.ts
new file mode 100644
index 0000000..1be90de
--- /dev/null
+++ b/src/client/ui/boot-progress.ts
@@ -0,0 +1,555 @@
+/**
+ * Client Boot Resource Download Progress Bar (`src/client/ui/boot-progress.ts`).
+ *
+ * Tracks all client boot resource downloads (`fetch` requests and `HTMLImageElement`
+ * image loads across HUD, DRLG tile bundles, palettes, Battle.net frontend UI sprites,
+ * automap atlases, ground items atlas, character/monster `.r8` atlases, and
+ * missile/overlay sprite sheets) when entering `play.html`.
+ *
+ * Renders:
+ * 1. Total download progress percentage (`0%` – `100%`, strictly monotonic).
+ * 2. The filename of the resource currently being downloaded (`currentFile`).
+ */
+
+export interface BootProgressSnapshot {
+ /** Monotonic total download percentage in `[0, 100]`. */
+ readonly percent: number
+ /** Basename of the resource currently being downloaded (e.g. `drlg-bundle.bin`, `items-atlas.png`). */
+ readonly currentFile: string
+ /** Normalized URL/path of the resource currently being downloaded. */
+ readonly currentFilePath: string
+ /** Number of resources that have finished downloading. */
+ readonly loadedCount: number
+ /** Total number of discovered/expected resources in the boot batch. */
+ readonly totalCount: number
+ /** Number of resources currently in flight. */
+ readonly inFlightCount: number
+ /** Lifecycle status of the boot progress tracker. */
+ readonly status: 'idle' | 'loading' | 'completed'
+ /** Ordered list of resource filenames that have completed downloading. */
+ readonly loadedFiles: readonly string[]
+}
+
+export interface BootProgressOptions {
+ /** Container element (e.g. `#play-stage`) where `#d2-boot-loading` resides or will be mounted. */
+ readonly stageEl?: HTMLElement | null
+ /** Baseline expected number of boot resource requests used to prevent early 100% spikes. */
+ readonly expectedTotal?: number
+ /** Initial placeholder filename before the first request starts. */
+ readonly initialFileLabel?: string
+ /** Whether to automatically hide the overlay when `complete()` is called (default: `true`). */
+ readonly hideOnComplete?: boolean
+}
+
+interface InFlightEntry {
+ readonly id: number
+ readonly fileName: string
+ readonly filePath: string
+ readonly promise: Promise
+ readonly resolve: () => void
+}
+
+/**
+ * Default baseline asset count across `bootPlayApp()`:
+ * - `hudManager.load('/ui')` (~550 font/HUD/skill icon/skill tree assets)
+ * - `MapService.fromPackedUrl('/act-packs/tiles')` + palette (~4 assets)
+ * - `frontendRenderer.load('/ui/frontend')` (~179 frontend sprites & font atlases)
+ * - `assetsReadyPromise` (~180 automap, items, hero, monster, missile, overlay assets)
+ */
+export const DEFAULT_EXPECTED_BOOT_ASSETS = 910
+
+/**
+ * Extracts a clean resource filename from a URL or relative path.
+ * Strips query parameters (`?...`) and hash fragments (`#...`).
+ *
+ * Examples:
+ * - `/act-packs/tiles/drlg-bundle.bin` -> `drlg-bundle.bin`
+ * - `samples/d2-packs/items/items-atlas.png?v=1` -> `items-atlas.png`
+ * - `/ui/frontend/bg-main-menu.png#top` -> `bg-main-menu.png`
+ */
+export function extractAssetFileName(urlOrPath: string): string {
+ const trimmed = urlOrPath.trim()
+ if (!trimmed) return ''
+ if (trimmed.startsWith('data:') || trimmed.startsWith('blob:')) {
+ return ''
+ }
+ const noHash = trimmed.split('#')[0] ?? trimmed
+ const noQuery = noHash.split('?')[0] ?? noHash
+ const normalized = noQuery.replace(/\\/g, '/').replace(/\/+$/, '')
+ if (!normalized) return ''
+ const segments = normalized.split('/').filter((s) => s.length > 0)
+ const last = segments[segments.length - 1] ?? ''
+ try {
+ return decodeURIComponent(last)
+ } catch {
+ return last
+ }
+}
+
+/**
+ * Normalizes a fetch/image URL into a readable relative path without origin, query, or hash.
+ */
+export function normalizeAssetPath(urlOrPath: string): string {
+ const trimmed = urlOrPath.trim()
+ if (!trimmed || trimmed.startsWith('data:') || trimmed.startsWith('blob:')) {
+ return ''
+ }
+ let pathPart = trimmed
+ try {
+ if (/^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//.test(trimmed)) {
+ const parsed = new URL(trimmed)
+ pathPart = parsed.pathname
+ }
+ } catch {
+ // Keep original string if URL parsing fails
+ }
+ const noHash = pathPart.split('#')[0] ?? pathPart
+ const noQuery = noHash.split('?')[0] ?? noHash
+ return noQuery.replace(/\\/g, '/')
+}
+
+export class BootProgressTracker {
+ private readonly stageEl: HTMLElement | null
+ private readonly expectedTotal: number
+ private readonly hideOnComplete: boolean
+
+ private overlayEl: HTMLElement | null = null
+ private barEl: HTMLElement | null = null
+ private fillEl: HTMLElement | null = null
+ private percentEl: HTMLElement | null = null
+ private fileEl: HTMLElement | null = null
+ private countEl: HTMLElement | null = null
+
+ private nextId = 1
+ private totalDiscovered = 0
+ private loadedCount = 0
+ private stageFloorPercent = 0
+ private percent = 0
+ private currentFile: string
+ private currentFilePath = ''
+ private status: 'idle' | 'loading' | 'completed' = 'idle'
+ private readonly inFlight = new Map()
+ private readonly loadedFiles: string[] = []
+ private readonly listeners = new Set<(snap: BootProgressSnapshot) => void>()
+
+ private installed = false
+ private originalFetch: typeof globalThis.fetch | null = null
+ private originalImgSrcDescriptor: PropertyDescriptor | null = null
+
+ constructor(options: BootProgressOptions = {}) {
+ this.stageEl = options.stageEl ?? null
+ this.expectedTotal = Math.max(1, options.expectedTotal ?? DEFAULT_EXPECTED_BOOT_ASSETS)
+ this.currentFile = options.initialFileLabel ?? 'initializing...'
+ this.hideOnComplete = options.hideOnComplete ?? true
+ this.bindOrCreateDom()
+ }
+
+ /**
+ * Ensures the `#d2-boot-loading` DOM structure exists and binds element references.
+ */
+ private bindOrCreateDom(): void {
+ if (typeof document === 'undefined') return
+
+ let overlay = document.getElementById('d2-boot-loading')
+ if (!overlay && this.stageEl) {
+ overlay = document.createElement('div')
+ overlay.id = 'd2-boot-loading'
+ overlay.innerHTML = [
+ '',
+ '
DIABLO II: LORD OF DESTRUCTION
',
+ '
正在下载游戏资源 · LOADING RESOURCES
',
+ '
',
+ '
',
+ ' 正在下载:',
+ ' initializing...',
+ ' (0/0)',
+ '
',
+ '