@nebularstreams/statify 3.0.0

package/src.website/src.widgets/widgets.worlds/widgets/LocalBrowser.mjs

@@ -0,0 +1,386 @@
+import m from "mithril";
+import {defineWidget, InputWidget, ButtonNew, Empty, NoticeWidget} from "@nebularstreams/libmui";
+
+import TimeUtils from "../../../src/support/timeutils.mjs"
+
+import "./css/localprojects.css"
+import "./css/input.css";
+
+const
+	DEFAULT_HEADER_CONFIG = {
+		icon: "plug",
+		text: "Connect to Nebular World Editor to test your worlds",
+		size: 2,
+		class: "configbox"
+	},
+	FEATURECLASS = "col-12 col-md-6 col-lg-4 col-xxl-3";
+
+let
+	CREDENTIALS_AVAILABLE = false,
+	EDITOR_AVAILABLE = false,
+
+	PORT = 8888,
+	key = 0,
+	DATA = [0, 0, 0, 0];
+
+async function init() {
+
+	EDITOR_AVAILABLE = false;
+
+	const
+		ip = window.localStorage.getItem("editorIp"),
+		port = window.localStorage.getItem("editorPort") || "8888";
+
+	if (ip) {
+
+		let available = true;
+
+		ip.split(".")
+			.forEach((n, index) => {
+				const g = parseInt(n, 10);
+				if (g >= 0 && g < 255) DATA[index] = g; else available = false;
+			});
+
+		PORT = parseInt(port, 10) || 8888;
+
+		CREDENTIALS_AVAILABLE = available;
+	} else {
+		CREDENTIALS_AVAILABLE = false;
+	}
+
+}
+
+function persistAddress() {
+	if (DATA && PORT) {
+		window.localStorage.setItem("editorIp", DATA.join("."));
+		window.localStorage.setItem("editorPort", PORT);
+	}
+}
+
+function fetchWithTimeout(url, options = {}, timeout = 5000) {
+	// Create a timeout promise
+	const timeoutPromise = new Promise((_, reject) =>
+		setTimeout(() => reject(new Error("Request timed out")), timeout)
+	);
+
+	// Use Promise.race to enforce timeout
+	return Promise.race([
+		fetch(url, options), // Original fetch request
+		timeoutPromise       // Timeout rejection
+	]);
+}
+
+async function connect() {
+
+	if ((DATA[0] < 10 || DATA[0] > 192) || (DATA[3] === 0 || DATA[3] > 253)) {
+		EDITOR_AVAILABLE = false;
+	} else {
+		try {
+
+			const
+				address = `https://${DATA.join(".")}:${PORT}/world/list.json`,
+				response = await fetchWithTimeout(address, {}, 2000),
+				data = response.ok && await response.json();
+
+			if (Array.isArray(data)) {
+				persistAddress();
+				EDITOR_AVAILABLE = true;
+			} else {
+				EDITOR_AVAILABLE = false;
+			}
+		} catch (e) {
+			EDITOR_AVAILABLE = false;
+		}
+	}
+
+}
+
+function cool() {
+	return DATA[0] >= 0 && DATA[1] >= 0 && DATA[2] >= 0 && DATA[3] >= 0 && PORT >= 8000;
+}
+
+const KeyWrapper = defineWidget(
+		({children}) => [children]
+	),
+	ConfigScreen = defineWidget(
+		({attrs}) =>
+			m(".flexcol.w-max.h-100.createscreen", attrs.state?.loading ? [
+				m(Empty, {icon: "sync.fa-spin", size: 2})
+			] : [
+				m(".header", attrs.header),
+				m(".subheader", (attrs.subheaders || []).map((td) => m(".subline", td))),
+				m(ConfigDialog, attrs),
+				m(".instructions", (attrs.instructions || []).map((td) => m(".instruction", td)))
+			])
+	),
+	ConfigDialog = defineWidget(
+		({attrs}) => {
+			const state = attrs.state;
+			return m(
+				NoticeWidget,
+				attrs.headerDialog,
+				[
+					m(".flexrow.gap-2.ipinput", [
+						m(InputWidget, {
+							type: "number",
+							min: 0,
+							max: 255,
+							hint: "192",
+							value: DATA[0],
+							oninput: () => {
+							},
+							onchange: (val) => {
+								DATA[0] = val;
+							}
+						}),
+						m(InputWidget, {
+							type: "number",
+							min: 0,
+							max: 255,
+							hint: "0",
+							value: DATA[1],
+							oninput: () => {
+							},
+							onchange: (val) => {
+								DATA[1] = val;
+							}
+						}),
+						m(InputWidget, {
+							type: "number",
+							min: 0,
+							max: 255,
+							hint: "0",
+							value: DATA[2],
+							oninput: () => {
+							},
+							onchange: (val) => {
+								DATA[2] = val;
+							}
+						}),
+						m(InputWidget, {
+							type: "number",
+							min: 0,
+							max: 255,
+							hint: "0",
+							value: DATA[3],
+							oninput: () => {
+							},
+							onchange: (val) => {
+								DATA[3] = val;
+							}
+						}),
+						m(InputWidget, {
+							type: "number",
+							min: 9000,
+							max: 9999,
+							hint: "9999",
+							value: PORT,
+							oninput: () => {
+							},
+							onchange: (val) => {
+								PORT = val;
+							}
+						})
+					]),
+					...cool()
+						? [
+							m(ButtonNew, {
+									class: "accentbutton connectbutton",
+									text: "connect to Nebular World Editor",
+									onClick: () => {
+
+										state.error = null;
+										state.loading = true;
+										m.redraw();
+
+										connect()
+											.finally(() => {
+												state.loading = false;
+												m.redraw();
+											});
+									}
+								}
+							)
+						]
+						: [],
+					...state.error
+						? [
+							m(NoticeWidget, {
+								icon: "explamation-triangle",
+								text: [
+									"Cannot connect to Nebular World Editor",
+									"Please make sure that your computer is in the same network as your VT Glasses, that Nebular World Application is started and that you have correctly entered the IP Address and Port above.",
+									"Don't have Nebular World Editor installed? You then need to download it here!"
+								]
+							}, [
+								m(ButtonNew, {
+									icon: "download",
+									class: "accentbutton",
+									text: "Download Nebular World Editor",
+									onClick: () => m.route.set("download")
+								})
+							])
+						] : []
+				]
+			);
+
+		}
+	),
+	PlatformEntityMasterList = defineWidget(
+		({attrs, state}) =>
+			m(
+				"ul.flexrow.wrap.grows.scrolly.h-100",
+				{
+					"aria-label": attrs.label,
+					key: "k" + key,
+					class: attrs.class
+				},
+				state.data
+					? [...attrs.header ? [m(NoticeWidget, attrs.header)] : []]
+						.concat((state.data || [])
+							.filter((a) => a.isDirectory)
+							.sort(attrs.sorter || ((a, b) => a.date < b.date ? 1 : -1))
+							.map((item) => m(attrs.TemplateItem, {
+								item,
+								state,
+								featured: false,
+								class: "fadein pad-2 " + (attrs.params?.featureClass || FEATURECLASS),
+								innerClass: attrs.params?.innerClass || "growgrid graytrx shadow-1",
+								titleClass: attrs.params?.titleClass || "",
+								noTitleIcon: attrs.params?.noTitleIcon,
+								noTitleChannel: attrs.params?.noTitleChannel,
+								itemClass: attrs.params?.itemClass || "",
+								imageClass: attrs.params?.imageClass || "",
+								shortPath: !!attrs.params?.shortPath,
+								localhost: attrs.localhost,
+								onClick: () => {
+									window.clearTimeout(state.timer);
+									state.timer = window.setTimeout(
+										() => attrs.onSelect(item, attrs.params?.htmlRoot),
+										200
+									);
+								}
+							}))
+						)
+					: m(Empty, state.loading
+						? {
+							icon: "sync.fa-spin",
+							size: 4
+						}
+						: {
+							icon: attrs.icon,
+							size: 4,
+							message: attrs.message
+						})),
+
+		({attrs, state}) => {
+			state.loading = true;
+			attrs.request()
+				.then((data) => {
+					state.data = data;
+					state.empty = !data.length;
+				})
+				.catch((e) => {
+					state.error = e;
+				})
+				.finally(() => {
+					state.loading = false;
+					m.redraw();
+				});
+		});
+
+const
+	ProjectItem = defineWidget(
+		({attrs}) => m(
+			".project.flexcol.pad-1.fadein",
+			{class: attrs.class},
+			m(".inner.w-max.flexcol", {
+					onclick: (e) => e.target.nodeName !== "BUTTON" && attrs.onClick(attrs.item),
+					...attrs.item && {style: {backgroundImage: "url(" + attrs.localhost + "/world/" + attrs.item.name + "/meta/logo.jpg)"}}
+				}
+			),
+			m(".lineinfo.flexrow", attrs.item ? [
+				m(".title", attrs.item.meta?.title || attrs.item.name || "Untitled"),
+				m(".grows"),
+				m(".date", TimeUtils.getTimeInterval(attrs.item.date))
+			] : [])
+		)
+	);
+
+const LocalBrowserWidget = defineWidget(
+	({attrs, state}) => {
+
+		return state.uninit
+			? m("ul.flexrow.wrap.grows.h-100", m(Empty, {
+				icon: "sync.fa-spin",
+				size: 3
+			}))
+			// user supplied credentials
+			: CREDENTIALS_AVAILABLE
+				// that have been successful
+				? EDITOR_AVAILABLE
+					? m(KeyWrapper, [
+						m(
+							PlatformEntityMasterList,
+							{
+								key,
+								class: "projectlist",
+								label: "List of worlds",
+								type: "project",
+								icon: "globe",
+								params: attrs.static,
+								message: ["Local worlds are not available at the moment", "Please try again later"].join("\n"),
+								request: async () => {
+									const response = await fetch(state.localhost + "/world/list.json");
+									if (response.ok) {
+										return response.json();
+									} else {
+										throw new Error("Not connected");
+									}
+								},
+								onSelect: (item) => {
+									// window.location.href = `/${item.type}/${item.id}`;
+									window.location.href = `/${item.type}/${item.id}?local=1`;
+								},
+								TemplateItem: ProjectItem,
+								localhost: state.localhost
+							}
+						)])
+					: m(ConfigScreen, {
+						state,
+						header: attrs.static.header || "Bring Your Ideas To Life!",
+						subheaders: attrs.static.subheaders || ["Step into the next level by creating your own immersive world.", "Connect to the Nebular World Editor to start building your adventure!"],
+						headerDialog: attrs.static.headerDialog || DEFAULT_HEADER_CONFIG,
+						instructions: attrs.static.instructions || [
+							"How to Connect",
+							"Open the Nebular World Editor on your computer",
+							"Locate the IP address displayed in the editor",
+							"Enter the IP address and port number below",
+							"Click Connect to display your local projects."
+						]
+					})
+				: m(ConfigScreen, {
+					state,
+					header: attrs.static.header || "Bring Your Ideas To Life!",
+					subheaders: attrs.static.subheaders || ["Step into the next level by creating your own immersive world.", "Connect to the Nebular World Editor to start building your adventure!"],
+					headerDialog: attrs.static.headerDialog || DEFAULT_HEADER_CONFIG,
+					instructions: attrs.static.instructions || [
+						"How to Connect",
+						"Open the Nebular World Editor on your computer",
+						"Locate the IP address displayed in the editor",
+						"Enter the IP address and port number below",
+						"Click Connect to display your local projects."
+					]
+				});
+	},
+	({state}) => {
+		state.uninit = true;
+		init(state)
+			.then(() => {
+				state.uninit = false;
+				m.redraw();
+			});
+	}
+);
+
+export default LocalBrowserWidget;

package/src.website/src.widgets/widgets.worlds/widgets/LocalLauncher.code.mjs

@@ -0,0 +1,247 @@
+import m from "mithril";
+import {defineWidget, InputWidget, ButtonNew, Empty, NoticeWidget} from "@nebularstreams/libmui";
+
+const
+
+	PORT = 8888,
+
+	ipDecoder = (() => {
+
+		// Alphabet for encoding (letters only)
+		const
+			alphabet = "23456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
+			base = alphabet.length; // Base-52 encoding
+
+		return (encoded) => {
+			let intIp = 0;
+
+			// Decode the base-52 string into a 32-bit integer
+			for (let char of encoded) {
+				const value = alphabet.indexOf(char);
+				if (value === -1) {
+					return null;
+				}
+				intIp = intIp * base + value;
+			}
+
+			// Convert the 32-bit integer back into an IPv4 address
+			return [
+				(intIp >> 24) & 0xff,
+				(intIp >> 16) & 0xff,
+				(intIp >> 8) & 0xff,
+				intIp & 0xff
+			].join(".");
+		};
+	})(),
+
+	DEFAULT_HEADER_CONFIG = {
+		icon: "plug",
+		text: "Connect to Nebular World Editor to test your worlds",
+		size: 2,
+		class: "configbox"
+	};
+
+let
+	CREDENTIALS_AVAILABLE = false,
+	EDITOR_AVAILABLE = false,
+
+	CODE = "",
+	DATA = [];
+
+async function init() {
+
+	EDITOR_AVAILABLE = false;
+
+	const
+		code = window.localStorage.getItem("editorCode");
+
+	if (code) {
+
+		let available = true;
+
+		const ip = ipDecoder(code);
+
+		ip.split(".")
+			.forEach((n, index) => {
+				const g = parseInt(n, 10);
+				if (g >= 0 && g < 255) DATA[index] = g; else available = false;
+			});
+
+		CREDENTIALS_AVAILABLE = available;
+	} else {
+		CREDENTIALS_AVAILABLE = false;
+	}
+
+}
+
+function persistAddress() {
+	if (CODE) {
+		window.localStorage.setItem("editorCode", CODE);
+		CREDENTIALS_AVAILABLE = true;
+	}
+}
+
+function fetchWithTimeout(url, options = {}, timeout = 5000) {
+	// Create a timeout promise
+	const timeoutPromise = new Promise((_, reject) =>
+		setTimeout(() => reject(new Error("Request timed out")), timeout)
+	);
+
+	// Use Promise.race to enforce timeout
+	return Promise.race([
+		fetch(url, options), // Original fetch request
+		timeoutPromise       // Timeout rejection
+	]);
+}
+
+async function connect(state) {
+
+	if (cool()) {
+
+		const ipAddress = ipDecoder(CODE);
+
+		try {
+
+			state.portalUrl = `https://${ipAddress}:${PORT}`;
+
+			const t = Date.now();
+			state.loading = true;
+			m.redraw();
+
+			fetchWithTimeout(state.portalUrl, {}, 1000)
+				.catch((e) => {
+					console.error("LAUNCHER", "Fetch Error", e);
+				})
+				.finally(() => {
+
+					state.loading = false;
+					m.redraw();
+
+					if (Date.now() - t < 500) {
+						persistAddress();
+						EDITOR_AVAILABLE = true;
+						window.open(state.portalUrl, "editor");
+					}
+				});
+		} catch (e) {
+			EDITOR_AVAILABLE = false;
+		}
+	} else {
+		EDITOR_AVAILABLE = false;
+	}
+
+}
+
+function cool() {
+	return CODE.length >= 5;
+}
+
+const
+	ConfigScreen = defineWidget(
+		({ attrs }) =>
+			m(".flexcol.w-max.h-100.createscreen", attrs.state?.loading ? [
+				m(Empty, { icon: "sync.fa-spin", size: 2 })
+			] : [
+				m(".header", attrs.header),
+				m(".subheader", (attrs.subheaders || []).map((td) => m(".subline", td))),
+				m(ConfigDialog, attrs),
+				m(".instructions", (attrs.instructions || []).map((td) => m(".instruction", td)))
+			])
+	),
+	ConfigDialog = defineWidget(
+		({ attrs }) => {
+			const state = attrs.state;
+			return m(
+				NoticeWidget,
+				attrs.headerDialog,
+				[
+					m(".flexrow.gap-2.ipinput", [
+						m(InputWidget, {
+							type: "text",
+							maxlength: 8,
+							hint: "--------",
+							value: CODE,
+							oninput: () => {},
+							onchange: (val) => {CODE = val;}
+						})
+					]),
+					...cool()
+						? [
+							m(ButtonNew, {
+									class: "accentbutton connectbutton",
+									text: "connect to Nebular World Editor",
+									onClick: () => {
+
+										state.error = null;
+										state.loading = true;
+										m.redraw();
+
+										connect(state)
+											.finally(() => {
+												state.loading = false;
+												m.redraw();
+											});
+									}
+								}
+							)
+						]
+						: [],
+					...state.error
+						? [
+							m(NoticeWidget, {
+								icon: "explamation-triangle",
+								text: [
+									"Cannot connect to Nebular World Editor",
+									"Please make sure that your computer is in the same network as your VR Glasses, that Nebular World Application is started and that you have correctly entered the IP Address and Port above.",
+									"Don't have Nebular World Editor installed? You then need to download it here!"
+								]
+							}, [
+								m(ButtonNew, {
+									icon: "download",
+									class: "accentbutton",
+									text: "Download Nebular World Editor",
+									onClick: () => m.route.set("download")
+								})
+							])
+						] : []
+				]
+			);
+
+		}
+	);
+
+const
+	LocalLauncher = defineWidget(
+		({ attrs, state }) => {
+
+			return state.uninit
+				? m("ul.flexrow.wrap.grows.h-100", m(Empty, {
+					icon: "sync.fa-spin",
+					size: 3
+				}))
+				// user supplied credentials
+				: m(ConfigScreen, {
+					state,
+					header: attrs.static.header || "Bring Your Ideas To Life!",
+					subheaders: attrs.static.subheaders || ["Step into the next level by creating your own immersive world.", "Connect to the Nebular World Editor to start building your adventure!"],
+					headerDialog: attrs.static.headerDialog || DEFAULT_HEADER_CONFIG,
+					instructions: attrs.static.instructions || [
+						"How to Connect",
+						"Open the Nebular World Editor on your computer",
+						"Locate the connection code displayed in the Settings Screen",
+						"Enter the code in the box below",
+						"Click the Connect Button to display your local projects."
+					]
+				});
+		},
+		({ state }) => {
+			state.uninit = true;
+			init(state)
+				.then(() => {
+					state.uninit = false;
+					m.redraw();
+				});
+		}
+	);
+
+export default LocalLauncher;