@vylos/core 0.1.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@vylos/core",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*",
+    "./stores/*": "./src/stores/*",
+    "./composables/*": "./src/composables/*"
+  },
+  "dependencies": {
+    "pinia": "^2.3.0",
+    "pinia-plugin-persistedstate": "^3.2.3",
+    "reflect-metadata": "^0.2.2",
+    "tsyringe": "^4.8.0",
+    "vue": "^3.5.13",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
+    "fake-indexeddb": "^6.2.5",
+    "happy-dom": "^15.11.7",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
+    "vue-tsc": "^2.2.0"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "vue-tsc --noEmit"
+  }
+}

package/src/components/app/EngineView.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="relative w-full h-full overflow-hidden bg-black" style="container-type: size">
+    <!-- z-0: Background -->
+    <BackgroundLayer />
+
+    <!-- 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 />
+  </div>
+</template>
+
+<script setup lang="ts">
+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 CustomOverlay from '../core/CustomOverlay.vue';
+import ActionOverlay from '../menu/ActionOverlay.vue';
+import LocationOverlay from '../menu/LocationOverlay.vue';
+import TopBar from '../menu/TopBar.vue';
+</script>

package/src/components/app/GameShell.vue

@@ -0,0 +1,265 @@
+<template>
+  <!-- Outer: full screen, centering -->
+  <div class="game-shell">
+    <!-- Blurred background that extends the game image to the edges -->
+    <div class="game-shell__bg" :style="shellBgStyle"></div>
+
+    <!-- Inner: ratio-locked viewport, container-query root -->
+    <div class="game-viewport" :style="viewportStyle" @click="handleViewportClick">
+      <!-- Loading -->
+      <LoadingScreen v-if="isLoading" />
+
+      <!-- Main menu -->
+      <MainMenu v-else-if="isMainMenu" />
+
+      <!-- Game view -->
+      <EngineView v-else-if="isRunning" />
+
+      <!-- Save/Load menu (modal, shown over game or main menu) -->
+      <SaveLoadMenu v-if="engineState.menuOpen === MenuType.Save || engineState.menuOpen === MenuType.Load" />
+
+      <!-- Settings menu (modal) -->
+      <SettingsMenu v-if="engineState.menuOpen === MenuType.Settings" />
+
+      <!-- Pause menu (modal, shown on Escape during gameplay) -->
+      <PauseMenu v-if="engineState.menuOpen === MenuType.PauseMenu" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { EnginePhase, MenuType } from '../../engine/types';
+import type { Engine } from '../../engine/core/Engine';
+import type { HistoryStep } from '../../engine/core/EventRunner';
+import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
+import { CONFIG_INJECT_KEY } from '../../composables/useConfig';
+import { InputManager } from '../../engine/managers/InputManager';
+
+import LoadingScreen from './LoadingScreen.vue';
+import MainMenu from './MainMenu.vue';
+import EngineView from './EngineView.vue';
+import SaveLoadMenu from '../menu/SaveLoadMenu.vue';
+import SettingsMenu from '../menu/SettingsMenu.vue';
+import PauseMenu from '../menu/PauseMenu.vue';
+
+const props = withDefaults(defineProps<{
+  gameTitle?: string;
+  projectId?: string;
+}>(), {
+  projectId: 'default',
+});
+
+// Engine is provided by main.ts via app.provide()
+const engine = inject<Engine>(ENGINE_INJECT_KEY);
+const config = inject(CONFIG_INJECT_KEY);
+const engineState = useEngineStateStore();
+const inputManager = new InputManager();
+
+// --- Shell blurred background ---
+
+const MENU_BG = '/global/images/menu/main.png';
+
+const shellBgStyle = computed(() => {
+  const bg = engineState.background || MENU_BG;
+  return {
+    backgroundImage: `url('${bg}')`,
+  };
+});
+
+// --- Viewport style ---
+
+const viewportStyle = computed(() => {
+  if (!config) return { width: '100vw', height: '100vh' };
+  const ratio = config.resolution.width / config.resolution.height;
+  return {
+    width: `min(100vw, calc(100vh * ${ratio}))`,
+    height: `min(100vh, calc(100vw / ${ratio}))`,
+  };
+});
+
+// --- Computed ---
+
+const isLoading = computed(() => engineState.phase === EnginePhase.Loading);
+const isMainMenu = computed(() => engineState.phase === EnginePhase.MainMenu);
+const isRunning = computed(() =>
+  engineState.phase === EnginePhase.Running ||
+  engineState.phase === EnginePhase.Paused
+);
+
+// --- History step helpers ---
+
+function applyHistoryStep(step: HistoryStep): void {
+  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,
+    });
+  }
+}
+
+function restoreLiveDisplay(): void {
+  const live = engine!.eventRunner.getLiveDialogue();
+  if (live) {
+    engineState.setDialogue({
+      text: live.text,
+      speaker: live.speaker,
+      isNarration: !live.speaker,
+    });
+  }
+  engineState.setChoices(null);
+}
+
+// --- Keyboard continue (Space/Enter) ---
+
+function handleKeyboardContinue(): void {
+  if (!engine) return;
+
+  // If browsing history, forward exits history first
+  if (engine.eventRunner.isBrowsingHistory) {
+    const step = engine.eventRunner.historyForward();
+    if (step) {
+      applyHistoryStep(step);
+    } else if (!engine.eventRunner.isBrowsingHistory) {
+      engineState.historyBrowsing = false;
+      restoreLiveDisplay();
+    }
+    return;
+  }
+
+  if (engineState.dialogue) {
+    // Inside a say() call — resolve the wait to advance dialogue
+    engine.eventRunner.resolveWait();
+  } else if (!engineState.choices) {
+    // Between events — tell the engine to continue the loop
+    engine.navigationManager.continue();
+  }
+  // If choices are showing, ignore continue (player must click a choice)
+}
+
+function handleBack(): void {
+  if (!engine) return;
+
+  if (engineState.dialogue || engine.eventRunner.isBrowsingHistory) {
+    // During dialogue or already browsing — browse text history
+    const step = engine.eventRunner.historyBack();
+    if (step) {
+      engineState.historyBrowsing = true;
+      applyHistoryStep(step);
+    }
+  } else {
+    engine.navigationManager.goBack();
+  }
+}
+
+function handleForward(): void {
+  if (!engine) return;
+
+  if (engine.eventRunner.isBrowsingHistory) {
+    // In history mode — advance through history
+    const step = engine.eventRunner.historyForward();
+    if (step) {
+      applyHistoryStep(step);
+    } else if (!engine.eventRunner.isBrowsingHistory) {
+      engineState.historyBrowsing = false;
+      restoreLiveDisplay();
+    }
+  } else if (engineState.dialogue) {
+    // At live dialogue — same as continue
+    engine.eventRunner.resolveWait();
+  } else {
+    engine.navigationManager.goForward();
+  }
+}
+
+// --- Mouse click navigation (left half = back, right half = forward) ---
+
+function handleViewportClick(e: MouseEvent): void {
+  if (!engine) return;
+  // Only during Running phase, no menu open, no choices showing
+  if (!isRunning.value || engineState.menuOpen || engineState.choices) return;
+
+  const target = e.target as HTMLElement;
+  // Don't intercept clicks on interactive elements (buttons, overlays, etc.)
+  if (target.closest('button, a, [role="button"]')) return;
+
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  const midpoint = rect.left + rect.width / 2;
+
+  if (e.clientX >= midpoint) {
+    handleKeyboardContinue();
+  } else {
+    handleBack();
+  }
+}
+
+// --- Keyboard input ---
+
+onMounted(() => {
+  inputManager.start((action) => {
+    // Don't process keyboard when a menu is open
+    if (engineState.menuOpen) {
+      if (action === 'menu') engineState.closeMenu();
+      return;
+    }
+
+    switch (action) {
+      case 'continue':
+        handleKeyboardContinue();
+        break;
+      case 'menu':
+        engineState.openMenu(MenuType.PauseMenu);
+        break;
+      case 'back':
+        handleBack();
+        break;
+      case 'forward':
+        handleForward();
+        break;
+      case 'skip-toggle':
+        inputManager.toggleSkip();
+        engineState.skipMode = !engineState.skipMode;
+        break;
+    }
+  });
+});
+
+onUnmounted(() => {
+  inputManager.stop();
+});
+</script>
+
+<style scoped>
+.game-shell {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+  overflow: hidden;
+}
+
+.game-shell__bg {
+  position: absolute;
+  inset: -20px;
+  background-size: cover;
+  background-position: center;
+  filter: blur(30px) brightness(0.5);
+  pointer-events: none;
+}
+
+.game-viewport {
+  position: relative;
+  overflow: hidden;
+  container-type: size;
+}
+</style>

package/src/components/app/LoadingScreen.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="fixed inset-0 bg-black flex flex-col items-center justify-center z-50">
+    <div class="text-white text-2xl font-mono animate-pulse">Loading...</div>
+    <div class="mt-4 w-8 h-8 border-4 border-white border-t-transparent rounded-full animate-spin"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No props — this is a pure presentational loading screen.
+</script>

package/src/components/app/MainMenu.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="main-menu">
+    <div class="main-menu__inner">
+      <!-- Title -->
+      <div class="main-menu__title-block">
+        <h1 class="main-menu__title">Vylos</h1>
+        <div class="main-menu__separator"></div>
+        <p class="main-menu__subtitle">Visual Novel Engine</p>
+      </div>
+
+      <!-- Buttons -->
+      <div class="main-menu__buttons">
+        <button class="main-menu__btn main-menu__btn--primary" @click="newGame">
+          <span>New Game</span>
+          <span class="main-menu__btn-icon">&#x2728;</span>
+        </button>
+
+        <button v-if="canContinue" class="main-menu__btn main-menu__btn--secondary" @click="continueGame">
+          <span>Continue</span>
+          <span class="main-menu__btn-icon">&#x25B6;&#xFE0F;</span>
+        </button>
+
+        <button class="main-menu__btn main-menu__btn--tertiary" @click="loadGame">
+          <span>Load</span>
+          <span class="main-menu__btn-icon">&#x1F4C2;</span>
+        </button>
+
+        <button class="main-menu__btn main-menu__btn--tertiary" @click="openSettings">
+          <span>Settings</span>
+          <span class="main-menu__btn-icon">&#x2699;&#xFE0F;</span>
+        </button>
+      </div>
+
+      <!-- Footer -->
+      <p class="main-menu__footer">Press ESC during gameplay to pause</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { useGameStateStore } from '../../stores/gameState';
+import { EnginePhase, MenuType } from '../../engine/types';
+
+const engineState = useEngineStateStore();
+const gameState = useGameStateStore();
+
+const canContinue = computed(() => !!gameState.state.locationId);
+
+function newGame() {
+  engineState.setPhase(EnginePhase.Running);
+}
+
+function continueGame() {
+  engineState.setPhase(EnginePhase.Running);
+}
+
+function loadGame() {
+  engineState.openMenu(MenuType.Load);
+}
+
+function openSettings() {
+  engineState.openMenu(MenuType.Settings);
+}
+</script>
+
+<style scoped>
+.main-menu {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url('/global/images/menu/main.png') center / cover no-repeat;
+  container-type: size;
+  overflow: hidden;
+}
+
+.main-menu::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+}
+
+/* Subtle radial glow behind the content */
+.main-menu::before {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: 30%;
+  left: 50%;
+  translate: -50% -50%;
+  width: 60cqw;
+  height: 60cqw;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.main-menu__inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30cqw;
+  max-height: calc(100cqh - 8cqh);
+  overflow-y: auto;
+  padding: 4cqh 3cqw;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 1.5cqw;
+}
+
+/* Title block */
+.main-menu__title-block {
+  text-align: center;
+  margin-bottom: 5cqh;
+}
+
+.main-menu__title {
+  font-size: 5cqw;
+  font-weight: 700;
+  color: white;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  margin: 0;
+  text-shadow: 0 0 40px rgba(139, 92, 246, 0.3);
+}
+
+.main-menu__separator {
+  width: 12cqw;
+  height: 0.25cqh;
+  margin: 1.5cqh auto;
+  background: linear-gradient(90deg, transparent, #8b5cf6, #ec4899, #8b5cf6, transparent);
+  border-radius: 9999px;
+}
+
+.main-menu__subtitle {
+  font-size: 1.4cqw;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  font-family: monospace;
+  margin: 0;
+}
+
+/* Buttons */
+.main-menu__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5cqh;
+  width: 100%;
+}
+
+.main-menu__btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1.8cqh 2cqw;
+  border-radius: 1cqw;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(8px);
+  color: white;
+  font-size: 1.8cqw;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.main-menu__btn::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.25s;
+  border-radius: inherit;
+}
+
+.main-menu__btn:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.main-menu__btn:hover::before {
+  opacity: 1;
+}
+
+.main-menu__btn:active {
+  opacity: 0.8;
+}
+
+/* Icon */
+.main-menu__btn-icon {
+  font-size: 2.2cqw;
+  opacity: 0.5;
+  transition: opacity 0.25s;
+}
+
+.main-menu__btn:hover .main-menu__btn-icon {
+  opacity: 1;
+}
+
+/* Variants */
+.main-menu__btn--primary::before {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
+}
+
+.main-menu__btn--primary:hover {
+  box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
+}
+
+.main-menu__btn--secondary::before {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
+}
+
+.main-menu__btn--secondary:hover {
+  box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
+}
+
+.main-menu__btn--tertiary::before {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
+}
+
+.main-menu__btn--tertiary:hover {
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
+}
+
+/* Footer */
+.main-menu__footer {
+  margin-top: 4cqh;
+  font-size: 1.1cqw;
+  color: rgba(255, 255, 255, 0.25);
+  font-family: monospace;
+}
+</style>

package/src/components/core/BackgroundLayer.vue

@@ -0,0 +1,27 @@
+<template>
+  <Transition name="bg-fade">
+    <div
+      v-if="engineState.background"
+      :key="engineState.background"
+      class="absolute inset-0 bg-cover bg-center z-0"
+      :style="{ backgroundImage: `url('${engineState.background}')` }"
+    />
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { useEngineStateStore } from '../../stores/engineState';
+
+const engineState = useEngineStateStore();
+</script>
+
+<style scoped>
+.bg-fade-enter-active,
+.bg-fade-leave-active {
+  transition: opacity 0.6s ease;
+}
+.bg-fade-enter-from,
+.bg-fade-leave-to {
+  opacity: 0;
+}
+</style>