@strixit/storyscript 0.0.0-stage → 1.0.0

package/electron.cjs

@@ -0,0 +1,44 @@
+const path = require('path');
+const { app, BrowserWindow } = require('electron');
+
+let win;
+
+function createWindow () {
+  let distPath = path.resolve(__dirname, './dist');
+
+  // Create the browser window.
+  win = new BrowserWindow({
+    width: 1024, 
+    height: 768,
+    icon: `file://${distPath}/logo192.png`
+  })
+
+  win.loadURL(`file://${distPath}/index.html`)
+
+  // uncomment below to open the DevTools.
+  // win.webContents.openDevTools()
+
+  // Event when the window is closed.
+  win.on('closed', function () {
+    win = null
+  })
+}
+
+// Create window on electron intialization
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+
+  // On macOS specific close process
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  // macOS specific close process
+  if (win === null) {
+    createWindow()
+  }
+})

package/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="/favicon.ico" rel="icon"/>
+    <title>%STORYSCRIPT_GAME_NAME%</title>
+    <meta name="description" content="%STORYSCRIPT_GAME_DESCRIPTION%">
+</head>
+<body>
+<div class="app" id="app"></div>
+<script src="/src/UI/main.ts" type="module"></script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,120 @@
 {
   "name": "@strixit/storyscript",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "StoryScript is an engine to create games for the web. Games that run anywhere, online or offline, on any device, and work well with both mouse and touch control. You play your games while you build them! Your changes are shown immediately, allowing you to shape your world as you move through it.",
+  "version": "1.0.0",
+  "author": "Rutger Schurgers",
+  "homepage": "https://www.storyscript.nl",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "main": "./electron.cjs",
+  "module": "./dist/storyscript.mjs",
+  "build": {
+    "appId": "storyscript.id",
+    "files": [
+      "./electron.cjs",
+      "dist/**/*"
+    ],
+    "win": {
+      "target": "portable",
+      "icon": "dist/icon.ico"
+    }
+  },
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/storyscript.mjs",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./styles": "./dist/storyscript.css",
+    "./vite-config": "./dist/baseViteConfig.js"
+  },
+  "bin": {
+    "storyscript": "./scripts/cli.js"
+  },
+  "files": [
+    "CodeSnippets/StoryScriptSnippets.code-snippets",
+    "LiveTemplates",
+    "clientFiles",
+    "scripts/cli.js",
+    "scripts/createGame.js",
+    "scripts/createAsset.js",
+    "scripts/setupTesting.js",
+    "scripts/postbuild.js",
+    "scripts/helpers.js",
+    "src/Engine",
+    "src/UI",
+    "src/Games/_GameTemplate",
+    "src/Tests/Games/_GameTemplate",
+    "dist/**/*.d.ts",
+    "!dist/**/Games",
+    "!dist/**/Tests",
+    "dist/storyscript.*",
+    "baseViteConfig.js",
+    "typeExtensions.d.ts",
+    "shims-vue.d.ts",
+    "vite-env.d.ts",
+    "index.html",
+    "electron.cjs",
+    ".env"
+  ],
+  "scripts": {
+    "create-game": "node scripts/createGame.js",
+    "sca": "node scripts/createAsset.js action",
+    "scl": "node scripts/createAsset.js location",
+    "scf": "node scripts/createAsset.js feature",
+    "sce": "node scripts/createAsset.js enemy",
+    "scp": "node scripts/createAsset.js person",
+    "sci": "node scripts/createAsset.js item",
+    "sck": "node scripts/createAsset.js key",
+    "scq": "node scripts/createAsset.js quest",
+    "scm": "node scripts/createAsset.js map",
+    "start": "vite",
+    "test": "node ./src/Tests/beforeTests.js && node scripts/setupTesting.js && vitest --ui",
+    "publish": "tsc && vite build",
+    "publish:package": "tsc && VITE_BUILD_LIB=true vite build",
+    "electron-start": "vite build && electron .",
+    "electron-publish": "vite build && electron-builder",
+    "pack:test": "node scripts/pack-and-test.js",
+    "pack": "npm run publish:package && npm pack"
+  },
+  "dependencies": {
+    "@types/node": "^26.6.4",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/language-server": "^3.3.12",
+    "@vueuse/components": "^15.0.0",
+    "@vueuse/core": "^15.0.0",
+    "archiver": "^8.0.0",
+    "fs-extra": "^11.4.1",
+    "jsonfile": "^6.2.1",
+    "pinia": "^4.0.3",
+    "sass-embedded": "^1.105.1",
+    "sharp": "^0.35.5",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.4",
+    "vite-plugin-checker": "^0.14.5",
+    "vite-plugin-pwa": "^2.0.0",
+    "vite-plugin-static-copy": "^4.1.1",
+    "vue": "^3.5.43",
+    "vue-tsc": "^3.3.12",
+    "which": "^7.0.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^5.0.3",
+    "@vitest/ui": "^5.0.3",
+    "bootstrap": "^5.3.8",
+    "jsdom": "^30.1.1",
+    "vitest": "^5.0.3",
+    "vite-plugin-dts": "^5.1.2",
+    "electron": "^44.7.0",
+    "electron-builder": "^26.15.3",
+    "rollup-plugin-visualizer": "^7.1.1"
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.6.0": true,
+    "electron-winstaller@5.4.0": true
+  }
+}

package/scripts/cli.js

@@ -0,0 +1,268 @@
+#!/usr/bin/env node
+
+import path from 'path';
+import fs from 'fs-extra';
+import {fileURLToPath} from 'url';
+import {spawn} from 'child_process';
+import {setJsonFileProperty} from "./helpers.js";
+import {createInterface} from 'readline';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const command = process.argv[2];
+const args = process.argv.slice(3);
+const projectRoot = process.cwd();
+
+const packageDir = path.resolve(__dirname, '..');
+const flagFile = path.join(packageDir, '.setup-complete');
+
+const filesToCopy = [
+    ['CodeSnippets/StoryScriptSnippets.code-snippets', '.vscode/StoryScriptSnippets.code-snippets', true],
+    ['clientFiles/tsconfig.json', 'tsconfig.json', true],
+    ['clientFiles/vite.config.ts', 'vite.config.ts', true],
+    ['clientFiles/gitignore', '.gitignore', false],
+    ['clientFiles/currentGameName.js', 'currentGameName.js', false],
+    ['src/UI/Components', true],
+    ['src/UI/main.ts', true],
+    ['index.html', true],
+    ['typeExtensions.d.ts', true],
+    ['shims-vue.d.ts', true],
+    ['vite-env.d.ts', true],
+    ['.env', false]
+];
+
+const getGameNameInput = () => {
+    const rl = createInterface({
+        input: process.stdin,
+        output: process.stdout
+    });
+
+    return new Promise((resolve) => {
+        const prompt = () => {
+        rl.question('Enter a valid game name. Start with a letter and use letters, numbers and underscores up to 50 characters: ', (answer) => {
+            const gameNameRegex = /^[a-zA-Z][a-zA-Z0-9_]{0,49}$/;
+
+            if (!gameNameRegex.test(answer)) {
+                console.error('❌ That is not a valid game name. Please try again.');
+                prompt();
+            } else {
+                rl.close();
+                resolve(answer);
+            }
+        });
+
+        };
+        
+        prompt();
+    });
+};
+
+async function main() {
+    if (command === 'setup') {
+        await setup();
+    } else if (command === 'game') {
+        await createGame(args[0]);
+    } else if (command === 'start') {
+        await executeTask('vite');
+    } else if (command === 'start:electron') {
+        await electron(true);
+    } else if (command === 'test') {
+        await runTests();
+    } else if (command === 'publish') {
+        await executeTask('vite', ['build']);
+    } else if (command === 'preview') {
+        await executeTask('vite', ['preview']);
+    } else if (command === 'publish') {
+        await executeTask('vite', ['build']);
+    } else if (command === 'publish:electron') {
+        await electron(false);
+    } else if (/^(location)|(feature)|(map)|(item)|(key)|(enemy)|(person)|(quest)|(action)$/i.test(command)) {
+        await createAsset(command, args[0]);
+    } else {
+        console.log('Usage: storyscript <command>');
+        console.log('\nCommands:');
+        console.log('  setup            Setup StoryScript. Includes creating a new game.');
+        console.log('  game     [name]  Create a new StoryScript game.');
+        console.log('  location [name]  Create a new StoryScript Location.');
+        console.log('  feature  [name]  Create a new StoryScript stand-alone Feature.');
+        console.log('  map      [name]  Create a new StoryScript Map.');
+        console.log('  item     [name]  Create a new StoryScript Item.');
+        console.log('  key      [name]  Create a new StoryScript Key.');
+        console.log('  enemy    [name]  Create a new StoryScript Enemy.');
+        console.log('  person   [name]  Create a new StoryScript Person.');
+        console.log('  quest    [name]  Create a new StoryScript Quest.');
+        console.log('  action   [name]  Create a new StoryScript stand-alone Action.');
+        console.log('  start            Start running your game in development mode.');
+        console.log('  test             Run the tests for your game. This will setup testing if you don\'t have any tests yet.');
+        console.log('  publish          Build your game for deployment as a web app.');
+        console.log('  preview          preview your published web app game.');
+        console.log('  start:electron   Start running your game in electron. This will setup electron if you don\'t have it yet.');
+        console.log('  publish:electron Build your game for deployment as an electron executable. This will setup electron if you don\'t have it yet.');
+        console.log('\nDon\'t forget that when you use Visual Studio Code Or Rider you have the StoryScript Code Snippets / Live Templates at your disposal. ' +
+            'Check out https://www.storyscript.nl/reference for an overview of all available code snippets.');
+    }
+}
+
+main().catch(err => {
+    console.error(err);
+    process.exit(1);
+});
+
+async function setup() {
+    const isFirstInstall = !fs.existsSync(flagFile);
+
+    console.log(`🚀 ${isFirstInstall ? 'Setting up StoryScript...' : 'Updating StoryScript...'}`);
+    console.log(`📁 Target: ${projectRoot}`);
+
+    fs.copySync(path.join(packageDir, 'baseViteConfig.js'), path.join(packageDir, 'dist/baseViteConfig.js'));
+    fs.copySync(path.join(packageDir, 'scripts/postbuild.js'), path.join(packageDir, 'dist/scripts/postbuild.js'));
+    fs.copySync(path.join(packageDir, 'scripts/helpers.js'), path.join(packageDir, 'dist/scripts/helpers.js'));
+
+    try {
+        for (const file of filesToCopy) {
+            copyFile(file);
+        }
+
+        if (isFirstInstall) {
+            const gameName = await getGameNameInput();
+            await createGame(gameName);
+            setJsonFileProperty(path.join(projectRoot, 'package.json'), 'type', 'module');
+            fs.writeFileSync(flagFile, '');
+        }
+
+        console.log('✅ Setup complete!');
+        
+        if (isFirstInstall) {
+            console.log('\nRun this command to start your game:');
+            console.log('  npx storyscript start');
+            console.log('\n');
+        }
+        
+    } catch (err) {
+        console.error('❌ Setup failed:', err.message);
+        process.exit(1);
+    }
+}
+
+async function runTests() {
+    const scriptPath = path.join(__dirname, 'setupTesting.js');
+    copyFile(['clientFiles/vitest.config.ts', 'vitest.config.ts', false]);
+    await executeTask('node', [scriptPath]);
+    await executeTask('npm', ['install', 'jsdom@latest', '@vitest/ui@latest', '@vitest/coverage-v8@latest', '--save-dev']);
+    await executeTask('vitest', ['--ui'], false);
+}
+
+async function electron(preview) {
+    copyFile(['electron.cjs', false]);
+
+    const gameName = await getGameName();
+
+    setJsonFileProperty(path.join(projectRoot, 'package.json'), 'name', gameName);
+    setJsonFileProperty(path.join(projectRoot, 'package.json'), 'version', '1.0.0');
+    setJsonFileProperty(path.join(projectRoot, 'package.json'), 'main', './electron.cjs');
+    setJsonFileProperty(path.join(projectRoot, 'package.json'), 'build', {
+        "appId": "storyscript.id",
+        "files": [
+            "./electron.cjs",
+            "dist/**/*"
+        ],
+        "win": {
+            "target": "portable",
+            "icon": "dist/icon.ico"
+        }
+    });
+
+    await executeTask('npm', ['install', 'electron@latest', 'electron-builder@latest', '--save-dev']);
+    await executeTask('vite', ['build']);
+
+    if (preview) {
+        await executeTask('electron', ['.'], false);
+    } else {
+        await executeTask('electron-builder', [], false);
+    }
+}
+
+async function createGame(gameName) {
+    if (!gameName) {
+        console.error('Error: Game name is required');
+        console.error('Usage: npx storyscript create-game <gameName>');
+        process.exit(1);
+    }
+
+    const scriptPath = path.join(__dirname, 'createGame.js');
+    await executeTask('node', [scriptPath, gameName]);
+    console.log(`✅ Game "${gameName}" created successfully!`);
+}
+
+async function createAsset(commandName, assetName) {
+    if (!assetName) {
+        console.error('Error: Asset name is required');
+        console.error(`Usage: npx storyscript ${commandName} <assetName>`);
+        process.exit(1);
+    }
+
+    const scriptPath = path.join(__dirname, 'createAsset.js');
+
+    await executeTask('node', [scriptPath, commandName, assetName]);
+}
+
+async function getGameName() {
+    const nameModule = await import(path.resolve(projectRoot, 'currentGameName.js'));
+    return nameModule.currentGameName;
+}
+
+async function executeTask(command, args, waitForCompletion) {
+    if (waitForCompletion === undefined || waitForCompletion) {
+        return new Promise((resolve, reject) => {
+            const child = spawn(command, args, {
+                stdio: 'inherit'
+            });
+
+            child.on('close', (code) => {
+                if (code === 0) {
+                    resolve();
+                } else {
+                    reject(new Error(`Command ${command} failed with code ${code}`));
+                }
+            });
+
+            child.on('error', (err) => {
+                reject(err);
+            });
+        });
+    }
+
+    spawn(command, args, {
+        stdio: 'inherit'
+    });
+}
+
+function copyFile(file) {
+    const srcFile = file[0];
+    const destFile = file.length < 3 ? file[0] : file[1];
+    const overWrite = file.length < 3 ? file[1] : file[2];
+
+    const src = path.join(packageDir, srcFile);
+    const dest = path.join(projectRoot, destFile);
+
+    const stat = fs.statSync(src);
+
+    if (stat.isDirectory()) {
+        fs.cpSync(src, dest, {recursive: true});
+        return;
+    }
+
+    if (!fs.existsSync(src)) {
+        console.warn(`⚠️  ${srcFile} not found in template`);
+        return;
+    }
+
+    if (fs.existsSync(dest)) {
+        if (fs.existsSync(dest) && !overWrite) {
+            return;
+        }
+    }
+
+    fs.copySync(src, dest);
+}

package/scripts/createAsset.js

@@ -0,0 +1,117 @@
+import {existsSync, mkdirSync, writeFileSync} from 'fs';
+import pkg from 'jsonfile';
+import {rootFolder} from "./helpers.js";
+import path from "path";
+
+const {readFileSync} = pkg;
+
+const args = process.argv;
+
+const entityNameRegex = /^[a-zA-Z][A-Za-z0-9_]+$/;
+const nameModule = await import(path.resolve(rootFolder, 'currentGameName.js'));
+const gameDir = `${rootFolder}/src/Games/${nameModule.currentGameName}`;
+
+const assetType = args[2];
+
+if (!assetType) {
+    console.log('You need to specify an asset type, e.g. location.');
+    process.exit();
+}
+
+const assetName = args[3];
+
+if (!assetName) {
+    console.log('You need to specify an asset name, e.g. \'Cave\'.');
+    process.exit();
+}
+
+if (!entityNameRegex.exec(assetName)) {
+    console.log(`${assetName} is not a valid asset name! The name must start with a letter and contain only letters, numbers and '_'.`);
+    process.exit();
+}
+
+let baseSnippetKey = assetType.substring(0, 1).toUpperCase() + assetType.substring(1) + 's';
+let snippetKey = baseSnippetKey.endsWith('ys') ? baseSnippetKey.substring(0, baseSnippetKey.length - 2) + 'ies' : baseSnippetKey;
+const assetNameCapital = assetName.substring(0, 1).toUpperCase() + assetName.substring(1);
+
+const snippets = readFileSync(path.resolve(rootFolder, '.vscode', 'StoryScriptSnippets.code-snippets'));
+
+if (!snippets[snippetKey]) {
+    if (!snippets[baseSnippetKey]) {
+        console.log(`No asset type ${assetType} exists.`);
+        process.exit();
+    }
+    snippetKey = baseSnippetKey;
+}
+
+const descriptionSnippet = snippets['Description'];
+
+if (!descriptionSnippet) {
+    console.log('The description snippet doesn\'t exist.');
+    process.exit();
+}
+
+let includeDescription = !process.argv[4] || process.argv[4].toLowerCase() !== 'p';
+includeDescription = (snippetKey === 'Locations' || snippetKey === 'Persons') || ((snippetKey === 'Items' || snippetKey === 'Keys' || snippetKey === 'Enemies') && includeDescription);
+
+let conversationSnippet = null;
+
+if (snippetKey === 'Persons') {
+    conversationSnippet = snippets['Conversation'];
+
+    if (!conversationSnippet) {
+        console.log('The conversation snippet doesn\'t exist.');
+    }
+}
+
+const snippet = snippets[snippetKey];
+
+// Keys go into the items folder.
+const dirName = snippetKey === 'Keys' ? 'Items' : snippetKey;
+const assetDir = `${gameDir}/${dirName.toLowerCase()}`;
+const assetBaseFileName = `${assetDir}/${assetName}`;
+
+if (!existsSync(assetDir)) {
+    mkdirSync(assetDir);
+}
+
+if (!includeDescription) {
+    const cleaned = [];
+
+    snippet.body = Object.keys(snippet.body).forEach(k => {
+        const l = snippet.body[k];
+        if (!l.match(/import description from \'\.\/\$\{TM_FILENAME_BASE\}\.html?raw';/g) && !l.match(/[\\t]{0,}description:/g)) {
+            cleaned.push(l);
+        }
+    });
+
+    snippet.body = cleaned;
+}
+
+const tsString = snippet.body
+    .join('\n')
+    .replace(/\${TM_FILENAME_BASE}/g, assetName)
+    .replace(/\${TM_FILENAME_BASE\/\(\.\*\)\/\${1:\/capitalize}\/}/g, assetNameCapital)
+    .replace(/\$[0-9]{1,}/g, '');
+
+// Write ts file
+writeFileSync(assetBaseFileName + '.ts', tsString);
+
+if (!includeDescription) {
+    process.exit();
+}
+
+let htmlString = removePlaceholders(descriptionSnippet);
+
+if (conversationSnippet) {
+    htmlString = htmlString + '\n' + removePlaceholders(conversationSnippet);
+}
+
+// Write html file
+writeFileSync(assetBaseFileName + '.html', htmlString);
+
+function removePlaceholders(value) {
+    return value.body
+        .join('\n')
+        .replace(/\$[0-9]{1,}/g, '');
+}

package/scripts/createGame.js

@@ -0,0 +1,40 @@
+import pkg from 'fs-extra';
+import fs from "fs";
+import {fileURLToPath} from "url";
+import path from "path";
+import {rootFolder, setJsonFileProperty} from "./helpers.js";
+
+const {copy, writeFile} = pkg;
+
+const __filename = fileURLToPath(import.meta.url);
+let __dirname = path.resolve(path.dirname(__filename), '../');
+const gameName = process.argv[2];
+
+if (!gameName) {
+    console.log('Please specify a game name.');
+    process.exit();
+}
+
+// Set the game name to the new game.
+await writeFile(path.resolve(rootFolder, 'currentGameName.js'), `export const currentGameName = '${gameName}';`);
+
+const gameRoot = `${__dirname}/src/Games/_GameTemplate/`;
+const gameDestination = `${rootFolder}/src/Games/${gameName}`;
+
+// Copy the game template.
+await copy(gameRoot, gameDestination);
+
+// Add the game name to the game info.
+setJsonFileProperty(path.join(gameDestination, 'webroot', 'gameinfo.json'), 'name', gameName);
+
+// Add the components and the resources folders to make sure they are present.
+const componentsPath = `${gameDestination}/ui/components`;
+const resourcesPath = `${gameDestination}/resources`;
+
+if (!fs.existsSync(componentsPath)) {
+    fs.mkdirSync(componentsPath);
+}
+
+if (!fs.existsSync(resourcesPath)) {
+    fs.mkdirSync(resourcesPath);
+}

package/scripts/helpers.js

@@ -0,0 +1,21 @@
+import {fileURLToPath} from "url";
+import path from 'path';
+import fs from "fs-extra";
+
+const __filename = fileURLToPath(import.meta.url);
+let __dirname = path.dirname(__filename);
+__dirname = __dirname.includes('/node_modules/') ? 
+    __dirname.split('/node_modules/')[0] : __dirname.includes('/scripts') 
+        ? __dirname.split('/scripts')[0] :__dirname;
+
+export const rootFolder = __dirname;
+
+export function setJsonFileProperty(filePath, property, newValue) {
+    const rawData = fs.readFileSync(filePath, 'utf8');
+    const jsonObject = JSON.parse(rawData);
+    
+    if (!jsonObject[property]) {
+        jsonObject[property] = newValue;
+        fs.writeFileSync(filePath, JSON.stringify(jsonObject, null, 2), 'utf8');
+    }
+}