@needle-tools/engine 2.35.4-pre → 2.36.0-pre

package/src/engine/codegen/register_types.js

@@ -1,150 +1,442 @@
 import { TypeStore } from "./../engine_typestore"
+import {$BuiltInTypeFlag} from "./../engine_typestore"
 
 // Import types
 import { AlignmentConstraint } from "../../engine-components/AlignmentConstraint.ts";
+AlignmentConstraint[$BuiltInTypeFlag] = true;
+
 import { Animation } from "../../engine-components/Animation.ts";
+Animation[$BuiltInTypeFlag] = true;
+
 import { AnimationCurve } from "../../engine-components/AnimationCurve.ts";
+AnimationCurve[$BuiltInTypeFlag] = true;
+
 import { Animator } from "../../engine-components/Animator.ts";
+Animator[$BuiltInTypeFlag] = true;
+
 import { AnimatorController } from "../../engine-components/AnimatorController.ts";
+AnimatorController[$BuiltInTypeFlag] = true;
+
 import { AudioListener } from "../../engine-components/AudioListener.ts";
+AudioListener[$BuiltInTypeFlag] = true;
+
 import { AudioSource } from "../../engine-components/AudioSource.ts";
+AudioSource[$BuiltInTypeFlag] = true;
+
 import { AvatarModel } from "../../engine-components/AvatarLoader.ts";
+AvatarModel[$BuiltInTypeFlag] = true;
+
 import { AvatarLoader } from "../../engine-components/AvatarLoader.ts";
+AvatarLoader[$BuiltInTypeFlag] = true;
+
 import { AxesHelper } from "../../engine-components/AxesHelper.ts";
+AxesHelper[$BuiltInTypeFlag] = true;
+
 import { BasicIKConstraint } from "../../engine-components/BasicIKConstraint.ts";
+BasicIKConstraint[$BuiltInTypeFlag] = true;
+
 import { BoxHelperComponent } from "../../engine-components/BoxHelperComponent.ts";
+BoxHelperComponent[$BuiltInTypeFlag] = true;
+
 import { Camera } from "../../engine-components/Camera.ts";
+Camera[$BuiltInTypeFlag] = true;
+
 import { Collider } from "../../engine-components/Collider.ts";
+Collider[$BuiltInTypeFlag] = true;
+
 import { SphereCollider } from "../../engine-components/Collider.ts";
+SphereCollider[$BuiltInTypeFlag] = true;
+
 import { BoxCollider } from "../../engine-components/Collider.ts";
+BoxCollider[$BuiltInTypeFlag] = true;
+
 import { DeleteBox } from "../../engine-components/DeleteBox.ts";
+DeleteBox[$BuiltInTypeFlag] = true;
+
 import { Deletable } from "../../engine-components/DeleteBox.ts";
+Deletable[$BuiltInTypeFlag] = true;
+
 import { DeviceFlag } from "../../engine-components/DeviceFlag.ts";
+DeviceFlag[$BuiltInTypeFlag] = true;
+
 import { DragControls } from "../../engine-components/DragControls.ts";
+DragControls[$BuiltInTypeFlag] = true;
+
 import { DropListener } from "../../engine-components/DropListener.ts";
+DropListener[$BuiltInTypeFlag] = true;
+
 import { Duplicatable } from "../../engine-components/Duplicatable.ts";
+Duplicatable[$BuiltInTypeFlag] = true;
+
 import { CallInfo } from "../../engine-components/EventList.ts";
+CallInfo[$BuiltInTypeFlag] = true;
+
 import { EventListEvent } from "../../engine-components/EventList.ts";
+EventListEvent[$BuiltInTypeFlag] = true;
+
 import { EventList } from "../../engine-components/EventList.ts";
+EventList[$BuiltInTypeFlag] = true;
+
 import { EventTrigger } from "../../engine-components/EventTrigger.ts";
+EventTrigger[$BuiltInTypeFlag] = true;
+
 import { FlyControls } from "../../engine-components/FlyControls.ts";
+FlyControls[$BuiltInTypeFlag] = true;
+
 import { BoxGizmo } from "../../engine-components/Gizmos.ts";
+BoxGizmo[$BuiltInTypeFlag] = true;
+
 import { GltfExportBox } from "../../engine-components/GltfExport.ts";
+GltfExportBox[$BuiltInTypeFlag] = true;
+
 import { GltfExport } from "../../engine-components/GltfExport.ts";
+GltfExport[$BuiltInTypeFlag] = true;
+
 import { GridHelper } from "../../engine-components/GridHelper.ts";
+GridHelper[$BuiltInTypeFlag] = true;
+
 import { GroundProjectedEnv } from "../../engine-components/GroundProjection.ts";
+GroundProjectedEnv[$BuiltInTypeFlag] = true;
+
 import { Interactable } from "../../engine-components/Interactable.ts";
+Interactable[$BuiltInTypeFlag] = true;
+
 import { UsageMarker } from "../../engine-components/Interactable.ts";
+UsageMarker[$BuiltInTypeFlag] = true;
+
 import { Light } from "../../engine-components/Light.ts";
+Light[$BuiltInTypeFlag] = true;
+
 import { LODModel } from "../../engine-components/LODGroup.ts";
+LODModel[$BuiltInTypeFlag] = true;
+
 import { LODGroup } from "../../engine-components/LODGroup.ts";
+LODGroup[$BuiltInTypeFlag] = true;
+
 import { LookAtConstraint } from "../../engine-components/LookAtConstraint.ts";
+LookAtConstraint[$BuiltInTypeFlag] = true;
+
 import { NavMesh } from "../../engine-components/NavMesh.ts";
+NavMesh[$BuiltInTypeFlag] = true;
+
 import { NavMeshAgent } from "../../engine-components/NavMesh.ts";
+NavMeshAgent[$BuiltInTypeFlag] = true;
+
 import { NestedGltf } from "../../engine-components/NestedGltf.ts";
+NestedGltf[$BuiltInTypeFlag] = true;
+
 import { Networking } from "../../engine-components/Networking.ts";
+Networking[$BuiltInTypeFlag] = true;
+
 import { OffsetConstraint } from "../../engine-components/OffsetConstraint.ts";
+OffsetConstraint[$BuiltInTypeFlag] = true;
+
 import { OrbitControls } from "../../engine-components/OrbitControls.ts";
+OrbitControls[$BuiltInTypeFlag] = true;
+
 import { ParticleSystemRenderer } from "../../engine-components/ParticleSystem.ts";
+ParticleSystemRenderer[$BuiltInTypeFlag] = true;
+
 import { ParticleSystem } from "../../engine-components/ParticleSystem.ts";
+ParticleSystem[$BuiltInTypeFlag] = true;
+
 import { MainModule } from "../../engine-components/ParticleSystemModules.ts";
+MainModule[$BuiltInTypeFlag] = true;
+
 import { EmissionModule } from "../../engine-components/ParticleSystemModules.ts";
+EmissionModule[$BuiltInTypeFlag] = true;
+
 import { ShapeModule } from "../../engine-components/ParticleSystemModules.ts";
+ShapeModule[$BuiltInTypeFlag] = true;
+
 import { PlayerColor } from "../../engine-components/PlayerColor.ts";
+PlayerColor[$BuiltInTypeFlag] = true;
+
+import { ReflectionProbe } from "../../engine-components/ReflectionProbe.ts";
+ReflectionProbe[$BuiltInTypeFlag] = true;
+
 import { FieldWithDefault } from "../../engine-components/Renderer.ts";
+FieldWithDefault[$BuiltInTypeFlag] = true;
+
 import { Renderer } from "../../engine-components/Renderer.ts";
+Renderer[$BuiltInTypeFlag] = true;
+
 import { MeshRenderer } from "../../engine-components/Renderer.ts";
+MeshRenderer[$BuiltInTypeFlag] = true;
+
 import { SkinnedMeshRenderer } from "../../engine-components/Renderer.ts";
+SkinnedMeshRenderer[$BuiltInTypeFlag] = true;
+
 import { RendererLightmap } from "../../engine-components/RendererLightmap.ts";
+RendererLightmap[$BuiltInTypeFlag] = true;
+
 import { Rigidbody } from "../../engine-components/RigidBody.ts";
+Rigidbody[$BuiltInTypeFlag] = true;
+
 import { ScreenCapture } from "../../engine-components/ScreenCapture.ts";
+ScreenCapture[$BuiltInTypeFlag] = true;
+
 import { ShadowCatcher } from "../../engine-components/ShadowCatcher.ts";
+ShadowCatcher[$BuiltInTypeFlag] = true;
+
 import { RemoteSkybox } from "../../engine-components/Skybox.ts";
+RemoteSkybox[$BuiltInTypeFlag] = true;
+
 import { SmoothFollow } from "../../engine-components/SmoothFollow.ts";
+SmoothFollow[$BuiltInTypeFlag] = true;
+
 import { SpatialTriggerReceiver } from "../../engine-components/SpatialTrigger.ts";
+SpatialTriggerReceiver[$BuiltInTypeFlag] = true;
+
 import { SpatialTrigger } from "../../engine-components/SpatialTrigger.ts";
+SpatialTrigger[$BuiltInTypeFlag] = true;
+
 import { SpectatorCamera } from "../../engine-components/SpectatorCamera.ts";
+SpectatorCamera[$BuiltInTypeFlag] = true;
+
 import { SpringJoint } from "../../engine-components/SpringJoint.ts";
+SpringJoint[$BuiltInTypeFlag] = true;
+
 import { Sprite } from "../../engine-components/SpriteRenderer.ts";
+Sprite[$BuiltInTypeFlag] = true;
+
 import { SpriteRenderer } from "../../engine-components/SpriteRenderer.ts";
+SpriteRenderer[$BuiltInTypeFlag] = true;
+
 import { SyncedCamera } from "../../engine-components/SyncedCamera.ts";
+SyncedCamera[$BuiltInTypeFlag] = true;
+
 import { SyncedRoom } from "../../engine-components/SyncedRoom.ts";
+SyncedRoom[$BuiltInTypeFlag] = true;
+
 import { SyncedTransform } from "../../engine-components/SyncedTransform.ts";
+SyncedTransform[$BuiltInTypeFlag] = true;
+
 import { TestRunner } from "../../engine-components/TestRunner.ts";
+TestRunner[$BuiltInTypeFlag] = true;
+
 import { TestSimulateUserData } from "../../engine-components/TestRunner.ts";
+TestSimulateUserData[$BuiltInTypeFlag] = true;
+
 import { TransformGizmo } from "../../engine-components/TransformGizmo.ts";
+TransformGizmo[$BuiltInTypeFlag] = true;
+
 import { VideoPlayer } from "../../engine-components/VideoPlayer.ts";
+VideoPlayer[$BuiltInTypeFlag] = true;
+
 import { Voip } from "../../engine-components/Voip.ts";
+Voip[$BuiltInTypeFlag] = true;
+
 import { VolumeParameter } from "../../engine-components/Volume.ts";
+VolumeParameter[$BuiltInTypeFlag] = true;
+
 import { VolumeComponent } from "../../engine-components/Volume.ts";
+VolumeComponent[$BuiltInTypeFlag] = true;
+
 import { ToneMapping } from "../../engine-components/Volume.ts";
+ToneMapping[$BuiltInTypeFlag] = true;
+
 import { ColorAdjustments } from "../../engine-components/Volume.ts";
+ColorAdjustments[$BuiltInTypeFlag] = true;
+
 import { VolumeProfile } from "../../engine-components/Volume.ts";
+VolumeProfile[$BuiltInTypeFlag] = true;
+
 import { Volume } from "../../engine-components/Volume.ts";
+Volume[$BuiltInTypeFlag] = true;
+
 import { WebARSessionRoot } from "../../engine-components/WebARSessionRoot.ts";
+WebARSessionRoot[$BuiltInTypeFlag] = true;
+
 import { WebXR } from "../../engine-components/WebXR.ts";
+WebXR[$BuiltInTypeFlag] = true;
+
 import { WebAR } from "../../engine-components/WebXR.ts";
+WebAR[$BuiltInTypeFlag] = true;
+
 import { AvatarMarker } from "../../engine-components/WebXRAvatar.ts";
+AvatarMarker[$BuiltInTypeFlag] = true;
+
 import { WebXRAvatar } from "../../engine-components/WebXRAvatar.ts";
+WebXRAvatar[$BuiltInTypeFlag] = true;
+
 import { TeleportTarget } from "../../engine-components/WebXRController.ts";
+TeleportTarget[$BuiltInTypeFlag] = true;
+
 import { WebXRController } from "../../engine-components/WebXRController.ts";
+WebXRController[$BuiltInTypeFlag] = true;
+
 import { AttachedObject } from "../../engine-components/WebXRController.ts";
+AttachedObject[$BuiltInTypeFlag] = true;
+
 import { XRGrabModel } from "../../engine-components/WebXRGrabRendering.ts";
+XRGrabModel[$BuiltInTypeFlag] = true;
+
 import { XRGrabRendering } from "../../engine-components/WebXRGrabRendering.ts";
+XRGrabRendering[$BuiltInTypeFlag] = true;
+
 import { XRRig } from "../../engine-components/WebXRRig.ts";
+XRRig[$BuiltInTypeFlag] = true;
+
 import { VRUserState } from "../../engine-components/WebXRSync.ts";
+VRUserState[$BuiltInTypeFlag] = true;
+
 import { WebXRSync } from "../../engine-components/WebXRSync.ts";
+WebXRSync[$BuiltInTypeFlag] = true;
+
 import { XRState } from "../../engine-components/XRFlag.ts";
+XRState[$BuiltInTypeFlag] = true;
+
 import { XRFlag } from "../../engine-components/XRFlag.ts";
+XRFlag[$BuiltInTypeFlag] = true;
+
 import { AvatarBlink_Simple } from "../../engine-components/avatar/AvatarBlink_Simple.ts";
+AvatarBlink_Simple[$BuiltInTypeFlag] = true;
+
 import { AvatarEyeLook_Rotation } from "../../engine-components/avatar/AvatarEyeLook_Rotation.ts";
+AvatarEyeLook_Rotation[$BuiltInTypeFlag] = true;
+
 import { Avatar_POI } from "../../engine-components/avatar/Avatar_Brain_LookAt.ts";
+Avatar_POI[$BuiltInTypeFlag] = true;
+
 import { Avatar_Brain_LookAt } from "../../engine-components/avatar/Avatar_Brain_LookAt.ts";
+Avatar_Brain_LookAt[$BuiltInTypeFlag] = true;
+
 import { Avatar_MouthShapes } from "../../engine-components/avatar/Avatar_MouthShapes.ts";
+Avatar_MouthShapes[$BuiltInTypeFlag] = true;
+
 import { Avatar_MustacheShake } from "../../engine-components/avatar/Avatar_MustacheShake.ts";
+Avatar_MustacheShake[$BuiltInTypeFlag] = true;
+
 import { __Ignore } from "../../engine-components/codegen/components.ts";
+__Ignore[$BuiltInTypeFlag] = true;
+
 import { LogStats } from "../../engine-components/debug/LogStats.ts";
+LogStats[$BuiltInTypeFlag] = true;
+
 import { RGBAColor } from "../../engine-components/js-extensions/RGBAColor.ts";
+RGBAColor[$BuiltInTypeFlag] = true;
+
 import { PlayableDirector } from "../../engine-components/timeline/PlayableDirector.ts";
+PlayableDirector[$BuiltInTypeFlag] = true;
+
 import { SignalAsset } from "../../engine-components/timeline/SignalAsset.ts";
+SignalAsset[$BuiltInTypeFlag] = true;
+
 import { SignalReceiverEvent } from "../../engine-components/timeline/SignalAsset.ts";
+SignalReceiverEvent[$BuiltInTypeFlag] = true;
+
 import { SignalReceiver } from "../../engine-components/timeline/SignalAsset.ts";
+SignalReceiver[$BuiltInTypeFlag] = true;
+
 import { AnimationTrackHandler } from "../../engine-components/timeline/TimelineTracks.ts";
+AnimationTrackHandler[$BuiltInTypeFlag] = true;
+
 import { AudioTrackHandler } from "../../engine-components/timeline/TimelineTracks.ts";
+AudioTrackHandler[$BuiltInTypeFlag] = true;
+
 import { SignalTrackHandler } from "../../engine-components/timeline/TimelineTracks.ts";
+SignalTrackHandler[$BuiltInTypeFlag] = true;
+
 import { ControlTrackHandler } from "../../engine-components/timeline/TimelineTracks.ts";
+ControlTrackHandler[$BuiltInTypeFlag] = true;
+
 import { BaseUIComponent } from "../../engine-components/ui/BaseUIComponent.ts";
+BaseUIComponent[$BuiltInTypeFlag] = true;
+
 import { UIRootComponent } from "../../engine-components/ui/BaseUIComponent.ts";
+UIRootComponent[$BuiltInTypeFlag] = true;
+
 import { Button } from "../../engine-components/ui/Button.ts";
+Button[$BuiltInTypeFlag] = true;
+
 import { Canvas } from "../../engine-components/ui/Canvas.ts";
+Canvas[$BuiltInTypeFlag] = true;
+
 import { CanvasGroup } from "../../engine-components/ui/CanvasGroup.ts";
+CanvasGroup[$BuiltInTypeFlag] = true;
+
 import { EventSystem } from "../../engine-components/ui/EventSystem.ts";
+EventSystem[$BuiltInTypeFlag] = true;
+
 import { Graphic } from "../../engine-components/ui/Graphic.ts";
+Graphic[$BuiltInTypeFlag] = true;
+
 import { MaskableGraphic } from "../../engine-components/ui/Graphic.ts";
+MaskableGraphic[$BuiltInTypeFlag] = true;
+
 import { Image } from "../../engine-components/ui/Image.ts";
+Image[$BuiltInTypeFlag] = true;
+
 import { RawImage } from "../../engine-components/ui/Image.ts";
+RawImage[$BuiltInTypeFlag] = true;
+
 import { InputField } from "../../engine-components/ui/InputField.ts";
+InputField[$BuiltInTypeFlag] = true;
+
 import { Keyboard } from "../../engine-components/ui/Keyboard.ts";
+Keyboard[$BuiltInTypeFlag] = true;
+
 import { LayoutGroup } from "../../engine-components/ui/Layout.ts";
+LayoutGroup[$BuiltInTypeFlag] = true;
+
 import { VerticalLayoutGroup } from "../../engine-components/ui/Layout.ts";
+VerticalLayoutGroup[$BuiltInTypeFlag] = true;
+
 import { HorizontalLayoutGroup } from "../../engine-components/ui/Layout.ts";
+HorizontalLayoutGroup[$BuiltInTypeFlag] = true;
+
 import { GridLayoutGroup } from "../../engine-components/ui/Layout.ts";
+GridLayoutGroup[$BuiltInTypeFlag] = true;
+
 import { PointerEventData } from "../../engine-components/ui/PointerEvents.ts";
+PointerEventData[$BuiltInTypeFlag] = true;
+
 import { Raycaster } from "../../engine-components/ui/Raycaster.ts";
+Raycaster[$BuiltInTypeFlag] = true;
+
 import { ObjectRaycaster } from "../../engine-components/ui/Raycaster.ts";
+ObjectRaycaster[$BuiltInTypeFlag] = true;
+
 import { GraphicRaycaster } from "../../engine-components/ui/Raycaster.ts";
+GraphicRaycaster[$BuiltInTypeFlag] = true;
+
 import { UIRaycastUtils } from "../../engine-components/ui/RaycastUtils.ts";
+UIRaycastUtils[$BuiltInTypeFlag] = true;
+
 import { Size } from "../../engine-components/ui/RectTransform.ts";
+Size[$BuiltInTypeFlag] = true;
+
 import { Rect } from "../../engine-components/ui/RectTransform.ts";
+Rect[$BuiltInTypeFlag] = true;
+
 import { RectTransform } from "../../engine-components/ui/RectTransform.ts";
+RectTransform[$BuiltInTypeFlag] = true;
+
 import { SpatialHtml } from "../../engine-components/ui/SpatialHtml.ts";
+SpatialHtml[$BuiltInTypeFlag] = true;
+
 import { Text } from "../../engine-components/ui/Text.ts";
+Text[$BuiltInTypeFlag] = true;
+
 import { PresentationMode } from "../../engine-components-experimental/Presentation.ts";
+PresentationMode[$BuiltInTypeFlag] = true;
+
 import { LinesDrawer } from "../../engine-components-experimental/annotation/LineDrawer.ts";
+LinesDrawer[$BuiltInTypeFlag] = true;
+
 import { LineInstanceHandler } from "../../engine-components-experimental/annotation/LinesManager.ts";
+LineInstanceHandler[$BuiltInTypeFlag] = true;
+
 import { LinesManager } from "../../engine-components-experimental/annotation/LinesManager.ts";
+LinesManager[$BuiltInTypeFlag] = true;
+
 import { PlayerSync } from "../../engine-components-experimental/networking/PlayerSync.ts";
+PlayerSync[$BuiltInTypeFlag] = true;
+
 import { PlayerState } from "../../engine-components-experimental/networking/PlayerSync.ts";
+PlayerState[$BuiltInTypeFlag] = true;
+
 
 // Register types
 TypeStore.add("AlignmentConstraint", AlignmentConstraint);
@@ -197,6 +489,7 @@ TypeStore.add("MainModule", MainModule);
 TypeStore.add("EmissionModule", EmissionModule);
 TypeStore.add("ShapeModule", ShapeModule);
 TypeStore.add("PlayerColor", PlayerColor);
+TypeStore.add("ReflectionProbe", ReflectionProbe);
 TypeStore.add("FieldWithDefault", FieldWithDefault);
 TypeStore.add("Renderer", Renderer);
 TypeStore.add("MeshRenderer", MeshRenderer);

package/src/engine/debug/debug.ts

@@ -0,0 +1,9 @@
+import { addLog, LogType } from "./debug_overlay";
+
+export { LogType };
+
+export function showBalloonMessage(text: string, logType: LogType = LogType.Log) {
+    addLog(logType, text);
+    // addLog(LogType.Error, text);
+    // addLog(LogType.Log, text);
+}

package/src/engine/debug/debug_overlay.ts

@@ -0,0 +1,224 @@
+import { getParam } from "../engine_utils";
+import { isLocalNetwork } from "../engine_networking_utils";
+import { Context } from "../engine_setup";
+import { arContainerClassName } from "../engine_element_overlay";
+
+const debug = getParam("debugdebug");
+const hide = getParam("noerrors");
+
+const errorContainer: Map<HTMLElement, HTMLElement> = new Map();
+const locationRegex = new RegExp("    at .+\/(.+?\.ts)", "g");
+
+export enum LogType {
+    Log,
+    Warn,
+    Error
+}
+
+
+export function makeErrorsVisibleForDevelopment() {
+    if (hide) return;
+    if (isLocalNetwork()) {
+        if (debug)
+            console.log(window.location.hostname);
+        const error = console.error;
+        console.error = (...args: any[]) => {
+            error.apply(console, args);
+            addLog(LogType.Error, args, null, null);
+        };
+        window.addEventListener("error", (event) => {
+            if (!event) return;
+            addLog(LogType.Error, event.error, event.filename, event.lineno);
+        }, true);
+        window.addEventListener("unhandledrejection", (event) => {
+            if (!event) return;
+            addLog(LogType.Error, event.reason.message, event.reason.stack);
+        });
+    }
+}
+
+
+
+export function addLog(type: LogType, message: string | any[], _file?: string | null, _line?: number | null) {
+    if(hide) return;
+    const context = Context.Current;
+    const domElement = context?.domElement ?? document.querySelector("needle-engine");
+    if (!domElement) return;
+    if (Array.isArray(message)) {
+        let newMessage = "";
+        for(let i = 0; i < message.length; i++) {
+            if(typeof message[i] === "object") continue;
+            if(i > 0) newMessage += " ";
+            newMessage += message[i];
+        }
+        message = newMessage;
+    }
+    showMessage(type, domElement, message);
+}
+
+// function getLocation(err: Error): string {
+//     const location = err.stack;
+//     console.log(location);
+//     if (location) {
+//         locationRegex.exec(location);
+//         const match = locationRegex.exec(location);
+//         return match ? match[1] : "";
+//     }
+//     return "";
+// }
+
+const currentMessages = new Set<string>();
+
+function showMessage(type: LogType, element: HTMLElement, msg: string) {
+    const container = getLogsContainer(element);
+    if (container.childElementCount >= 20) {
+        return;
+    }
+    if (currentMessages.has(msg)) return;
+    currentMessages.add(msg);
+    const msgcontainer = getMessageContainer(type, msg);
+    container.prepend(msgcontainer);
+
+    setTimeout(() => {
+        currentMessages.delete(msg);
+        returnMessageContainer(msgcontainer);
+    }, 10000);
+}
+
+
+const logsContainerStyles = `
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+
+div {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+}
+
+strong {
+    font-weight: 700;
+}
+
+a {
+    color: white;
+    text-decoration: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+a:hover {
+    text-decoration: none;
+    border: none;
+}
+
+.log strong {
+    color: rgba(200,200,200,.9);
+}
+
+.warn strong {
+    color: rgba(255,255,230, 1);
+}
+
+.error strong {
+    color: rgba(255,100,120, 1);
+}
+
+`;
+
+function getLogsContainer(domElement: HTMLElement): HTMLElement {
+    if (errorContainer.has(domElement)) {
+        return errorContainer.get(domElement)!;
+    } else {
+        const container = document.createElement("div");
+        container.classList.add(arContainerClassName);
+        container.classList.add("desktop");
+        container.classList.add("debug-container");
+        container.style.position = "absolute";
+        container.style.top = "0";
+        container.style.right = "5px";
+        container.style.paddingTop = "0px";
+        container.style.maxWidth = "70%";
+        container.style.maxHeight = "calc(100% - 5px)";
+        container.style.zIndex = "1000";
+        // container.style.pointerEvents = "none";
+        container.style.pointerEvents = "scroll";
+        // container.style["-webkit-overflow-scrolling"] = "touch";
+        container.style.display = "flex";
+        container.style.alignItems = "end";
+        container.style.flexDirection = "column";
+        container.style.color = "white";
+        container.style.overflow = "auto";
+        // container.style.border = "1px solid red";
+        domElement.appendChild(container);
+        errorContainer.set(domElement, container);
+
+        const style = document.createElement("style");
+        style.innerHTML = logsContainerStyles;
+        container.appendChild(style);
+        return container;
+    }
+}
+
+
+const typeSymbol = Symbol("logtype");
+const containerCache = new Map<LogType, HTMLElement[]>();
+
+function returnMessageContainer(container: HTMLElement) {
+    container.remove();
+    const type = container[typeSymbol];
+    const containers = containerCache.get(type) ?? [];
+    containers.push(container);
+    containerCache.set(type, containers);
+}
+
+function getMessageContainer(type: LogType, msg: string): HTMLElement {
+    if (containerCache.has(type)) {
+        const containers = containerCache.get(type)!;
+        if (containers.length > 0) {
+            return containers.pop()!;
+        }
+    }
+    const element = document.createElement("div");
+    element.style.marginRight = "5px";
+    element.style.padding = ".5em";
+    element.style.backgroundColor = "rgba(0,0,0,.9)";
+    element.style.marginTop = "5px";
+    element.style.marginBottom = "3px";
+    element.style.borderRadius = "8px";
+    element.style.pointerEvents = "all";
+    element.style.userSelect = "text";
+    element.style.maxWidth = "250px";
+    element.style.whiteSpace = "pre-wrap";
+    element.style["backdrop-filter"] = "blur(10px)";
+    element.style.backgroundColor = "rgba(20,20,20,.8)";
+    element.style.boxShadow = "inset 0 0 80px rgba(0,0,0,.2), 0 0 5px rgba(0,0,0,.2)";
+    element.style.border = "1px solid rgba(160,160,160,.2)";
+    element[typeSymbol] = type;
+    switch (type) {
+        case LogType.Log:
+            element.classList.add("log");
+            element.style.color = "rgba(200,200,200,.7)";
+            element.style.backgroundColor = "rgba(40,40,40,.7)";
+            // element.style.backgroundColor = "rgba(200,200,200,.5)";
+            break;
+        case LogType.Warn:
+            element.classList.add("warn");
+            element.style.color = "rgb(255, 255, 150)";
+            element.style.backgroundColor = "rgba(50,50,20,.8)";
+            // element.style.backgroundColor = "rgba(245,245,50,.5)";
+            break;
+        case LogType.Error:
+            element.classList.add("error");
+            element.style.color = "rgb(255, 50, 50";
+            element.style.backgroundColor = "rgba(50,20,20,.8)";
+            // element.style.backgroundColor = "rgba(255,50,50,.5)";
+            break;
+    }
+    element.title = "Open the browser console (F12) for more information";
+
+    // msg = msg.replace(/[\n\r]/g, "<br/>");
+    // console.log(msg);
+    element.innerHTML = msg;
+
+    return element;
+}