@antha/asset 0.1.3 → 0.3.0

package/dist/antha-asset.mod.d.ts

@@ -39,13 +39,19 @@ export type AnthaAssetModOptions = PartialWithUndefined<{
      * @default false
      */
     hideLoadingScreen: boolean;
+    /**
+     * Duration in milliseconds for the default loading screen's fade-out animation.
+     *
+     * @default defaultLoadingScreenFadeMs
+     */
+    loadingScreenFadeMs: number;
 }>;
 /**
  * Duration in milliseconds for the loading screen fade-out animation.
  *
  * @category Internal
  */
-export declare const loadingScreenFadeMs = 1000;
+export declare const defaultLoadingScreenFadeMs = 1000;
 /**
  * Duration in milliseconds for the progress bar grow transition.
  *
@@ -62,7 +68,8 @@ export declare const AnthaAssetLoadingScreen: import("element-vir").DeclarativeE
     dotCount: number;
     completed: boolean;
     currentResourceName: string | undefined;
-}, {}, {}, "antha-asset-loading-screen-completed", "antha-asset-loading-screen-", readonly [], readonly []>;
+    loadingScreenFadeMs: number;
+}, {}, {}, "antha-asset-loading-screen-completed", "antha-asset-loading-screen-fade-ms", readonly [], readonly []>;
 /**
  * The Antha Asset mod, created by {@link createAnthaAssetMod}.
  *

package/dist/antha-asset.mod.js

@@ -1,12 +1,14 @@
 import { defineAnthaMod } from '@antha/engine';
+import { addSuffix } from '@augment-vir/common';
 import { css, defineElement, html } from 'element-vir';
+import { setCssVarValue } from 'lit-css-vars';
 import { AssetLoader, AssetLoaderProgressUpdateEvent } from './asset-loader.js';
 /**
  * Duration in milliseconds for the loading screen fade-out animation.
  *
  * @category Internal
  */
-export const loadingScreenFadeMs = 1000;
+export const defaultLoadingScreenFadeMs = 1000;
 /**
  * Duration in milliseconds for the progress bar grow transition.
  *
@@ -20,10 +22,16 @@ export const loadingScreenProgressGrowMs = 200;
  */
 export const AnthaAssetLoadingScreen = defineElement()({
     tagName: 'antha-asset-loading-screen',
+    cssVars: {
+        'antha-asset-loading-screen-fade-ms': addSuffix({
+            value: defaultLoadingScreenFadeMs,
+            suffix: 'ms',
+        }),
+    },
     hostClasses: {
         'antha-asset-loading-screen-completed': ({ inputs }) => inputs.completed,
     },
-    styles: ({ hostClasses }) => {
+    styles: ({ cssVars, hostClasses }) => {
         return css `
             :host {
                 position: fixed;
@@ -37,7 +45,7 @@ export const AnthaAssetLoadingScreen = defineElement()({
                 z-index: 9999;
                 gap: 24px;
                 opacity: 1;
-                transition: opacity ${loadingScreenFadeMs}ms ease-in;
+                transition: opacity ${cssVars['antha-asset-loading-screen-fade-ms'].value} ease-in;
             }
 
             .loading-text {
@@ -75,7 +83,15 @@ export const AnthaAssetLoadingScreen = defineElement()({
             }
         `;
     },
-    render({ inputs }) {
+    render({ host, inputs, cssVars }) {
+        setCssVarValue({
+            forCssVar: cssVars['antha-asset-loading-screen-fade-ms'],
+            onElement: host,
+            toValue: addSuffix({
+                value: inputs.loadingScreenFadeMs,
+                suffix: 'ms',
+            }),
+        });
         const dotCount = inputs.dotCount % 4;
         const dots = '.'.repeat(dotCount) + '\u00A0'.repeat(3 - dotCount);
         return html `
@@ -114,6 +130,7 @@ export const anthaAssetModName = 'antha-asset';
  * @category Pre-Built Mods
  */
 export function createAnthaAssetMod(options = {}) {
+    const configuredLoadingScreenFadeMs = options.loadingScreenFadeMs ?? defaultLoadingScreenFadeMs;
     return defineAnthaMod({
         modName: anthaAssetModName,
         async cleanup({ state }) {
@@ -154,7 +171,8 @@ export function createAnthaAssetMod(options = {}) {
                 return;
             }
             const shouldShowLoadingScreen = state.loadingScreenState?.completedAt
-                ? engine.totalMs <= state.loadingScreenState.completedAt + loadingScreenFadeMs
+                ? engine.totalMs <=
+                    state.loadingScreenState.completedAt + configuredLoadingScreenFadeMs
                 : true;
             if (state.loadingScreenState && shouldShowLoadingScreen) {
                 const progressPercent = state.loadingScreenState.total > 0
@@ -166,6 +184,7 @@ export function createAnthaAssetMod(options = {}) {
                     dotCount: Math.floor(engine.totalMs / 500) % 4,
                     completed: !!state.loadingScreenState.completedAt,
                     currentResourceName: state.loadingScreenState.currentResourceName,
+                    loadingScreenFadeMs: configuredLoadingScreenFadeMs,
                 })}></${AnthaAssetLoadingScreen}>
                 `;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@antha/asset",
-    "version": "0.1.3",
+    "version": "0.3.0",
     "description": "An Antha mod for handling asset loading.",
     "keywords": [
         "vir",
@@ -36,6 +36,7 @@
     "dependencies": {
         "@augment-vir/assert": "^32.2.3",
         "@augment-vir/common": "^32.2.3",
+        "lit-css-vars": "^3.6.3",
         "typed-event-target": "^4.3.3"
     },
     "devDependencies": {
@@ -47,7 +48,7 @@
         "pixi.js": "^8.19.0"
     },
     "peerDependencies": {
-        "@antha/engine": "^0.1.3",
+        "@antha/engine": "^0.3.0",
         "element-vir": ">=26"
     },
     "engines": {