@rpgjs/client 5.0.0-alpha.43 → 5.0.0-alpha.44

package/dist/components/gui/notification/notification.ce.js

@@ -1,38 +1,64 @@
-import { useProps, useDefineProps, computed, effect, h, DOMContainer, DOMElement, loop, cond, DOMSprite } from 'canvasengine';
-import { inject } from '../../../core/inject.js';
-import { RpgClientEngine } from '../../../RpgClientEngine.js';
-
-// Inject CSS styles into the document head
-if (typeof document !== 'undefined' && !document.getElementById('ce-style--home-runner-work-RPG-JS-RPG-JS-packages-client-src-components-gui-notification-notification-ce')) {
-  const styleElement = document.createElement('style');
-  styleElement.id = 'ce-style--home-runner-work-RPG-JS-RPG-JS-packages-client-src-components-gui-notification-notification-ce';
-  styleElement.textContent = '.notification {\n        pointer-events: none !important;\n    }';
-  document.head.appendChild(styleElement);
+import { inject } from "../../../core/inject.js";
+import { RpgClientEngine } from "../../../RpgClientEngine.js";
+import { DOMContainer, DOMElement, DOMSprite, computed, cond, effect, h, loop, useDefineProps, useProps } from "canvasengine";
+//#region src/components/gui/notification/notification.ce
+if (typeof document !== "undefined" && !document.getElementById("ce-style--home-runner-work-RPG-JS-RPG-JS-packages-client-src-components-gui-notification-notification-ce")) {
+	const styleElement = document.createElement("style");
+	styleElement.id = "ce-style--home-runner-work-RPG-JS-RPG-JS-packages-client-src-components-gui-notification-notification-ce";
+	styleElement.textContent = ".notification {\n        pointer-events: none !important;\n    }";
+	document.head.appendChild(styleElement);
 }
-
-      function component($$props) {
-        useProps($$props);
-        useDefineProps($$props);
-        var engine = inject(RpgClientEngine);
-var notifications = computed(function () { return engine.notificationManager.stack(); });
-var iconSheet = function (iconId) { return ({
-    definition: engine.getSpriteSheet(iconId),
-    playing: "default"
-}); };
-effect(function () {
-    var list = notifications();
-    var rowHeight = 68;
-    list.forEach(function (notif, index) {
-        notif.layoutY.set(index * rowHeight);
-    });
-});
-var notificationStyle = function (notif) { return ({
-    opacity: notif.opacity(),
-    transform: "translateY(".concat(notif.layoutY() + notif.offset(), "px)")
-}); };
-        let $this = h(DOMContainer, { width: '100%', height: '100%', zIndex: 100, attrs: { class: 'notification' } }, h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-notifications' } }, loop(notifications, (notif, index) => h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-notification', 'data-type': computed(() => notif.type || "info"), style: computed(() => notificationStyle(notif)) } }, [cond(notif.icon, () => h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-notification-icon' } }, h(DOMSprite, { sheet: computed(() => iconSheet(notif.icon)) }))), h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-notification-message' }, textContent: notif.message })]))));
-        return $this
-      }
-
+function component($$props) {
+	useProps($$props);
+	useDefineProps($$props);
+	var engine = inject(RpgClientEngine);
+	var notifications = computed(function() {
+		return engine.notificationManager.stack();
+	});
+	var iconSheet = function(iconId) {
+		return {
+			definition: engine.getSpriteSheet(iconId),
+			playing: "default"
+		};
+	};
+	effect(function() {
+		var list = notifications();
+		var rowHeight = 68;
+		list.forEach(function(notif, index) {
+			notif.layoutY.set(index * rowHeight);
+		});
+	});
+	var notificationStyle = function(notif) {
+		return {
+			opacity: notif.opacity(),
+			transform: "translateY(".concat(notif.layoutY() + notif.offset(), "px)")
+		};
+	};
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%",
+		zIndex: 100,
+		attrs: { class: "notification" }
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-notifications" }
+	}, loop(notifications, (notif, index) => h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: "rpg-ui-notification",
+			"data-type": computed(() => notif.type || "info"),
+			style: computed(() => notificationStyle(notif))
+		}
+	}, [cond(notif.icon, () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-notification-icon" }
+	}, h(DOMSprite, { sheet: computed(() => iconSheet(notif.icon)) }))), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-notification-message" },
+		textContent: notif.message
+	})]))));
+}
+//#endregion
 export { component as default };
-//# sourceMappingURL=notification.ce.js.map
+
+//# sourceMappingURL=notification.ce.js.map

package/dist/components/gui/notification/notification.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.ce.js","sources":["../../../../src/components/gui/notification/notification.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" zIndex={100} class=\"notification\">\n    <div class=\"rpg-ui-notifications\">\n        @for ((notif,index) of notifications) {\n            <div\n                class=\"rpg-ui-notification\"\n                data-type={notif.type || \"info\"}\n                style={notificationStyle(notif)}\n            >\n                @if (notif.icon) {\n                    <div class=\"rpg-ui-notification-icon\">\n                        <DOMSprite sheet={iconSheet(notif.icon)} />\n                    </div>\n                }\n                <div class=\"rpg-ui-notification-message\">{notif.message}</div>\n            </div>\n        }\n    </div>\n</DOMContainer>\n\n<style>\n    .notification {\n        pointer-events: none !important;\n    }\n</style>\n\n<script>\n    import { effect, computed } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n\n    const engine = inject(RpgClientEngine);\n    const notifications = computed(() => engine.notificationManager.stack());\n\n    const iconSheet = (iconId) => ({\n        definition: engine.getSpriteSheet(iconId),\n        playing: \"default\"\n    });\n\n    effect(() => {\n        const list = notifications();\n        const rowHeight = 68;\n        list.forEach((notif, index) => {\n            notif.layoutY.set(index * rowHeight);\n        });\n    });\n\n    const notificationStyle = (notif) => ({\n        opacity: notif.opacity(),\n        transform: `translateY(${notif.layoutY() + notif.offset()}px)`\n    });\n</script>\n"],"names":[],"mappings":";;;;AASM;AACN,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,0GAA0G,CAAC,EAAE;AAC7K,EAAE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACtD,EAAE,YAAY,CAAC,EAAE,GAAG,0GAA0G;AAC9H,EAAE,YAAY,CAAC,WAAW,GAAG,kEAAkE;AAC/F,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;AACzC;;AAEA,MAAqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAA4B,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AAC5C,IAAI,aAAa,GAAG,QAAQ,CAAC,YAAY,EAAE,OAAO,MAAM,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;AACxF,IAAI,SAAS,GAAG,UAAU,MAAM,EAAE,EAAE,QAAQ;AAC5C,IAAI,UAAU,EAAE,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC;AAC7C,IAAI,OAAO,EAAE;AACb,CAAC,EAAE,CAAC,CAAC;AACL,MAAM,CAAC,YAAY;AACnB,IAAI,IAAI,IAAI,GAAG,aAAa,EAAE;AAC9B,IAAI,IAAI,SAAS,GAAG,EAAE;AACtB,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,KAAK,EAAE,KAAK,EAAE;AACzC,QAAQ,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC;AAC5C,IAAI,CAAC,CAAC;AACN,CAAC,CAAC;AACF,IAAI,iBAAiB,GAAG,UAAU,KAAK,EAAE,EAAE,QAAQ;AACnD,IAAI,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE;AAC5B,IAAI,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK;AAC3E,CAAC,EAAE,CAAC,CAAC;AACL,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,0BAA0B,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACnrB,QAAQ,OAAO;AACf,MAAM;;;;"}
+{"version":3,"file":"notification.ce.js","names":[],"sources":["../../../../src/components/gui/notification/notification.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" zIndex={100} class=\"notification\">\n    <div class=\"rpg-ui-notifications\">\n        @for ((notif,index) of notifications) {\n            <div\n                class=\"rpg-ui-notification\"\n                data-type={notif.type || \"info\"}\n                style={notificationStyle(notif)}\n            >\n                @if (notif.icon) {\n                    <div class=\"rpg-ui-notification-icon\">\n                        <DOMSprite sheet={iconSheet(notif.icon)} />\n                    </div>\n                }\n                <div class=\"rpg-ui-notification-message\">{notif.message}</div>\n            </div>\n        }\n    </div>\n</DOMContainer>\n\n<style>\n    .notification {\n        pointer-events: none !important;\n    }\n</style>\n\n<script>\n    import { effect, computed } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n\n    const engine = inject(RpgClientEngine);\n    const notifications = computed(() => engine.notificationManager.stack());\n\n    const iconSheet = (iconId) => ({\n        definition: engine.getSpriteSheet(iconId),\n        playing: \"default\"\n    });\n\n    effect(() => {\n        const list = notifications();\n        const rowHeight = 68;\n        list.forEach((notif, index) => {\n            notif.layoutY.set(index * rowHeight);\n        });\n    });\n\n    const notificationStyle = (notif) => ({\n        opacity: notif.opacity(),\n        transform: `translateY(${notif.layoutY() + notif.offset()}px)`\n    });\n</script>\n"],"mappings":";;;;AAUA,IAAI,OAAO,aAAa,eAAW,CAAK,SAAE,eAAsB,2GAAE,EAAA;CAChE,MAAM,eAAc,SAAG,cAAA,QAAA;AACvB,cAAa,KAAC;AACd,cAAa,cAAa;AAC1B,UAAS,KAAG,YAAG,aAAA;;AAGf,SAAY,UAAA,SAAA;;AAER,gBAAA,QAAA;CACD,IAAA,SAAa,OAAA,gBAAA;CAClB,IAAI,gBAAY,SAAa,WAAU;AAAA,SAAA,OAAA,oBAAA,OAAA;GAAA;CACvC,IAAI,YAAA,SAAA,QAAA;AAAA,SAAA;GACF,YAAK,OAAA,eAAA,OAAA;;GAEN;;AACD,QAAI,WAAe;EACf,IAAA,OAAS,eAAiB;EAC1B,IAAA,YAAS;;AAET,SAAM,QAAS,IAAO,QAAA,UAAgB;IACtC;;CAEJ,IAAI,oBAAmB,SAAW,OAAC;AAAA,SAAA;GAC/B,SAAI,MAAW,SAAQ;GACvB,WAAW,cAAU,OAAA,MAAA,SAAA,GAAA,MAAA,QAAA,EAAA,MAAA;GACxB;;AAEG,QAAA,EAAA,cAAA"}