@vylos/core 0.4.4 → 0.5.0

package/README.md

@@ -0,0 +1,111 @@
+# @vylos/core
+
+The engine, types, stores, and components for [Vylos](https://github.com/DevOpsBenjamin/Vylos) — a checkpoint-based visual novel engine built with Vue 3 and TypeScript.
+
+[![npm](https://img.shields.io/npm/v/@vylos/core)](https://www.npmjs.com/package/@vylos/core)
+
+## Features
+
+- **Checkpoint-based execution** — `engine.say()` and `engine.choice()` pause via async/await, rollback via re-execute + fast-forward (like Ren'Py)
+- **Rollback & history** — full forward/back navigation through past dialogue
+- **Save/load with mid-event resume** — checkpoint system preserves exact position
+- **Inventory system** — bag-based `engine.inventory.add/remove/has/count/list/clear`
+- **Location & action managers** — time-of-day backgrounds, linked locations, conditional actions
+- **Drawable events** — clickable characters/objects on screen
+- **i18n** — `string | Record<string, string>` for multi-language support
+- **Plugin system** — DI-based (tsyringe) manager and component overrides
+- **Dev console** — `window.Vylos` for debugging and cheating (state, inventory, engine)
+- **H key** — hide all UI to view artwork (Ren'Py style)
+- **AZERTY/QWERTY auto-detect** — keyboard input adapts automatically
+
+## Install
+
+```bash
+pnpm add @vylos/core
+```
+
+Requires Vue 3 and Pinia.
+
+## Usage
+
+```typescript
+import {
+  createEngine,
+  GameShell,
+  useEngineStateStore,
+  ENGINE_INJECT_KEY,
+  type VylosEvent,
+  type VylosAPI,
+  type VylosGameState,
+} from '@vylos/core';
+```
+
+### Writing events
+
+```typescript
+const intro: VylosEvent = {
+  id: 'intro',
+  conditions: (state) => !state.flags['intro_done'],
+  async execute(engine: VylosAPI, state: VylosGameState) {
+    await engine.say('Welcome!');
+
+    const pick = await engine.choice([
+      { text: 'Start', value: 'start' },
+      { text: 'Learn more', value: 'more' },
+    ]);
+
+    if (pick === 'more') {
+      await engine.say('Events pause at each say() and choice().');
+    }
+
+    state.flags['intro_done'] = true;
+  },
+};
+```
+
+### Extending types
+
+```typescript
+import type { VylosCharacter, VylosGameState } from '@vylos/core';
+
+interface Character extends VylosCharacter {
+  portrait?: string;
+}
+
+interface GameState extends VylosGameState {
+  player: Character;
+  energy: number;
+}
+```
+
+### Inventory
+
+```typescript
+async execute(engine: VylosAPI, state: GameState) {
+  engine.inventory.add('backpack', 'potion', 3);
+
+  if (engine.inventory.has('backpack', 'key')) {
+    engine.inventory.remove('backpack', 'key', 1);
+    await engine.say('You used the key.');
+  }
+}
+```
+
+## Key bindings
+
+| Key | Action |
+|-----|--------|
+| Space / Enter / E | Advance dialogue |
+| D / Arrow Right | Forward |
+| A / Q / Arrow Left | Back |
+| H | Toggle UI visibility |
+| S | Toggle skip mode |
+| Escape | Pause menu |
+
+## Documentation
+
+Full docs and examples: [github.com/DevOpsBenjamin/Vylos](https://github.com/DevOpsBenjamin/Vylos)
+
+## License
+
+[MIT](https://github.com/DevOpsBenjamin/Vylos/blob/main/LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vylos/core",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "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>