narrat 0.8.2 → 0.8.5

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-// Version: 0.8.2 - May 14, 2022 12:04:03
+// Version: 0.8.5 - June 4, 2022 20:05:21
 import 'es6-promise/auto';
 import { ref, reactive, readonly, defineComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, Fragment, renderList, createBlock, Transition, withCtx, renderSlot, createTextVNode, resolveComponent, toDisplayString, TransitionGroup, createVNode, createApp } from 'vue';
 import { createLogger, createStore } from 'vuex';
@@ -308,6 +308,22 @@ styleInject(css_248z$2);
 
 script$1.render = render$1;
 
+class Logger {
+    debug;
+    constructor(debug) {
+        this.debug = debug;
+    }
+    setDebug(debug) {
+        this.debug = debug;
+    }
+    log(...args) {
+        if (this.debug) {
+            console.log(...args);
+        }
+    }
+}
+const logger = new Logger(false);
+
 function getPlayTime(startedAt, previousTime) {
     return Date.now() - startedAt + previousTime;
 }
@@ -408,7 +424,7 @@ var script$3 = defineComponent({
         wordCount() {
             const scripts = Object.values(this.$store.state.machine.script);
             const count = scripts.reduce((count, script) => {
-                console.log(count);
+                logger.log(count);
                 return count + this.countWordsInScriptBranch(script);
             }, 0);
             alert(`You have ${count} words`);
@@ -3863,10 +3879,8 @@ var script$4 = defineComponent({
     },
     methods: {
         changeVolume(event) {
-            console.log(event);
             const target = event.target;
             howler.Howler.volume(target.value);
-            console.log(target.value);
         },
         toggleMute() {
             if (this.muted) {
@@ -4132,7 +4146,7 @@ const images = {};
 let imagesToLoad = 0;
 let imagesLoaded = 0;
 function loadImages(config) {
-    console.log(`Loading images`);
+    logger.log(`Loading images`);
     return new Promise((resolve, reject) => {
         for (const key in config.images) {
             const path = config.images[key];
@@ -4142,19 +4156,19 @@ function loadImages(config) {
 }
 function loadImage(key, path, resolver, rejecter) {
     imagesToLoad++;
-    console.log(`Loading image ${key} at ${path}`);
+    logger.log(`Loading image ${key} at ${path}`);
     const image = new Image();
     image.onload = () => {
         imagesLoaded += 1;
         images[key] = image;
-        console.log(`Loaded image ${key} successfully`);
+        logger.log(`Loaded image ${key} successfully`);
         if (imagesLoaded >= imagesToLoad) {
-            console.log(`All images loaded`);
+            logger.log(`All images loaded`);
             resolver();
         }
     };
     image.onerror = (e) => {
-        console.log(`Error loading image ${key}`);
+        console.error(`Error loading image ${key}`);
         rejecter(e);
     };
     image.src = path;
@@ -4163,7 +4177,7 @@ function loadImage(key, path, resolver, rejecter) {
 const audio = {};
 howler.Howler.volume(0.5);
 async function loadAudioAssets(config) {
-    console.log(`Loading audio`);
+    logger.log(`Loading audio`);
     const loadingPromises = [];
     for (const key in config.music) {
         // Backward compatibility with old music list
@@ -4193,7 +4207,7 @@ async function loadAudioAssets(config) {
 }
 async function loadAudio(key, config) {
     return new Promise((resolve, reject) => {
-        console.log(`Loading audio ${config.src}`);
+        logger.log(`Loading audio ${config.src}`);
         const sound = new howler.Howl({
             ...config,
         });
@@ -4384,7 +4398,6 @@ styleInject(css_248z$9);
 
 script$8.render = render$8;
 
-console.log('hello app');
 var script$9 = defineComponent({
     $refs: {
         dialogContainer: HTMLInputElement,
@@ -4444,7 +4457,6 @@ var script$9 = defineComponent({
         dialogLength(newCount, oldCount) {
             if (this.$refs.dialog) {
                 const dialog = this.$refs.dialog;
-                console.log('hello dialog');
                 dialog.scrollTop = dialog.scrollHeight + 100000;
             }
         },
@@ -4677,8 +4689,8 @@ const _hoisted_4$3 = { key: 2 };
 
 function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Hud = resolveComponent("Hud");
-  const _component_DialogPicture = resolveComponent("DialogPicture");
   const _component_Menu = resolveComponent("Menu");
+  const _component_DialogPicture = resolveComponent("DialogPicture");
   const _component_DialogBox = resolveComponent("DialogBox");
   const _component_LoadingBar = resolveComponent("LoadingBar");
   const _component_DebugMenu = resolveComponent("DebugMenu");
@@ -4695,6 +4707,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
           class: "game",
           style: normalizeStyle(_ctx.gameStyle)
         }, [
+          createVNode(_component_Menu, { class: "menu-toggle" }),
           createVNode(Transition, { name: "fade" }, {
             default: withCtx(() => [
               (_ctx.picture)
@@ -4726,7 +4739,6 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
                 ref: "dialog",
                 style: normalizeStyle(_ctx.dialogStyle)
               }, [
-                createVNode(_component_Menu, { class: "menu-toggle" }),
                 createVNode(TransitionGroup, {
                   name: "list",
                   tag: "div",
@@ -4736,7 +4748,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
                   default: withCtx(() => [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dialog, (dialog, i) => {
                       return (openBlock(), createBlock(_component_DialogBox, {
-                        key: i,
+                        key: dialog.id,
                         options: _ctx.getDialogBoxOptions(dialog, i),
                         active: _ctx.isDialogActive(i)
                       }, null, 8, ["options", "active"]))
@@ -4775,7 +4787,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$a = "#app {\n  background-color: black;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  box-sizing: border-box;\n  overflow: hidden;\n  transform-origin: center center;\n}\n\n.game {\n  background-color: black;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.interact-button {\n  height: 50px;\n  background-color: #72080f;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 20px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.dialog-container {\n  flex-shrink: 2;\n  /* padding: 20px; */\n  min-height: 100%;\n  width: 100%;\n  background-color: #171717;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  overflow-x: hidden;\n}\n\n.dialog {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.dialog::-webkit-scrollbar {\n  display: none; /* webkit */\n}\n\n.dialog * {\n  overflow-anchor: none;\n}\n\n.background {\n  margin: 0;\n}\n\n#background-canvas {\n  height: 100%;\n}\n\n.anchor {\n  overflow-anchor: auto;\n  height: 1px;\n}\n\n.menu-toggle {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\r\n";
+var css_248z$a = "#app {\n  background-color: black;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  box-sizing: border-box;\n  overflow: hidden;\n  transform-origin: center center;\n}\n\n.game {\n  background-color: black;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.interact-button {\n  height: 50px;\n  background-color: #72080f;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 20px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.dialog-container {\n  flex-shrink: 2;\n  /* padding: 20px; */\n  min-height: 100%;\n  width: 100%;\n  background-color: #171717;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  overflow-x: hidden;\n}\n\n.dialog {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.dialog::-webkit-scrollbar {\n  display: none; /* webkit */\n}\n\n.dialog * {\n  overflow-anchor: none;\n}\n\n.background {\n  margin: 0;\n}\n\n#background-canvas {\n  height: 100%;\n}\n\n.anchor {\n  overflow-anchor: auto;\n  height: 1px;\n}\n\n.menu-toggle {\n  position: fixed;\n  bottom: 0px;\n  right: 15%;\n  z-index: 108398;\n}\r\n";
 styleInject(css_248z$a);
 
 script$9.render = render$9;
@@ -4824,7 +4836,7 @@ function runSkillCheck(ctx, params) {
     }
     roll += state.skills[params.skill].level * skillChecks.skillMultiplier;
     const skill = skills[params.skill];
-    console.log(`roll `, roll, params.value);
+    logger.log(`roll `, roll, params.value);
     if (roll < params.value) {
         success = false;
     }
@@ -4840,7 +4852,7 @@ function runSkillCheck(ctx, params) {
 function runConditionCommand(ctx, command) {
     const options = command.options;
     const result = runCondition(ctx, options.condition);
-    console.log(result);
+    logger.log(result);
     if (result) {
         return options.success;
     }
@@ -4911,6 +4923,7 @@ async function runCommand(context, cmd, choices) {
                     currentIndex: 0,
                 };
                 commit('setStack', newStack);
+                await dispatch('saveGame');
                 await dispatch('runLine');
                 break;
             case 'text':
@@ -4961,7 +4974,6 @@ async function runCommand(context, cmd, choices) {
                 commit('clearDialog');
                 return dispatch('nextLine');
             case 'set_button':
-                console.log(cmd.args);
                 commit('changeButton', {
                     button: cmd.args[0],
                     enabled: cmd.args[1],
@@ -5048,7 +5060,7 @@ async function runCommand(context, cmd, choices) {
         }
     }
     catch (err) {
-        console.log(state.machine.stack[state.machine.stack.length - 1].label);
+        logger.log(`Error at: `, state.machine.stack[state.machine.stack.length - 1].label);
         console.error(err);
         error(commit, `Narrat script runtime error at  <span class="error-filename">${cmd.fileName}:${cmd.line + 1}</span>
       <b>${err}</b>
@@ -5127,7 +5139,6 @@ async function runChoice(context, cmd) {
             const skill = config.skills[check.skill];
             const level = context.state.skills[check.skill].level;
             const difficultyScore = check.value - level * config.skillChecks.skillMultiplier;
-            console.log(`Check `, check, `score `, difficultyScore);
             const skillCheckState = getSkillCheckState(context, choice.skillCheck.id);
             let found = false;
             let i = 0;
@@ -5414,7 +5425,7 @@ function parseRenpyScript(errorHandler, code, fileName) {
     };
     ctx.indentSize = detectIndentation(ctx, code);
     const lines = findRenpyLines(ctx, code);
-    console.log(lines);
+    logger.log(lines);
     const script = {};
     for (const line of lines) {
         if (line.code.search(':') === -1) {
@@ -5596,10 +5607,14 @@ function detectIndentation(ctx, script) {
     if (result.length < 2) {
         ctx.error(0, `Can't detect indentation level. Make sure you indent with at least 2 spaces and consistently`);
     }
-    console.log(result);
+    logger.log(result);
     return result[1].length;
 }
 
+function randomId() {
+    return `${Date.now() - Math.floor(Math.random() * 99999999)}`;
+}
+
 let key = Symbol('Store Injection Key');
 let store;
 function setupStore(options) {
@@ -5610,7 +5625,8 @@ function setupStore(options) {
     }
     // define injection key
     key = Symbol('Store Injection Key');
-    console.log('setup store');
+    logger.setDebug(options.debug);
+    logger.log('setup store');
     store = createStore({
         state: {
             machine: {
@@ -5680,7 +5696,7 @@ function setupStore(options) {
                     };
                 }
                 const end = Date.now();
-                console.log(`script parsed in ${end - start} ms`);
+                logger.log(`script parsed in ${end - start} ms`);
                 commit('setButtons', payload.config.buttons);
                 commit('setScript', scripts);
                 commit('setupSkills', payload.config.skills);
@@ -5702,7 +5718,6 @@ function setupStore(options) {
                 this.dispatch('runLine');
             },
             async runLine(context) {
-                await this.dispatch('saveGame');
                 await runLine(context);
             },
             nextLine(context) {
@@ -5720,13 +5735,22 @@ function setupStore(options) {
                     lastLabel: state.lastLabel,
                     skillChecks: state.skillChecks,
                     playTime: getPlayTime(state.playTime.start, state.playTime.previousPlaytime),
+                    hudStats: state.hudStats,
+                    currentScreen: state.currentScreen,
+                    audio: {
+                        currentMusic: state.audio.currentMusic,
+                    },
                 };
                 localStorage.setItem(SAVE_FILE, JSON.stringify(save));
             },
-            loadGame({ commit, dispatch }, saveFile) {
+            loadGame(ctx, saveFile) {
+                const { commit, dispatch } = ctx;
                 if (saveFile) {
                     const save = JSON.parse(saveFile);
                     commit('setLoadedData', save);
+                    if (save.audio.currentMusic) {
+                        changeMusic(ctx, save.audio.currentMusic);
+                    }
                     dispatch('runLabel', save.lastLabel);
                 }
             },
@@ -5749,6 +5773,9 @@ function setupStore(options) {
                 state.lastLabel = save.lastLabel;
                 state.skillChecks = save.skillChecks;
                 state.playTime.previousPlaytime = save.playTime;
+                state.hudStats = save.hudStats;
+                state.currentScreen = save.currentScreen;
+                state.audio = save.audio;
             },
             reset(state) {
                 state.ready = false;
@@ -5801,7 +5828,7 @@ function setupStore(options) {
                 state.hudStats[stat] += amount;
             },
             addDialog(state, payload) {
-                state.dialog.push(payload.dialog);
+                state.dialog.push({ ...payload.dialog, id: randomId() });
             },
             nextLine(state) {
                 state.machine.stack[state.machine.stack.length - 1].currentIndex += 1;
@@ -5818,6 +5845,7 @@ function setupStore(options) {
             },
             setStack(state, newStack) {
                 state.machine.stack = [];
+                state.lastLabel = newStack.label;
                 state.machine.stack.push(newStack);
             },
             setData(state, { path, value }) {
@@ -5877,7 +5905,7 @@ function setupStore(options) {
                 return id;
             },
             deleteNotification(state, id) {
-                console.log('delete notif', id);
+                logger.log('delete notif', id);
                 delete state.notifications[id];
             },
         },
@@ -5902,7 +5930,7 @@ async function startApp(config, options) {
         mousePos.x = e.clientX;
         mousePos.y = e.clientY;
     });
-    console.log('%c Narrat game engine – 0.8.2 - May 14, 2022 12:04:03', 'background: #222; color: #bada55');
+    console.log('%c Narrat game engine – 0.8.5 - June 4, 2022 20:05:21', 'background: #222; color: #bada55');
     const storeSetup = setupStore(options);
     store$1 = storeSetup.store;
     app = createApp(script$9, {

package/lib/index.js

@@ -1,4 +1,4 @@
-// Version: 0.8.2 - May 14, 2022 12:04:03
+// Version: 0.8.5 - June 4, 2022 20:05:21
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -312,6 +312,22 @@ styleInject(css_248z$2);
 
 script$1.render = render$1;
 
+class Logger {
+    debug;
+    constructor(debug) {
+        this.debug = debug;
+    }
+    setDebug(debug) {
+        this.debug = debug;
+    }
+    log(...args) {
+        if (this.debug) {
+            console.log(...args);
+        }
+    }
+}
+const logger = new Logger(false);
+
 function getPlayTime(startedAt, previousTime) {
     return Date.now() - startedAt + previousTime;
 }
@@ -412,7 +428,7 @@ var script$3 = vue.defineComponent({
         wordCount() {
             const scripts = Object.values(this.$store.state.machine.script);
             const count = scripts.reduce((count, script) => {
-                console.log(count);
+                logger.log(count);
                 return count + this.countWordsInScriptBranch(script);
             }, 0);
             alert(`You have ${count} words`);
@@ -3867,10 +3883,8 @@ var script$4 = vue.defineComponent({
     },
     methods: {
         changeVolume(event) {
-            console.log(event);
             const target = event.target;
             howler.Howler.volume(target.value);
-            console.log(target.value);
         },
         toggleMute() {
             if (this.muted) {
@@ -4136,7 +4150,7 @@ const images = {};
 let imagesToLoad = 0;
 let imagesLoaded = 0;
 function loadImages(config) {
-    console.log(`Loading images`);
+    logger.log(`Loading images`);
     return new Promise((resolve, reject) => {
         for (const key in config.images) {
             const path = config.images[key];
@@ -4146,19 +4160,19 @@ function loadImages(config) {
 }
 function loadImage(key, path, resolver, rejecter) {
     imagesToLoad++;
-    console.log(`Loading image ${key} at ${path}`);
+    logger.log(`Loading image ${key} at ${path}`);
     const image = new Image();
     image.onload = () => {
         imagesLoaded += 1;
         images[key] = image;
-        console.log(`Loaded image ${key} successfully`);
+        logger.log(`Loaded image ${key} successfully`);
         if (imagesLoaded >= imagesToLoad) {
-            console.log(`All images loaded`);
+            logger.log(`All images loaded`);
             resolver();
         }
     };
     image.onerror = (e) => {
-        console.log(`Error loading image ${key}`);
+        console.error(`Error loading image ${key}`);
         rejecter(e);
     };
     image.src = path;
@@ -4167,7 +4181,7 @@ function loadImage(key, path, resolver, rejecter) {
 const audio = {};
 howler.Howler.volume(0.5);
 async function loadAudioAssets(config) {
-    console.log(`Loading audio`);
+    logger.log(`Loading audio`);
     const loadingPromises = [];
     for (const key in config.music) {
         // Backward compatibility with old music list
@@ -4197,7 +4211,7 @@ async function loadAudioAssets(config) {
 }
 async function loadAudio(key, config) {
     return new Promise((resolve, reject) => {
-        console.log(`Loading audio ${config.src}`);
+        logger.log(`Loading audio ${config.src}`);
         const sound = new howler.Howl({
             ...config,
         });
@@ -4388,7 +4402,6 @@ styleInject(css_248z$9);
 
 script$8.render = render$8;
 
-console.log('hello app');
 var script$9 = vue.defineComponent({
     $refs: {
         dialogContainer: HTMLInputElement,
@@ -4448,7 +4461,6 @@ var script$9 = vue.defineComponent({
         dialogLength(newCount, oldCount) {
             if (this.$refs.dialog) {
                 const dialog = this.$refs.dialog;
-                console.log('hello dialog');
                 dialog.scrollTop = dialog.scrollHeight + 100000;
             }
         },
@@ -4681,8 +4693,8 @@ const _hoisted_4$3 = { key: 2 };
 
 function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Hud = vue.resolveComponent("Hud");
-  const _component_DialogPicture = vue.resolveComponent("DialogPicture");
   const _component_Menu = vue.resolveComponent("Menu");
+  const _component_DialogPicture = vue.resolveComponent("DialogPicture");
   const _component_DialogBox = vue.resolveComponent("DialogBox");
   const _component_LoadingBar = vue.resolveComponent("LoadingBar");
   const _component_DebugMenu = vue.resolveComponent("DebugMenu");
@@ -4699,6 +4711,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
           class: "game",
           style: vue.normalizeStyle(_ctx.gameStyle)
         }, [
+          vue.createVNode(_component_Menu, { class: "menu-toggle" }),
           vue.createVNode(vue.Transition, { name: "fade" }, {
             default: vue.withCtx(() => [
               (_ctx.picture)
@@ -4730,7 +4743,6 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
                 ref: "dialog",
                 style: vue.normalizeStyle(_ctx.dialogStyle)
               }, [
-                vue.createVNode(_component_Menu, { class: "menu-toggle" }),
                 vue.createVNode(vue.TransitionGroup, {
                   name: "list",
                   tag: "div",
@@ -4740,7 +4752,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
                   default: vue.withCtx(() => [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.dialog, (dialog, i) => {
                       return (vue.openBlock(), vue.createBlock(_component_DialogBox, {
-                        key: i,
+                        key: dialog.id,
                         options: _ctx.getDialogBoxOptions(dialog, i),
                         active: _ctx.isDialogActive(i)
                       }, null, 8, ["options", "active"]))
@@ -4779,7 +4791,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$a = "#app {\n  background-color: black;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  box-sizing: border-box;\n  overflow: hidden;\n  transform-origin: center center;\n}\n\n.game {\n  background-color: black;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.interact-button {\n  height: 50px;\n  background-color: #72080f;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 20px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.dialog-container {\n  flex-shrink: 2;\n  /* padding: 20px; */\n  min-height: 100%;\n  width: 100%;\n  background-color: #171717;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  overflow-x: hidden;\n}\n\n.dialog {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.dialog::-webkit-scrollbar {\n  display: none; /* webkit */\n}\n\n.dialog * {\n  overflow-anchor: none;\n}\n\n.background {\n  margin: 0;\n}\n\n#background-canvas {\n  height: 100%;\n}\n\n.anchor {\n  overflow-anchor: auto;\n  height: 1px;\n}\n\n.menu-toggle {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\r\n";
+var css_248z$a = "#app {\n  background-color: black;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  box-sizing: border-box;\n  overflow: hidden;\n  transform-origin: center center;\n}\n\n.game {\n  background-color: black;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.interact-button {\n  height: 50px;\n  background-color: #72080f;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 20px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.dialog-container {\n  flex-shrink: 2;\n  /* padding: 20px; */\n  min-height: 100%;\n  width: 100%;\n  background-color: #171717;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  overflow-x: hidden;\n}\n\n.dialog {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.dialog::-webkit-scrollbar {\n  display: none; /* webkit */\n}\n\n.dialog * {\n  overflow-anchor: none;\n}\n\n.background {\n  margin: 0;\n}\n\n#background-canvas {\n  height: 100%;\n}\n\n.anchor {\n  overflow-anchor: auto;\n  height: 1px;\n}\n\n.menu-toggle {\n  position: fixed;\n  bottom: 0px;\n  right: 15%;\n  z-index: 108398;\n}\r\n";
 styleInject(css_248z$a);
 
 script$9.render = render$9;
@@ -4828,7 +4840,7 @@ function runSkillCheck(ctx, params) {
     }
     roll += state.skills[params.skill].level * skillChecks.skillMultiplier;
     const skill = skills[params.skill];
-    console.log(`roll `, roll, params.value);
+    logger.log(`roll `, roll, params.value);
     if (roll < params.value) {
         success = false;
     }
@@ -4844,7 +4856,7 @@ function runSkillCheck(ctx, params) {
 function runConditionCommand(ctx, command) {
     const options = command.options;
     const result = runCondition(ctx, options.condition);
-    console.log(result);
+    logger.log(result);
     if (result) {
         return options.success;
     }
@@ -4915,6 +4927,7 @@ async function runCommand(context, cmd, choices) {
                     currentIndex: 0,
                 };
                 commit('setStack', newStack);
+                await dispatch('saveGame');
                 await dispatch('runLine');
                 break;
             case 'text':
@@ -4965,7 +4978,6 @@ async function runCommand(context, cmd, choices) {
                 commit('clearDialog');
                 return dispatch('nextLine');
             case 'set_button':
-                console.log(cmd.args);
                 commit('changeButton', {
                     button: cmd.args[0],
                     enabled: cmd.args[1],
@@ -5052,7 +5064,7 @@ async function runCommand(context, cmd, choices) {
         }
     }
     catch (err) {
-        console.log(state.machine.stack[state.machine.stack.length - 1].label);
+        logger.log(`Error at: `, state.machine.stack[state.machine.stack.length - 1].label);
         console.error(err);
         error(commit, `Narrat script runtime error at  <span class="error-filename">${cmd.fileName}:${cmd.line + 1}</span>
       <b>${err}</b>
@@ -5131,7 +5143,6 @@ async function runChoice(context, cmd) {
             const skill = config.skills[check.skill];
             const level = context.state.skills[check.skill].level;
             const difficultyScore = check.value - level * config.skillChecks.skillMultiplier;
-            console.log(`Check `, check, `score `, difficultyScore);
             const skillCheckState = getSkillCheckState(context, choice.skillCheck.id);
             let found = false;
             let i = 0;
@@ -5418,7 +5429,7 @@ function parseRenpyScript(errorHandler, code, fileName) {
     };
     ctx.indentSize = detectIndentation(ctx, code);
     const lines = findRenpyLines(ctx, code);
-    console.log(lines);
+    logger.log(lines);
     const script = {};
     for (const line of lines) {
         if (line.code.search(':') === -1) {
@@ -5600,10 +5611,14 @@ function detectIndentation(ctx, script) {
     if (result.length < 2) {
         ctx.error(0, `Can't detect indentation level. Make sure you indent with at least 2 spaces and consistently`);
     }
-    console.log(result);
+    logger.log(result);
     return result[1].length;
 }
 
+function randomId() {
+    return `${Date.now() - Math.floor(Math.random() * 99999999)}`;
+}
+
 let key = Symbol('Store Injection Key');
 let store;
 function setupStore(options) {
@@ -5614,7 +5629,8 @@ function setupStore(options) {
     }
     // define injection key
     key = Symbol('Store Injection Key');
-    console.log('setup store');
+    logger.setDebug(options.debug);
+    logger.log('setup store');
     store = vuex.createStore({
         state: {
             machine: {
@@ -5684,7 +5700,7 @@ function setupStore(options) {
                     };
                 }
                 const end = Date.now();
-                console.log(`script parsed in ${end - start} ms`);
+                logger.log(`script parsed in ${end - start} ms`);
                 commit('setButtons', payload.config.buttons);
                 commit('setScript', scripts);
                 commit('setupSkills', payload.config.skills);
@@ -5706,7 +5722,6 @@ function setupStore(options) {
                 this.dispatch('runLine');
             },
             async runLine(context) {
-                await this.dispatch('saveGame');
                 await runLine(context);
             },
             nextLine(context) {
@@ -5724,13 +5739,22 @@ function setupStore(options) {
                     lastLabel: state.lastLabel,
                     skillChecks: state.skillChecks,
                     playTime: getPlayTime(state.playTime.start, state.playTime.previousPlaytime),
+                    hudStats: state.hudStats,
+                    currentScreen: state.currentScreen,
+                    audio: {
+                        currentMusic: state.audio.currentMusic,
+                    },
                 };
                 localStorage.setItem(SAVE_FILE, JSON.stringify(save));
             },
-            loadGame({ commit, dispatch }, saveFile) {
+            loadGame(ctx, saveFile) {
+                const { commit, dispatch } = ctx;
                 if (saveFile) {
                     const save = JSON.parse(saveFile);
                     commit('setLoadedData', save);
+                    if (save.audio.currentMusic) {
+                        changeMusic(ctx, save.audio.currentMusic);
+                    }
                     dispatch('runLabel', save.lastLabel);
                 }
             },
@@ -5753,6 +5777,9 @@ function setupStore(options) {
                 state.lastLabel = save.lastLabel;
                 state.skillChecks = save.skillChecks;
                 state.playTime.previousPlaytime = save.playTime;
+                state.hudStats = save.hudStats;
+                state.currentScreen = save.currentScreen;
+                state.audio = save.audio;
             },
             reset(state) {
                 state.ready = false;
@@ -5805,7 +5832,7 @@ function setupStore(options) {
                 state.hudStats[stat] += amount;
             },
             addDialog(state, payload) {
-                state.dialog.push(payload.dialog);
+                state.dialog.push({ ...payload.dialog, id: randomId() });
             },
             nextLine(state) {
                 state.machine.stack[state.machine.stack.length - 1].currentIndex += 1;
@@ -5822,6 +5849,7 @@ function setupStore(options) {
             },
             setStack(state, newStack) {
                 state.machine.stack = [];
+                state.lastLabel = newStack.label;
                 state.machine.stack.push(newStack);
             },
             setData(state, { path, value }) {
@@ -5881,7 +5909,7 @@ function setupStore(options) {
                 return id;
             },
             deleteNotification(state, id) {
-                console.log('delete notif', id);
+                logger.log('delete notif', id);
                 delete state.notifications[id];
             },
         },
@@ -5906,7 +5934,7 @@ async function startApp(config, options) {
         mousePos.x = e.clientX;
         mousePos.y = e.clientY;
     });
-    console.log('%c Narrat game engine – 0.8.2 - May 14, 2022 12:04:03', 'background: #222; color: #bada55');
+    console.log('%c Narrat game engine – 0.8.5 - June 4, 2022 20:05:21', 'background: #222; color: #bada55');
     const storeSetup = setupStore(options);
     store$1 = storeSetup.store;
     app = vue.createApp(script$9, {

package/lib/store.d.ts

@@ -1,7 +1,8 @@
 import { InjectionKey, State } from 'vue';
 import { Store } from 'vuex';
-import { MachineStack } from './types/vuex';
+import { DialogKey, MachineStack } from './types/vuex';
 import { AppOptions } from '.';
+export declare type AddDialogParams = Omit<DialogKey, 'id'>;
 export interface SetupStoreResult {
     store: Store<State>;
     key: InjectionKey<Store<State>>;

package/lib/utils/images-loader.d.ts

@@ -1,4 +1,4 @@
-import { Config } from "@/types/config";
+import { Config } from '@/types/config';
 export declare const images: {
     [key: string]: HTMLImageElement;
 };

package/lib/utils/logger.d.ts

@@ -0,0 +1,8 @@
+declare class Logger {
+    debug: boolean;
+    constructor(debug: boolean);
+    setDebug(debug: boolean): void;
+    log(...args: any[]): void;
+}
+export declare const logger: Logger;
+export {};

package/lib/utils/randomId.d.ts

@@ -0,0 +1 @@
+export declare function randomId(): string;

package/lib/vm/renpy-vm.d.ts

@@ -1,10 +1,11 @@
 import { ActionContext, Commit } from 'vuex';
 import { State } from 'vue';
-import { DialogKey, DialogChoice } from '@/types/vuex';
+import { DialogChoice } from '@/types/vuex';
+import { AddDialogParams } from '@/store';
 export declare function runLine(context: ActionContext<State, State>): Promise<void>;
 export declare function runCommand(context: ActionContext<State, State>, cmd: Parser.Command, choices?: DialogChoice[]): Promise<any>;
 export declare function playerAnswered(context: ActionContext<State, State>, choiceIndex: number): Promise<void>;
 export declare function runChoice(context: ActionContext<State, State>, cmd: Parser.Command): Promise<void>;
-export declare function textCommand(commit: Commit, dialog: DialogKey): Promise<void>;
+export declare function textCommand(commit: Commit, dialog: AddDialogParams): Promise<void>;
 export declare function nextLine(ctx: ActionContext<State, State>): Promise<any>;
 export declare function finishGame({ commit, state }: ActionContext<State, State>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "narrat",
-  "version": "0.8.2",
+  "version": "0.8.5",
   "description": "narrat narrative engine",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",