@vylos/core 0.1.0

package/src/components/menu/PauseMenu.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="pause-menu" @click.self="resume">
+    <div class="pause-menu__inner">
+      <h2 class="pause-menu__title">Paused</h2>
+      <div class="pause-menu__separator"></div>
+
+      <div class="pause-menu__buttons">
+        <button class="pause-menu__btn pause-menu__btn--primary" @click="resume">
+          <span>Continue</span>
+          <span class="pause-menu__btn-icon">&#x25B6;&#xFE0F;</span>
+        </button>
+
+        <button class="pause-menu__btn pause-menu__btn--tertiary" @click="save">
+          <span>Save</span>
+          <span class="pause-menu__btn-icon">&#x1F4BE;</span>
+        </button>
+
+        <button class="pause-menu__btn pause-menu__btn--tertiary" @click="load">
+          <span>Load</span>
+          <span class="pause-menu__btn-icon">&#x1F4C2;</span>
+        </button>
+
+        <button class="pause-menu__btn pause-menu__btn--tertiary" @click="settings">
+          <span>Settings</span>
+          <span class="pause-menu__btn-icon">&#x2699;&#xFE0F;</span>
+        </button>
+
+        <button class="pause-menu__btn pause-menu__btn--danger" @click="mainMenu">
+          <span>Main Menu</span>
+          <span class="pause-menu__btn-icon">&#x1F3E0;</span>
+        </button>
+      </div>
+
+      <p class="pause-menu__footer">ESC to resume</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEngineStateStore } from '../../stores/engineState';
+import { EnginePhase, MenuType } from '../../engine/types';
+
+const engineState = useEngineStateStore();
+
+function resume() {
+  engineState.closeMenu();
+}
+
+function save() {
+  engineState.openMenu(MenuType.Save);
+}
+
+function load() {
+  engineState.openMenu(MenuType.Load);
+}
+
+function settings() {
+  engineState.openMenu(MenuType.Settings);
+}
+
+function mainMenu() {
+  engineState.closeMenu();
+  engineState.setPhase(EnginePhase.MainMenu);
+}
+</script>
+
+<style scoped>
+.pause-menu {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  container-type: size;
+}
+
+.pause-menu__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 28cqw;
+  padding: 3.5cqh 2.5cqw;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 1.5cqw;
+}
+
+.pause-menu__title {
+  font-size: 3cqw;
+  font-weight: 700;
+  color: white;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.pause-menu__separator {
+  width: 10cqw;
+  height: 0.25cqh;
+  margin: 1.5cqh auto;
+  background: linear-gradient(90deg, transparent, #8b5cf6, #ec4899, #8b5cf6, transparent);
+  border-radius: 9999px;
+}
+
+.pause-menu__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2cqh;
+  width: 100%;
+}
+
+.pause-menu__btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1.5cqh 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.6cqw;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.pause-menu__btn::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.25s;
+  border-radius: inherit;
+}
+
+.pause-menu__btn:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.pause-menu__btn:hover::before {
+  opacity: 1;
+}
+
+.pause-menu__btn:active {
+  opacity: 0.8;
+}
+
+.pause-menu__btn-icon {
+  font-size: 2cqw;
+  opacity: 0.5;
+  transition: opacity 0.25s;
+}
+
+.pause-menu__btn:hover .pause-menu__btn-icon {
+  opacity: 1;
+}
+
+.pause-menu__btn--primary::before {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
+}
+
+.pause-menu__btn--primary:hover {
+  box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
+}
+
+.pause-menu__btn--tertiary::before {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
+}
+
+.pause-menu__btn--tertiary:hover {
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
+}
+
+.pause-menu__btn--danger::before {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
+}
+
+.pause-menu__btn--danger:hover {
+  box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
+}
+
+.pause-menu__footer {
+  margin-top: 3cqh;
+  font-size: 1.1cqw;
+  color: rgba(255, 255, 255, 0.25);
+  font-family: monospace;
+}
+</style>

package/src/components/menu/SaveLoadMenu.vue

@@ -0,0 +1,377 @@
+<template>
+  <div class="sl-overlay" @click.self="engineState.closeMenu()">
+    <div class="sl-panel">
+      <!-- Header -->
+      <div class="sl-header">
+        <div class="sl-tabs">
+          <button
+            class="sl-tab"
+            :class="{ 'sl-tab--active': activeTab === 'save' }"
+            @click="activeTab = 'save'"
+          >
+            &#x1F4BE; Save
+          </button>
+          <button
+            class="sl-tab"
+            :class="{ 'sl-tab--active': activeTab === 'load' }"
+            @click="activeTab = 'load'"
+          >
+            &#x1F4C2; Load
+          </button>
+        </div>
+        <button class="sl-close" @click="engineState.closeMenu()">&#x2715;</button>
+      </div>
+
+      <div class="sl-separator"></div>
+
+      <!-- Slot grid -->
+      <div class="sl-grid">
+        <button
+          v-for="slot in pageSlots"
+          :key="slot"
+          class="sl-slot"
+          :class="{ 'sl-slot--empty': !slotMeta[slot] }"
+          @click="handleSlot(slot)"
+        >
+          <!-- Indicator -->
+          <div class="sl-slot__header">
+            <span class="sl-slot__number">Slot {{ slot }}</span>
+            <span v-if="slotMeta[slot]" class="sl-slot__dot"></span>
+          </div>
+
+          <!-- Content -->
+          <div v-if="slotMeta[slot]" class="sl-slot__info">
+            <span class="sl-slot__label">{{ slotMeta[slot]!.label }}</span>
+            <span class="sl-slot__time">{{ formatTime(slotMeta[slot]!.timestamp) }}</span>
+          </div>
+          <div v-else class="sl-slot__empty-text">Empty</div>
+        </button>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="totalPages > 1" class="sl-pagination">
+        <button class="sl-page-btn" :disabled="page === 0" @click="page--">
+          &#x25C0;
+        </button>
+        <span class="sl-page-info">{{ page + 1 }} / {{ totalPages }}</span>
+        <button class="sl-page-btn" :disabled="page >= totalPages - 1" @click="page++">
+          &#x25B6;
+        </button>
+      </div>
+
+      <!-- Footer -->
+      <p class="sl-footer">ESC to close</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject, onMounted, watch } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { useGameStateStore } from '../../stores/gameState';
+import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
+import { MenuType } from '../../engine/types';
+import type { Engine } from '../../engine/core/Engine';
+import type { SaveMeta } from '../../engine/types';
+
+const engine = inject<Engine>(ENGINE_INJECT_KEY);
+const engineState = useEngineStateStore();
+const gameState = useGameStateStore();
+
+const TOTAL_SLOTS = 24;
+const PER_PAGE = 8;
+
+const activeTab = ref<'save' | 'load'>(
+  engineState.menuOpen === MenuType.Load ? 'load' : 'save',
+);
+const page = ref(0);
+const slotMeta = ref<Record<number, SaveMeta>>({});
+
+const totalPages = computed(() => Math.ceil(TOTAL_SLOTS / PER_PAGE));
+const pageSlots = computed(() => {
+  const start = page.value * PER_PAGE + 1;
+  return Array.from({ length: PER_PAGE }, (_, i) => start + i);
+});
+
+// Sync tab when menu type changes externally
+watch(() => engineState.menuOpen, (val) => {
+  if (val === MenuType.Save) activeTab.value = 'save';
+  else if (val === MenuType.Load) activeTab.value = 'load';
+});
+
+async function refreshSlots(): Promise<void> {
+  if (!engine) return;
+  const list = await engine.saveManager.listSlots();
+  const map: Record<number, SaveMeta> = {};
+  for (const meta of list) {
+    map[meta.slot] = meta;
+  }
+  slotMeta.value = map;
+}
+
+onMounted(refreshSlots);
+
+async function handleSlot(slot: number): Promise<void> {
+  if (!engine) return;
+  if (activeTab.value === 'save') {
+    await engine.saveManager.save(slot, {
+      gameState: gameState.state,
+      eventId: engine.eventRunner.currentEventId,
+      stepNumber: engine.eventRunner.checkpoints.count,
+      label: `Save ${slot}`,
+      thumbnail: null,
+      checkpoints: engine.eventRunner.currentEventId
+        ? engine.eventRunner.checkpoints.getAll()
+        : undefined,
+      initialState: engine.eventRunner.getInitialState() ?? undefined,
+      history: engine.historyManager.getAll(),
+      historyIndex: engine.historyManager.index,
+      lockedEventIds: engine.eventManager.getLockedIds(),
+    });
+    await refreshSlots();
+  } else {
+    const data = await engine.saveManager.load(slot);
+    if (data) {
+      engine.loadSave(data, (s) => gameState.setState(s));
+      if (data.gameState.locationId) {
+        engineState.setLocation(data.gameState.locationId);
+      }
+      engineState.historyBrowsing = false;
+      engineState.setDialogue(null);
+      engineState.setChoices(null);
+      engineState.closeMenu();
+    }
+  }
+}
+
+function formatTime(ts: number): string {
+  return new Date(ts).toLocaleString(undefined, {
+    month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  });
+}
+</script>
+
+<style scoped>
+.sl-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  container-type: size;
+}
+
+.sl-panel {
+  display: flex;
+  flex-direction: column;
+  width: 62cqw;
+  max-height: 88cqh;
+  padding: 3cqh 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;
+  overflow-y: auto;
+}
+
+/* Header */
+.sl-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sl-tabs {
+  display: flex;
+  gap: 0.8cqw;
+}
+
+.sl-tab {
+  padding: 1cqh 2cqw;
+  border-radius: 0.8cqw;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 1.5cqw;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.sl-tab:hover {
+  color: rgba(255, 255, 255, 0.8);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.sl-tab--active {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  color: white;
+}
+
+.sl-close {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 2cqw;
+  cursor: pointer;
+  padding: 0.5cqh 0.8cqw;
+  transition: color 0.2s;
+}
+
+.sl-close:hover {
+  color: white;
+}
+
+/* Separator */
+.sl-separator {
+  width: 100%;
+  height: 1px;
+  margin: 1.5cqh 0;
+  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), rgba(236, 72, 153, 0.4), rgba(139, 92, 246, 0.4), transparent);
+}
+
+/* Grid */
+.sl-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.2cqh 1cqw;
+}
+
+.sl-slot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 1.2cqh 1.2cqw;
+  border-radius: 0.8cqw;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  min-height: 8cqh;
+}
+
+.sl-slot:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
+  transform: scale(1.02);
+}
+
+.sl-slot:active {
+  opacity: 0.8;
+}
+
+.sl-slot--empty {
+  opacity: 0.6;
+}
+
+.sl-slot--empty:hover {
+  opacity: 1;
+}
+
+/* Slot content */
+.sl-slot__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.6cqh;
+}
+
+.sl-slot__number {
+  font-size: 1cqw;
+  color: rgba(255, 255, 255, 0.45);
+  font-family: monospace;
+}
+
+.sl-slot__dot {
+  width: 0.6cqw;
+  height: 0.6cqw;
+  border-radius: 50%;
+  background: #4ade80;
+  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
+  animation: sl-pulse 2s ease-in-out infinite;
+}
+
+@keyframes sl-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.sl-slot__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3cqh;
+}
+
+.sl-slot__label {
+  font-size: 1.2cqw;
+  color: white;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sl-slot__time {
+  font-size: 0.9cqw;
+  color: rgba(255, 255, 255, 0.35);
+  font-family: monospace;
+}
+
+.sl-slot__empty-text {
+  font-size: 1.1cqw;
+  color: rgba(255, 255, 255, 0.2);
+  font-style: italic;
+}
+
+/* Pagination */
+.sl-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2cqw;
+  margin-top: 2cqh;
+}
+
+.sl-page-btn {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 0.6cqw;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 1.2cqw;
+  padding: 0.5cqh 1.2cqw;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sl-page-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  color: white;
+}
+
+.sl-page-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.sl-page-info {
+  font-size: 1.1cqw;
+  color: rgba(255, 255, 255, 0.4);
+  font-family: monospace;
+}
+
+/* Footer */
+.sl-footer {
+  margin-top: 2cqh;
+  text-align: center;
+  font-size: 1cqw;
+  color: rgba(255, 255, 255, 0.2);
+  font-family: monospace;
+}
+</style>

package/src/components/menu/SettingsMenu.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="fixed inset-0 z-50 bg-black/70 flex items-center justify-center" @click.self="engineState.closeMenu()">
+    <div class="bg-gray-900 border border-white/20 rounded-lg w-full max-w-lg p-6">
+      <!-- Header -->
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="text-white font-bold text-lg">&#9881; Settings</h2>
+        <button class="text-white/50 hover:text-white text-xl" @click="engineState.closeMenu()">&times;</button>
+      </div>
+
+      <div class="flex flex-col gap-5 text-sm text-white/80">
+        <!-- Text Speed -->
+        <label class="flex items-center justify-between gap-4">
+          <span>Text Speed</span>
+          <input type="range" min="1" max="10" v-model.number="local.textSpeed" class="flex-1 max-w-48" />
+          <span class="w-4 text-right">{{ local.textSpeed }}</span>
+        </label>
+
+        <!-- Auto Speed -->
+        <label class="flex items-center justify-between gap-4">
+          <span>Auto Speed</span>
+          <input type="range" min="1" max="10" v-model.number="local.autoSpeed" class="flex-1 max-w-48" />
+          <span class="w-4 text-right">{{ local.autoSpeed }}</span>
+        </label>
+
+        <!-- Volume: Master -->
+        <label class="flex items-center justify-between gap-4">
+          <span>&#128266; Master</span>
+          <input type="range" min="0" max="100" v-model.number="local.volume.master" class="flex-1 max-w-48" />
+          <span class="w-8 text-right">{{ local.volume.master }}</span>
+        </label>
+
+        <!-- Volume: Music -->
+        <label class="flex items-center justify-between gap-4">
+          <span>&#127925; Music</span>
+          <input type="range" min="0" max="100" v-model.number="local.volume.music" class="flex-1 max-w-48" />
+          <span class="w-8 text-right">{{ local.volume.music }}</span>
+        </label>
+
+        <!-- Volume: SFX -->
+        <label class="flex items-center justify-between gap-4">
+          <span>&#128232; SFX</span>
+          <input type="range" min="0" max="100" v-model.number="local.volume.sfx" class="flex-1 max-w-48" />
+          <span class="w-8 text-right">{{ local.volume.sfx }}</span>
+        </label>
+
+        <!-- Language -->
+        <label class="flex items-center justify-between gap-4">
+          <span>&#127760; Language</span>
+          <select v-model="local.language" class="bg-gray-800 border border-white/20 text-white rounded px-2 py-1">
+            <option v-for="lang in languages" :key="lang.code" :value="lang.code">{{ lang.label }}</option>
+          </select>
+        </label>
+
+        <!-- Fullscreen -->
+        <label class="flex items-center justify-between gap-4 cursor-pointer">
+          <span>Fullscreen</span>
+          <input type="checkbox" v-model="local.fullscreen" class="w-4 h-4" />
+        </label>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex justify-end gap-3 mt-8">
+        <button class="px-4 py-2 text-white/60 hover:text-white transition-colors" @click="engineState.closeMenu()">
+          Cancel
+        </button>
+        <button
+          class="px-4 py-2 bg-white text-black font-semibold rounded hover:bg-gray-200 transition-colors"
+          @click="apply"
+        >
+          Apply
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, inject, onMounted } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
+import type { Engine } from '../../engine/core/Engine';
+import type { EngineSettings } from '../../engine/types';
+
+const engine = inject<Engine>(ENGINE_INJECT_KEY);
+const engineState = useEngineStateStore();
+
+// Local copy — only committed on Apply
+const local = reactive<EngineSettings>({
+  textSpeed: 50,
+  autoSpeed: 3,
+  volume: { master: 80, music: 70, sfx: 80, voice: 100 },
+  language: 'en',
+  fullscreen: false,
+});
+
+const languages = [{ code: 'en', label: 'English' }];
+
+onMounted(() => {
+  if (engine) {
+    const current = engine.settingsManager.settings;
+    Object.assign(local, structuredClone(current));
+  }
+});
+
+async function apply(): Promise<void> {
+  if (engine) {
+    await engine.settingsManager.update({ ...local });
+  }
+  engineState.closeMenu();
+}
+</script>