@vylos/cli 0.1.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-2026 DevOpsBenjamin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@vylos/cli",
-  "version": "0.1.0",
+  "version": "0.3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DevOpsBenjamin/Vylos"
+  },
   "type": "module",
   "bin": {
     "vylos": "./bin/vylos.mjs"
@@ -13,7 +17,7 @@
     "tailwindcss": "^4.0.0",
     "@tailwindcss/vite": "^4.0.0",
     "tsx": "^4.19.2",
-    "@vylos/core": "0.1.0"
+    "@vylos/core": "0.3.0"
   },
   "devDependencies": {
     "typescript": "^5.7.2"

package/src/commands/build.ts

@@ -6,13 +6,14 @@ import { resolve } from 'path';
 import { vylosProjectPlugin } from '../vite/projectPlugin';
 import { vylosI18nPlugin } from '../vite/i18nPlugin';
 
-export async function build(projectRoot: string) {
+export async function build(projectRoot: string, base?: string) {
   console.log(`\n  Vylos building...\n  Project: ${projectRoot}\n`);
 
   const outDir = resolve(projectRoot, 'dist');
 
   await viteBuild({
     root: projectRoot,
+    base: base ?? '/',
     plugins: [
       vue(),
       tailwindcss(),
@@ -28,6 +29,7 @@ export async function build(projectRoot: string) {
     build: {
       outDir,
       emptyOutDir: true,
+      assetsInlineLimit: 0,
       rollupOptions: {
         input: resolve(projectRoot, 'index.html'),
       },

package/src/commands/create.ts

@@ -1,5 +1,5 @@
 import { resolve, dirname } from 'path';
-import { existsSync, mkdirSync, cpSync } from 'fs';
+import { existsSync, mkdirSync, cpSync, readFileSync, writeFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 
 export async function create(name: string, targetDir?: string) {
@@ -24,6 +24,13 @@ export async function create(name: string, targetDir?: string) {
   mkdirSync(dest, { recursive: true });
   cpSync(templateDir, dest, { recursive: true });
 
+  // Replace project name in package.json
+  const pkgPath = resolve(dest, 'package.json');
+  if (existsSync(pkgPath)) {
+    const pkg = readFileSync(pkgPath, 'utf-8');
+    writeFileSync(pkgPath, pkg.replace('"my-vylos-game"', `"${name}"`));
+  }
+
   console.log(`  Project created at: ${dest}`);
   console.log(`\n  Next steps:`);
   console.log(`    cd ${name}`);

package/src/index.ts

@@ -4,6 +4,13 @@ import { resolve } from 'path';
 const args = process.argv.slice(2);
 const command = args[0];
 
+function parseFlag(flag: string): string | undefined {
+  const idx = args.indexOf(flag);
+  if (idx !== -1 && idx + 1 < args.length) {
+    return args[idx + 1];
+  }
+}
+
 async function main() {
   switch (command) {
     case 'dev': {
@@ -14,9 +21,11 @@ async function main() {
     }
 
     case 'build': {
-      const projectRoot = resolve(args[1] ?? process.cwd());
+      const base = parseFlag('--base');
+      const projectArg = args.find((a, i) => i > 0 && a !== '--' && !a.startsWith('--') && args[i - 1] !== '--base');
+      const projectRoot = resolve(projectArg ?? process.cwd());
       const { build } = await import('./commands/build');
-      await build(projectRoot);
+      await build(projectRoot, base);
       break;
     }
 
@@ -50,11 +59,12 @@ async function main() {
   Vylos — Visual Novel Engine
 
   Usage:
-    vylos dev [project-dir]     Start dev server
-    vylos build [project-dir]   Build for production
-    vylos editor [project-dir]  Open visual editor
-    vylos verify [project-dir]  Type-check project
-    vylos create <name>         Create new project
+    vylos dev [project-dir]              Start dev server
+    vylos build [project-dir]            Build for production
+    vylos build [project-dir] --base /p/ Build with custom base path
+    vylos editor [project-dir]           Open visual editor
+    vylos verify [project-dir]           Type-check project
+    vylos create <name>                  Create new project
 `);
   }
 }

package/src/vite/projectPlugin.ts

@@ -1,10 +1,10 @@
 import type { Plugin } from 'vite';
 import { resolve } from 'path';
-import { existsSync } from 'fs';
+import { existsSync, cpSync } from 'fs';
 
 /**
  * Vite plugin that resolves virtual module `vylos:project` to the project's config.
- * Also serves project assets.
+ * Also serves project assets in dev and copies them in build.
  */
 export function vylosProjectPlugin(projectRoot: string): Plugin {
   const virtualModuleId = 'vylos:project';
@@ -37,24 +37,14 @@ export function vylosProjectPlugin(projectRoot: string): Plugin {
     },
 
     configureServer(server) {
-      // Serve location assets
-      const locationsDir = resolve(projectRoot, 'locations');
-      const globalDir = resolve(projectRoot, 'global');
+      const assetsDir = resolve(projectRoot, 'assets');
 
       server.middlewares.use((req, _res, next) => {
         if (!req.url) return next();
 
-        // Rewrite /locations/... to project locations dir
-        if (req.url.startsWith('/locations/')) {
-          const assetPath = resolve(locationsDir, req.url.slice('/locations/'.length));
-          if (existsSync(assetPath)) {
-            req.url = '/@fs/' + assetPath.replace(/\\/g, '/');
-          }
-        }
-
-        // Rewrite /global/... to project global dir
-        if (req.url.startsWith('/global/')) {
-          const assetPath = resolve(globalDir, req.url.slice('/global/'.length));
+        // Rewrite /assets/... to project assets dir
+        if (req.url.startsWith('/assets/')) {
+          const assetPath = resolve(assetsDir, req.url.slice('/assets/'.length));
           if (existsSync(assetPath)) {
             req.url = '/@fs/' + assetPath.replace(/\\/g, '/');
           }
@@ -63,5 +53,14 @@ export function vylosProjectPlugin(projectRoot: string): Plugin {
         next();
       });
     },
+
+    writeBundle() {
+      const assetsDir = resolve(projectRoot, 'assets');
+      const outDir = resolve(projectRoot, 'dist', 'assets');
+
+      if (existsSync(assetsDir)) {
+        cpSync(assetsDir, outDir, { recursive: true });
+      }
+    },
   };
 }

package/templates/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/templates/global/actions/wait.ts

@@ -0,0 +1,11 @@
+import type { VylosAction, BaseGameState } from '@vylos/core';
+
+const wait: VylosAction = {
+  id: 'wait',
+  label: 'Wait 1 Hour',
+  execute(state: BaseGameState) {
+    state.gameTime += 1;
+  },
+};
+
+export default wait;

package/templates/global/events/intro.ts

@@ -0,0 +1,25 @@
+import type { VylosEvent, VylosAPI, BaseGameState } from '@vylos/core';
+
+const intro: VylosEvent = {
+  id: 'intro',
+  conditions: (state) => !state.flags['intro_done'],
+  async execute(engine: VylosAPI, state: BaseGameState) {
+    await engine.say('Welcome to your Vylos game!');
+    await engine.say('This is a starter template. Edit the events to build your story.');
+
+    const pick = await engine.choice([
+      { text: 'Sounds good!', value: 'ok' },
+      { text: 'Tell me more', value: 'more' },
+    ]);
+
+    if (pick === 'more') {
+      await engine.say('Events pause at each say() and choice() call.');
+      await engine.say('Add locations, backgrounds, and characters to bring your story to life.');
+    }
+
+    await engine.say('Your adventure begins here. Good luck!');
+    state.flags['intro_done'] = true;
+  },
+};
+
+export default intro;

package/templates/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>My Vylos Game</title>
+  <style>html, body, #app { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }</style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

package/templates/locations/home/location.ts

@@ -0,0 +1,9 @@
+import type { VylosLocation } from '@vylos/core';
+
+const home: VylosLocation = {
+  id: 'home',
+  name: 'Home',
+  backgrounds: [{ path: '' }],
+};
+
+export default home;

package/templates/main.ts

@@ -0,0 +1,118 @@
+import 'reflect-metadata';
+import './style.css';
+import { createApp, watch } from 'vue';
+import { createPinia } from 'pinia';
+import {
+  GameShell,
+  createEngine,
+  useEngineStateStore,
+  useGameStateStore,
+  ENGINE_INJECT_KEY,
+  CONFIG_INJECT_KEY,
+  EnginePhase,
+  LocationManager,
+  ActionManager,
+  type EventRunnerCallbacks,
+  type TextEntry,
+} from '@vylos/core';
+import config from './vylos.config';
+
+// Locations
+import home from './locations/home/location';
+
+// Events
+import intro from './global/events/intro';
+
+// Actions
+import wait from './global/actions/wait';
+
+const app = createApp(GameShell);
+const pinia = createPinia();
+app.use(pinia);
+
+const engineState = useEngineStateStore(pinia);
+const gameState = useGameStateStore(pinia);
+
+// Location manager
+const locationManager = new LocationManager();
+locationManager.registerAll([home]);
+
+// Action manager
+const actionManager = new ActionManager();
+actionManager.registerAll([wait]);
+
+const callbacks: EventRunnerCallbacks = {
+  onSay(text, speaker) {
+    engineState.setDialogue({ text, speaker, isNarration: !speaker });
+  },
+  onChoice(options) {
+    engineState.setChoices({ prompt: null, options });
+  },
+  onSetBackground(path) { engineState.setBackground(path); },
+  onSetForeground(path) { engineState.setForeground(path); },
+  onShowOverlay() {},
+  onHideOverlay() {},
+  onSetLocation(id) {
+    gameState.state.locationId = id;
+    engineState.setLocation(id);
+    const bg = locationManager.resolveBackground(id, gameState.state.gameTime);
+    if (bg) engineState.setBackground(bg);
+  },
+  onClear() {
+    engineState.setDialogue(null);
+    engineState.setChoices(null);
+  },
+  resolveText(entry: string | TextEntry) {
+    return typeof entry === 'string' ? entry : entry['en'] ?? Object.values(entry)[0] ?? '';
+  },
+  getState() { return gameState.state; },
+  setState(s) { gameState.setState(s); },
+};
+
+const engine = createEngine({ callbacks, projectId: config.id });
+app.provide(ENGINE_INJECT_KEY, engine);
+app.provide(CONFIG_INJECT_KEY, config);
+app.mount('#app');
+
+engineState.setPhase(EnginePhase.MainMenu);
+
+const stopWatch = watch(() => engineState.phase, (newPhase) => {
+  if (newPhase === EnginePhase.Running) {
+    stopWatch();
+    startGame();
+  }
+});
+
+function startGame() {
+  gameState.state.locationId = 'home';
+  gameState.state.gameTime = 12;
+  engineState.setLocation('home');
+
+  engine.run([intro], () => gameState.state, {
+    onTick(state) {
+      const locations = locationManager.getAccessibleFrom(state.locationId, state);
+      engineState.setLocations(locations.map(l => ({
+        id: l.id,
+        name: typeof l.name === 'string' ? l.name : l.name['en'] ?? l.id,
+        accessible: true,
+      })));
+
+      const actions = actionManager.getAvailable(state.locationId, state);
+      engineState.setActions(actions.map(a => ({
+        id: a.id,
+        label: typeof a.label === 'string' ? a.label : a.label['en'] ?? a.id,
+        locationId: a.locationId ?? '',
+      })));
+
+      const resolveText = (t: string | Record<string, string>) =>
+        typeof t === 'string' ? t : t['en'] ?? Object.values(t)[0] ?? '';
+      engineState.setDrawableEvents(engine.eventManager.getDrawableEvents(state, resolveText));
+
+      const bg = locationManager.resolveBackground(state.locationId, state.gameTime);
+      if (bg) engineState.setBackground(bg);
+    },
+    onAction(actionId, state) {
+      actionManager.execute(actionId, state);
+    },
+  }).catch(console.error);
+}

package/templates/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "my-vylos-game",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vylos dev",
+    "build": "vylos build"
+  },
+  "dependencies": {
+    "@vylos/core": "^0.2.1",
+    "@vylos/cli": "^0.2.1",
+    "vue": "^3.5.13",
+    "pinia": "^2.3.0",
+    "reflect-metadata": "^0.2.2",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  }
+}

package/templates/style.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@source "../node_modules/@vylos/core/src/components";

package/templates/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "baseUrl": "."
+  },
+  "include": ["./**/*.ts", "./**/*.vue", "./env.d.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/vylos.config.ts

@@ -0,0 +1,11 @@
+import type { VylosConfig } from '@vylos/core';
+
+export default {
+  name: 'My Vylos Game',
+  id: 'my-game',
+  version: '0.1.0',
+  languages: ['en'],
+  defaultLanguage: 'en',
+  defaultLocation: 'home',
+  resolution: { width: 1920, height: 1080 },
+} satisfies VylosConfig;