@vylos/core 0.4.2 → 0.4.4

package/package.json

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

package/src/components/app/EngineView.vue

@@ -6,28 +6,31 @@
     <!-- z-10: Foreground / character sprites -->
     <ForegroundLayer />
 
-    <!-- z-15: Drawable events (clickable characters/objects) -->
-    <DrawableOverlay />
-
-    <!-- z-20: Location + Action overlays (left / right panels) -->
-    <LocationOverlay />
-    <ActionOverlay />
-
-    <!-- z-25: Top bar -->
-    <TopBar />
-
-    <!-- z-30: Dialogue box -->
-    <DialogueBox />
-
-    <!-- z-35: Choice panel (inside DialogueBox z-range) -->
-    <ChoicePanel />
-
-    <!-- z-40: Custom overlay -->
-    <CustomOverlay />
+    <!-- UI layer — hidden with H key (Ren'Py style) -->
+    <template v-if="!engineState.uiHidden">
+      <!-- z-15–25: HUD (hidden during dialogue/choices) -->
+      <template v-if="!hideHud">
+        <DrawableOverlay />
+        <LocationOverlay />
+        <ActionOverlay />
+        <TopBar />
+      </template>
+
+      <!-- z-30: Dialogue box -->
+      <DialogueBox />
+
+      <!-- z-35: Choice panel (inside DialogueBox z-range) -->
+      <ChoicePanel />
+
+      <!-- z-40: Custom overlay -->
+      <CustomOverlay />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
 import BackgroundLayer from '../core/BackgroundLayer.vue';
 import ForegroundLayer from '../core/ForegroundLayer.vue';
 import DrawableOverlay from '../core/DrawableOverlay.vue';
@@ -37,4 +40,7 @@ import CustomOverlay from '../core/CustomOverlay.vue';
 import ActionOverlay from '../menu/ActionOverlay.vue';
 import LocationOverlay from '../menu/LocationOverlay.vue';
 import TopBar from '../menu/TopBar.vue';
+
+const engineState = useEngineStateStore();
+const hideHud = computed(() => !!engineState.dialogue || !!engineState.choices);
 </script>

package/src/components/app/GameShell.vue

@@ -184,6 +184,13 @@ function handleForward(): void {
 
 function handleViewportClick(e: MouseEvent): void {
   if (!engine) return;
+
+  // Any click unhides UI
+  if (engineState.uiHidden) {
+    engineState.uiHidden = false;
+    return;
+  }
+
   // Only during Running phase, no menu open, no choices showing
   if (!isRunning.value || engineState.menuOpen || engineState.choices) return;
 
@@ -211,6 +218,18 @@ onMounted(() => {
       return;
     }
 
+    // H toggles UI visibility
+    if (action === 'hide-ui') {
+      engineState.uiHidden = !engineState.uiHidden;
+      return;
+    }
+
+    // Any other key unhides UI first
+    if (engineState.uiHidden) {
+      engineState.uiHidden = false;
+      return;
+    }
+
     switch (action) {
       case 'continue':
         handleKeyboardContinue();

package/src/components/core/DialogueBox.vue

@@ -1,27 +1,32 @@
 <template>
   <Transition name="dlg-slide">
     <div
-      v-if="engineState.dialogue"
-      class="dlg-wrapper"
-      @click="handleClick"
+      v-if="engineState.dialogue && !engineState.overlayId"
+      class="absolute bottom-0 left-0 right-0 z-30 p-[2cqh_2cqw] pointer-events-none select-none"
     >
-      <div class="dlg-box" :class="{ 'dlg-box--history': engineState.historyBrowsing }">
+      <div
+        class="bg-black/80 border border-white/20 rounded-[1cqw] p-[2cqh_2.5cqw] max-w-[85cqw] mx-auto transition-colors duration-200"
+        :class="{ 'border-blue-300/40': engineState.historyBrowsing }"
+      >
         <!-- Speaker name -->
         <div
           v-if="engineState.dialogue.speaker"
-          class="dlg-speaker"
+          class="font-bold text-[1.8cqw] mb-[1cqh] uppercase tracking-wider text-yellow-300"
           :style="engineState.dialogue.speaker.color ? { color: engineState.dialogue.speaker.color } : undefined"
         >
           {{ speakerName }}
         </div>
 
         <!-- Dialogue text -->
-        <p class="dlg-text" :class="{ 'dlg-text--narration': engineState.dialogue.isNarration }">
+        <p
+          class="text-white text-[2cqw] leading-relaxed m-0"
+          :class="{ 'italic text-white/80': engineState.dialogue.isNarration }"
+        >
           {{ engineState.dialogue.text }}
         </p>
 
         <!-- Continue / History indicator -->
-        <div class="dlg-continue">
+        <div class="text-right text-white/40 text-[1.2cqw] mt-[1cqh]">
           <template v-if="engineState.historyBrowsing">
             &#9664; &#9654; history
           </template>
@@ -35,14 +40,11 @@
 </template>
 
 <script setup lang="ts">
-import { inject, computed } from 'vue';
+import { computed } from 'vue';
 import { useEngineStateStore } from '../../stores/engineState';
-import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
 import { useLanguage } from '../../composables/useLanguage';
-import type { Engine } from '../../engine/core/Engine';
 
 const engineState = useEngineStateStore();
-const engine = inject<Engine>(ENGINE_INJECT_KEY);
 const { resolveText } = useLanguage();
 
 const speakerName = computed(() => {
@@ -50,44 +52,6 @@ const speakerName = computed(() => {
   if (!speaker) return '';
   return resolveText(speaker.name);
 });
-
-function handleClick(): void {
-  if (!engine) return;
-
-  if (engine.eventRunner.isBrowsingHistory) {
-    // In history mode — advance through history (click = forward)
-    const step = engine.eventRunner.historyForward();
-    if (step) {
-      if (step.type === 'say' && step.dialogue) {
-        engineState.setDialogue(step.dialogue);
-        engineState.setChoices(null);
-      } else if (step.type === 'choice' && step.choiceOptions) {
-        engineState.setDialogue(null);
-        engineState.setChoices({
-          prompt: null,
-          options: step.choiceOptions,
-          historyStepIndex: step.stepIndex,
-          historySelectedValue: step.choiceResult,
-        });
-      }
-    }
-    if (!engine.eventRunner.isBrowsingHistory) {
-      engineState.historyBrowsing = false;
-      const live = engine.eventRunner.getLiveDialogue();
-      if (live) {
-        engineState.setDialogue({
-          text: live.text,
-          speaker: live.speaker,
-          isNarration: !live.speaker,
-        });
-      }
-      engineState.setChoices(null);
-    }
-  } else {
-    // Normal mode — resolve the wait to advance dialogue
-    engine.eventRunner.resolveWait();
-  }
-}
 </script>
 
 <style scoped>
@@ -100,57 +64,4 @@ function handleClick(): void {
   transform: translateY(100%);
   opacity: 0;
 }
-
-.dlg-wrapper {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 30;
-  padding: 2cqh 2cqw;
-  cursor: pointer;
-  user-select: none;
-}
-
-.dlg-box {
-  background: rgba(0, 0, 0, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 1cqw;
-  padding: 2cqh 2.5cqw;
-  max-width: 85cqw;
-  margin: 0 auto;
-  transition: border-color 0.2s ease;
-}
-
-.dlg-box--history {
-  border-color: rgba(147, 197, 253, 0.4);
-}
-
-.dlg-speaker {
-  color: #fde047; /* default — overridden by Character.color via :style */
-  font-weight: 700;
-  font-size: 1.8cqw;
-  margin-bottom: 1cqh;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.dlg-text {
-  color: white;
-  font-size: 2cqw;
-  line-height: 1.6;
-  margin: 0;
-}
-
-.dlg-text--narration {
-  font-style: italic;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.dlg-continue {
-  text-align: right;
-  color: rgba(255, 255, 255, 0.4);
-  font-size: 1.2cqw;
-  margin-top: 1cqh;
-}
 </style>

package/src/engine/managers/InputManager.ts

@@ -89,10 +89,14 @@ export class InputManager {
     if (key === 'ArrowRight') return 'forward';
     if (key === 'ArrowLeft') return 'back';
 
+    // Hide UI toggle (Ren'Py style)
+    if (key === 'h' || key === 'H') return 'hide-ui';
+
     // Skip toggle — same key on both layouts
     if (key === 's' || key === 'S') return 'skip-toggle';
 
-    // Forward key: E on both layouts
+    // Forward / continue: D on both layouts, E on both layouts
+    if (key === 'd' || key === 'D') return 'forward';
     if (key === 'e' || key === 'E') return 'continue';
 
     // Layout-dependent back key

package/src/stores/engineState.ts

@@ -23,6 +23,7 @@ export const useEngineStateStore = defineStore('engineState', () => {
   const skipMode = ref(false);
   const autoMode = ref(false);
   const historyBrowsing = ref(false);
+  const uiHidden = ref(false);
   const drawableEvents = ref<DrawableEventEntry[]>([]);
   const overlayId = ref<string | null>(null);
   const overlayProps = ref<Record<string, unknown> | null>(null);
@@ -89,6 +90,7 @@ export const useEngineStateStore = defineStore('engineState', () => {
     skipMode.value = false;
     autoMode.value = false;
     historyBrowsing.value = false;
+    uiHidden.value = false;
     drawableEvents.value = [];
     overlayId.value = null;
     overlayProps.value = null;
@@ -107,6 +109,7 @@ export const useEngineStateStore = defineStore('engineState', () => {
     skipMode,
     autoMode,
     historyBrowsing,
+    uiHidden,
     drawableEvents,
     overlayId,
     overlayProps,