narrat 2.0.10 → 2.0.11

package/dist/narrat.es.js

@@ -537,7 +537,7 @@ var es6Promise = { exports: {} };
   });
 })(es6Promise);
 es6Promise.exports.polyfill();
-var main = /* @__PURE__ */ (() => '/*! @import *//*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.flex-shrink{flex-shrink:1}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.gap-4{gap:1rem}.border{border-width:1px}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--font-family: "Helvetica", sans-serif, "Arial", "sans-serif";--bg-color: #131720;--text-color: #d9e1f2;--primary: hsl(255, 30%, 55%);--focus: hsl(210, 90%, 50%);--secondary: #42b983;--border-color: hsla(0, 0%, 100%, .2);--light-1: hsl(210, 30%, 40%);--light-2: hsl(255, 30%, 50%);--light-background: linear-gradient(to right, var(--light-1), var(--light-2));--shadow-1: hsla(236, 50%, 50%, .3);--shadow-2: hsla(236, 50%, 50%, .4);--hud-background: rgba(0, 0, 0, .4);--hud-text-color: var(--text-color);--notifications-bg: darkslateblue;--skills-text-background: rgba(0, 0, 0, .5);--skills-text-color: var(--text-color);--skills-level-background: rgba(0, 0, 0, .5);--skills-level-color: orange;--skills-xp-bar-height: 40px;--skill-check-name-color: orange;--skill-check-difficulty: orange;--skill-check-success: green;--skill-check-failed: red;--skill-check-color: orange;--dialog-choice-color: orange;--dialog-choice-hover-color: var(--text-color);--inventory-text-background: rgba(0, 0, 0, .5);--inventory-text-color: var(--text-color);--inventory-amount-background: rgba(0, 0, 0, .5);--inventory-amount-color: orange;--quest-title-color: yellow;--completed-quest-title-color: grey;--objective-in-progress-color: white;--objective-completed-color: grey}body,*{font-family:var(--font-family)}.list-item{display:inline-block;margin-right:10px}.list-enter-active,.list-leave-active{transition:all .3s ease}#app{background-size:cover}.list-enter-from,.list-leave-to{opacity:0;transform:translate(300px)}.notification-item{display:inline-block;margin-right:10px}.notification-enter-active,.notification-leave-active{transition:all .3s ease}.notification-enter-from,.notification-leave-to{opacity:0;transform:translateY(-300px)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fade-in-enter-active{transition:opacity .1s ease}.fade-in-enter-from{opacity:0}body{padding:0;margin:0;font-family:Arial,sans-serif;background-color:#000}.select{background:var(--light-background);padding:10px}.option{background-color:var(--light-2);padding:5px;color:var(--text-color)}.button{background:var(--light-background);color:var(--text-color);box-shadow:.4rem .5rem 2.4rem .2rem var(--shadow-1),inset -2px -4px #0006,inset 2px 2px #fff7;border-radius:10px;padding:10px;font-weight:800;font-size:16px;margin:10px;transition:.2s;box-shadow:inset -2px -4px #0006,inset 2px 2px #fff7}.button.large{border-radius:20px}.menu-button{border-radius:5px}.button.main-menu-button{border-radius:20px}.button:focus,.button:hover{transform:translateY(-.2rem);box-shadow:0 0 1rem .2rem var(--shadow-2),inset -2px -4px #0006,inset 2px 2px #fff7}.disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.button.disabled{box-shadow:unset;color:gray;background:var(--border-color)}.input{background:var(--light-background);color:var(--text-color);box-shadow:.4rem .4rem 2.4rem .2rem var(--shadow-1);border-radius:100px;padding:10px;font-weight:800;font-size:16px;margin:10px;transition:.2s}.input:focus,.input:hover{transform:translateY(-.2rem);box-shadow:0 0 2.4rem .2rem var(--shadow-2)}a{color:pink;text-decoration:underline}th,td{padding:4px;border:1px solid var(--text-color);text-align:center}#game-holder{width:100vw;height:100vh;padding:0;margin:0;top:0;left:0;background-color:#000;display:flex;align-items:center;justify-content:center;min-height:-webkit-fill-available}.title{font-size:30px;font-weight:700;text-align:center}.container{padding:20px}h1,h2,h3,h4{font-weight:700}h1{font-size:30px}h2{font-size:26px}h3{font-size:24px}hr.solid{border:1px solid var(--text-color);margin-top:30px;margin-bottom:30px}.card-1{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:all .3s cubic-bezier(.25,.8,.25,1)}.card-1:hover{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.card-2{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-3{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.card-4{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.card-5{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038}.dialog-choice{transition:.2s}.dialog-choice:hover{transform:scale(1.05);transform-origin:center}.dialog-choice:not(:hover)>.skill-check-name,.passive-skill-check>.skill-check-name{color:var(--skill-check-name-color)}.dialog-choice:not(:hover)>.skill-check-difficulty,.passive-skill-check>.skill-check-difficulty{color:var(--skill-check-difficulty)}.skill-check-difficulty{font-weight:700}.dialog-choice:not(:hover)>.skill-check-success,.passive-skill-check>.skill-check-success{color:var(--skill-check-success)}.dialog-choice:not(:hover)>.skill-check-failed,.passive-skill-check>.skill-check-failed{color:var(--skill-check-failed)}.dialog-choice:not(:hover)>.skill-check,.passive-skill-check.skill-check{color:var(--skill-check-color)}.narrat-canvas{position:absolute;height:100%;top:0;left:0}#touchTrigger{pointer-events:none}\n')();
+var main = /* @__PURE__ */ (() => '/*! @import *//*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.w-full{width:100%}.flex-shrink{flex-shrink:1}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.gap-4{gap:1rem}.border{border-width:1px}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--font-family: "Helvetica", sans-serif, "Arial", "sans-serif";--bg-color: #131720;--text-color: #d9e1f2;--primary: hsl(255, 30%, 55%);--focus: hsl(210, 90%, 50%);--secondary: #42b983;--border-color: hsla(0, 0%, 100%, .2);--light-1: hsl(210, 30%, 40%);--light-2: hsl(255, 30%, 50%);--light-background: linear-gradient(to right, var(--light-1), var(--light-2));--shadow-1: hsla(236, 50%, 50%, .3);--shadow-2: hsla(236, 50%, 50%, .4);--hud-background: rgba(0, 0, 0, .4);--hud-text-color: var(--text-color);--notifications-bg: darkslateblue;--skills-text-background: rgba(0, 0, 0, .5);--skills-text-color: var(--text-color);--skills-level-background: rgba(0, 0, 0, .5);--skills-level-color: orange;--skills-xp-bar-height: 40px;--skill-check-name-color: orange;--skill-check-difficulty: orange;--skill-check-success: green;--skill-check-failed: red;--skill-check-color: orange;--dialog-choice-color: orange;--dialog-choice-hover-color: var(--text-color);--inventory-text-background: rgba(0, 0, 0, .5);--inventory-text-color: var(--text-color);--inventory-amount-background: rgba(0, 0, 0, .5);--inventory-amount-color: orange;--quest-title-color: yellow;--completed-quest-title-color: grey;--objective-in-progress-color: white;--objective-completed-color: grey}body,*{font-family:var(--font-family)}.list-item{display:inline-block;margin-right:10px}.list-enter-active,.list-leave-active{transition:all .3s ease}#app{background-size:cover}.list-enter-from,.list-leave-to{opacity:0;transform:translate(300px)}.notification-item{display:inline-block;margin-right:10px}.notification-enter-active,.notification-leave-active{transition:all .3s ease}.notification-enter-from,.notification-leave-to{opacity:0;transform:translateY(-300px)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fade-in-enter-active{transition:opacity .1s ease}.fade-in-enter-from{opacity:0}body{padding:0;margin:0;font-family:Arial,sans-serif;background-color:#000}.select{background:var(--light-background);padding:10px}.option{background-color:var(--light-2);padding:5px;color:var(--text-color)}.button{background:var(--light-background);color:var(--text-color);box-shadow:.4rem .5rem 2.4rem .2rem var(--shadow-1),inset -2px -4px #0006,inset 2px 2px #fff7;border-radius:10px;padding:10px;font-weight:800;font-size:16px;margin:10px;transition:.2s;box-shadow:inset -2px -4px #0006,inset 2px 2px #fff7}.button.large{border-radius:20px}.menu-button{border-radius:5px}.button.main-menu-button{border-radius:20px}.button:focus,.button:hover{transform:translateY(-.2rem);box-shadow:0 0 1rem .2rem var(--shadow-2),inset -2px -4px #0006,inset 2px 2px #fff7}.disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.button.disabled{box-shadow:unset;color:gray;background:var(--border-color)}.input{background:var(--light-background);color:var(--text-color);box-shadow:.4rem .4rem 2.4rem .2rem var(--shadow-1);border-radius:100px;padding:10px;font-weight:800;font-size:16px;margin:10px;transition:.2s}.input:focus,.input:hover{transform:translateY(-.2rem);box-shadow:0 0 2.4rem .2rem var(--shadow-2)}a{color:pink;text-decoration:underline}th,td{padding:4px;border:1px solid var(--text-color);text-align:center}#game-holder{width:100vw;height:100vh;padding:0;margin:0;top:0;left:0;background-color:#000;display:flex;align-items:center;justify-content:center;min-height:-webkit-fill-available}.title{font-size:30px;font-weight:700;text-align:center}.container{padding:20px}h1,h2,h3,h4{font-weight:700}h1{font-size:30px}h2{font-size:26px}h3{font-size:24px}hr.solid{border:1px solid var(--text-color);margin-top:30px;margin-bottom:30px}.card-1{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:all .3s cubic-bezier(.25,.8,.25,1)}.card-1:hover{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.card-2{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.card-3{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.card-4{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.card-5{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038}.dialog-choice{transition:.2s}.dialog-choice:hover{transform:scale(1.05);transform-origin:center}.dialog-choice:not(:hover)>.skill-check-name,.passive-skill-check>.skill-check-name{color:var(--skill-check-name-color)}.dialog-choice:not(:hover)>.skill-check-difficulty,.passive-skill-check>.skill-check-difficulty{color:var(--skill-check-difficulty)}.skill-check-difficulty{font-weight:700}.dialog-choice:not(:hover)>.skill-check-success,.passive-skill-check>.skill-check-success{color:var(--skill-check-success)}.dialog-choice:not(:hover)>.skill-check-failed,.passive-skill-check>.skill-check-failed{color:var(--skill-check-failed)}.dialog-choice:not(:hover)>.skill-check,.passive-skill-check.skill-check{color:var(--skill-check-color)}.narrat-canvas{position:absolute;height:100%;top:0;left:0}#touchTrigger{pointer-events:none}\n')();
 const f$1 = ref([]), v$1 = ref(null), m$1 = ref(null), g$1 = ref(null), h$1 = reactive({ current: "" }), y$1 = [], b$1 = ref(false), k$1 = readonly(f$1), w$1 = readonly(v$1), M$1 = readonly(m$1), q$1 = readonly(g$1), x$1 = readonly(h$1), $$1 = (e20 = w$1.value) => {
   h$1.current = e20;
   const t2 = k$1.value.findIndex((t3) => t3.name === e20), n2 = k$1.value.map((e21) => e21.name);
@@ -681,12 +681,12 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$e = defineComponent({
+const _sfc_main$f = defineComponent({
   props: {
     containerCssClass: String
   }
 });
-const _hoisted_1$d = { class: "modal-header" };
+const _hoisted_1$e = { class: "modal-header" };
 const _hoisted_2$b = /* @__PURE__ */ createTextVNode(" default header ");
 const _hoisted_3$7 = /* @__PURE__ */ createElementVNode("hr", { class: "solid" }, null, -1);
 const _hoisted_4$6 = { class: "modal-body" };
@@ -703,7 +703,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
           class: normalizeClass(["modal-container bg-gray-800 card-4", _ctx.containerCssClass]),
           onClick: _cache[1] || (_cache[1] = (e20) => e20.stopPropagation())
         }, [
-          createElementVNode("div", _hoisted_1$d, [
+          createElementVNode("div", _hoisted_1$e, [
             createElementVNode("button", {
               class: "close-button",
               onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
@@ -727,7 +727,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   });
 }
-var Modal = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$d]]);
+var Modal = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$d]]);
 function isArray(value) {
   return !Array.isArray ? getTag(value) === "[object Array]" : Array.isArray(value);
 }
@@ -34375,6 +34375,16 @@ function getSkillConfig(id2) {
   }
   return skill;
 }
+function getImageUrl(imageKeyOrUrl) {
+  if (config$1.images[imageKeyOrUrl]) {
+    return config$1.images[imageKeyOrUrl];
+  } else {
+    return imageKeyOrUrl;
+  }
+}
+function getButtonConfig(button) {
+  return config$1.buttons[button];
+}
 function getItemConfig(id2) {
   const item = config$1.items[id2];
   if (!item) {
@@ -37239,15 +37249,34 @@ const useScreens = defineStore("screens", {
     setScreen(screen) {
       this.currentScreen = screen;
     },
-    setButtons(buttons) {
-      for (const i2 in buttons) {
-        this.buttons[i2] = {
-          enabled: buttons[i2].enabled
+    setButtons(config2) {
+      const { buttons: buttonsConfig, screens: screensConfig, images } = config2;
+      for (const key in buttonsConfig) {
+        this.buttons[key] = {
+          state: buttonsConfig[key].enabled
         };
       }
+      for (const key in screensConfig) {
+        if (screensConfig[key].buttons) {
+          const screen = screensConfig[key];
+          if (screen.background && images[screen.background]) {
+            screen.background = images[screen.background];
+          }
+          for (const index in screen.buttons) {
+            const button = screen.buttons[index];
+            if (typeof button === "object") {
+              buttonsConfig[button.id] = button;
+              screen.buttons[index] = button.id;
+              this.buttons[button.id] = {
+                state: button.enabled
+              };
+            }
+          }
+        }
+      }
     },
     changeButton(button, newValue) {
-      this.buttons[button].enabled = newValue;
+      this.buttons[button].state = newValue;
     },
     generateSaveData() {
       return {
@@ -37343,41 +37372,41 @@ const loggerManager = new LogManager();
 loggerManager.setupDebugger(false);
 const logger = loggerManager.logger;
 function parseScript(errorHandler, code, fileName) {
-  const ctx2 = {
+  const ctx = {
     fileName,
     currentLine: 0,
-    error: (line, text) => errorHandler(ctx2, line, text),
+    error: (line, text) => errorHandler(ctx, line, text),
     processCommandsFunction: processCommands,
     indentSize: 0
   };
-  ctx2.indentSize = detectIndentation(ctx2, code);
-  const lines = findLines(ctx2, code);
-  ctx2.currentLine = 0;
+  ctx.indentSize = detectIndentation(ctx, code);
+  const lines = findLines(ctx, code);
+  ctx.currentLine = 0;
   logger.log(lines);
   const script = {};
   for (const line of lines) {
     if (line.code.search(":") === -1) {
-      ctx2.error(line.line, `First indentation level should only be used to specify labels`);
+      ctx.error(line.line, `First indentation level should only be used to specify labels`);
     }
     const labelString = line.code.replace(":", "");
     const labelWords = labelString.split(/ +/g);
     const labelName = labelWords[0];
     const labelArgs = labelWords.slice(1);
     if (!line.branch) {
-      ctx2.error(line.line, `This line should have a branch but doesn't`);
+      ctx.error(line.line, `This line should have a branch but doesn't`);
     }
     script[labelName] = {
-      branch: processCommands(ctx2, line.branch, void 0),
+      branch: processCommands(ctx, line.branch, void 0),
       args: labelArgs
     };
   }
   return script;
 }
-function processCommands(ctx2, lines, parentLine) {
-  const startLine = ctx2.currentLine;
+function processCommands(ctx, lines, parentLine) {
+  const startLine = ctx.currentLine;
   const branchContext = {
     processCommandsFunction: processCommands,
-    parserContext: ctx2,
+    parserContext: ctx,
     lines,
     currentLine: 0,
     line: lines[0]
@@ -37388,13 +37417,13 @@ function processCommands(ctx2, lines, parentLine) {
     if (parentLine) {
       lineNumber = parentLine.line;
     }
-    ctx2.error(lineNumber, `Processing of command failed because the current branch has no lines inside`);
+    ctx.error(lineNumber, `Processing of command failed because the current branch has no lines inside`);
     return [];
   }
   while (branchContext.currentLine < lines.length) {
     const line = lines[branchContext.currentLine];
     branchContext.line = line;
-    const parsed = parseExpression(ctx2, line, line.expression);
+    const parsed = parseExpression(ctx, line, line.expression);
     const commandPlugin = vm.commands[parsed.command.operator];
     let parseFunction = commandPlugin == null ? void 0 : commandPlugin.parser;
     if (!parseFunction) {
@@ -37403,25 +37432,25 @@ function processCommands(ctx2, lines, parentLine) {
     logger.log(vm.commands.text);
     const { newLine } = parseFunction(branchContext, parsed);
     branchContext.currentLine = newLine;
-    ctx2.currentLine = startLine + newLine;
+    ctx.currentLine = startLine + newLine;
     branch.push(parsed);
   }
   return branch;
 }
-function parseExpression(ctx2, line, expression) {
+function parseExpression(ctx, line, expression) {
   logger.log(expression);
   if (typeof expression[0] !== "string") {
-    ctx2.error(line.line, `Expression operator should be a string`);
+    ctx.error(line.line, `Expression operator should be a string`);
   }
   const parsed = {
     code: line.code,
-    fileName: ctx2.fileName,
+    fileName: ctx.fileName,
     line: line.line,
     command: {
       staticOptions: {},
       commandType: expression[0],
       operator: expression[0],
-      args: expression.slice(1).map((arg) => parseArgument(ctx2, line, arg)),
+      args: expression.slice(1).map((arg) => parseArgument(ctx, line, arg)),
       options: {}
     }
   };
@@ -37430,14 +37459,14 @@ function parseExpression(ctx2, line, expression) {
   if (!command) {
     const otherKeywords = ["else", "success", "failure"];
     if (!isParsedTokenString(firstElement) && !otherKeywords.includes(firstElement)) {
-      ctx2.error(line.line, `Unknown command ${firstElement}`);
+      ctx.error(line.line, `Unknown command ${firstElement}`);
     }
   }
   return parsed;
 }
-function parseArgument(ctx2, line, argument) {
+function parseArgument(ctx, line, argument) {
   if (Array.isArray(argument)) {
-    return parseExpression(ctx2, line, argument);
+    return parseExpression(ctx, line, argument);
   } else {
     return argument;
   }
@@ -37452,12 +37481,12 @@ function parseTokenToPrimitive(value) {
   }
   return value;
 }
-function parseCodeLine(ctx2, codeToProcess) {
+function parseCodeLine(ctx, codeToProcess) {
   if (codeToProcess.charAt(codeToProcess.length - 1) === ":") {
     codeToProcess = codeToProcess.substr(0, codeToProcess.length - 1);
   }
   const tokens = parseCodeLineIntoTokens(codeToProcess);
-  const [expression] = tokensToExpression(ctx2, tokens);
+  const [expression] = tokensToExpression(ctx, tokens);
   return expression;
 }
 function parseCodeLineIntoTokens(code) {
@@ -37490,7 +37519,7 @@ function splitIntoTokens(code) {
   result = result.reduce((total, curr) => [...total, ...curr.split(/(\(|\))/g)].filter((el2) => el2 && el2), []);
   return result.map((token) => parseTokenToPrimitive(token));
 }
-function tokensToExpression(ctx2, tokens) {
+function tokensToExpression(ctx, tokens) {
   logger.log("===============");
   let expression = [];
   let cursor = 0;
@@ -37503,7 +37532,7 @@ function tokensToExpression(ctx2, tokens) {
     const subExpressionString = tokens.slice(parenthesisIndex + 1);
     logger.log(`Found a sub expression. Before: ${expression} - After: ${subExpressionString}`);
     cursor = parenthesisIndex;
-    const [subExpression, subExpressionLength] = tokensToExpression(ctx2, subExpressionString);
+    const [subExpression, subExpressionLength] = tokensToExpression(ctx, subExpressionString);
     const subExpressionEndIndex = cursor + subExpressionLength;
     expression.push(subExpression);
     cursor = subExpressionEndIndex + 1;
@@ -37523,19 +37552,19 @@ function tokensToExpression(ctx2, tokens) {
   }
   const endIndex = findExpressionEnd(tokens.slice(cursor)) + cursor;
   if (endIndex === -1) {
-    ctx2.error(ctx2.currentLine, `Expression is not closed (missing ")" closing parenthesis)`);
+    ctx.error(ctx.currentLine, `Expression is not closed (missing ")" closing parenthesis)`);
     return [expression, endIndex];
   }
   const restOfString = tokens.slice(cursor, endIndex);
   logger.log(`End of expression: ${endIndex} - ${restOfString}`);
   logger.log("===================");
   expression = [...expression, ...restOfString];
-  validateExpression(ctx2, expression);
+  validateExpression(ctx, expression);
   return [expression, endIndex + 1];
 }
-function validateExpression(ctx2, expression) {
+function validateExpression(ctx, expression) {
   if (expression.length < 1) {
-    ctx2.error(ctx2.currentLine, `Expression is empty`);
+    ctx.error(ctx.currentLine, `Expression is empty`);
   }
 }
 function findExpressionStart(tokens) {
@@ -37544,7 +37573,7 @@ function findExpressionStart(tokens) {
 function findExpressionEnd(tokens) {
   return tokens.findIndex((token) => token === ")");
 }
-function findLines(ctx2, data) {
+function findLines(ctx, data) {
   const code = data.split(/\r?\n|$/).map((line) => {
     const commentIndex = line.search(/ *\/\//g);
     if (commentIndex !== -1) {
@@ -37552,10 +37581,10 @@ function findLines(ctx2, data) {
     }
     return line;
   });
-  const lines = findBranches(ctx2, code, 0, 0);
+  const lines = findBranches(ctx, code, 0, 0);
   return lines.lines;
 }
-function findBranches(ctx2, code, startLine, indentLevel) {
+function findBranches(ctx, code, startLine, indentLevel) {
   let stillInBranch = true;
   let currentLine = startLine;
   const lines = [];
@@ -37567,20 +37596,20 @@ function findBranches(ctx2, code, startLine, indentLevel) {
     if (lineText.search(/^\s*$/) !== -1) {
       currentLine++;
     } else {
-      const lineIndent = getIndentLevel(ctx2, lineText);
-      lineText = lineText.substring(lineIndent * ctx2.indentSize);
-      validateIndent(ctx2, lineIndent, currentLine);
+      const lineIndent = getIndentLevel(ctx, lineText);
+      lineText = lineText.substring(lineIndent * ctx.indentSize);
+      validateIndent(ctx, lineIndent, currentLine);
       if (lineIndent < indentLevel) {
         stillInBranch = false;
       } else if (lineIndent > indentLevel) {
         if (lines.length === 0 || lineIndent - indentLevel !== 1) {
-          ctx2.error(currentLine, `Wrong double indentation`);
+          ctx.error(currentLine, `Wrong double indentation`);
         }
-        const branchLines = findBranches(ctx2, code, currentLine, lineIndent);
+        const branchLines = findBranches(ctx, code, currentLine, lineIndent);
         lines[lines.length - 1].branch = branchLines.lines;
         currentLine = branchLines.endLine;
       } else {
-        const expression = parseCodeLine(ctx2, lineText);
+        const expression = parseCodeLine(ctx, lineText);
         const line = {
           code: lineText,
           indentation: lineIndent,
@@ -37589,7 +37618,7 @@ function findBranches(ctx2, code, startLine, indentLevel) {
         };
         lines.push(line);
         currentLine++;
-        ctx2.currentLine = currentLine;
+        ctx.currentLine = currentLine;
       }
     }
   }
@@ -37598,19 +37627,19 @@ function findBranches(ctx2, code, startLine, indentLevel) {
     endLine: currentLine
   };
 }
-function validateIndent(ctx2, indentLevel, currentIndex) {
+function validateIndent(ctx, indentLevel, currentIndex) {
   if (indentLevel % 1 !== 0) {
-    ctx2.error(currentIndex, `Indentation level of ${indentLevel} incorrect. Expected indentation of ${ctx2.indentSize} spaces for this file.`);
+    ctx.error(currentIndex, `Indentation level of ${indentLevel} incorrect. Expected indentation of ${ctx.indentSize} spaces for this file.`);
   }
 }
-function getIndentLevel(ctx2, line) {
-  return line.search(/[^ ]/) / ctx2.indentSize;
+function getIndentLevel(ctx, line) {
+  return line.search(/[^ ]/) / ctx.indentSize;
 }
-function detectIndentation(ctx2, script) {
+function detectIndentation(ctx, script) {
   const regex = /\n( *)/;
   const result = script.match(regex);
   if (!result || result.length < 2) {
-    ctx2.error(0, `Can't detect indentation level. Make sure you indent with at least 2 spaces and consistently`);
+    ctx.error(0, `Can't detect indentation level. Make sure you indent with at least 2 spaces and consistently`);
     return 0;
   }
   logger.log(result);
@@ -37676,7 +37705,7 @@ const useVM = defineStore("vm", {
         const file = files[index];
         scripts = {
           ...scripts,
-          ...parseScript((ctx2, line, error2) => parserError(ctx2, line, error2), file, scriptPaths[index])
+          ...parseScript((ctx, line, error2) => parserError(ctx, line, error2), file, scriptPaths[index])
         };
       }
       const end = Date.now();
@@ -38262,7 +38291,7 @@ const useMain = defineStore("main", {
       }
       await useVM().loadScripts(scriptPaths);
       const screens = useScreens();
-      screens.setButtons(config2.buttons);
+      screens.setButtons(config2);
       const skillsStore = useSkills();
       skillsStore.setupSkills(config2.skills);
       const hudStore = useHud();
@@ -38429,11 +38458,16 @@ const useMain = defineStore("main", {
         Object.assign(states[key], stateOverride);
       }
     }
+  },
+  getters: {
+    isInGame(state) {
+      return state.flowState === "playing";
+    }
   }
 });
-function parserError(ctx2, line, text) {
-  console.error(`Parser error: ${ctx2.fileName}:${ctx2.currentLine}`, text);
-  const errorText = `[Parser Error] in <span class="error-filename">${ctx2.fileName}:${line + 1}</span> - <b>${text}</b>`;
+function parserError(ctx, line, text) {
+  console.error(`Parser error: ${ctx.fileName}:${ctx.currentLine}`, text);
+  const errorText = `[Parser Error] in <span class="error-filename">${ctx.fileName}:${line + 1}</span> - <b>${text}</b>`;
   error(errorText);
 }
 function error(text) {
@@ -38524,7 +38558,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$d = defineComponent({
+const _sfc_main$e = defineComponent({
   components: {
     Modal
   },
@@ -38753,7 +38787,7 @@ const _sfc_main$d = defineComponent({
     }
   }
 });
-const _hoisted_1$c = { class: "debug-menu" };
+const _hoisted_1$d = { class: "debug-menu" };
 const _hoisted_2$a = {
   key: 0,
   class: "debug-info"
@@ -38778,7 +38812,7 @@ const _hoisted_5$5 = [
   _hoisted_4$5
 ];
 const _hoisted_6$5 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Jump to label", -1);
-const _hoisted_7$5 = {
+const _hoisted_7$4 = {
   key: 0,
   class: "search-results"
 };
@@ -38816,7 +38850,7 @@ const _hoisted_26 = /* @__PURE__ */ createElementVNode("h3", { style: { "color":
 const _hoisted_27 = { ref: "stateViewer" };
 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_modal = resolveComponent("modal");
-  return openBlock(), createElementBlock("div", _hoisted_1$c, [
+  return openBlock(), createElementBlock("div", _hoisted_1$d, [
     createElementVNode("button", {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.open && _ctx.open(...args)),
       class: "button debug-button"
@@ -38840,7 +38874,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 544), [
           [vModelText, _ctx.searchString]
         ]),
-        _ctx.matches.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_7$5, [
+        _ctx.matches.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.matches, (match, index) => {
             return openBlock(), createElementBlock("div", {
               class: "search-result",
@@ -38934,9 +38968,9 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["onClose"])) : createCommentVNode("", true)
   ]);
 }
-var DebugMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$c]]);
+var DebugMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["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$c = defineComponent({
+const _sfc_main$d = defineComponent({
   data() {
     return {
       muted: false
@@ -38962,13 +38996,13 @@ const _sfc_main$c = defineComponent({
     }
   }
 });
-const _hoisted_1$b = { class: "volume-controls" };
+const _hoisted_1$c = { class: "volume-controls" };
 const _hoisted_2$9 = /* @__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$b, [
+  return openBlock(), createElementBlock("div", _hoisted_1$c, [
     _hoisted_2$9,
     createElementVNode("input", {
       ref: "slider",
@@ -38984,9 +39018,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 544)
   ]);
 }
-var VolumeControls = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$b]]);
+var VolumeControls = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["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$b = defineComponent({
+const _sfc_main$c = defineComponent({
   components: {
     VolumeControls
   },
@@ -39014,7 +39048,7 @@ const _sfc_main$b = defineComponent({
     }
   }
 });
-const _hoisted_1$a = ["src"];
+const _hoisted_1$b = ["src"];
 const _hoisted_2$8 = { class: "bold hud-text" };
 const _hoisted_3$5 = /* @__PURE__ */ createTextVNode(": ");
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
@@ -39030,7 +39064,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("img", {
           class: "hud-icon",
           src: _ctx.statsConfig[key].icon
-        }, null, 8, _hoisted_1$a),
+        }, null, 8, _hoisted_1$b),
         createElementVNode("span", _hoisted_2$8, toDisplayString(_ctx.statsConfig[key].name), 1),
         _hoisted_3$5,
         createElementVNode("span", null, toDisplayString(Math.floor(stat.value * 100) / 100), 1)
@@ -39038,9 +39072,9 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ], 4);
 }
-var Hud = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$a]]);
+var Hud = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["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$a = defineComponent({
+const _sfc_main$b = defineComponent({
   props: {
     percentage: Number,
     step: String
@@ -39056,10 +39090,10 @@ const _sfc_main$a = defineComponent({
   },
   computed: {}
 });
-const _hoisted_1$9 = { id: "loading-bar" };
+const _hoisted_1$a = { id: "loading-bar" };
 const _hoisted_2$7 = { id: "loading-text" };
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     createElementVNode("div", {
       id: "inner-loading-bar",
       style: normalizeStyle(_ctx.loadingStyle())
@@ -39069,9 +39103,9 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-var LoadingBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$9]]);
+var LoadingBar = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["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$9 = defineComponent({
+const _sfc_main$a = defineComponent({
   data() {
   },
   methods: {},
@@ -39098,7 +39132,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var NotificationToast = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$8]]);
+var NotificationToast = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$8]]);
 let config;
 function setCharactersConfig(data) {
   config = data;
@@ -39127,22 +39161,6 @@ function aspectRatioFit(screenWidth, screenHeight, gameWidth, gameHeight) {
   const bestRatio = Math.min(widthRatio, heightRatio);
   return bestRatio;
 }
-function screenToCanvas(x2, y2, element) {
-  const rect = element.getBoundingClientRect();
-  const ratio = element.width / rect.width;
-  const canvasX = x2 - rect.x;
-  const canvasY = y2 - rect.y;
-  const scaledX = canvasX * ratio;
-  const scaledY = canvasY * ratio;
-  return {
-    x: scaledX,
-    y: scaledY
-  };
-}
-function aabb(ax2, ay2, aw2, ah2, bx2, by2, bw2, bh2) {
-  return !(ax2 + aw2 < bx2 || ay2 + ah2 < by2 || ax2 > bx2 + bw2 || ay2 > by2 + bh2);
-}
-const images = {};
 let imagesToLoad = 0;
 let imagesLoaded = 0;
 function loadImages(config2) {
@@ -39160,7 +39178,6 @@ function loadImage(key, path, resolver, rejecter) {
   const image = new Image();
   image.onload = () => {
     imagesLoaded += 1;
-    images[key] = image;
     logger$1.log(`Loaded image ${key} successfully`);
     if (imagesLoaded >= imagesToLoad) {
       logger$1.log(`All images loaded`);
@@ -39226,7 +39243,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$8 = defineComponent({
+const _sfc_main$9 = defineComponent({
   components: {
     Modal,
     VolumeControls
@@ -39256,7 +39273,7 @@ const _sfc_main$8 = defineComponent({
     ...mapState(useMain, ["playTime"])
   }
 });
-const _hoisted_1$8 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Menu", -1);
+const _hoisted_1$9 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Menu", -1);
 const _hoisted_2$6 = { class: "menu-content" };
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VolumeControls = resolveComponent("VolumeControls");
@@ -39267,7 +39284,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     containerCssClass: "menu-modal"
   }, {
     header: withCtx(() => [
-      _hoisted_1$8
+      _hoisted_1$9
     ]),
     body: withCtx(() => [
       createElementVNode("div", _hoisted_2$6, [
@@ -39286,9 +39303,9 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var MainMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7]]);
+var MainMenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["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$7 = defineComponent({
+const _sfc_main$8 = defineComponent({
   setup() {
     const store = useSkills();
     const skills = computed(() => store.skills);
@@ -39345,7 +39362,7 @@ const _sfc_main$7 = defineComponent({
     }
   }
 });
-const _hoisted_1$7 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Skills", -1);
+const _hoisted_1$8 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Skills", -1);
 const _hoisted_2$5 = {
   key: 0,
   class: "skills-container"
@@ -39354,7 +39371,7 @@ const _hoisted_3$4 = ["onClick"];
 const _hoisted_4$4 = { class: "skill-title" };
 const _hoisted_5$4 = { class: "skill-xp-container" };
 const _hoisted_6$4 = { class: "skill-xp-text" };
-const _hoisted_7$4 = { class: "skill-level" };
+const _hoisted_7$3 = { class: "skill-level" };
 const _hoisted_8$3 = { key: 1 };
 const _hoisted_9$1 = { class: "flex flex-row skill-description-container" };
 const _hoisted_10$1 = { class: "flex skill-left" };
@@ -39368,7 +39385,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     containerCssClass: "skills-modal"
   }, {
     header: withCtx(() => [
-      _hoisted_1$7
+      _hoisted_1$8
     ]),
     body: withCtx(() => [
       !_ctx.chosenSkill ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
@@ -39387,7 +39404,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 4),
               createElementVNode("h3", _hoisted_6$4, toDisplayString(skill.xp) + " / " + toDisplayString(_ctx.xpPerLevel) + " XP", 1)
             ]),
-            createElementVNode("h3", _hoisted_7$4, toDisplayString(skill.level), 1)
+            createElementVNode("h3", _hoisted_7$3, toDisplayString(skill.level), 1)
           ], 12, _hoisted_3$4);
         }), 128))
       ])) : typeof _ctx.chosenSkill === "string" ? (openBlock(), createElementBlock("div", _hoisted_8$3, [
@@ -39414,9 +39431,9 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-var Skills = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6]]);
+var Skills = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["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$6 = defineComponent({
+const _sfc_main$7 = defineComponent({
   setup() {
     const store = useInventory();
     const dialogStore = useDialogStore();
@@ -39506,7 +39523,7 @@ const _sfc_main$6 = defineComponent({
     }
   }
 });
-const _hoisted_1$6 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Inventory", -1);
+const _hoisted_1$7 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Inventory", -1);
 const _hoisted_2$4 = {
   key: 0,
   class: "inventory-container"
@@ -39515,7 +39532,7 @@ const _hoisted_3$3 = ["onClick"];
 const _hoisted_4$3 = { class: "item-title" };
 const _hoisted_5$3 = { class: "item-amount" };
 const _hoisted_6$3 = { key: 1 };
-const _hoisted_7$3 = { class: "flex flex-row item-description-container" };
+const _hoisted_7$2 = { class: "flex flex-row item-description-container" };
 const _hoisted_8$2 = { class: "flex item-left" };
 const _hoisted_9 = { class: "flex item-right" };
 const _hoisted_10 = /* @__PURE__ */ createElementVNode("hr", { class: "hr-solid" }, null, -1);
@@ -39532,7 +39549,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     containerCssClass: "inventory-modal"
   }, {
     header: withCtx(() => [
-      _hoisted_1$6
+      _hoisted_1$7
     ]),
     body: withCtx(() => [
       !_ctx.chosenItem && Object.keys(_ctx.itemsToDisplay).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
@@ -39548,7 +39565,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
           ], 12, _hoisted_3$3);
         }), 128))
       ])) : typeof _ctx.chosenId === "string" ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
-        createElementVNode("div", _hoisted_7$3, [
+        createElementVNode("div", _hoisted_7$2, [
           createElementVNode("div", _hoisted_8$2, [
             createElementVNode("div", {
               class: "item-display",
@@ -39575,9 +39592,9 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["onClose"]);
 }
-var InventoryUi = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5]]);
+var InventoryUi = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["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$5 = defineComponent({
+const _sfc_main$6 = defineComponent({
   props: {
     pictureUrl: String
   },
@@ -39603,7 +39620,7 @@ const _sfc_main$5 = defineComponent({
     }
   }
 });
-const _hoisted_1$5 = ["src"];
+const _hoisted_1$6 = ["src"];
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: "dialog-picture override",
@@ -39612,12 +39629,12 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("img", {
       src: _ctx.pictureUrl,
       class: "picture override"
-    }, null, 8, _hoisted_1$5)
+    }, null, 8, _hoisted_1$6)
   ], 4);
 }
-var DialogPicture = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4]]);
+var DialogPicture = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["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$4 = defineComponent({
+const _sfc_main$5 = defineComponent({
   data() {
     return {
       playerText: "",
@@ -39759,7 +39776,7 @@ const _sfc_main$4 = defineComponent({
     }
   }
 });
-const _hoisted_1$4 = { class: "dialog-content" };
+const _hoisted_1$5 = { class: "dialog-content" };
 const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$2 = ["innerHTML"];
 const _hoisted_4$2 = ["innerHTML"];
@@ -39768,7 +39785,7 @@ const _hoisted_5$2 = {
   class: "dialog-choices"
 };
 const _hoisted_6$2 = ["onClick", "innerHTML"];
-const _hoisted_7$2 = { key: 2 };
+const _hoisted_7$1 = { key: 2 };
 const _hoisted_8$1 = {
   key: 3,
   class: "buttons-container"
@@ -39778,7 +39795,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     class: "dialog-box w-full override",
     style: normalizeStyle(_ctx.dialogBoxStyle)
   }, [
-    createElementVNode("div", _hoisted_1$4, [
+    createElementVNode("div", _hoisted_1$5, [
       _ctx.options.title ? (openBlock(), createElementBlock("span", {
         key: 0,
         class: "dialog-title override",
@@ -39805,7 +39822,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
             innerHTML: `${index + 1}. \u2013\xA0 ${choice.choice}`
           }, null, 14, _hoisted_6$2);
         }), 128))
-      ])) : _ctx.canInteract && _ctx.options.textField ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
+      ])) : _ctx.canInteract && _ctx.options.textField ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
         withDirectives(createElementVNode("input", {
           type: "text",
           class: "label-input input",
@@ -39829,10 +39846,10 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 4);
 }
-var DialogBox = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$3]]);
+var DialogBox = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["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$3 = /* @__PURE__ */ createElementVNode("div", { class: "anchor" }, null, -1);
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = /* @__PURE__ */ createElementVNode("div", { class: "anchor" }, null, -1);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "game-dialog",
   props: {
     layoutMode: String,
@@ -39951,7 +39968,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["style"]),
-          _hoisted_1$3
+          _hoisted_1$4
         ], 4)) : createCommentVNode("", true)
       ], 64);
     };
@@ -39967,7 +39984,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$2 = defineComponent({
+const _sfc_main$3 = defineComponent({
   setup() {
     const questsStore = useQuests();
     const quests = computed(() => questsStore.quests);
@@ -40016,7 +40033,7 @@ const _sfc_main$2 = defineComponent({
     Modal
   }
 });
-const _hoisted_1$2 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Quests", -1);
+const _hoisted_1$3 = /* @__PURE__ */ createElementVNode("h3", { class: "title" }, "Quests", -1);
 const _hoisted_2$2 = {
   key: 0,
   class: "quests-container"
@@ -40031,9 +40048,9 @@ const _hoisted_6$1 = {
   key: 1,
   class: "menu-container"
 };
-const _hoisted_7$1 = /* @__PURE__ */ createElementVNode("h2", { class: "title" }, "There are no quests!", -1);
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("h2", { class: "title" }, "There are no quests!", -1);
 const _hoisted_8 = [
-  _hoisted_7$1
+  _hoisted_7
 ];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_modal = resolveComponent("modal");
@@ -40043,7 +40060,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     containerCssClass: "quests-modal"
   }, {
     header: withCtx(() => [
-      _hoisted_1$2
+      _hoisted_1$3
     ]),
     body: withCtx(() => [
       Object.keys(_ctx.questsToDisplay).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
@@ -40083,9 +40100,9 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["onClose"]);
 }
-var QuestsUi = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+var QuestsUi = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["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$1 = defineComponent({
+const _sfc_main$2 = defineComponent({
   data() {
     return {
       buttons: [
@@ -40191,10 +40208,10 @@ const _sfc_main$1 = defineComponent({
     }
   }
 });
-const _hoisted_1$1 = { class: "menu-container" };
+const _hoisted_1$2 = { class: "menu-container" };
 const _hoisted_2$1 = ["onClick", "id"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttonsToShow, (buttonConf) => {
       return openBlock(), createElementBlock("button", {
         key: buttonConf.id,
@@ -40205,7 +40222,121 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-var MenuButtons = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+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",
+  setup(__props) {
+    const vmStore = useVM();
+    const rendering = useRenderingStore();
+    const main2 = useMain();
+    const screensStore = useScreens();
+    const currentScreen = computed(() => {
+      return screensStore.currentScreen;
+    });
+    const buttonsState = computed(() => {
+      return screensStore.buttons;
+    });
+    const screenConfig = computed(() => {
+      const conf = getConfig().screens[currentScreen.value];
+      if (!conf) {
+        throw new Error(`Screen ${currentScreen.value} doesn't have a config`);
+      }
+      return conf;
+    });
+    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;
+    });
+    function getButtonImageUrl(button) {
+      const config2 = getButtonConfig(button);
+      const background = config2.background;
+      if (!background) {
+        return void 0;
+      }
+      return getImageUrl(background);
+    }
+    function getButtonStyle(button) {
+      const config2 = getButtonConfig(button);
+      const style = {};
+      if (config2.position.width) {
+        style.width = `${config2.position.width}px`;
+      }
+      if (config2.position.height) {
+        style.height = `${config2.position.height}px`;
+      }
+      if (config2.background) {
+        style.backgroundImage = `url(${getButtonImageUrl(button)})`;
+      }
+      if (buttonsState.value[button].state === false) {
+        style.opacity = 0.3;
+        style.pointerEvents = "none";
+      } else if (buttonsState.value[button].state === "hidden") {
+        style.display = "none";
+      }
+      return {
+        ...style,
+        position: "absolute",
+        left: `${config2.position.left}px`,
+        top: `${config2.position.top}px`
+      };
+    }
+    function clickOnButton(button) {
+      const config2 = getButtonConfig(button);
+      const state = buttonsState.value[button];
+      if (state.state === true) {
+        const scriptToRun = config2.action;
+        const newStack = {
+          branchData: vmStore.script[scriptToRun],
+          currentIndex: 0,
+          label: scriptToRun
+        };
+        vmStore.setStack(newStack);
+        vmStore.runLine();
+      }
+    }
+    const backgroundStyle = computed(() => {
+      const width = `${layoutWidth.value}px`;
+      let height = `${layoutHeight.value}px`;
+      if (layoutMode.value === "vertical") {
+        height = `${100 - getConfig().layout.mobileDialogHeightPercentage}%`;
+      }
+      return {
+        height,
+        width,
+        backgroundImage: `url(${getImageUrl(screenConfig.value.background)})`
+      };
+    });
+    return (_ctx, _cache) => {
+      return unref(inGame) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "viewport",
+        id: "narrat-viewport",
+        style: normalizeStyle(unref(backgroundStyle))
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(screenButtons), (button, index) => {
+          return openBlock(), createElementBlock("button", {
+            key: index,
+            onClick: ($event) => clickOnButton(button),
+            style: normalizeStyle(getButtonStyle(button))
+          }, toDisplayString(unref(getButtonConfig)(button).text), 13, _hoisted_1$1);
+        }), 128))
+      ], 4)) : createCommentVNode("", true);
+    };
+  }
+});
 var app_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => "#app{background-color:var(--bg-color);width:100%;height:100%;position:absolute;display:flex;flex-direction:row;align-items:center;justify-content:center;color:var(--text-color);box-sizing:border-box;overflow:hidden;transform-origin:center center}.game{background-color:var(--bg-color);position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:100%;box-sizing:border-box;overflow:hidden}.interact-button{height:50px;border:1px solid black;font-weight:700;font-size:20px;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}.background{margin:0}#background-canvas{height:100%}.menu-toggle{position:fixed;bottom:0px;right:15%;z-index:2}#game-title-container{margin-bottom:50px}#game-title-text{text-align:center;font-size:50px}.menu-button{font-size:25px}#game-header{position:relative;top:100px}\n")();
 const _sfc_main = defineComponent({
   setup() {
@@ -40231,9 +40362,10 @@ const _sfc_main = defineComponent({
     MainMenu,
     Skills,
     InventoryUi,
-    GameDialog: _sfc_main$3,
+    GameDialog: _sfc_main$4,
     QuestsUi,
-    MenuButtons
+    MenuButtons,
+    Screens: _sfc_main$1
   },
   data() {
     return {
@@ -40395,17 +40527,16 @@ const _sfc_main = defineComponent({
     }
   }
 });
-const _hoisted_1 = ["width", "height"];
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 2,
   id: "game-menu",
   style: { "height": "100%", "padding": "20px" }
 };
-const _hoisted_3 = { id: "game-header" };
-const _hoisted_4 = { id: "game-title-container" };
-const _hoisted_5 = { id: "game-title-text" };
-const _hoisted_6 = { class: "flex flex-col" };
-const _hoisted_7 = { key: 3 };
+const _hoisted_2 = { id: "game-header" };
+const _hoisted_3 = { id: "game-title-container" };
+const _hoisted_4 = { id: "game-title-text" };
+const _hoisted_5 = { class: "flex flex-col" };
+const _hoisted_6 = { key: 3 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Hud = resolveComponent("Hud");
   const _component_MenuButtons = resolveComponent("MenuButtons");
@@ -40413,6 +40544,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_InventoryUi = resolveComponent("InventoryUi");
   const _component_QuestsUi = resolveComponent("QuestsUi");
   const _component_MainMenu = resolveComponent("MainMenu");
+  const _component_Screens = resolveComponent("Screens");
   const _component_GameDialog = resolveComponent("GameDialog");
   const _component_LoadingBar = resolveComponent("LoadingBar");
   const _component_DebugMenu = resolveComponent("DebugMenu");
@@ -40444,28 +40576,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 3,
         onClose: _ctx.closeModal
       }, null, 8, ["onClose"])) : createCommentVNode("", true),
-      _ctx.inGame ? (openBlock(), createElementBlock("div", {
-        key: 4,
-        class: "background",
-        style: normalizeStyle(_ctx.backgroundStyle)
-      }, [
-        createElementVNode("canvas", {
-          width: _ctx.layoutWidth,
-          height: _ctx.layoutHeight,
-          id: "background-canvas",
-          class: "narrat-canvas"
-        }, null, 8, _hoisted_1)
-      ], 4)) : createCommentVNode("", true),
+      createVNode(_component_Screens),
       createVNode(_component_GameDialog, {
         inGame: _ctx.inGame,
         layoutMode: _ctx.layoutMode
       }, null, 8, ["inGame", "layoutMode"])
-    ], 4)) : _ctx.gameLoaded ? (openBlock(), createElementBlock("div", _hoisted_2, [
-      createElementVNode("div", _hoisted_3, [
-        createElementVNode("div", _hoisted_4, [
-          createElementVNode("h1", _hoisted_5, toDisplayString(_ctx.gameTitle), 1)
+    ], 4)) : _ctx.gameLoaded ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      createElementVNode("div", _hoisted_2, [
+        createElementVNode("div", _hoisted_3, [
+          createElementVNode("h1", _hoisted_4, toDisplayString(_ctx.gameTitle), 1)
         ]),
-        createElementVNode("div", _hoisted_6, [
+        createElementVNode("div", _hoisted_5, [
           createElementVNode("button", {
             class: "button menu-button main-menu-button larg start-button override",
             onClick: _cache[0] || (_cache[0] = (...args) => _ctx.startGame && _ctx.startGame(...args))
@@ -40477,7 +40598,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           }, " Continue Game ")) : createCommentVNode("", true)
         ])
       ])
-    ])) : (openBlock(), createElementBlock("div", _hoisted_7, [
+    ])) : (openBlock(), createElementBlock("div", _hoisted_6, [
       createVNode(_component_LoadingBar, {
         percentage: _ctx.loadingPercentage,
         step: _ctx.loadingStep
@@ -40488,93 +40609,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4);
 }
 var GameApp = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-let canvas;
-let ctx;
-const mousePos = {
-  x: 0,
-  y: 0
-};
-function startGameLoop() {
-  document.addEventListener("mousemove", (e20) => {
-    mousePos.x = e20.clientX;
-    mousePos.y = e20.clientY;
-  });
-  document.addEventListener("click", debounce(mouseclick, 100, { maxWait: 200 }));
-  gameLoop();
-}
-function gameLoop() {
-  const screens = useScreens();
-  const mainStore = useMain();
-  if (mainStore.playing) {
-    if (!canvas) {
-      canvas = document.querySelector("#background-canvas");
-      if (canvas && !ctx) {
-        ctx = canvas.getContext("2d");
-      }
-    } else if (canvas && ctx) {
-      ctx.fillStyle = "white";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      const currentScreen = screens.currentScreen;
-      const screen = getConfig().screens[currentScreen];
-      const bg2 = screen.background;
-      ctx.drawImage(images[bg2], 0, 0);
-      let foundCollision = false;
-      const scaledMousePos = screenToCanvas(mousePos.x, mousePos.y, canvas);
-      if (screen.buttons) {
-        for (const buttonName of screen.buttons) {
-          if (screens.buttons[buttonName].enabled) {
-            const button = getConfig().buttons[buttonName];
-            const image = images[button.background];
-            ctx.drawImage(image, button.position.left, button.position.top);
-            if (aabb(scaledMousePos.x, scaledMousePos.y, 1, 1, button.position.left, button.position.top, button.position.width, button.position.height)) {
-              foundCollision = true;
-            }
-          }
-        }
-      }
-      if (foundCollision) {
-        document.body.style.cursor = "pointer";
-      } else {
-        document.body.style.cursor = "default";
-      }
-      ctx.fillStyle = "black";
-      ctx.textAlign = "left";
-    }
-  } else {
-    canvas = void 0;
-    ctx = void 0;
-  }
-  window.requestAnimationFrame(gameLoop);
-}
-function mouseclick(e20) {
-  const screens = useScreens();
-  const vmStore = useVM();
-  if (!canvas) {
-    return;
-  }
-  mousePos.x = e20.clientX;
-  mousePos.y = e20.clientY;
-  const scaledMousePos = screenToCanvas(mousePos.x, mousePos.y, canvas);
-  const currentScreen = screens.currentScreen;
-  const screen = getConfig().screens[currentScreen];
-  if (screen.buttons) {
-    for (const buttonName of screen.buttons) {
-      if (screens.buttons[buttonName].enabled) {
-        const button = getConfig().buttons[buttonName];
-        if (aabb(scaledMousePos.x, scaledMousePos.y, 1, 1, button.position.left, button.position.top, button.position.width, button.position.height)) {
-          const scriptToRun = button.action;
-          const newStack = {
-            branchData: vmStore.script[scriptToRun],
-            currentIndex: 0,
-            label: scriptToRun
-          };
-          vmStore.setStack(newStack);
-          vmStore.runLine();
-        }
-      }
-    }
-  }
-}
 function commandRuntimeError(cmd, errorText) {
   console.error(`Runtime error =========================`);
   console.error("Args: ", cmd.args);
@@ -40642,9 +40676,9 @@ function generateParser(keyword, argTypes) {
       expectedArgCount.push(argTypes.length - 1);
     }
   }
-  return (ctx2, parsed) => {
+  return (ctx, parsed) => {
     const returnValue = {
-      newLine: ctx2.currentLine + 1
+      newLine: ctx.currentLine + 1
     };
     const args = parsed.command.args;
     if (argTypes !== "any") {
@@ -40652,7 +40686,7 @@ function generateParser(keyword, argTypes) {
         console.log("Error details");
         console.log(parsed.command);
         console.log(args);
-        ctx2.parserContext.error(ctx2.line.line, `Command ${keyword}: Expected ${expectedArgCount.join(" or ")} arguments but got ${args.length}`);
+        ctx.parserContext.error(ctx.line.line, `Command ${keyword}: Expected ${expectedArgCount.join(" or ")} arguments but got ${args.length}`);
         return returnValue;
       }
     }
@@ -40663,13 +40697,13 @@ function generateParser(keyword, argTypes) {
         if (!isExpression(arg)) {
           const isValid = argType.type === "any" || typeof arg === argType.type;
           if (!isValid) {
-            ctx2.parserContext.error(ctx2.line.line, `Command ${keyword}: Argument #${index + 1} (${argType.name}) should be a ${argType.type}, but got type ${typeof arg}: ${JSON.stringify(arg)}`);
+            ctx.parserContext.error(ctx.line.line, `Command ${keyword}: Argument #${index + 1} (${argType.name}) should be a ${argType.type}, but got type ${typeof arg}: ${JSON.stringify(arg)}`);
           }
         }
       });
     }
     return {
-      newLine: ctx2.currentLine + 1
+      newLine: ctx.currentLine + 1
     };
   };
 }
@@ -40889,8 +40923,8 @@ const talkCommand = CommandPlugin.FromOptions({
 });
 const textParser = () => {
   const parser = generateParser("text", []);
-  return (ctx2, parsed) => {
-    const result = parser(ctx2, parsed);
+  return (ctx, parsed) => {
+    const result = parser(ctx, parsed);
     parsed.command.staticOptions = {
       text: parsed.code
     };
@@ -41011,8 +41045,12 @@ const objectiveStartedPlugin = new CommandPlugin("objective_started?", [
   const quests = useQuests();
   return quests.isObjectiveStarted(questId, objectiveId);
 });
-const waitCommand = new CommandPlugin("wait", [{ name: "duration", type: "number" }], async (cmd) => {
-  await timeout(cmd.options.duration);
+const waitCommand = CommandPlugin.FromOptions({
+  keyword: "wait",
+  argTypes: [{ name: "duration", type: "number" }],
+  runner: async (cmd) => {
+    await timeout(cmd.options.duration);
+  }
 });
 const notifyPlugin = new CommandPlugin("notify", [{ name: "text", type: "string" }], async (cmd) => {
   const { text } = cmd.options;
@@ -41033,22 +41071,22 @@ const ifCommand = new CommandPlugin("if", [{ name: "condition", type: "boolean"
     };
     return vmStore.addAndRunFrame(newStack);
   }
-}, (ctx2, parsed) => {
-  let newLine = ctx2.currentLine;
+}, (ctx, parsed) => {
+  let newLine = ctx.currentLine;
   const parser = generateParser("if", [
     { name: "condition", type: "string" }
   ]);
-  parser(ctx2, parsed);
-  const { lines, currentLine, line } = ctx2;
+  parser(ctx, parsed);
+  const { lines, currentLine, line } = ctx;
   const command = parsed.command;
   let failure;
   const nextLine = getLine(lines, currentLine + 1);
   if (nextLine && nextLine.code === "else:") {
-    failure = ctx2.processCommandsFunction(ctx2.parserContext, nextLine.branch, line);
+    failure = ctx.processCommandsFunction(ctx.parserContext, nextLine.branch, line);
     newLine++;
   }
   command.staticOptions = {
-    success: ctx2.processCommandsFunction(ctx2.parserContext, line.branch, line),
+    success: ctx.processCommandsFunction(ctx.parserContext, line.branch, line),
     failure
   };
   newLine++;
@@ -41204,54 +41242,54 @@ const runChoice = async (cmd) => {
   const res = await runCommand(prompt, dialogChoices);
   await onChoicePlayerAnswered(cmd, res);
 };
-function parseChoiceOption(ctx2, choice, index) {
+function parseChoiceOption(ctx, choice, index) {
   choice.expression;
   if (!choice.branch) {
-    ctx2.parserContext.error(choice.line, `Choice option doesn't have any branch to go to (${choice.code} - ${choice.line})`);
+    ctx.parserContext.error(choice.line, `Choice option doesn't have any branch to go to (${choice.code} - ${choice.line})`);
   }
   let skillBranches;
   let mainBranch;
   const branch = choice.branch;
   if (choice.expression[1] === "roll") {
     if (!branch[0].branch || !branch[1].branch) {
-      ctx2.parserContext.error(choice.line, `Choice option with a skill roll needs success and failure branches (${choice.code} - ${choice.line})`);
+      ctx.parserContext.error(choice.line, `Choice option with a skill roll needs success and failure branches (${choice.code} - ${choice.line})`);
     }
     skillBranches = {
-      success: ctx2.processCommandsFunction(ctx2.parserContext, branch[0].branch, choice),
-      failure: ctx2.processCommandsFunction(ctx2.parserContext, branch[1].branch, choice)
+      success: ctx.processCommandsFunction(ctx.parserContext, branch[0].branch, choice),
+      failure: ctx.processCommandsFunction(ctx.parserContext, branch[1].branch, choice)
     };
   } else {
-    mainBranch = ctx2.processCommandsFunction(ctx2.parserContext, branch, choice);
+    mainBranch = ctx.processCommandsFunction(ctx.parserContext, branch, choice);
   }
   const choiceInfo = {
-    prompt: ctx2.processCommandsFunction(ctx2.parserContext, [choice], choice)[0],
+    prompt: ctx.processCommandsFunction(ctx.parserContext, [choice], choice)[0],
     branch: mainBranch,
     skillBranches
   };
   return choiceInfo;
 }
-const choiceParser = (ctx2, parsed) => {
-  let newLine = ctx2.currentLine;
+const choiceParser = (ctx, parsed) => {
+  let newLine = ctx.currentLine;
   generateParser("choice", []);
-  const { line } = ctx2;
+  const { line } = ctx;
   const command = parsed.command;
   if (!line.branch || line.branch.length < 2) {
-    ctx2.parserContext.error(line.line, `Choice menu needs to have at least one option`);
+    ctx.parserContext.error(line.line, `Choice menu needs to have at least one option`);
   }
   const prompt = line.branch[0];
   if (!prompt) {
-    ctx2.parserContext.error(ctx2.line.line, `Choice prompt is missing `);
+    ctx.parserContext.error(ctx.line.line, `Choice prompt is missing `);
   }
   const choices = line.branch.slice(1);
   const prompts = choices.map((choice, index) => {
     if (!choice.branch) {
-      ctx2.parserContext.error(choice.line, `Choice option doesn't have any branch to go to (${choice.code})`);
+      ctx.parserContext.error(choice.line, `Choice option doesn't have any branch to go to (${choice.code})`);
     }
-    choice = getChoiceOptionLineFromChoicePrompt(ctx2.parserContext, choice);
-    return parseChoiceOption(ctx2, choice);
+    choice = getChoiceOptionLineFromChoicePrompt(ctx.parserContext, choice);
+    return parseChoiceOption(ctx, choice);
   });
   command.staticOptions = {
-    prompt: ctx2.processCommandsFunction(ctx2.parserContext, [prompt], line)[0],
+    prompt: ctx.processCommandsFunction(ctx.parserContext, [prompt], line)[0],
     choices: prompts
   };
   newLine++;
@@ -41307,7 +41345,7 @@ const onChoicePlayerAnswered = async (command, playerChoice) => {
     await vmStore.addAndRunFrame(newStack);
   }
 };
-function getChoiceOptionLineFromChoicePrompt(ctx2, choice) {
+function getChoiceOptionLineFromChoicePrompt(ctx, choice) {
   const generatedCode = `choicePrompt ${choice.code}`;
   const newLine = {
     code: generatedCode,
@@ -41494,7 +41532,6 @@ async function startApp(config2, options) {
     };
     window.narrat = narrat;
   }
-  startGameLoop();
 }
 class NarratPlugin {
   onPageLoaded() {