@antha/asset 0.0.8 → 0.1.1

package/README.md

@@ -1,9 +1,55 @@
 # @antha/asset
 
-A pre-built [Antha](https://www.npmjs.com/package/antha) mod for handling asset loading.
+A pre-built [Antha game engine](https://www.npmjs.com/package/@antha/engine) mod for defining, caching, and cleaning up game assets.
 
 ## Install
 
 ```sh
 npm i @antha/asset
 ```
+
+## Usage
+
+<!-- example-link: src/readme-examples/loading-asset.example.ts -->
+
+```TypeScript
+import {AnthaEngine, defineAnthaMod} from '@antha/engine';
+import {type AnthaAssetModState, createAnthaAssetMod, defineAsset} from '@antha/asset';
+
+type GameState = AnthaAssetModState & {
+    hasLoadedTitle: boolean;
+};
+
+const titleAsset = defineAsset({
+    name: 'title',
+    maxProgress: 1,
+    load({incrementProgressCallback}) {
+        incrementProgressCallback();
+
+        return {
+            value: 'Antha',
+        };
+    },
+});
+const engine = new AnthaEngine<GameState>({
+    initState: {
+        hasLoadedTitle: false,
+    },
+    mods: [
+        createAnthaAssetMod(),
+        defineAnthaMod<GameState>({
+            modName: 'game-logic',
+            async execute({state}) {
+                if (state.assetLoader && !state.hasLoadedTitle) {
+                    state.hasLoadedTitle = true;
+                    await state.assetLoader.bulkLoadAssets([
+                        titleAsset,
+                    ]);
+                }
+            },
+        }),
+    ],
+});
+
+engine.startLoop();
+```

package/dist/antha-asset.mod.js

@@ -23,56 +23,58 @@ export const AnthaAssetLoadingScreen = defineElement()({
     hostClasses: {
         'antha-asset-loading-screen-completed': ({ inputs }) => inputs.completed,
     },
-    styles: ({ hostClasses }) => css `
-        :host {
-            position: fixed;
-            inset: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            background-color: black;
-            color: white;
-            z-index: 9999;
-            gap: 24px;
-            opacity: 1;
-            transition: opacity ${loadingScreenFadeMs}ms ease-in;
-        }
+    styles: ({ hostClasses }) => {
+        return css `
+            :host {
+                position: fixed;
+                inset: 0;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                background-color: black;
+                color: white;
+                z-index: 9999;
+                gap: 24px;
+                opacity: 1;
+                transition: opacity ${loadingScreenFadeMs}ms ease-in;
+            }
 
-        .loading-text {
-            font-size: 24px;
-            position: relative;
-        }
+            .loading-text {
+                font-size: 24px;
+                position: relative;
+            }
 
-        .dots {
-            font-family: monospace;
-            position: absolute;
-            left: 100%;
-            bottom: 0;
-        }
+            .dots {
+                font-family: monospace;
+                position: absolute;
+                left: 100%;
+                bottom: 0;
+            }
 
-        .progress-track {
-            width: 300px;
-            height: 1em;
-            overflow: hidden;
-            border: 4px solid white;
-        }
+            .progress-track {
+                width: 300px;
+                height: 1em;
+                overflow: hidden;
+                border: 4px solid white;
+            }
 
-        .current-resource-name {
-            font-size: 14px;
-            opacity: 0.7;
-        }
+            .current-resource-name {
+                font-size: 14px;
+                opacity: 0.7;
+            }
 
-        .progress-fill {
-            height: 100%;
-            background-color: white;
-            transition: width ${loadingScreenProgressGrowMs}ms ease-in;
-        }
+            .progress-fill {
+                height: 100%;
+                background-color: white;
+                transition: width ${loadingScreenProgressGrowMs}ms ease-in;
+            }
 
-        ${hostClasses['antha-asset-loading-screen-completed'].selector} {
-            opacity: 0;
-        }
-    `,
+            ${hostClasses['antha-asset-loading-screen-completed'].selector} {
+                opacity: 0;
+            }
+        `;
+    },
     render({ inputs }) {
         const dotCount = inputs.dotCount % 4;
         const dots = '.'.repeat(dotCount) + '\u00A0'.repeat(3 - dotCount);

package/dist/asset-loader.d.ts

@@ -166,6 +166,7 @@ export declare class AssetLoader extends ListenTarget<AssetLoaderProgressUpdateE
     destroy(): Promise<void>;
     /** Loads multiple assets. */
     bulkLoadAssets(assets: ReadonlyArray<Readonly<Asset>>, options?: Readonly<AssetBulkLoaderLoadOptions>): Promise<ReadonlyArray<unknown>>;
-    private dispatchProgressUpdate;
+    /** Dispatch a loading progress event for the active bulk load. */
+    protected dispatchProgressUpdate(detail: ConstructorParameters<typeof AssetLoaderProgressUpdateEvent>[0]['detail']): void;
 }
 export {};

package/dist/asset-loader.js

@@ -111,16 +111,18 @@ export class AssetLoader extends ListenTarget {
                 chunkSize: options.maxParallelism,
             })
             : [[...assets]];
-        const createIncrementProgressCallback = (asset) => (amount) => {
-            currentProgress += amount ?? 1;
-            if (!options.hideLoadingScreen) {
-                this.dispatchProgressUpdate({
-                    current: currentProgress,
-                    total: maxProgress,
-                    currentResourceName: asset.name,
-                    complete: false,
-                });
-            }
+        const createIncrementProgressCallback = (asset) => {
+            return (amount) => {
+                currentProgress += amount ?? 1;
+                if (!options.hideLoadingScreen) {
+                    this.dispatchProgressUpdate({
+                        current: currentProgress,
+                        total: maxProgress,
+                        currentResourceName: asset.name,
+                        complete: false,
+                    });
+                }
+            };
         };
         const results = (await awaitedBlockingMap(chunkedAssets, async (assetChunk) => {
             return await Promise.all(assetChunk.map(async (asset) => {
@@ -164,6 +166,7 @@ export class AssetLoader extends ListenTarget {
         }
         return results;
     }
+    /** Dispatch a loading progress event for the active bulk load. */
     dispatchProgressUpdate(detail) {
         this.dispatch(new AssetLoaderProgressUpdateEvent({
             detail,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@antha/asset",
-    "version": "0.0.8",
+    "version": "0.1.1",
     "description": "An Antha mod for handling asset loading.",
     "keywords": [
         "vir",
@@ -34,20 +34,20 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.73.1",
-        "@augment-vir/common": "^31.73.1",
-        "typed-event-target": "^4.3.1"
+        "@augment-vir/assert": "^32.2.2",
+        "@augment-vir/common": "^32.2.2",
+        "typed-event-target": "^4.3.3"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.73.1",
-        "@web/dev-server-esbuild": "^1.0.5",
-        "@web/test-runner": "^0.20.2",
-        "@web/test-runner-playwright": "^0.11.1",
+        "@augment-vir/test": "^32.2.2",
+        "@web/dev-server-esbuild": "^2.0.0",
+        "@web/test-runner": "^1.0.0",
+        "@web/test-runner-playwright": "^1.0.0",
         "istanbul-smart-text-reporter": "^1.1.5",
         "pixi.js": "^8.19.0"
     },
     "peerDependencies": {
-        "@antha/engine": "^0.0.8",
+        "@antha/engine": "^0.1.1",
         "element-vir": ">=26"
     },
     "engines": {