@vylos/core 0.4.5 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vylos/core",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/DevOpsBenjamin/Vylos"

package/src/components/app/EngineView.vue

@@ -10,20 +10,23 @@
     <template v-if="!engineState.uiHidden">
       <!-- z-15–25: HUD (hidden during dialogue/choices) -->
       <template v-if="!hideHud">
-        <DrawableOverlay />
-        <LocationOverlay />
-        <ActionOverlay />
-        <TopBar />
+        <component :is="drawableOverlayComponent" />
+        <component :is="locationOverlayComponent" />
+        <component :is="actionOverlayComponent" />
+        <component :is="topBarComponent" />
       </template>
 
       <!-- z-30: Dialogue box -->
-      <DialogueBox />
+      <component :is="dialogueBoxComponent" />
 
       <!-- z-35: Choice panel (inside DialogueBox z-range) -->
-      <ChoicePanel />
+      <component :is="choicePanelComponent" />
 
       <!-- z-40: Custom overlay -->
       <CustomOverlay />
+
+      <!-- z-45: Project HUD (always visible when UI is shown) -->
+      <slot name="hud" />
     </template>
   </div>
 </template>
@@ -31,16 +34,24 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useEngineStateStore } from '../../stores/engineState';
+import { getComponentOverride } from '../../engine/core/EngineFactory';
 import BackgroundLayer from '../core/BackgroundLayer.vue';
 import ForegroundLayer from '../core/ForegroundLayer.vue';
-import DrawableOverlay from '../core/DrawableOverlay.vue';
-import DialogueBox from '../core/DialogueBox.vue';
-import ChoicePanel from '../core/ChoicePanel.vue';
+import DefaultDrawableOverlay from '../core/DrawableOverlay.vue';
+import DefaultDialogueBox from '../core/DialogueBox.vue';
+import DefaultChoicePanel from '../core/ChoicePanel.vue';
 import CustomOverlay from '../core/CustomOverlay.vue';
-import ActionOverlay from '../menu/ActionOverlay.vue';
-import LocationOverlay from '../menu/LocationOverlay.vue';
-import TopBar from '../menu/TopBar.vue';
+import DefaultActionOverlay from '../menu/ActionOverlay.vue';
+import DefaultLocationOverlay from '../menu/LocationOverlay.vue';
+import DefaultTopBar from '../menu/TopBar.vue';
 
 const engineState = useEngineStateStore();
 const hideHud = computed(() => !!engineState.dialogue || !!engineState.choices);
+
+const topBarComponent = computed(() => getComponentOverride('TopBar') ?? DefaultTopBar);
+const actionOverlayComponent = computed(() => getComponentOverride('ActionOverlay') ?? DefaultActionOverlay);
+const locationOverlayComponent = computed(() => getComponentOverride('LocationOverlay') ?? DefaultLocationOverlay);
+const dialogueBoxComponent = computed(() => getComponentOverride('DialogueBox') ?? DefaultDialogueBox);
+const choicePanelComponent = computed(() => getComponentOverride('ChoicePanel') ?? DefaultChoicePanel);
+const drawableOverlayComponent = computed(() => getComponentOverride('DrawableOverlay') ?? DefaultDrawableOverlay);
 </script>

package/src/engine/core/EngineFactory.ts

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
 import { container as globalContainer, type DependencyContainer } from 'tsyringe';
 import type { VylosPlugin } from '../types';
-import type { Component } from 'vue';
+import { type Component, shallowReactive } from 'vue';
 import { EventManager } from '../managers/EventManager';
 import { HistoryManager } from '../managers/HistoryManager';
 import { NavigationManager } from '../managers/NavigationManager';
@@ -13,6 +13,7 @@ import { CheckpointManager } from './CheckpointManager';
 import { InventoryManager } from '../managers/InventoryManager';
 import { VylosStorage } from '../storage/VylosStorage';
 import { Engine } from './Engine';
+import { logger } from '../utils/logger';
 
 /** Tokens used for DI registration */
 export const DI_TOKENS = {
@@ -26,8 +27,8 @@ export const DI_TOKENS = {
   Engine: 'Engine',
 } as const;
 
-/** Component override map (separate from DI) */
-const componentOverrides = new Map<string, Component>();
+/** Component override map — shallowReactive so Vue computeds track changes */
+const componentOverrides = shallowReactive<Record<string, Component>>({});
 
 /** Register all default managers in a DI container */
 function registerDefaults(c: DependencyContainer): void {
@@ -67,7 +68,8 @@ export function createEngine(options: CreateEngineOptions): Engine {
   // Register component overrides
   if (options.plugin?.components) {
     for (const [id, component] of Object.entries(options.plugin.components)) {
-      componentOverrides.set(id, component);
+      componentOverrides[id] = component;
+      logger.debug(`Component override registered: ${id}`);
     }
   }
 
@@ -98,10 +100,12 @@ export function createEngine(options: CreateEngineOptions): Engine {
 
 /** Get a component override by ID (returns undefined if no override) */
 export function getComponentOverride(id: string): Component | undefined {
-  return componentOverrides.get(id);
+  return componentOverrides[id];
 }
 
 /** Clear all component overrides (for testing) */
 export function clearComponentOverrides(): void {
-  componentOverrides.clear();
+  for (const key of Object.keys(componentOverrides)) {
+    delete componentOverrides[key];
+  }
 }