@narrat/plugin-counter 2.12.1

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.md

@@ -0,0 +1,3 @@
+# Narrat plugin template
+
+TODO: Docs

package/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/dist/components/counter-ui.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    counter: import("vue").ComputedRef<number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/custom-stores/counter-store.d.ts

@@ -0,0 +1,9 @@
+export declare const useCounter: import("pinia").StoreDefinition<"counter", {
+    count: number;
+}, {}, {
+    save(): {
+        count: number;
+    };
+    load(data: any): void;
+    reset(): void;
+}>;

package/dist/data/audio.yaml

@@ -0,0 +1,7 @@
+files: {}
+options:
+  volume: 0.5
+  musicFadeInTime: 0.5
+  musicFadeInDelay: 0.5
+  musicFadeOutTime: 0.5
+audioTriggers: {}

package/dist/data/buttons.yaml

@@ -0,0 +1 @@
+buttons: {}

package/dist/data/characters.yaml

@@ -0,0 +1,11 @@
+---
+config:
+  imagesPath: img/characters/
+characters:
+  game:
+    name: ''
+    color: white
+  player:
+    style:
+      color: orange
+    name: You

package/dist/data/config.yaml

@@ -0,0 +1,41 @@
+---
+gameTitle: Narrat Game Example
+images: {}
+dialogPanel:
+  textSpeed: 30
+  animateText: true
+  timeBetweenLines: 100
+  overlayMode: true
+  rightOffset: 100
+  bottomOffset: 50
+  width: 475
+  height: 680
+layout:
+  backgrounds:
+    width: 1280
+    height: 720
+  dialogBottomPadding: 70
+  mobileDialogHeightPercentage: 60
+  verticalLayoutThreshold: 600
+  portraits:
+    width: 100
+    height: 100
+screens: data/screens.yaml
+buttons: data/buttons.yaml
+skills: data/skills.yaml
+scripts: data/scripts.yaml
+characters: data/characters.yaml
+audio: data/audio.yaml
+notifications:
+  timeOnScreen: 2.5
+  alsoPrintInDialogue: true
+hudStats: {}
+items: data/items.yaml
+interactionTags:
+  default:
+    onlyInteractOutsideOfScripts: true
+quests: data/quests.yaml
+menuButtons: {}
+saves:
+  mode: manual
+  slots: 10

package/dist/data/game.nar

@@ -0,0 +1,2 @@
+main:
+  "Hello world"

package/dist/data/items.yaml

@@ -0,0 +1 @@
+items: {}

package/dist/data/quests.yaml

@@ -0,0 +1,4 @@
+categories:
+  - id: default
+    title: Default quest category
+quests: {}

package/dist/data/screens.yaml

@@ -0,0 +1,3 @@
+screens:
+  default:
+    background: img/backgrounds/curtain.webp

package/dist/data/scripts.yaml

@@ -0,0 +1,2 @@
+---
+- data/game.nar

package/dist/data/skills.yaml

@@ -0,0 +1,20 @@
+skills: {}
+skillChecks:
+  rollRange: 100
+  skillMultiplier: 10
+  failureChance: 1
+  difficultyText:
+    - - 0
+      - Very Easy
+    - - 10
+      - Easy
+    - - 30
+      - Medium
+    - - 50
+      - Hard
+    - - 70
+      - Very Hard
+    - - 80
+      - Extremely Hard
+    - - 90
+      - Near Impossible

package/dist/demo.d.ts

@@ -0,0 +1 @@
+import 'narrat/dist/style.css';

package/dist/narrat-plugin-counter.es.js

@@ -0,0 +1,76 @@
+var i = Object.defineProperty;
+var m = (t, n, o) => n in t ? i(t, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[n] = o;
+var c = (t, n, o) => (m(t, typeof n != "symbol" ? n + "" : n, o), o);
+import { defineComponent as l, computed as p, openBlock as _, createElementBlock as d, toDisplayString as g } from "vue";
+import { defineStore as f } from "pinia";
+import { NarratPlugin as C, CommandPlugin as a } from "narrat";
+const r = f("counter", {
+  state: () => ({
+    count: 0
+  }),
+  actions: {
+    save() {
+      return {
+        count: this.count
+      };
+    },
+    load(t) {
+      this.count = t.count;
+    },
+    reset() {
+      this.count = 0;
+    }
+  }
+}), h = l({
+  setup() {
+    console.log("counter ui");
+    const t = r();
+    return { counter: p(() => t.count) };
+  }
+});
+const v = (t, n) => {
+  const o = t.__vccOpts || t;
+  for (const [e, u] of n)
+    o[e] = u;
+  return o;
+};
+function x(t, n, o, e, u, s) {
+  return _(), d("h1", null, "Counter value: " + g(t.counter), 1);
+}
+const $ = /* @__PURE__ */ v(h, [["render", x]]);
+class w extends C {
+  constructor() {
+    super();
+    c(this, "customStores");
+    c(this, "customCommands");
+    c(this, "customMenuTabs");
+    const o = "2.12.1", e = new Date("2023-04-12T18:44:03.331Z").toLocaleString();
+    console.log(
+      `%c [Narrat plugin] [@narrat/plugin-counter]  v${o} - Built at ${e}`,
+      "background: #222; color: #bada55"
+    ), this.customStores = {
+      counter: r
+    }, this.customCommands = [
+      new a(
+        "increase_counter",
+        [],
+        async (s) => r().count++
+      ),
+      new a("get_counter", [], async (s) => r().count)
+    ], this.customMenuTabs = [
+      {
+        menuId: "menu",
+        config: {
+          id: "counter",
+          text: "Counter",
+          cssClass: "counter-menu-button",
+          component: "CounterUi"
+        },
+        component: $
+      }
+    ];
+  }
+}
+export {
+  w as CounterPlugin
+};

package/dist/narrat-plugin-counter.umd.js

@@ -0,0 +1 @@
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("pinia"),require("narrat")):typeof define=="function"&&define.amd?define(["exports","vue","pinia","narrat"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["narrat-plugin-counter"]={},n.Vue,n.pinia,n.narrat))})(this,function(n,e,o,a){"use strict";var C=Object.defineProperty;var h=(n,e,o)=>e in n?C(n,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[e]=o;var i=(n,e,o)=>(h(n,typeof e!="symbol"?e+"":e,o),o);const c=o.defineStore("counter",{state:()=>({count:0}),actions:{save(){return{count:this.count}},load(t){this.count=t.count},reset(){this.count=0}}}),m=e.defineComponent({setup(){console.log("counter ui");const t=c();return{counter:e.computed(()=>t.count)}}}),y="",p=(t,r)=>{const u=t.__vccOpts||t;for(const[s,d]of r)u[s]=d;return u};function f(t,r,u,s,d,l){return e.openBlock(),e.createElementBlock("h1",null,"Counter value: "+e.toDisplayString(t.counter),1)}const _=p(m,[["render",f]]);class g extends a.NarratPlugin{constructor(){super();i(this,"customStores");i(this,"customCommands");i(this,"customMenuTabs");const u="2.12.1",s=new Date("2023-04-12T18:44:03.331Z").toLocaleString();console.log(`%c [Narrat plugin] [@narrat/plugin-counter]  v${u} - Built at ${s}`,"background: #222; color: #bada55"),this.customStores={counter:c},this.customCommands=[new a.CommandPlugin("increase_counter",[],async l=>c().count++),new a.CommandPlugin("get_counter",[],async l=>c().count)],this.customMenuTabs=[{menuId:"menu",config:{id:"counter",text:"Counter",cssClass:"counter-menu-button",component:"CounterUi"},component:_}]}}n.CounterPlugin=g,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/plugin.d.ts

@@ -0,0 +1,14 @@
+import { CommandPlugin, CustomMenuTab, CustomStores, NarratPlugin } from 'narrat';
+/**
+ * The CounterPlugin is a simple example plugin to showcase the various features plugins can use.
+ * This plugin will use the `counter-store` custom store to store custom data (which gets saved and loaded)
+ * It uses the `counter-ui.vue` component to display the counter
+ * It uses some `CommandPlugin` to add new commands to modify or get the counter's value
+ * It uses the `CustomMenuButton` to add a new menu button to the menu bar
+ */
+export declare class CounterPlugin extends NarratPlugin {
+    customStores: CustomStores;
+    customCommands: CommandPlugin<any>[];
+    customMenuTabs: CustomMenuTab[];
+    constructor();
+}

package/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Narrat plugin counter test page</title>
+    <link rel="icon" href="/favicon.svg" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
+    />
+  </head>
+  <body>
+    <script type="module" src="src/demo.ts"></script>
+    <div id="game-holder"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@narrat/plugin-counter",
+  "description": "A counter plugin to narrat, used as a demo of the plugin system",
+  "main": "dist/narrat-plugin-counter.es.js",
+  "module": "dist/narrat-plugin-counter.es.js",
+  "types": "dist/plugin.d.ts",
+  "version": "2.12.1",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:liana-p/narrat-engine.git",
+    "directory": "packages/narrat-plugin-counter"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "type": "module",
+  "homepage": "https://get-narrat.com",
+  "scripts": {
+    "dev": "vite",
+    "generate-types": "vue-tsc --emitDeclarationOnly --outDir dist && pnpm run fix-type-aliases",
+    "fix-type-aliases": "tsc-alias -p tsconfig.json",
+    "build": "vue-tsc --noEmit && vite build && pnpm run generate-types",
+    "preview": "vite preview"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "narrat": "workspace:*",
+    "pinia": "^2.0.14",
+    "vue": "^3.2.37"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.0.0",
+    "tsc-alias": "^1.6.11",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.0",
+    "vue-tsc": "^0.38.4",
+    "narrat": "workspace:*",
+    "pinia": "^2.0.14",
+    "vue": "^3.2.37"
+  }
+}

package/public/data/audio.yaml

@@ -0,0 +1,7 @@
+files: {}
+options:
+  volume: 0.5
+  musicFadeInTime: 0.5
+  musicFadeInDelay: 0.5
+  musicFadeOutTime: 0.5
+audioTriggers: {}

package/public/data/buttons.yaml

@@ -0,0 +1 @@
+buttons: {}

package/public/data/characters.yaml

@@ -0,0 +1,11 @@
+---
+config:
+  imagesPath: img/characters/
+characters:
+  game:
+    name: ''
+    color: white
+  player:
+    style:
+      color: orange
+    name: You

package/public/data/config.yaml

@@ -0,0 +1,41 @@
+---
+gameTitle: Narrat Game Example
+images: {}
+dialogPanel:
+  textSpeed: 30
+  animateText: true
+  timeBetweenLines: 100
+  overlayMode: true
+  rightOffset: 100
+  bottomOffset: 50
+  width: 475
+  height: 680
+layout:
+  backgrounds:
+    width: 1280
+    height: 720
+  dialogBottomPadding: 70
+  mobileDialogHeightPercentage: 60
+  verticalLayoutThreshold: 600
+  portraits:
+    width: 100
+    height: 100
+screens: data/screens.yaml
+buttons: data/buttons.yaml
+skills: data/skills.yaml
+scripts: data/scripts.yaml
+characters: data/characters.yaml
+audio: data/audio.yaml
+notifications:
+  timeOnScreen: 2.5
+  alsoPrintInDialogue: true
+hudStats: {}
+items: data/items.yaml
+interactionTags:
+  default:
+    onlyInteractOutsideOfScripts: true
+quests: data/quests.yaml
+menuButtons: {}
+saves:
+  mode: manual
+  slots: 10

package/public/data/game.nar

@@ -0,0 +1,2 @@
+main:
+  "Hello world"

package/public/data/items.yaml

@@ -0,0 +1 @@
+items: {}

package/public/data/quests.yaml

@@ -0,0 +1,4 @@
+categories:
+  - id: default
+    title: Default quest category
+quests: {}

package/public/data/screens.yaml

@@ -0,0 +1,3 @@
+screens:
+  default:
+    background: img/backgrounds/curtain.webp

package/public/data/scripts.yaml

@@ -0,0 +1,2 @@
+---
+- data/game.nar

package/public/data/skills.yaml

@@ -0,0 +1,20 @@
+skills: {}
+skillChecks:
+  rollRange: 100
+  skillMultiplier: 10
+  failureChance: 1
+  difficultyText:
+    - - 0
+      - Very Easy
+    - - 10
+      - Easy
+    - - 30
+      - Medium
+    - - 50
+      - Hard
+    - - 70
+      - Very Hard
+    - - 80
+      - Extremely Hard
+    - - 90
+      - Near Impossible

package/src/components/counter-ui.vue

@@ -0,0 +1,22 @@
+<template>
+  <h1>Counter value: {{ counter }}</h1>
+</template>
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { useCounter } from '../custom-stores/counter-store';
+
+export default defineComponent({
+  setup() {
+    console.log('counter ui');
+    const counterStore = useCounter();
+    const counter = computed(() => {
+      return counterStore.count;
+    });
+    return { counter };
+  },
+});
+</script>
+
+<style>
+/* Write CSS for this vue component */
+</style>

package/src/custom-stores/counter-store.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+
+export const useCounter = defineStore('counter', {
+  state: () => ({
+    count: 0,
+  }),
+  actions: {
+    save() {
+      return {
+        count: this.count,
+      };
+    },
+    load(data: any) {
+      this.count = data.count;
+    },
+    reset() {
+      this.count = 0;
+    },
+  },
+});

package/src/demo.ts

@@ -0,0 +1,12 @@
+import 'narrat/dist/style.css';
+import { registerPlugin, startApp } from 'narrat';
+import { CounterPlugin } from './plugin';
+
+window.addEventListener('load', () => {
+  registerPlugin(new CounterPlugin());
+  startApp({
+    configPath: 'data/config.yaml',
+    logging: false,
+    debug: true,
+  });
+});

package/src/plugin.ts

@@ -0,0 +1,57 @@
+import CounterUi from './components/counter-ui.vue';
+import { useCounter } from './custom-stores/counter-store';
+import {
+  CommandPlugin,
+  CustomMenuTab,
+  CustomStores,
+  NarratPlugin,
+} from 'narrat';
+
+/**
+ * The CounterPlugin is a simple example plugin to showcase the various features plugins can use.
+ * This plugin will use the `counter-store` custom store to store custom data (which gets saved and loaded)
+ * It uses the `counter-ui.vue` component to display the counter
+ * It uses some `CommandPlugin` to add new commands to modify or get the counter's value
+ * It uses the `CustomMenuButton` to add a new menu button to the menu bar
+ */
+export class CounterPlugin extends NarratPlugin {
+  customStores: CustomStores;
+  customCommands: CommandPlugin<any>[];
+  customMenuTabs: CustomMenuTab[];
+
+  constructor() {
+    super();
+    const version = import.meta.env.VITE_BUILD_VERSION;
+    const date = new Date(import.meta.env.VITE_BUILD_DATE).toLocaleString();
+    const name = import.meta.env.VITE_PLUGIN_NAME;
+    console.log(
+      `%c [Narrat plugin] [${name}]  v${version} - Built at ${date}`,
+      'background: #222; color: #bada55',
+    );
+    this.customStores = {
+      counter: useCounter,
+    };
+
+    this.customCommands = [
+      new CommandPlugin(
+        'increase_counter',
+        [],
+        async (ctx) => useCounter().count++,
+      ),
+      new CommandPlugin('get_counter', [], async (ctx) => useCounter().count),
+    ];
+
+    this.customMenuTabs = [
+      {
+        menuId: 'menu',
+        config: {
+          id: 'counter',
+          text: 'Counter',
+          cssClass: 'counter-menu-button',
+          component: 'CounterUi',
+        },
+        component: CounterUi,
+      },
+    ];
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BUILD_DATE: string;
+  readonly VITE_BUILD_VERSION: string;
+  readonly VITE_PLUGIN_NAME: string;
+  // more env variables...
+}
+
+// eslint-disable-next-line no-unused-vars
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "baseUrl": "./",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "outDir": "dist",
+    "sourceMap": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "typeRoots": ["types/", "node_modules/@types/"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import { fileURLToPath, URL } from 'url';
+import packageJson from './package.json';
+
+// https://vitejs.dev/config/
+process.env.VITE_BUILD_DATE = new Date().toISOString();
+process.env.VITE_BUILD_VERSION = packageJson?.version ?? 'Unknown';
+process.env.VITE_PLUGIN_NAME = packageJson?.name ?? 'Unknown plugin';
+
+export default defineConfig({
+  plugins: [vue()],
+  base: '',
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/plugin.ts'),
+      name: 'narrat-plugin-counter',
+      fileName: (format) => `narrat-plugin-counter.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['vue', 'narrat', 'pinia'],
+      output: {
+        globals: {
+          vue: 'Vue',
+          narrat: 'narrat',
+          pinia: 'pinia',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});