narrat 2.0.11 → 2.0.12

package/dist/narrat.es.js

@@ -681,13 +681,13 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$f = defineComponent({
+const _sfc_main$g = defineComponent({
   props: {
     containerCssClass: String
   }
 });
 const _hoisted_1$e = { class: "modal-header" };
-const _hoisted_2$b = /* @__PURE__ */ createTextVNode(" default header ");
+const _hoisted_2$c = /* @__PURE__ */ createTextVNode(" default header ");
 const _hoisted_3$7 = /* @__PURE__ */ createElementVNode("hr", { class: "solid" }, null, -1);
 const _hoisted_4$6 = { class: "modal-body" };
 const _hoisted_5$6 = /* @__PURE__ */ createTextVNode(" default body ");
@@ -709,7 +709,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
             }, "X"),
             renderSlot(_ctx.$slots, "header", {}, () => [
-              _hoisted_2$b
+              _hoisted_2$c
             ]),
             _hoisted_3$7
           ]),
@@ -727,7 +727,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   });
 }
-var Modal = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$d]]);
+var Modal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$d]]);
 function isArray(value) {
   return !Array.isArray ? getTag(value) === "[object Array]" : Array.isArray(value);
 }
@@ -37242,12 +37242,15 @@ const useQuests = defineStore("quests", {
 });
 const useScreens = defineStore("screens", {
   state: () => ({
-    currentScreen: "default",
+    layers: ["default"],
     buttons: {}
   }),
   actions: {
-    setScreen(screen) {
-      this.currentScreen = screen;
+    setScreen(screen, layer) {
+      this.layers[layer || 0] = screen;
+    },
+    emptyLayer(layer) {
+      delete this.layers[layer];
     },
     setButtons(config2) {
       const { buttons: buttonsConfig, screens: screensConfig, images } = config2;
@@ -37280,12 +37283,12 @@ const useScreens = defineStore("screens", {
     },
     generateSaveData() {
       return {
-        currentScreen: this.currentScreen,
+        layers: this.layers,
         buttons: this.buttons
       };
     },
     loadSaveData(data) {
-      this.currentScreen = data.currentScreen;
+      this.layers = data.layers;
       this.buttons = cjs(this.buttons, data.buttons);
     }
   }
@@ -38558,7 +38561,7 @@ const useSkills = defineStore("skills", {
 });
 var debugMenu_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".debug-menu{z-index:9999}.debug-button{position:fixed;bottom:10px;right:10px;padding:5px}.error-message{color:#ff4500;margin-top:10px;margin-bottom:10px}.error-filename{color:gray;text-decoration:underline}.debug-menu-container{width:100%}.search-result{border:1px solid var(--text-color);padding:10px;font-weight:700;font-size:20px;width:100}.jump-menu-container{width:80%}.debug-info{position:fixed;background-color:#0009;border:1px dotted var(--text-color);top:0;left:0;padding:5px}.variables-viewer{height:100%}\n")();
 let fuse;
-const _sfc_main$e = defineComponent({
+const _sfc_main$f = defineComponent({
   components: {
     Modal
   },
@@ -38788,7 +38791,7 @@ const _sfc_main$e = defineComponent({
   }
 });
 const _hoisted_1$d = { class: "debug-menu" };
-const _hoisted_2$a = {
+const _hoisted_2$b = {
   key: 0,
   class: "debug-info"
 };
@@ -38855,7 +38858,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.open && _ctx.open(...args)),
       class: "button debug-button"
     }, "Debug Menu"),
-    !_ctx.playing && _ctx.flowState === "menu" ? (openBlock(), createElementBlock("div", _hoisted_2$a, _hoisted_5$5)) : createCommentVNode("", true),
+    !_ctx.playing && _ctx.flowState === "menu" ? (openBlock(), createElementBlock("div", _hoisted_2$b, _hoisted_5$5)) : createCommentVNode("", true),
     _ctx.jumping ? (openBlock(), createBlock(_component_modal, {
       key: 1,
       onClose: _ctx.finishJumping,
@@ -38968,9 +38971,9 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["onClose"])) : createCommentVNode("", true)
   ]);
 }
-var DebugMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$c]]);
+var DebugMenu = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$c]]);
 var volumeControls_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".volume-label{margin-right:10px;font-size:20px;font-weight:700}.volume-controls{font-size:25px;display:flex;align-items:center;justify-content:center;margin:0 20px}.volume-slider{width:200px;background-color:#00f}\n")();
-const _sfc_main$d = defineComponent({
+const _sfc_main$e = defineComponent({
   data() {
     return {
       muted: false
@@ -38997,13 +39000,13 @@ const _sfc_main$d = defineComponent({
   }
 });
 const _hoisted_1$c = { class: "volume-controls" };
-const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("label", {
+const _hoisted_2$a = /* @__PURE__ */ createElementVNode("label", {
   for: "volume",
   class: "volume-label"
 }, "Volume", -1);
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$c, [
-    _hoisted_2$9,
+    _hoisted_2$a,
     createElementVNode("input", {
       ref: "slider",
       class: "volume-slider",
@@ -39018,9 +39021,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 544)
   ]);
 }
-var VolumeControls = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$b]]);
+var VolumeControls = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$b]]);
 var hud_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".hud{position:absolute;right:0;top:0;display:flex;flex-direction:row-reverse;z-index:3}.hud-stat{border:1px dotted white;background-color:var(--hud-background);color:var(--hud-text-color);padding:5px}.hud-icon{display:inline-block;height:1em}.hud-text{margin-left:5px}\n")();
-const _sfc_main$c = defineComponent({
+const _sfc_main$d = defineComponent({
   components: {
     VolumeControls
   },
@@ -39049,7 +39052,7 @@ const _sfc_main$c = defineComponent({
   }
 });
 const _hoisted_1$b = ["src"];
-const _hoisted_2$8 = { class: "bold hud-text" };
+const _hoisted_2$9 = { class: "bold hud-text" };
 const _hoisted_3$5 = /* @__PURE__ */ createTextVNode(": ");
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
@@ -39065,16 +39068,16 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
           class: "hud-icon",
           src: _ctx.statsConfig[key].icon
         }, null, 8, _hoisted_1$b),
-        createElementVNode("span", _hoisted_2$8, toDisplayString(_ctx.statsConfig[key].name), 1),
+        createElementVNode("span", _hoisted_2$9, toDisplayString(_ctx.statsConfig[key].name), 1),
         _hoisted_3$5,
         createElementVNode("span", null, toDisplayString(Math.floor(stat.value * 100) / 100), 1)
       ]);
     }), 128))
   ], 4);
 }
-var Hud = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$a]]);
+var Hud = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$a]]);
 var loadingBar_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => "#loading-bar{position:relative;width:40vw;height:100px;border-radius:50px;background:black}#inner-loading-bar{height:100%;border-radius:50px 0 0 50px;background:var(--light-background)}#loading-text{z-index:99999;display:flex;align-items:center;justify-content:space-around;position:absolute;width:100%;height:100%;top:0}\n")();
-const _sfc_main$b = defineComponent({
+const _sfc_main$c = defineComponent({
   props: {
     percentage: Number,
     step: String
@@ -39091,21 +39094,21 @@ const _sfc_main$b = defineComponent({
   computed: {}
 });
 const _hoisted_1$a = { id: "loading-bar" };
-const _hoisted_2$7 = { id: "loading-text" };
+const _hoisted_2$8 = { id: "loading-text" };
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$a, [
     createElementVNode("div", {
       id: "inner-loading-bar",
       style: normalizeStyle(_ctx.loadingStyle())
     }, null, 4),
-    createElementVNode("div", _hoisted_2$7, [
+    createElementVNode("div", _hoisted_2$8, [
       createElementVNode("h3", null, "Loading " + toDisplayString(Math.floor(_ctx.percentage * 100)) + "% - " + toDisplayString(_ctx.step), 1)
     ])
   ]);
 }
-var LoadingBar = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$9]]);
+var LoadingBar = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$9]]);
 var notificationToast_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".notifications-holder{position:fixed;top:0;right:0;padding:10px;display:flex;flex-direction:column-reverse;align-items:center;pointer-events:none}.notification{margin-top:10px;margin-bottom:10px;border-radius:10px;padding:15px;background:var(--notifications-bg);width:40vh;text-align:center}\n")();
-const _sfc_main$a = defineComponent({
+const _sfc_main$b = defineComponent({
   data() {
   },
   methods: {},
@@ -39132,7 +39135,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var NotificationToast = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$8]]);
+var NotificationToast = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$8]]);
 let config;
 function setCharactersConfig(data) {
   config = data;
@@ -39243,7 +39246,7 @@ function debounce(func, waitMilliseconds = 50, options = {}) {
   return debouncedFunction;
 }
 var MainMenu_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".quit-button{margin:20px;text-align:center}\n")();
-const _sfc_main$9 = defineComponent({
+const _sfc_main$a = defineComponent({
   components: {
     Modal,
     VolumeControls
@@ -39274,7 +39277,7 @@ const _sfc_main$9 = defineComponent({
   }
 });
 const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Menu", -1);
-const _hoisted_2$6 = { class: "menu-content" };
+const _hoisted_2$7 = { class: "menu-content" };
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VolumeControls = resolveComponent("VolumeControls");
   const _component_modal = resolveComponent("modal");
@@ -39287,7 +39290,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
       _hoisted_1$9
     ]),
     body: withCtx(() => [
-      createElementVNode("div", _hoisted_2$6, [
+      createElementVNode("div", _hoisted_2$7, [
         createElementVNode("h3", null, "Play time: " + toDisplayString(_ctx.getPlayTimeString()), 1),
         createVNode(_component_VolumeControls),
         createElementVNode("button", {
@@ -39303,9 +39306,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var MainMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$7]]);
+var MainMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$7]]);
 var Skills_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".skills-modal{width:800px}.skills-container{display:grid;grid-auto-rows:auto;grid-template-columns:repeat(3,1fr);grid-gap:20px 20px}.skill-display{width:200px;height:300px;position:relative;background-size:cover}.skill-title{position:absolute;bottom:0px;text-align:center;width:100%;color:var(--skills-text-color);background:var(--skills-text-background)}.skill-level{position:absolute;top:0;right:0;font-weight:700;font-size:25px;color:var(--skills-level-color);width:var(--skills-xp-bar-height);height:var(--skills-xp-bar-height);background-color:var(--skills-level-background)}.skill-description-container{justify-content:space-between;align-items:stretch}.skill-left{flex-direction:column;border:1px dashed white;padding:10px;justify-content:center}.skill-right{border:1px dashed white;flex-direction:column;flex-grow:2;align-items:baseline}.skill-xp-container{position:absolute;top:0;left:0;height:var(--skills-xp-bar-height);width:calc(100% - var(--skills-xp-bar-height));background-color:#00000080}.skill-xp-bar{position:absolute;top:0;left:0;width:50%;height:100%;background-color:#0000fa80}.skill-xp-text{z-index:2}\n")();
-const _sfc_main$8 = defineComponent({
+const _sfc_main$9 = defineComponent({
   setup() {
     const store = useSkills();
     const skills = computed(() => store.skills);
@@ -39363,7 +39366,7 @@ const _sfc_main$8 = defineComponent({
   }
 });
 const _hoisted_1$8 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Skills", -1);
-const _hoisted_2$5 = {
+const _hoisted_2$6 = {
   key: 0,
   class: "skills-container"
 };
@@ -39388,7 +39391,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
       _hoisted_1$8
     ]),
     body: withCtx(() => [
-      !_ctx.chosenSkill ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+      !_ctx.chosenSkill ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skillsToDisplay, (skill) => {
           return openBlock(), createElementBlock("button", {
             onClick: () => _ctx.clickSkill(skill.id),
@@ -39431,9 +39434,9 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var Skills = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$6]]);
+var Skills = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$6]]);
 var inventoryUi_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".inventory-modal{width:800px;min-height:50%}.inventory-container{display:grid;grid-auto-rows:auto;grid-template-columns:repeat(3,1fr);grid-gap:20px 20px}.item-display{width:200px;height:300px;position:relative;background-repeat:no-repeat;background-size:contain}.item-title{position:absolute;bottom:0px;text-align:center;width:100%;color:var(--inventory-text-color);background:var(--inventory-text-background)}.item-amount{position:absolute;top:0;right:0;font-weight:700;font-size:25px;color:var(--inventory-amount-color);width:40px;height:40px;background-color:var(--inventory-amount-background)}.item-description-container{justify-content:space-between;align-items:stretch}.item-left{border:1px dashed white;flex-direction:column;padding:10px;justify-content:center}.item-right{border:1px dashed white;flex-direction:column;flex-grow:2;align-items:baseline;padding:10px}\n")();
-const _sfc_main$7 = defineComponent({
+const _sfc_main$8 = defineComponent({
   setup() {
     const store = useInventory();
     const dialogStore = useDialogStore();
@@ -39524,7 +39527,7 @@ const _sfc_main$7 = defineComponent({
   }
 });
 const _hoisted_1$7 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Inventory", -1);
-const _hoisted_2$4 = {
+const _hoisted_2$5 = {
   key: 0,
   class: "inventory-container"
 };
@@ -39552,7 +39555,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
       _hoisted_1$7
     ]),
     body: withCtx(() => [
-      !_ctx.chosenItem && Object.keys(_ctx.itemsToDisplay).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
+      !_ctx.chosenItem && Object.keys(_ctx.itemsToDisplay).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.itemsToDisplay, (item) => {
           return openBlock(), createElementBlock("button", {
             onClick: () => _ctx.clickItem(item.id),
@@ -39592,9 +39595,9 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["onClose"]);
 }
-var InventoryUi = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$5]]);
+var InventoryUi = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$5]]);
 var dialogPicture_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".dialog-picture{position:absolute;width:80px;height:80px;border:2px solid white;border-radius:10px;background-color:gray;z-index:99}.dialog-picture img{width:100%;height:100%}\n")();
-const _sfc_main$6 = defineComponent({
+const _sfc_main$7 = defineComponent({
   props: {
     pictureUrl: String
   },
@@ -39632,9 +39635,9 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, _hoisted_1$6)
   ], 4);
 }
-var DialogPicture = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$4]]);
+var DialogPicture = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$4]]);
 var dialogBox_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".dialog-title{font-size:20px;font-weight:700}.dialog-text{font-size:16px}.dialog-box{color:var(--text-color);padding:10px 10px 10px 2em;margin-bottom:10px}.dialog-choice{color:var(--dialog-choice-color)}.dialog-choice:hover{color:var(--dialog-choice-hover-color);cursor:pointer}.buttons-container{width:100%;padding:10px;display:flex;justify-content:space-evenly;align-items:stretch;box-sizing:border-box}.interact-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:50px;color:var(--text-color);border:1px solid black;font-weight:700;font-size:24px;text-align:center;flex-grow:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.interact-button:not(:last-child){margin-right:10px}\n")();
-const _sfc_main$5 = defineComponent({
+const _sfc_main$6 = defineComponent({
   data() {
     return {
       playerText: "",
@@ -39777,7 +39780,7 @@ const _sfc_main$5 = defineComponent({
   }
 });
 const _hoisted_1$5 = { class: "dialog-content" };
-const _hoisted_2$3 = ["innerHTML"];
+const _hoisted_2$4 = ["innerHTML"];
 const _hoisted_3$2 = ["innerHTML"];
 const _hoisted_4$2 = ["innerHTML"];
 const _hoisted_5$2 = {
@@ -39801,7 +39804,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
         class: "dialog-title override",
         style: normalizeStyle(_ctx.titleStyle),
         innerHTML: _ctx.options.title
-      }, null, 12, _hoisted_2$3)) : createCommentVNode("", true),
+      }, null, 12, _hoisted_2$4)) : createCommentVNode("", true),
       createElementVNode("span", {
         class: "dialog-text dialog-separator override",
         style: normalizeStyle(_ctx.textStyle),
@@ -39846,10 +39849,10 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 4);
 }
-var DialogBox = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$3]]);
+var DialogBox = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$3]]);
 var gameDialog_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".dialog-container{flex-shrink:2;min-height:100%;width:100%;background-color:(var(--bg-color));box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow-x:hidden}.dialog{overflow-y:auto;overflow-x:hidden;position:relative;-ms-overflow-style:none;scrollbar-width:none}.dialog::-webkit-scrollbar{display:none}.dialog *{overflow-anchor:none}.anchor{overflow-anchor:auto;height:1px}\n")();
 const _hoisted_1$4 = /* @__PURE__ */ createElementVNode("div", { class: "anchor" }, null, -1);
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "game-dialog",
   props: {
     layoutMode: String,
@@ -39984,7 +39987,7 @@ const filterObject = (object, predicate) => {
   return result;
 };
 var questsUi_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".quests-modal{width:100%;min-height:50%}.quest-header{display:flex;flex-direction:row;align-items:center}.quest-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.quest-completed{color:var(--completed-quest-title-color)}.quest-in-progress{color:var(--quest-title-color)}.quest-state{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.quest-description{font-size:1.1rem;text-align:justify;font-style:italic;margin-bottom:.5rem}.quest-objectives-container{margin-left:10px}.quest-objective-completed{color:var(--objective-completed-color);text-decoration:line-through}.quest-objective-in-progress{color:var(--objective-in-progress-color)}.quest-objective-description{font-size:1rem;margin-bottom:.5rem}\n")();
-const _sfc_main$3 = defineComponent({
+const _sfc_main$4 = defineComponent({
   setup() {
     const questsStore = useQuests();
     const quests = computed(() => questsStore.quests);
@@ -40034,7 +40037,7 @@ const _sfc_main$3 = defineComponent({
   }
 });
 const _hoisted_1$3 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Quests", -1);
-const _hoisted_2$2 = {
+const _hoisted_2$3 = {
   key: 0,
   class: "quests-container"
 };
@@ -40063,7 +40066,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
       _hoisted_1$3
     ]),
     body: withCtx(() => [
-      Object.keys(_ctx.questsToDisplay).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+      Object.keys(_ctx.questsToDisplay).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.questsToDisplay, (quest) => {
           return openBlock(), createElementBlock("div", {
             class: "quest-display",
@@ -40100,9 +40103,9 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["onClose"]);
 }
-var QuestsUi = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
+var QuestsUi = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
 var menuButtons_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".menu-content{text-align:center}.menu-toggle-button{margin:0;padding:2px;border-radius:5px}.menu-toggle-button:not(:last-child){margin-right:10px}.menu-modal{width:500px}\n")();
-const _sfc_main$2 = defineComponent({
+const _sfc_main$3 = defineComponent({
   data() {
     return {
       buttons: [
@@ -40209,7 +40212,7 @@ const _sfc_main$2 = defineComponent({
   }
 });
 const _hoisted_1$2 = { class: "menu-container" };
-const _hoisted_2$1 = ["onClick", "id"];
+const _hoisted_2$2 = ["onClick", "id"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$2, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttonsToShow, (buttonConf) => {
@@ -40218,22 +40221,26 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: ($event) => _ctx.buttonClick(buttonConf),
         id: buttonConf.cssId,
         class: "button menu-toggle-button"
-      }, toDisplayString(buttonConf.text), 9, _hoisted_2$1);
+      }, toDisplayString(buttonConf.text), 9, _hoisted_2$2);
     }), 128))
   ]);
 }
-var MenuButtons = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
-var screens_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".viewport{position:relative}\n")();
-const _hoisted_1$1 = ["onClick"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "screens",
+var MenuButtons = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
+var screenLayer_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".viewport{position:relative}.viewport-layer{background-size:cover;background-repeat:no-repeat;background-position:center;position:absolute;left:0;top:0;width:100%;height:100%}.viewport-button{position:absolute}\n")();
+const _hoisted_1$1 = ["id"];
+const _hoisted_2$1 = ["id", "onClick"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "screen-layer",
+  props: {
+    layer: String
+  },
   setup(__props) {
+    const props = __props;
     const vmStore = useVM();
-    const rendering = useRenderingStore();
     const main2 = useMain();
     const screensStore = useScreens();
     const currentScreen = computed(() => {
-      return screensStore.currentScreen;
+      return props.layer;
     });
     const buttonsState = computed(() => {
       return screensStore.buttons;
@@ -40248,15 +40255,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const screenButtons = computed(() => {
       return screenConfig.value.buttons || [];
     });
-    const layoutMode = computed(() => {
-      return rendering.layoutMode;
-    });
-    const layoutWidth = computed(() => {
-      return getConfig().layout.backgrounds.width;
-    });
-    const layoutHeight = computed(() => {
-      return getConfig().layout.backgrounds.height;
-    });
     const inGame = computed(() => {
       return main2.isInGame;
     });
@@ -40288,7 +40286,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       return {
         ...style,
-        position: "absolute",
         left: `${config2.position.left}px`,
         top: `${config2.position.top}px`
       };
@@ -40307,7 +40304,54 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         vmStore.runLine();
       }
     }
-    const backgroundStyle = computed(() => {
+    const layerStyle = computed(() => {
+      return {
+        backgroundImage: `url(${getImageUrl(screenConfig.value.background)})`
+      };
+    });
+    return (_ctx, _cache) => {
+      return unref(inGame) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "viewport-layer",
+        id: `viewport-layer-${unref(currentScreen)}`,
+        style: normalizeStyle(unref(layerStyle))
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(screenButtons), (button, index) => {
+          return openBlock(), createElementBlock("button", {
+            key: index,
+            class: "viewport-button",
+            id: `viewport-button-${button}`,
+            onClick: ($event) => clickOnButton(button),
+            style: normalizeStyle(getButtonStyle(button))
+          }, toDisplayString(unref(getButtonConfig)(button).text), 13, _hoisted_2$1);
+        }), 128))
+      ], 12, _hoisted_1$1)) : createCommentVNode("", true);
+    };
+  }
+});
+var screens_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".viewport{position:relative}\n")();
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "screens",
+  setup(__props) {
+    const rendering = useRenderingStore();
+    const main2 = useMain();
+    const screensStore = useScreens();
+    const layers = computed(() => {
+      return screensStore.layers.filter((layer) => layer);
+    });
+    const layoutMode = computed(() => {
+      return rendering.layoutMode;
+    });
+    const layoutWidth = computed(() => {
+      return getConfig().layout.backgrounds.width;
+    });
+    const layoutHeight = computed(() => {
+      return getConfig().layout.backgrounds.height;
+    });
+    const inGame = computed(() => {
+      return main2.isInGame;
+    });
+    const viewportStyle = computed(() => {
       const width = `${layoutWidth.value}px`;
       let height = `${layoutHeight.value}px`;
       if (layoutMode.value === "vertical") {
@@ -40315,8 +40359,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       return {
         height,
-        width,
-        backgroundImage: `url(${getImageUrl(screenConfig.value.background)})`
+        width
       };
     });
     return (_ctx, _cache) => {
@@ -40324,14 +40367,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         key: 0,
         class: "viewport",
         id: "narrat-viewport",
-        style: normalizeStyle(unref(backgroundStyle))
+        style: normalizeStyle(unref(viewportStyle))
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(screenButtons), (button, index) => {
-          return openBlock(), createElementBlock("button", {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layers), (layer, index) => {
+          return openBlock(), createBlock(_sfc_main$2, {
             key: index,
-            onClick: ($event) => clickOnButton(button),
-            style: normalizeStyle(getButtonStyle(button))
-          }, toDisplayString(unref(getButtonConfig)(button).text), 13, _hoisted_1$1);
+            layer
+          }, null, 8, ["layer"]);
         }), 128))
       ], 4)) : createCommentVNode("", true);
     };
@@ -40362,7 +40404,7 @@ const _sfc_main = defineComponent({
     MainMenu,
     Skills,
     InventoryUi,
-    GameDialog: _sfc_main$4,
+    GameDialog: _sfc_main$5,
     QuestsUi,
     MenuButtons,
     Screens: _sfc_main$1
@@ -40882,17 +40924,24 @@ const addPlugin = new CommandPlugin("add", [
   const state = getModifiableDataPinia();
   addDataHelper(state, cmd.options.key, cmd.options.value);
 });
-const setScreenCommand = new CommandPlugin("set_screen", [{ name: "screen", type: "string" }], async (cmd) => {
+const setScreenCommand = new CommandPlugin("set_screen", [
+  { name: "screen", type: "string" },
+  { name: "layer", type: "number", optional: true }
+], async (cmd) => {
+  const screens = useScreens();
+  screens.setScreen(cmd.options.screen, cmd.options.layer);
+});
+const emptyLayerCommand = new CommandPlugin("empty_layer", [{ name: "layer", type: "number" }], async (cmd) => {
   const screens = useScreens();
-  screens.setScreen(cmd.options.screen);
+  screens.emptyLayer(cmd.options.layer);
 });
 const setButtonCommand = new CommandPlugin("set_button", [
   { name: "buttonId", type: "string" },
-  { name: "enabled", type: "boolean" }
+  { name: "state", type: "any" }
 ], async (cmd) => {
-  const { buttonId, enabled } = cmd.options;
+  const { buttonId, state } = cmd.options;
   const screens = useScreens();
-  screens.changeButton(buttonId, enabled);
+  screens.changeButton(buttonId, state);
 });
 const talkCommand = CommandPlugin.FromOptions({
   keyword: "talk",
@@ -41455,6 +41504,7 @@ function registerBaseCommands(vm2) {
   vm2.addCommand(stopCommand);
   vm2.addCommand(setButtonCommand);
   vm2.addCommand(setScreenCommand);
+  vm2.addCommand(emptyLayerCommand);
   vm2.addCommand(waitCommand);
   vm2.addCommand(equalPlugin);
   vm2.addCommand(greaterThanPlugin);