narrat 1.2.1 → 1.3.2

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-// Version: 1.2.1 - June 25, 2022 14:20:12
+// Version: 1.3.2 - June 26, 2022 18:33:37
 import 'es6-promise/auto';
 import { ref, reactive, readonly, defineComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, Fragment, renderList, normalizeClass, createBlock, Transition, withCtx, renderSlot, createTextVNode, computed, resolveComponent, withDirectives, vModelText, toDisplayString, TransitionGroup, createVNode, createApp } from 'vue';
 import { defineStore, mapState, createPinia } from 'pinia';
@@ -30,7 +30,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! @import */\n\n/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\n:root {\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n     tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n  margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n  font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect { /* 1 */\n  text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'],\n[type='reset'] {\n  -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n  padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nbutton {\n  background-color: transparent;\n  background-image: none;\n}\n\n/**\n * Work around a Firefox/IE bug where the transparent `button` background\n * results in a loss of the default `button` focus styles.\n */\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n *    sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n *    to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n  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\"; /* 1 */\n  line-height: 1.5; /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n  font-family: inherit;\n  line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n *    We used to set this in the html element and inherit from\n *    the parent element for everything else. This caused issues\n *    in shadow-dom-enhanced elements like <details> where the content\n *    is wrapped by a div with box-sizing set to `content-box`.\n *\n *    https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n *    By default, the way the browser specifies that an element should have no\n *    border is by setting it's border-style to `none` in the user-agent\n *    stylesheet.\n *\n *    In order to easily add borders to elements by just setting the `border-width`\n *    property, we change the default border-style for all elements to `solid`, and\n *    use border-width to hide them instead. This way our `border` utilities only\n *    need to set the `border-width` property instead of the entire `border`\n *    shorthand, making our border utilities much more straightforward to compose.\n *\n *    https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n  border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n  border-style: solid;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: #9ca3af;\n}\n\nbutton {\n  cursor: pointer;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their instrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.container {\n  width: 100%;\n}\n\n@media (min-width: 640px) {\n  .container {\n    max-width: 640px;\n  }\n}\n\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n\n.bg-gray-800 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));\n}\n\n.border {\n  border-width: 1px;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.grid {\n  display: grid;\n}\n\n.hidden {\n  display: none;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-grow {\n  flex-grow: 1;\n}\n\n.flex-shrink {\n  flex-shrink: 1;\n}\n\n.list-disc {\n  list-style-type: disc;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.resize {\n  resize: both;\n}\n\n* {\n  --tw-shadow: 0 0 #0000;\n}\n\n* {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n\n.table-auto {\n  table-layout: auto;\n}\n\n.line-through {\n  text-decoration: line-through;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.gap-4 {\n  gap: 1rem;\n}\n\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transition {\n  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n@-webkit-keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@-webkit-keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@-webkit-keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@-webkit-keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\n:root {\n  --bg-color: #131720;\n  --text-color: #d9e1f2;\n  --primary: hsl(255, 30%, 55%);\n  --focus: hsl(210, 90%, 50%);\n  --secondary: #42b983;\n  --border-color: hsla(0, 0%, 100%, 0.2);\n  --light-1: hsl(210, 30%, 40%);\n  --light-2: hsl(255, 30%, 50%);\n  --light-background: linear-gradient(to right, var(--light-1), var(--light-2));\n  --shadow-1: hsla(236, 50%, 50%, 0.3);\n  --shadow-2: hsla(236, 50%, 50%, 0.4);\n  --hud-background: rgba(0, 0, 0, 0.4);\n  --hud-text-color: var(--text-color);\n  --notifications-bg: darkslateblue;\n  --skills-text-background: rgba(0, 0, 0, 0.5);\n  --skills-text-color: var(--text-color);\n  --skills-level-background: rgba(0, 0, 0, 0.5);\n  --skills-level-color: orange;\n  --skills-xp-bar-height: 40px;\n  --skill-check-name-color: orange;\n  --skill-check-difficulty: orange;\n  --skill-check-success: green;\n  --skill-check-failed: red;\n  --skill-check-color: orange;\n  --dialog-choice-color: orange;\n  --dialog-choice-hover-color: var(--text-color);\n  --inventory-text-background: rgba(0, 0, 0, 0.5);\n  --inventory-text-color: var(--text-color);\n  --inventory-amount-background: rgba(0, 0, 0, 0.5);\n  --inventory-amount-color: orange;\n  --quest-title-color: yellow;\n  --completed-quest-title-color: grey;\n  --objective-in-progress-color: white;\n  --objective-completed-color: grey;\n}\n\n.list-item {\n  display: inline-block;\n  margin-right: 10px;\n}\n\n.list-enter-active,\r\n.list-leave-active {\n  transition: all 0.3s ease;\n}\n\n/* .list-move {\r\n  transition: transform 0.3s ease;\r\n} */\n\n.list-enter-from,\r\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(300px);\n}\n\n.notification-item {\n  display: inline-block;\n  margin-right: 10px;\n}\n\n.notification-enter-active,\r\n.notification-leave-active {\n  transition: all 0.3s ease;\n}\n\n/* .notification-move {\r\n  transition: transform 0.3s ease;\r\n} */\n\n.notification-enter-from,\r\n.notification-leave-to {\n  opacity: 0;\n  transform: translateY(-300px);\n}\n\n.fade-enter-active,\r\n.fade-leave-active {\n  transition: opacity 0.3s ease;\n}\n\n.fade-enter-from,\r\n.fade-leave-to {\n  opacity: 0;\n}\n\n.fade-in-enter-active {\n  transition: opacity 0.1s ease;\n}\n\n.fade-in-enter-from {\n  opacity: 0;\n}\n\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: Arial, sans-serif;\n  background-color: black;\n}\n\n.select {\n  background: var(--light-background);\n  padding: 10px;\n}\n\n.option {\n  background-color: var(--light-2);\n  padding: 5px;\n  color: var(--text-color);\n}\n\n.button {\n  background: var(--light-background);\n  color: var(--text-color);\n  box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem var(--shadow-1);\n  border-radius: 100px;\n  padding: 10px;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 10px;\n  transition: 0.2s;\n}\n\n.button:focus,\r\n.button:hover {\n  transform: translateY(-0.2rem);\n  box-shadow: 0 0 2.4rem 0.2rem var(--shadow-2);\n}\n\n.input {\n  background: var(--light-background);\n  color: var(--text-color);\n  box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem var(--shadow-1);\n  border-radius: 100px;\n  padding: 10px;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 10px;\n  transition: 0.2s;\n}\n\n.input:focus,\r\n.input:hover {\n  transform: translateY(-0.2rem);\n  box-shadow: 0 0 2.4rem 0.2rem var(--shadow-2);\n}\n\na {\n  color: pink;\n  text-decoration: underline;\n}\n\nth,\r\ntd {\n  padding: 4px;\n  border: 1px solid var(--text-color);\n  text-align: center;\n}\n\n#game-holder {\n  width: 100vw;\n  height: 100vh;\n  padding: 0;\n  margin: 0;\n  top: 0;\n  left: 0;\n  background-color: black;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: -webkit-fill-available;\n}\n\n.title {\n  font-size: 30px;\n  font-weight: 700;\n  text-align: center;\n}\n\n.container {\n  padding: 20px;\n}\n\nh1,\r\nh2,\r\nh3,\r\nh4 {\n  font-weight: 700;\n}\n\nh1 {\n  font-size: 30px;\n}\n\nh2 {\n  font-size: 26px;\n}\n\nh3 {\n  font-size: 24px;\n}\n\nhr.solid {\n  border: 1px solid var(--text-color);\n  margin-top: 30px;\n  margin-bottom: 30px;\n}\n\n.card-1 {\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.card-1:hover {\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n}\n\n.card-2 {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n.card-3 {\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n}\n\n.card-4 {\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n}\n\n.card-5 {\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);\n}\n\n.dialog-choice {\n  transition: 0.2s;\n}\n\n.dialog-choice:hover {\n  transform: scale(1.05, 1.05);\n  transform-origin: center;\n}\n\n/* Somewhat arcane CSS to force the hover color to override the child style.\r\nOtherwise hovering choices doesn't change the color of skill check prompts. */\n\n.dialog-choice:not(:hover) > .skill-check-name,\r\n.passive-skill-check > .skill-check-name {\n  color: var(--skill-check-name-color);\n}\n\n.dialog-choice:not(:hover) > .skill-check-difficulty,\r\n.passive-skill-check > .skill-check-difficulty {\n  color: var(--skill-check-difficulty);\n}\n\n.skill-check-difficulty {\n  font-weight: 700;\n}\n\n.dialog-choice:not(:hover) > .skill-check-success,\r\n.passive-skill-check > .skill-check-success {\n  color: var(--skill-check-success);\n}\n\n.dialog-choice:not(:hover) > .skill-check-failed,\r\n.passive-skill-check > .skill-check-failed {\n  color: var(--skill-check-failed);\n}\n\n.dialog-choice:not(:hover) > .skill-check,\r\n.passive-skill-check.skill-check {\n  color: var(--skill-check-color);\n}\n\n.narrat-canvas {\n  position: absolute;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n\n/* Looks ugly */\n\n/* @keyframes strike-anim {\r\n  0% {\r\n    width: 0;\r\n  }\r\n  100% {\r\n    width: 100%;\r\n  }\r\n}\r\n.strike-anim {\r\n  position: relative;\r\n}\r\n.strike-anim::after {\r\n  content: ' ';\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 1px;\r\n  background: var(--text-color);\r\n  animation-name: strike-anim;\r\n  animation-duration: 0.5s;\r\n  animation-timing-function: linear;\r\n  animation-iteration-count: 1;\r\n  animation-fill-mode: forwards;\r\n} */\n\n#touchTrigger {\n  pointer-events: none;\n}\n\n@media (min-width: 640px) {\n}\n\n@media (min-width: 768px) {\n}\n\n@media (min-width: 1024px) {\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\r\n";
+var css_248z = "/*! @import */\n\n/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\n:root {\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n     tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n  margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n  font-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect { /* 1 */\n  text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'],\n[type='reset'] {\n  -webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n  padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nbutton {\n  background-color: transparent;\n  background-image: none;\n}\n\n/**\n * Work around a Firefox/IE bug where the transparent `button` background\n * results in a loss of the default `button` focus styles.\n */\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n *    sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n *    to override it to ensure consistency even when using the default theme.\n */\n\nhtml {\n  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\"; /* 1 */\n  line-height: 1.5; /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\nbody {\n  font-family: inherit;\n  line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n *    We used to set this in the html element and inherit from\n *    the parent element for everything else. This caused issues\n *    in shadow-dom-enhanced elements like <details> where the content\n *    is wrapped by a div with box-sizing set to `content-box`.\n *\n *    https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n *    By default, the way the browser specifies that an element should have no\n *    border is by setting it's border-style to `none` in the user-agent\n *    stylesheet.\n *\n *    In order to easily add borders to elements by just setting the `border-width`\n *    property, we change the default border-style for all elements to `solid`, and\n *    use border-width to hide them instead. This way our `border` utilities only\n *    need to set the `border-width` property instead of the entire `border`\n *    shorthand, making our border utilities much more straightforward to compose.\n *\n *    https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\nhr {\n  border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\nimg {\n  border-style: solid;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  color: #9ca3af;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  color: #9ca3af;\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  color: #9ca3af;\n}\n\nbutton {\n  cursor: pointer;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * Make replaced elements `display: block` by default as that's\n * the behavior you want almost all of the time. Inspired by\n * CSS Remedy, with `svg` added as well.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  vertical-align: middle;\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their instrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n.container {\n  width: 100%;\n}\n\n@media (min-width: 640px) {\n  .container {\n    max-width: 640px;\n  }\n}\n\n@media (min-width: 768px) {\n  .container {\n    max-width: 768px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .container {\n    max-width: 1024px;\n  }\n}\n\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1280px;\n  }\n}\n\n@media (min-width: 1536px) {\n  .container {\n    max-width: 1536px;\n  }\n}\n\n.bg-gray-800 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));\n}\n\n.border {\n  border-width: 1px;\n}\n\n.flex {\n  display: flex;\n}\n\n.table {\n  display: table;\n}\n\n.grid {\n  display: grid;\n}\n\n.hidden {\n  display: none;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-grow {\n  flex-grow: 1;\n}\n\n.flex-shrink {\n  flex-shrink: 1;\n}\n\n.list-disc {\n  list-style-type: disc;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.resize {\n  resize: both;\n}\n\n* {\n  --tw-shadow: 0 0 #0000;\n}\n\n* {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n}\n\n.table-auto {\n  table-layout: auto;\n}\n\n.line-through {\n  text-decoration: line-through;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.gap-4 {\n  gap: 1rem;\n}\n\n.grid-cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.transform {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.transition {\n  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n@-webkit-keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@-webkit-keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n\n@-webkit-keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: .5;\n  }\n}\n\n@-webkit-keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1);\n  }\n\n  50% {\n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1);\n  }\n}\n\n:root {\n  --bg-color: #131720;\n  --text-color: #d9e1f2;\n  --primary: hsl(255, 30%, 55%);\n  --focus: hsl(210, 90%, 50%);\n  --secondary: #42b983;\n  --border-color: hsla(0, 0%, 100%, 0.2);\n  --light-1: hsl(210, 30%, 40%);\n  --light-2: hsl(255, 30%, 50%);\n  --light-background: linear-gradient(to right, var(--light-1), var(--light-2));\n  --shadow-1: hsla(236, 50%, 50%, 0.3);\n  --shadow-2: hsla(236, 50%, 50%, 0.4);\n  --hud-background: rgba(0, 0, 0, 0.4);\n  --hud-text-color: var(--text-color);\n  --notifications-bg: darkslateblue;\n  --skills-text-background: rgba(0, 0, 0, 0.5);\n  --skills-text-color: var(--text-color);\n  --skills-level-background: rgba(0, 0, 0, 0.5);\n  --skills-level-color: orange;\n  --skills-xp-bar-height: 40px;\n  --skill-check-name-color: orange;\n  --skill-check-difficulty: orange;\n  --skill-check-success: green;\n  --skill-check-failed: red;\n  --skill-check-color: orange;\n  --dialog-choice-color: orange;\n  --dialog-choice-hover-color: var(--text-color);\n  --inventory-text-background: rgba(0, 0, 0, 0.5);\n  --inventory-text-color: var(--text-color);\n  --inventory-amount-background: rgba(0, 0, 0, 0.5);\n  --inventory-amount-color: orange;\n  --quest-title-color: yellow;\n  --completed-quest-title-color: grey;\n  --objective-in-progress-color: white;\n  --objective-completed-color: grey;\n}\n\n.list-item {\n  display: inline-block;\n  margin-right: 10px;\n}\n\n.list-enter-active,\n.list-leave-active {\n  transition: all 0.3s ease;\n}\n\n/* .list-move {\n  transition: transform 0.3s ease;\n} */\n\n.list-enter-from,\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(300px);\n}\n\n.notification-item {\n  display: inline-block;\n  margin-right: 10px;\n}\n\n.notification-enter-active,\n.notification-leave-active {\n  transition: all 0.3s ease;\n}\n\n/* .notification-move {\n  transition: transform 0.3s ease;\n} */\n\n.notification-enter-from,\n.notification-leave-to {\n  opacity: 0;\n  transform: translateY(-300px);\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.3s ease;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n  opacity: 0;\n}\n\n.fade-in-enter-active {\n  transition: opacity 0.1s ease;\n}\n\n.fade-in-enter-from {\n  opacity: 0;\n}\n\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: Arial, sans-serif;\n  background-color: black;\n}\n\n.select {\n  background: var(--light-background);\n  padding: 10px;\n}\n\n.option {\n  background-color: var(--light-2);\n  padding: 5px;\n  color: var(--text-color);\n}\n\n.button {\n  background: var(--light-background);\n  color: var(--text-color);\n  box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem var(--shadow-1);\n  border-radius: 100px;\n  padding: 10px;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 10px;\n  transition: 0.2s;\n}\n\n.button:focus,\n.button:hover {\n  transform: translateY(-0.2rem);\n  box-shadow: 0 0 2.4rem 0.2rem var(--shadow-2);\n}\n\n.disabled {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: none;\n}\n\n.button.disabled {\n  box-shadow: unset;\n  color: grey;\n  background: var(--border-color);\n}\n\n.input {\n  background: var(--light-background);\n  color: var(--text-color);\n  box-shadow: 0.4rem 0.4rem 2.4rem 0.2rem var(--shadow-1);\n  border-radius: 100px;\n  padding: 10px;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 10px;\n  transition: 0.2s;\n}\n\n.input:focus,\n.input:hover {\n  transform: translateY(-0.2rem);\n  box-shadow: 0 0 2.4rem 0.2rem var(--shadow-2);\n}\n\na {\n  color: pink;\n  text-decoration: underline;\n}\n\nth,\ntd {\n  padding: 4px;\n  border: 1px solid var(--text-color);\n  text-align: center;\n}\n\n#game-holder {\n  width: 100vw;\n  height: 100vh;\n  padding: 0;\n  margin: 0;\n  top: 0;\n  left: 0;\n  background-color: black;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: -webkit-fill-available;\n}\n\n.title {\n  font-size: 30px;\n  font-weight: 700;\n  text-align: center;\n}\n\n.container {\n  padding: 20px;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  font-weight: 700;\n}\n\nh1 {\n  font-size: 30px;\n}\n\nh2 {\n  font-size: 26px;\n}\n\nh3 {\n  font-size: 24px;\n}\n\nhr.solid {\n  border: 1px solid var(--text-color);\n  margin-top: 30px;\n  margin-bottom: 30px;\n}\n\n.card-1 {\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.card-1:hover {\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n}\n\n.card-2 {\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n.card-3 {\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n}\n\n.card-4 {\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n}\n\n.card-5 {\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);\n}\n\n.dialog-choice {\n  transition: 0.2s;\n}\n\n.dialog-choice:hover {\n  transform: scale(1.05, 1.05);\n  transform-origin: center;\n}\n\n/* Somewhat arcane CSS to force the hover color to override the child style.\nOtherwise hovering choices doesn't change the color of skill check prompts. */\n\n.dialog-choice:not(:hover) > .skill-check-name,\n.passive-skill-check > .skill-check-name {\n  color: var(--skill-check-name-color);\n}\n\n.dialog-choice:not(:hover) > .skill-check-difficulty,\n.passive-skill-check > .skill-check-difficulty {\n  color: var(--skill-check-difficulty);\n}\n\n.skill-check-difficulty {\n  font-weight: 700;\n}\n\n.dialog-choice:not(:hover) > .skill-check-success,\n.passive-skill-check > .skill-check-success {\n  color: var(--skill-check-success);\n}\n\n.dialog-choice:not(:hover) > .skill-check-failed,\n.passive-skill-check > .skill-check-failed {\n  color: var(--skill-check-failed);\n}\n\n.dialog-choice:not(:hover) > .skill-check,\n.passive-skill-check.skill-check {\n  color: var(--skill-check-color);\n}\n\n.narrat-canvas {\n  position: absolute;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n\n/* Looks ugly */\n\n/* @keyframes strike-anim {\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n}\n.strike-anim {\n  position: relative;\n}\n.strike-anim::after {\n  content: ' ';\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  background: var(--text-color);\n  animation-name: strike-anim;\n  animation-duration: 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n} */\n\n#touchTrigger {\n  pointer-events: none;\n}\n\n@media (min-width: 640px) {\n}\n\n@media (min-width: 768px) {\n}\n\n@media (min-width: 1024px) {\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\n";
 styleInject(css_248z);
 
 const f=ref([]),v=ref(null),m=ref(null),g=ref(null),h=reactive({current:""}),y=[],b=ref(!1),k=readonly(f),w=readonly(v),M=readonly(m),q=readonly(g),x=readonly(h),$=(e=w.value)=>{h.current=e;const t=k.value.findIndex((t=>t.name===e)),n=k.value.map((e=>e.name));for(let a=0;a<n.length;a++){if(a>0&&a<n.length-1){const e=n[a]+"Minus",r=n[a]+"Plus";h[e]=t<=a,h[r]=t>=a;}h[n[a]]=n[a]===e;}},V=(e=M.value)=>{h.orientation=e,h.isLandscape="landscape"===e,h.isPortrait="portrait"===e;},O=(e=q.value||"light")=>{h.theme=e,h.isDark="dark"===e,h.isLight="light"===e;};function j(e,t){if("undefined"==typeof window||!window.matchMedia)return !1;if("undefined"!=typeof window&&!window.matchMedia)return console.error("Vue3 Mq: No MatchMedia support detected in this browser. Responsive breakpoints not available."),!1;{b.value=!0;const n=window.matchMedia(e),a=({matches:e})=>{e&&t();};y.push({mql:n,cb:a});n.addEventListener&&"function"==typeof n.addEventListener?n.addEventListener("change",a):n.addListener(a),a(n);}}var L=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",bootstrap5:{xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400},bootstrap4:{xs:0,sm:576,md:768,lg:992,xl:1200},bootstrap3:{xs:0,sm:768,md:992,lg:1200},vuetify:{xs:0,sm:600,md:960,lg:1264,xl:1904},tailwind:{xs:0,sm:640,md:768,lg:1024,xl:1280,xxl:1536},devices:{phone:0,tablet:768,laptop:1370,desktop:1906}});const T=e=>{if(!e||"object"!=typeof e)return !1;const t=[];for(let n in e){const a=parseFloat(e[n]);n&&"string"==typeof n?/^[^a-z]/i.test(n)||/[^a-zA-Z0-9_]/.test(n)?console.warn(`Vue3 Mq: "${n}" is an invalid breakpoint key. Breakpoint keys must start with a letter and contain only alphanumeric characters and underscores. Skipping.`):!a&&0!==a||isNaN(a)||a<0?console.warn(`Vue3 Mq: "${n}: ${e[n]}" is not a valid breakpoint. Breakpoints should be a number of zero or above. Skipping.`):t.push({name:n,min:a}):console.warn(`Vue3 Mq: Invalid or missing breakpoint key (${JSON.stringify(n)}). Skipping.`);}t.some((e=>0===e.min))||console.warn("Vue3 Mq: You have not declared a breakpoint with a minimum value of 0. There may be screen sizes to which Vue3Mq does not respond.");return new Set(t.map((e=>e.min))).size<t.length&&console.warn("Vue3 Mq: Your breakpoint configuration contains duplicate values. Behaviour may be unpredictable."),0!==t.length&&t.sort(((e,t)=>e.min-t.min))};function R({breakpoints:e,preset:t}){const n=(e=>{if("string"==typeof e&&L[e])return L[e];{const t=Object.keys(L);return console.error(`Vue3 Mq: "${e}" is not a valid preset. Available options are: ${t.join(", ")}`),!1}})(t),a=T(e);if(!1===n&&!a)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");var r;r=a||T(n),f.value=r,function(){for(;y.length>0;){const e=y.shift();if(e&&"object"==typeof e){const{mql:t,cb:n}=e;t.addEventListener&&"function"==typeof t.addEventListener?t.removeEventListener("change",n):t.removeListener(n);}}}(),(()=>{const e=Object.keys(h);for(let t of e)delete h[t];$(),V(),O();})();const o=k.value.reduce(((e,t,n,a)=>{const r=`(min-width: ${t.min}px)`,o=n<a.length-1?`(max-width: ${a[n+1].min-1}px)`:null,i=r+(o?" and "+o:"");return Object.assign(e,{[t.name]:i})}),{});for(const i in o){j(o[i],(()=>{$(i);}));}["portrait","landscape"].forEach((e=>{j(`(orientation: ${e})`,(()=>{V(e);}));})),["light","dark"].forEach((e=>{j(`(prefers-color-scheme: ${e})`,(()=>{O(e);}));}));}var N={install:(e,{preset:t="bootstrap5",breakpoints:n,defaultBreakpoint:a,defaultOrientation:r="landscape",defaultTheme:o}={})=>{try{const l=!1===["landscape","portrait"].includes(s=r)?(console.error(`Vue3 Mq: "${s}" is not a valid default orientation. Reverting to unset value.`),null):s,u=((e=null)=>!1===["dark","light"].includes(e)&&null!==e?(console.error(`Vue3 Mq: "${e}" is not a valid default theme. Reverting to unset value.`),null):e)(o);i=a,v.value=i,(e=>{m.value=e;})(l),(e=>{g.value=e;})(u),e.provide("mq",x),e.provide("updateBreakpoints",R),R({breakpoints:n,preset:t});}catch(l){console.error(l);}var i,s;}};
@@ -98,6 +98,11 @@ const defaultConfig = {
     },
     hudStats: {},
     items: {},
+    interactionTags: {
+        default: {
+            onlyInteractOutsideOfScripts: true,
+        },
+    },
     quests: {},
 };
 
@@ -3560,203 +3565,6 @@ function randomId() {
     return `${Date.now() - Math.floor(Math.random() * 99999999)}`;
 }
 
-// Create a pinia store named dialog with a state using the type DialogState, with actions addDialog and clearDialog
-const useDialogStore = defineStore('dialog', {
-    state: () => ({
-        dialog: [],
-    }),
-    actions: {
-        generateSaveData() {
-            return {
-                dialog: this.dialog,
-            };
-        },
-        loadSaveData(data) {
-            this.dialog = data.dialog;
-        },
-        addDialog(dialog) {
-            this.dialog.push({
-                ...dialog,
-                interactive: dialog.interactive ?? false,
-                id: randomId(),
-            });
-        },
-        clearDialog() {
-            this.dialog.splice(0, this.dialog.length);
-        },
-        reset() {
-            this.dialog = [];
-        },
-    },
-});
-
-var isMergeableObject = function isMergeableObject(value) {
-	return isNonNullObject(value)
-		&& !isSpecial(value)
-};
-
-function isNonNullObject(value) {
-	return !!value && typeof value === 'object'
-}
-
-function isSpecial(value) {
-	var stringValue = Object.prototype.toString.call(value);
-
-	return stringValue === '[object RegExp]'
-		|| stringValue === '[object Date]'
-		|| isReactElement(value)
-}
-
-// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
-var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
-var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
-
-function isReactElement(value) {
-	return value.$$typeof === REACT_ELEMENT_TYPE
-}
-
-function emptyTarget(val) {
-	return Array.isArray(val) ? [] : {}
-}
-
-function cloneUnlessOtherwiseSpecified(value, options) {
-	return (options.clone !== false && options.isMergeableObject(value))
-		? deepmerge(emptyTarget(value), value, options)
-		: value
-}
-
-function defaultArrayMerge(target, source, options) {
-	return target.concat(source).map(function(element) {
-		return cloneUnlessOtherwiseSpecified(element, options)
-	})
-}
-
-function getMergeFunction(key, options) {
-	if (!options.customMerge) {
-		return deepmerge
-	}
-	var customMerge = options.customMerge(key);
-	return typeof customMerge === 'function' ? customMerge : deepmerge
-}
-
-function getEnumerableOwnPropertySymbols(target) {
-	return Object.getOwnPropertySymbols
-		? Object.getOwnPropertySymbols(target).filter(function(symbol) {
-			return target.propertyIsEnumerable(symbol)
-		})
-		: []
-}
-
-function getKeys(target) {
-	return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
-}
-
-function propertyIsOnObject(object, property) {
-	try {
-		return property in object
-	} catch(_) {
-		return false
-	}
-}
-
-// Protects from prototype poisoning and unexpected merging up the prototype chain.
-function propertyIsUnsafe(target, key) {
-	return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
-		&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
-			&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
-}
-
-function mergeObject(target, source, options) {
-	var destination = {};
-	if (options.isMergeableObject(target)) {
-		getKeys(target).forEach(function(key) {
-			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
-		});
-	}
-	getKeys(source).forEach(function(key) {
-		if (propertyIsUnsafe(target, key)) {
-			return
-		}
-
-		if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
-			destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
-		} else {
-			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
-		}
-	});
-	return destination
-}
-
-function deepmerge(target, source, options) {
-	options = options || {};
-	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
-	options.isMergeableObject = options.isMergeableObject || isMergeableObject;
-	// cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
-	// implementations can use it. The caller may not replace it.
-	options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
-
-	var sourceIsArray = Array.isArray(source);
-	var targetIsArray = Array.isArray(target);
-	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
-
-	if (!sourceAndTargetTypesMatch) {
-		return cloneUnlessOtherwiseSpecified(source, options)
-	} else if (sourceIsArray) {
-		return options.arrayMerge(target, source, options)
-	} else {
-		return mergeObject(target, source, options)
-	}
-}
-
-deepmerge.all = function deepmergeAll(array, options) {
-	if (!Array.isArray(array)) {
-		throw new Error('first argument should be an array')
-	}
-
-	return array.reduce(function(prev, next) {
-		return deepmerge(prev, next, options)
-	}, {})
-};
-
-var deepmerge_1 = deepmerge;
-
-var cjs = deepmerge_1;
-
-// Create a pinia store named hud with a state using the type HudState, and save type HudSave, with actions:
-// setupHudStats(stats: { [key: string]: HudStatConfig }): Iterates the stats argument to add new stats to the state
-// setStat(stat: string, value: number): Sets the value of a stat
-// addStat(stat: string, value: number): Adds a value to a stat
-// generateSaveData(): Function that generates a HudSave object from the data in the state
-// loadSaveData(data: HudSave): Function that loads the data into the state
-const useHud = defineStore('hud', {
-    state: () => ({
-        hudStats: {},
-    }),
-    actions: {
-        setupHudStats(stats) {
-            for (const stat in stats) {
-                this.hudStats[stat] = {
-                    value: stats[stat].startingValue,
-                };
-            }
-        },
-        setStat(stat, value) {
-            this.hudStats[stat].value = value;
-        },
-        addStat(stat, value) {
-            this.hudStats[stat].value += value;
-        },
-        generateSaveData() {
-            return {
-                hudStats: this.hudStats,
-            };
-        },
-        loadSaveData(data) {
-            this.hudStats = cjs(this.hudStats, data.hudStats);
-        },
-    },
-});
-
 // Generate a pinia store named notifications with a state using the type NotificationsState, and save type NotificationsSave, with actions:
 // addNotification(text: string): Adds a new notification to the state, and deletes it after a timeout
 // deleteNotification(id: string): Deletes a notification from the state
@@ -3785,15 +3593,18 @@ const useNotifications = defineStore('notifications', {
 const useInventory = defineStore('inventory', {
     state: () => ({
         items: {},
+        interactionTags: {},
     }),
     actions: {
         generateSaveData() {
             return {
                 items: this.items,
+                interactionTags: this.interactionTags,
             };
         },
         loadSaveData(save) {
             this.items = { ...this.items, ...save.items };
+            this.interactionTags = { ...save.interactionTags };
         },
         setupItems(items) {
             Object.keys(items).forEach((key) => {
@@ -3819,6 +3630,49 @@ const useInventory = defineStore('inventory', {
             }
             useNotifications().addNotification(`Received item: ${getItemConfig(item.id).name} x ${item.amount}`);
         },
+        enableInteraction(tag) {
+            if (!tag) {
+                tag = 'default';
+            }
+            this.interactionTags[tag] = {
+                blockedInteraction: false,
+            };
+        },
+        disableInteraction(tag) {
+            if (!tag) {
+                tag = 'default';
+            }
+            this.interactionTags[tag] = {
+                blockedInteraction: true,
+            };
+        },
+        onScriptStart() {
+            const tags = getConfig().interactionTags;
+            Object.keys(tags).forEach((tag) => {
+                const conf = tags[tag];
+                if (conf.onlyInteractOutsideOfScripts) {
+                    this.disableInteraction(tag);
+                }
+            });
+        },
+        onScriptEnd() {
+            const tags = getConfig().interactionTags;
+            Object.keys(tags).forEach((tag) => {
+                const conf = tags[tag];
+                if (conf.onlyInteractOutsideOfScripts) {
+                    this.enableInteraction(tag);
+                }
+            });
+        },
+        isInteractionTagBlocked(tag) {
+            if (!tag) {
+                tag = 'default';
+            }
+            if (this.interactionTags[tag]) {
+                return this.interactionTags[tag].blockedInteraction;
+            }
+            return false;
+        },
         remove(item) {
             const existingItem = this.getExistingItem(item.id);
             if (existingItem) {
@@ -3838,93 +3692,6 @@ const useInventory = defineStore('inventory', {
     },
 });
 
-// Create a pinia store named skills with a state using the type Skills, with actions:
-// setupSkillCheck(skillCheck: SkillCheckState, id: string)
-// passSkillCheck(skillCheckId: string)
-// failSkillCheck(skillCheckId: string)
-// generateSaveData(): Function that generates a Skills object from the data in the state
-// loadSaveData(data: Skills): Function that loads the data into the state
-// setupSkills(skills: { [key: string]: SkillData})
-// addXp(skill: string, xp: number): Adds xp to a skill, increases skill level if it reaches the max xp defined in the skillOptions.xpPerLevel key of the config
-// incrementSkill(skill: string, amount: number): Increments the level of a skill by amount
-const useSkills = defineStore('skills', {
-    state: () => ({
-        skillChecks: {},
-        skills: {},
-    }),
-    actions: {
-        setupSkillCheck(skillCheck, id) {
-            this.skillChecks[id] = skillCheck;
-        },
-        passSkillCheck(skillCheckId) {
-            this.skillChecks[skillCheckId].passed = true;
-            this.skillChecks[skillCheckId].available = false;
-        },
-        failSkillCheck(skillCheckId) {
-            this.skillChecks[skillCheckId].passed = false;
-            this.skillChecks[skillCheckId].available = false;
-        },
-        generateSaveData() {
-            return {
-                skillChecks: this.skillChecks,
-                skills: this.skills,
-            };
-        },
-        loadSaveData(data) {
-            this.skillChecks = cjs(this.skillChecks, data.skillChecks);
-            this.skills = cjs(this.skills, data.skills);
-        },
-        setupSkills(skills) {
-            // Adds each skill in the skills object to the skills state. Add default values for startingLevel and xp of 0 if those keys are missing.
-            for (const skill in skills) {
-                this.skills[skill] = {
-                    level: skills[skill].startingLevel || 0,
-                    xp: 0,
-                };
-            }
-        },
-        addXp(skill, xp) {
-            const skillData = this.skills[skill];
-            skillData.xp += xp;
-            if (skillData.xp >= getConfig().skillOptions.xpPerLevel) {
-                skillData.xp = 0;
-                skillData.level++;
-                this.levelledUp(skill);
-            }
-        },
-        incrementSkill(skill, amount) {
-            this.skills[skill].level += amount;
-            this.levelledUp(skill);
-        },
-        levelledUp(skill) {
-            const skillName = getConfig().skills[skill].name;
-            const skillLevel = this.skills[skill].level;
-            useNotifications().addNotification(`Your skill in ${skillName} is now level ${skillLevel}`);
-        },
-    },
-});
-
-function getFile(url) {
-    return new Promise((resolve, reject) => {
-        // Set up our HTTP request
-        const xhr = new XMLHttpRequest();
-        // Setup our listener to process completed requests
-        xhr.onload = function () {
-            // Process our return data
-            if (xhr.status >= 200 && xhr.status < 300) {
-                // This will run when the request is successful
-                resolve(xhr.responseText);
-            }
-            else {
-                reject(xhr.status);
-                // This will run when it's not
-            }
-        };
-        xhr.open('GET', url);
-        xhr.send();
-    });
-}
-
 const everyObject = (object, predicate) => {
     for (const key in object) {
         if (!predicate(object[key])) {
@@ -4000,26 +3767,248 @@ const useQuests = defineStore('quests', {
             }
             useNotifications().addNotification(`Quest completed: ${getQuestConfig(questId).title}`);
         },
-        isQuestCompleted(questId) {
-            const quest = this.getQuest(questId);
-            return everyObject(quest.objectives, (objective) => objective.state === 'completed');
+        isQuestCompleted(questId) {
+            const quest = this.getQuest(questId);
+            return everyObject(quest.objectives, (objective) => objective.state === 'completed');
+        },
+        removeQuest(id) {
+            delete this.quests[id];
+        },
+        generateSaveData() {
+            return {
+                quests: {
+                    ...this.quests,
+                },
+            };
+        },
+        loadSaveData(data) {
+            this.quests = data.quests;
+        },
+    },
+});
+
+var isMergeableObject = function isMergeableObject(value) {
+	return isNonNullObject(value)
+		&& !isSpecial(value)
+};
+
+function isNonNullObject(value) {
+	return !!value && typeof value === 'object'
+}
+
+function isSpecial(value) {
+	var stringValue = Object.prototype.toString.call(value);
+
+	return stringValue === '[object RegExp]'
+		|| stringValue === '[object Date]'
+		|| isReactElement(value)
+}
+
+// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
+var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
+
+function isReactElement(value) {
+	return value.$$typeof === REACT_ELEMENT_TYPE
+}
+
+function emptyTarget(val) {
+	return Array.isArray(val) ? [] : {}
+}
+
+function cloneUnlessOtherwiseSpecified(value, options) {
+	return (options.clone !== false && options.isMergeableObject(value))
+		? deepmerge(emptyTarget(value), value, options)
+		: value
+}
+
+function defaultArrayMerge(target, source, options) {
+	return target.concat(source).map(function(element) {
+		return cloneUnlessOtherwiseSpecified(element, options)
+	})
+}
+
+function getMergeFunction(key, options) {
+	if (!options.customMerge) {
+		return deepmerge
+	}
+	var customMerge = options.customMerge(key);
+	return typeof customMerge === 'function' ? customMerge : deepmerge
+}
+
+function getEnumerableOwnPropertySymbols(target) {
+	return Object.getOwnPropertySymbols
+		? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+			return target.propertyIsEnumerable(symbol)
+		})
+		: []
+}
+
+function getKeys(target) {
+	return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
+}
+
+function propertyIsOnObject(object, property) {
+	try {
+		return property in object
+	} catch(_) {
+		return false
+	}
+}
+
+// Protects from prototype poisoning and unexpected merging up the prototype chain.
+function propertyIsUnsafe(target, key) {
+	return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
+		&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
+			&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
+}
+
+function mergeObject(target, source, options) {
+	var destination = {};
+	if (options.isMergeableObject(target)) {
+		getKeys(target).forEach(function(key) {
+			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+		});
+	}
+	getKeys(source).forEach(function(key) {
+		if (propertyIsUnsafe(target, key)) {
+			return
+		}
+
+		if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
+			destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+		} else {
+			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+		}
+	});
+	return destination
+}
+
+function deepmerge(target, source, options) {
+	options = options || {};
+	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+	options.isMergeableObject = options.isMergeableObject || isMergeableObject;
+	// cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
+	// implementations can use it. The caller may not replace it.
+	options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+
+	var sourceIsArray = Array.isArray(source);
+	var targetIsArray = Array.isArray(target);
+	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+
+	if (!sourceAndTargetTypesMatch) {
+		return cloneUnlessOtherwiseSpecified(source, options)
+	} else if (sourceIsArray) {
+		return options.arrayMerge(target, source, options)
+	} else {
+		return mergeObject(target, source, options)
+	}
+}
+
+deepmerge.all = function deepmergeAll(array, options) {
+	if (!Array.isArray(array)) {
+		throw new Error('first argument should be an array')
+	}
+
+	return array.reduce(function(prev, next) {
+		return deepmerge(prev, next, options)
+	}, {})
+};
+
+var deepmerge_1 = deepmerge;
+
+var cjs = deepmerge_1;
+
+// Create a pinia store named skills with a state using the type Skills, with actions:
+// setupSkillCheck(skillCheck: SkillCheckState, id: string)
+// passSkillCheck(skillCheckId: string)
+// failSkillCheck(skillCheckId: string)
+// generateSaveData(): Function that generates a Skills object from the data in the state
+// loadSaveData(data: Skills): Function that loads the data into the state
+// setupSkills(skills: { [key: string]: SkillData})
+// addXp(skill: string, xp: number): Adds xp to a skill, increases skill level if it reaches the max xp defined in the skillOptions.xpPerLevel key of the config
+// incrementSkill(skill: string, amount: number): Increments the level of a skill by amount
+const useSkills = defineStore('skills', {
+    state: () => ({
+        skillChecks: {},
+        skills: {},
+    }),
+    actions: {
+        setupSkillCheck(skillCheck, id) {
+            this.skillChecks[id] = skillCheck;
+        },
+        passSkillCheck(skillCheckId) {
+            this.skillChecks[skillCheckId].passed = true;
+            this.skillChecks[skillCheckId].available = false;
         },
-        removeQuest(id) {
-            delete this.quests[id];
+        failSkillCheck(skillCheckId) {
+            this.skillChecks[skillCheckId].passed = false;
+            this.skillChecks[skillCheckId].available = false;
         },
         generateSaveData() {
             return {
-                quests: {
-                    ...this.quests,
-                },
+                skillChecks: this.skillChecks,
+                skills: this.skills,
             };
         },
         loadSaveData(data) {
-            this.quests = data.quests;
+            this.skillChecks = cjs(this.skillChecks, data.skillChecks);
+            this.skills = cjs(this.skills, data.skills);
+        },
+        setupSkills(skills) {
+            // Adds each skill in the skills object to the skills state. Add default values for startingLevel and xp of 0 if those keys are missing.
+            for (const skill in skills) {
+                this.skills[skill] = {
+                    level: skills[skill].startingLevel || 0,
+                    xp: 0,
+                };
+            }
+        },
+        addXp(skill, xp) {
+            const skillData = this.skills[skill];
+            if (!skillData) {
+                error(`Skill ${skill} doesn't exist`);
+            }
+            skillData.xp += xp;
+            if (skillData.xp >= getConfig().skillOptions.xpPerLevel) {
+                skillData.xp = 0;
+                skillData.level++;
+                this.levelledUp(skill);
+            }
+        },
+        incrementSkill(skill, amount) {
+            this.skills[skill].level += amount;
+            this.levelledUp(skill);
+        },
+        levelledUp(skill) {
+            const skillName = getConfig().skills[skill].name;
+            const skillLevel = this.skills[skill].level;
+            useNotifications().addNotification(`Your skill in ${skillName} is now level ${skillLevel}`);
         },
     },
 });
 
+function getFile(url) {
+    return new Promise((resolve, reject) => {
+        // Set up our HTTP request
+        const xhr = new XMLHttpRequest();
+        // Setup our listener to process completed requests
+        xhr.onload = function () {
+            // Process our return data
+            if (xhr.status >= 200 && xhr.status < 300) {
+                // This will run when the request is successful
+                resolve(xhr.responseText);
+            }
+            else {
+                reject(xhr.status);
+                // This will run when it's not
+            }
+        };
+        xhr.open('GET', url);
+        xhr.send();
+    });
+}
+
 // Create a pinia store named screens with a state using the type ScreenState, with actions:
 // setScreen(screen: string): Sets the current screen to the given screen
 // setButtons(buttons: { [key: string]: ButtonConfig }): Adds buttons to the buttons state by using the values in the buttons config object
@@ -4311,6 +4300,7 @@ const useVM = defineStore('vm', {
         data: {},
         lastLabel: 'main',
         script: {},
+        labelStack: ['main'],
     }),
     actions: {
         generateSaveData() {
@@ -4387,6 +4377,7 @@ const useVM = defineStore('vm', {
                 newStack.label = this.currentStack.label;
             }
             this.stack.push(newStack);
+            return this.runLine();
         },
         async nextLine() {
             if (this.stack.length === 0) {
@@ -4414,6 +4405,7 @@ const useVM = defineStore('vm', {
             this.stack.splice(this.stack.length - 1, 1);
         },
         finishGame() {
+            useInventory().onScriptEnd();
             const mainStore = useMain();
             if (mainStore.options.debug) {
                 const dialogStore = useDialogStore();
@@ -4425,8 +4417,24 @@ const useVM = defineStore('vm', {
         },
         async runLine() {
             const cmd = this.currentLine;
+            useInventory().onScriptStart();
             await runCommand(cmd);
         },
+        async runLabelFunction(label, comeBackToSameLine) {
+            if (comeBackToSameLine) {
+                this.currentStack.currentIndex--;
+            }
+            const branch = this.script[label];
+            if (!branch) {
+                console.error(`Label ${branch} doesn't exist`);
+            }
+            const stack = {
+                currentIndex: 0,
+                branch: branch,
+                label,
+            };
+            await this.addStack(stack);
+        },
         runLabel(label) {
             const branch = this.script[label];
             if (!branch) {
@@ -4455,6 +4463,93 @@ const useVM = defineStore('vm', {
     },
 });
 
+function processText(text) {
+    const vmStore = useVM();
+    const skillStore = useSkills();
+    return text.replace(/%{[^}]*}/g, (match) => {
+        const key = match.substr(2, match.length - 3);
+        const searchableState = {
+            data: vmStore.data,
+            skills: skillStore.skills,
+            items: useInventory().items,
+            quests: useQuests().quests,
+        };
+        const [obj, newKey] = findDataHelper(searchableState, key);
+        return obj[newKey];
+    });
+}
+
+// Create a pinia store named dialog with a state using the type DialogState, with actions addDialog and clearDialog
+const useDialogStore = defineStore('dialog', {
+    state: () => ({
+        dialog: [],
+    }),
+    actions: {
+        generateSaveData() {
+            return {
+                dialog: this.dialog,
+            };
+        },
+        loadSaveData(data) {
+            this.dialog = data.dialog;
+        },
+        addDialog(dialog) {
+            this.dialog.push({
+                ...dialog,
+                interactive: dialog.interactive ?? false,
+                id: randomId(),
+                text: processText(dialog.text),
+            });
+        },
+        clearDialog() {
+            this.dialog.splice(0, this.dialog.length);
+        },
+        reset() {
+            this.dialog = [];
+        },
+    },
+    getters: {
+        currentDialog() {
+            return this.dialog[this.dialog.length - 1];
+        },
+    },
+});
+
+// Create a pinia store named hud with a state using the type HudState, and save type HudSave, with actions:
+// setupHudStats(stats: { [key: string]: HudStatConfig }): Iterates the stats argument to add new stats to the state
+// setStat(stat: string, value: number): Sets the value of a stat
+// addStat(stat: string, value: number): Adds a value to a stat
+// generateSaveData(): Function that generates a HudSave object from the data in the state
+// loadSaveData(data: HudSave): Function that loads the data into the state
+const useHud = defineStore('hud', {
+    state: () => ({
+        hudStats: {},
+    }),
+    actions: {
+        setupHudStats(stats) {
+            for (const stat in stats) {
+                this.hudStats[stat] = {
+                    value: stats[stat].startingValue,
+                };
+            }
+        },
+        setStat(stat, value) {
+            this.hudStats[stat].value = value;
+        },
+        addStat(stat, value) {
+            this.hudStats[stat].value += value;
+        },
+        generateSaveData() {
+            return {
+                hudStats: this.hudStats,
+            };
+        },
+        loadSaveData(data) {
+            this.hudStats = cjs(this.hudStats, data.hudStats);
+        },
+    },
+});
+
 function createSkillCheckState() {
     const skillCheck = {
         passed: false,
@@ -4608,6 +4703,7 @@ function conditionFunction(condition) {
         skillChecks: skillStore.skillChecks,
         stats: useHud().hudStats,
         items: inventory.items,
+        quests: useQuests().quests,
         itemAmount: (id) => {
             return useInventory().getItemAmount(id);
         },
@@ -4680,9 +4776,9 @@ async function runCommand(cmd, choices) {
     catch (err) {
         logger.log(`Error at: `, vmStore.currentStack.label);
         console.error(err);
-        error(`Narrat script runtime error at  <span class="error-filename">${cmd.fileName}:${cmd.line + 1}</span>
-      <b>${err}</b>
-      Script: ${cmd.code}
+        error(`Narrat script runtime error at  <span class="error-filename">${cmd.fileName}:${cmd.line + 1}</span>
+      <b>${err}</b>
+      Script: ${cmd.code}
       Label: ${vmStore.currentStack.label}`);
     }
 }
@@ -4728,8 +4824,7 @@ async function playerAnswered(choiceIndex) {
                     branch: newBranch,
                 };
                 const vmStore = useVM();
-                vmStore.addStack(newStack);
-                vmStore.runLine();
+                return vmStore.addStack(newStack);
             }
             else {
                 vmStore.nextLine();
@@ -4874,7 +4969,12 @@ const useMain = defineStore('main', {
             this.modal = false;
         },
         toggleMenu() {
-            this.flowState = this.flowState === 'menu' ? 'playing' : 'menu';
+            if (this.modal) {
+                this.modal = false;
+            }
+            else {
+                this.modal = 'menu';
+            }
         },
         pause() {
             this.paused = true;
@@ -5187,7 +5287,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$1 = ".dialog-title {\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.dialog-text {\n  font-size: 16px;\n}\n\n.dialog-box {\n  /* border-radius: 10px; */\n  /* border: 1px solid #a8a8a8; */\n  color: var(--text-color);\n  /* background-color: #2e2e2e; */\n  padding: 10px;\n  padding-left: 2em;\n  margin-bottom: 10px;\n}\n\n.dialog-choice {\n  color: var(--dialog-choice-color);\n}\n\n.dialog-choice:hover {\n  color: var(--dialog-choice-hover-color);\n  cursor: pointer;\n}\n\n.buttons-container {\n  width: 100%;\n  padding: 10px;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: stretch;\n  box-sizing: border-box;\n}\n\n.interact-button {\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  height: 50px;\n  color: var(--text-color);\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 24px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\r\n";
+var css_248z$1 = ".dialog-title {\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.dialog-text {\n  font-size: 16px;\n}\n\n.dialog-box {\n  /* border-radius: 10px; */\n  /* border: 1px solid #a8a8a8; */\n  color: var(--text-color);\n  /* background-color: #2e2e2e; */\n  padding: 10px;\n  padding-left: 2em;\n  margin-bottom: 10px;\n}\n\n.dialog-choice {\n  color: var(--dialog-choice-color);\n}\n\n.dialog-choice:hover {\n  color: var(--dialog-choice-hover-color);\n  cursor: pointer;\n}\n\n.buttons-container {\n  width: 100%;\n  padding: 10px;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: stretch;\n  box-sizing: border-box;\n}\n\n.interact-button {\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  height: 50px;\n  color: var(--text-color);\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 24px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n";
 styleInject(css_248z$1);
 
 script.render = render;
@@ -5234,7 +5334,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$2 = ".dialog-picture {\n  position: absolute;\n  width: 80px;\n  height: 80px;\n  border: 2px solid white;\n  border-radius: 10px;\n  background-color: grey;\n  z-index: 99;\n}\n\n.dialog-picture img {\n  width: 100%;\n  height: 100%;\n}\r\n";
+var css_248z$2 = ".dialog-picture {\n  position: absolute;\n  width: 80px;\n  height: 80px;\n  border: 2px solid white;\n  border-radius: 10px;\n  background-color: grey;\n  z-index: 99;\n}\n\n.dialog-picture img {\n  width: 100%;\n  height: 100%;\n}\n";
 styleInject(css_248z$2);
 
 script$1.render = render$1;
@@ -5288,7 +5388,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }))
 }
 
-var css_248z$3 = ".modal-mask {\n  position: absolute;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 2 2;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-container {\n  min-width: 300px;\n  max-width: 90vw;\n  max-height: 100%;\n  overflow-y: hidden;\n  margin: 10px auto;\n  padding: 20px 30px;\n  border-radius: 5px;\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n  background: linear-gradient(to right, hsl(210, 30%, 20%), hsl(255, 30%, 25%));\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header {\n  position: relative;\n}\n\n.modal-header h3 {\n  flex-shrink: 0;\n  margin-top: 0;\n  color: var(--secondary);\n}\n\n.modal-body {\n  margin: 20px 0;\n  overflow-y: auto;\n  flex-shrink: 2;\n}\n\n.modal-default-button {\n  float: right;\n}\n\n/*\r\n * The following styles are auto-applied to elements with\r\n * transition=\"modal\" when their visibility is toggled\r\n * by Vue.js.\r\n *\r\n * You can easily play with the modal transition by editing\r\n * these styles.\r\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\r\n.modal-leave-active .modal-container {\n  transform: scale(1.1);\n}\n\n.close-button {\n  border: 1px solid var(--text-color);\n  border-radius: 50px;\n  font-size: 30px;\n  font-weight: 700;\n  position: absolute;\n  right: -20px;\n  top: -10px;\n  width: 50px;\n  height: 50px;\n}\n\n.close-button:hover {\n  background-color: var(--focus);\n}\r\n";
+var css_248z$3 = ".modal-mask {\n  position: absolute;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  transition: opacity 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 2 2;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-container {\n  min-width: 300px;\n  max-width: 90vw;\n  max-height: 100%;\n  overflow-y: hidden;\n  margin: 10px auto;\n  padding: 20px 30px;\n  border-radius: 5px;\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n  background: linear-gradient(to right, hsl(210, 30%, 20%), hsl(255, 30%, 25%));\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header {\n  position: relative;\n}\n\n.modal-header h3 {\n  flex-shrink: 0;\n  margin-top: 0;\n  color: var(--secondary);\n}\n\n.modal-body {\n  margin: 20px 0;\n  overflow-y: auto;\n  flex-shrink: 2;\n}\n\n.modal-default-button {\n  float: right;\n}\n\n/*\n * The following styles are auto-applied to elements with\n * transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave-active .modal-container {\n  transform: scale(1.1);\n}\n\n.close-button {\n  border: 1px solid var(--text-color);\n  border-radius: 50px;\n  font-size: 30px;\n  font-weight: 700;\n  position: absolute;\n  right: -20px;\n  top: -10px;\n  width: 50px;\n  height: 50px;\n}\n\n.close-button:hover {\n  background-color: var(--focus);\n}\n";
 styleInject(css_248z$3);
 
 script$2.render = render$2;
@@ -7196,6 +7296,9 @@ var script$3 = defineComponent({
             this.showDebug = true;
             const vmStore = useVM();
             const mainStore = useMain();
+            const questsStore = useQuests();
+            const inventoryStore = useInventory();
+            const skillsStore = useSkills();
             this.$nextTick(() => {
                 // eslint-disable-next-line no-unused-vars
                 const _variablesEditor = new xJ({
@@ -7203,10 +7306,20 @@ var script$3 = defineComponent({
                     props: {
                         content: {
                             text: undefined,
-                            json: this.variables,
+                            json: {
+                                data: this.variables,
+                                quests: questsStore.quests,
+                                items: inventoryStore.items,
+                                skills: skillsStore.skills,
+                                skillChecks: skillsStore.skillChecks,
+                            }
                         },
                         onChange: (updatedContent) => {
-                            vmStore.overrideData(updatedContent.json);
+                            vmStore.overrideData(updatedContent.json.data);
+                            questsStore.quests = updatedContent.json.quests;
+                            inventoryStore.items = updatedContent.json.items;
+                            skillsStore.skills = updatedContent.json.skills;
+                            skillsStore.skillChecks = updatedContent.json.skillChecks;
                         },
                     },
                 });
@@ -7532,7 +7645,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$4 = ".debug-menu {\n  z-index: 9999;\n}\n\n.debug-button {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  padding: 5px;\n}\n\n.error-message {\n  color: orangered;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n.error-filename {\n  color: grey;\n  text-decoration: underline;\n}\n\n.debug-menu-container {\n  width: 100%;\n}\n\n.search-result {\n  border: 1px solid var(--text-color);\n  padding: 10px;\n  font-weight: 700;\n  font-size: 20px;\n  width: 100;\n}\n\n.jump-menu-container {\n  width: 80%;\n}\n\n.debug-info {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.6);\n  border: 1px dotted var(--text-color);\n  top: 0;\n  left: 0;\n  padding: 5px;\n}\n\n.variables-viewer {\n  height: 100%;\n}\r\n";
+var css_248z$4 = ".debug-menu {\n  z-index: 9999;\n}\n\n.debug-button {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  padding: 5px;\n}\n\n.error-message {\n  color: orangered;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n.error-filename {\n  color: grey;\n  text-decoration: underline;\n}\n\n.debug-menu-container {\n  width: 100%;\n}\n\n.search-result {\n  border: 1px solid var(--text-color);\n  padding: 10px;\n  font-weight: 700;\n  font-size: 20px;\n  width: 100;\n}\n\n.jump-menu-container {\n  width: 80%;\n}\n\n.debug-info {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.6);\n  border: 1px dotted var(--text-color);\n  top: 0;\n  left: 0;\n  padding: 5px;\n}\n\n.variables-viewer {\n  height: 100%;\n}\n";
 styleInject(css_248z$4);
 
 script$3.render = render$3;
@@ -7589,7 +7702,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$5 = ".volume-label {\n  /* margin: 5px 20px; */\n  margin-right: 10px;\n  font-size: 20px;\n  font-weight: 700;\n}\n\n.volume-controls {\n  font-size: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 20px;\n}\n\n.volume-slider {\n  width: 200px;\n  background-color: blue;\n}\r\n";
+var css_248z$5 = ".volume-label {\n  /* margin: 5px 20px; */\n  margin-right: 10px;\n  font-size: 20px;\n  font-weight: 700;\n}\n\n.volume-controls {\n  font-size: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 20px;\n}\n\n.volume-slider {\n  width: 200px;\n  background-color: blue;\n}\n";
 styleInject(css_248z$5);
 
 script$4.render = render$4;
@@ -7647,7 +7760,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$6 = ".hud {\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  flex-direction: row-reverse;\n  z-index: 3;\n}\n\n.hud-stat {\n  border: 1px dotted white;\n  background-color: var(--hud-background);\n  color: var(--hud-text-color);\n  padding: 5px;\n}\n\n.hud-icon {\n  display: inline-block;\n  height: 1em;\n}\n\n.hud-text {\n  margin-left: 5px;\n}\r\n";
+var css_248z$6 = ".hud {\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  flex-direction: row-reverse;\n  z-index: 3;\n}\n\n.hud-stat {\n  border: 1px dotted white;\n  background-color: var(--hud-background);\n  color: var(--hud-text-color);\n  padding: 5px;\n}\n\n.hud-icon {\n  display: inline-block;\n  height: 1em;\n}\n\n.hud-text {\n  margin-left: 5px;\n}\n";
 styleInject(css_248z$6);
 
 script$5.render = render$5;
@@ -7684,7 +7797,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$7 = "#loading-bar {\n  position: relative;\n  width: 40vw;\n  height: 100px;\n  border-radius: 50px;\n  background: black;\n}\n\n#inner-loading-bar {\n  height: 100%;\n  border-radius: 50px 0px 0px 50px;\n  background: var(--light-background);\n}\n\n#loading-text {\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n}\r\n";
+var css_248z$7 = "#loading-bar {\n  position: relative;\n  width: 40vw;\n  height: 100px;\n  border-radius: 50px;\n  background: black;\n}\n\n#inner-loading-bar {\n  height: 100%;\n  border-radius: 50px 0px 0px 50px;\n  background: var(--light-background);\n}\n\n#loading-text {\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n}\n";
 styleInject(css_248z$7);
 
 script$6.render = render$6;
@@ -7717,27 +7830,11 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   }))
 }
 
-var css_248z$8 = ".notifications-holder {\n  position: fixed;\n  top: 0;\n  right: 0;\n  padding: 10px;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  pointer-events: none;\n}\n\n.notification {\n  margin-top: 10px;\n  margin-bottom: 10px;\n  border-radius: 10px;\n  padding: 15px;\n  background: var(--notifications-bg);\n  width: 40vh;\n  text-align: center;\n}\r\n";
+var css_248z$8 = ".notifications-holder {\n  position: fixed;\n  top: 0;\n  right: 0;\n  padding: 10px;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  pointer-events: none;\n}\n\n.notification {\n  margin-top: 10px;\n  margin-bottom: 10px;\n  border-radius: 10px;\n  padding: 15px;\n  background: var(--notifications-bg);\n  width: 40vh;\n  text-align: center;\n}\n";
 styleInject(css_248z$8);
 
 script$7.render = render$7;
 
-function processText(text) {
-    const vmStore = useVM();
-    const skillStore = useSkills();
-    return text.replace(/%{[^}]*}/g, (match) => {
-        const key = match.substr(2, match.length - 3);
-        const searchableState = {
-            data: vmStore.data,
-            skills: skillStore.skills,
-            items: useInventory().items,
-            quests: useQuests().quests,
-        };
-        const [obj, newKey] = findDataHelper(searchableState, key);
-        return obj[newKey];
-    });
-}
-
 function aspectRatioFit(screenWidth, screenHeight, gameWidth, gameHeight) {
     const widthRatio = screenWidth / gameWidth;
     const heightRatio = screenHeight / gameHeight;
@@ -7942,7 +8039,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$9 = ".menu-content {\n  text-align: center;\n}\n\n.menu-toggle-button {\n  margin: 0;\n  padding: 2px;\n  border-radius: 5px;\n}\n\n.menu-toggle-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.menu-modal {\n  width: 500px;\n}\r\n";
+var css_248z$9 = ".menu-content {\n  text-align: center;\n}\n\n.menu-toggle-button {\n  margin: 0;\n  padding: 2px;\n  border-radius: 5px;\n}\n\n.menu-toggle-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.menu-modal {\n  width: 500px;\n}\n";
 styleInject(css_248z$9);
 
 script$8.render = render$8;
@@ -7952,7 +8049,9 @@ var script$9 = defineComponent({
         Modal: script$2,
         VolumeControls: script$4,
     },
-    props: {},
+    props: {
+        close: Function,
+    },
     data() { },
     mounted() { },
     methods: {
@@ -7960,9 +8059,6 @@ var script$9 = defineComponent({
             window.close();
             // quit
         },
-        close() {
-            this.$emit('close');
-        },
         mainMenu() {
             useMain().menuReturn();
             this.close();
@@ -8010,7 +8106,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["onClose"]))
 }
 
-var css_248z$a = ".quit-button {\n  margin: 20px;\n  text-align: center;\n}\r\n";
+var css_248z$a = ".quit-button {\n  margin: 20px;\n  text-align: center;\n}\n";
 styleInject(css_248z$a);
 
 script$9.render = render$9;
@@ -8026,7 +8122,7 @@ var script$a = defineComponent({
         VolumeControls: script$4,
     },
     props: {
-        close: (() => { }),
+        close: Function,
     },
     data() {
         return {
@@ -8077,20 +8173,17 @@ var script$a = defineComponent({
 });
 
 const _hoisted_1$9 = /*#__PURE__*/createElementVNode("h3", { class: "title" }, "Skills", -1);
-const _hoisted_2$7 = { class: "menu-content" };
-const _hoisted_3$4 = {
+const _hoisted_2$7 = {
   key: 0,
   class: "skills-container"
 };
-const _hoisted_4$3 = ["onClick"];
-const _hoisted_5$3 = { class: "skill-title" };
-const _hoisted_6$3 = { class: "skill-xp-container" };
-const _hoisted_7$2 = { class: "skill-xp-text" };
-const _hoisted_8$1 = { class: "skill-level" };
-const _hoisted_9$1 = {
-  key: 1,
-  class: "flex flex-row skill-description-container"
-};
+const _hoisted_3$4 = ["onClick"];
+const _hoisted_4$3 = { class: "skill-title" };
+const _hoisted_5$3 = { class: "skill-xp-container" };
+const _hoisted_6$3 = { class: "skill-xp-text" };
+const _hoisted_7$2 = { class: "skill-level" };
+const _hoisted_8$1 = { key: 1 };
+const _hoisted_9$1 = { class: "flex flex-row skill-description-container" };
 const _hoisted_10$1 = { class: "flex skill-left" };
 const _hoisted_11$1 = { class: "flex skill-right" };
 const _hoisted_12$1 = /*#__PURE__*/createElementVNode("hr", { class: "hr-solid" }, null, -1);
@@ -8107,35 +8200,31 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
       _hoisted_1$9
     ]),
     body: withCtx(() => [
-      createElementVNode("div", _hoisted_2$7, [
-        (!_ctx.chosenSkill)
-          ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skillsToDisplay, (skill, key) => {
-                return (openBlock(), createElementBlock("button", {
-                  onClick: () => _ctx.clickSkill(key),
-                  class: "skill-display",
-                  style: normalizeStyle(_ctx.getSkillStyle(key)),
-                  key: key
-                }, [
-                  createElementVNode("h3", _hoisted_5$3, toDisplayString(_ctx.getSkillName(key)), 1),
-                  createElementVNode("div", _hoisted_6$3, [
-                    createElementVNode("div", {
-                      class: "skill-xp-bar",
-                      style: normalizeStyle(_ctx.xpBarWidth(skill.xp))
-                    }, null, 4),
-                    createElementVNode("h3", _hoisted_7$2, toDisplayString(skill.xp) + " / " + toDisplayString(_ctx.xpPerLevel) + " XP ", 1)
-                  ]),
-                  createElementVNode("h3", _hoisted_8$1, toDisplayString(skill.level), 1)
-                ], 12, _hoisted_4$3))
-              }), 128))
-            ]))
-          : (typeof _ctx.chosenSkill === 'string')
-            ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
+      (!_ctx.chosenSkill)
+        ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skillsToDisplay, (skill, key) => {
+              return (openBlock(), createElementBlock("button", {
+                onClick: () => _ctx.clickSkill(key),
+                class: "skill-display",
+                style: normalizeStyle(_ctx.getSkillStyle(key)),
+                key: key
+              }, [
+                createElementVNode("h3", _hoisted_4$3, toDisplayString(_ctx.getSkillName(key)), 1),
+                createElementVNode("div", _hoisted_5$3, [
+                  createElementVNode("div", {
+                    class: "skill-xp-bar",
+                    style: normalizeStyle(_ctx.xpBarWidth(skill.xp))
+                  }, null, 4),
+                  createElementVNode("h3", _hoisted_6$3, toDisplayString(skill.xp) + " / " + toDisplayString(_ctx.xpPerLevel) + " XP", 1)
+                ]),
+                createElementVNode("h3", _hoisted_7$2, toDisplayString(skill.level), 1)
+              ], 12, _hoisted_3$4))
+            }), 128))
+          ]))
+        : (typeof _ctx.chosenSkill === 'string')
+          ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
+              createElementVNode("div", _hoisted_9$1, [
                 createElementVNode("div", _hoisted_10$1, [
-                  createElementVNode("button", {
-                    class: "button",
-                    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.closeSkill && _ctx.closeSkill(...args)))
-                  }, "Back"),
                   createElementVNode("div", {
                     class: "skill-display",
                     style: normalizeStyle(_ctx.getSkillStyle(_ctx.chosenSkill))
@@ -8147,15 +8236,19 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
                   createElementVNode("h3", null, "Level: " + toDisplayString(_ctx.skills[_ctx.chosenSkill].level), 1),
                   createElementVNode("p", null, toDisplayString(_ctx.skillConf[_ctx.chosenSkill].description), 1)
                 ])
-              ]))
-            : createCommentVNode("", true)
-      ])
+              ]),
+              createElementVNode("button", {
+                class: "button",
+                onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.closeSkill && _ctx.closeSkill(...args)))
+              }, toDisplayString('<--'))
+            ]))
+          : createCommentVNode("", true)
     ]),
     _: 1
   }, 8, ["onClose"]))
 }
 
-var css_248z$b = ".skills-modal {\n  width: 800px;\n}\n\n.skills-container {\n  display: grid;\n  grid-auto-rows: auto;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 20px 20px;\n}\n\n.skill-display {\n  width: 200px;\n  height: 300px;\n  position: relative;\n  background-size: cover;\n}\n\n.skill-title {\n  position: absolute;\n  bottom: 0px;\n  text-align: center;\n  width: 100%;\n  color: var(--skills-text-color);\n  background: var(--skills-text-background);\n}\n\n.skill-level {\n  position: absolute;\n  top: 0;\n  right: 0;\n  font-weight: 700;\n  font-size: 25px;\n  color: var(--skills-level-color);\n  width: var(--skills-xp-bar-height);\n  height: var(--skills-xp-bar-height);\n  background-color: var(--skills-level-background);\n}\n\n.skill-description-container {\n  justify-content: space-between;\n  align-items: center;\n}\n\n.skill-left {\n  flex-direction: column;\n}\n\n.skill-right {\n  flex-direction: column;\n  align-items: baseline;\n}\n\n.skill-xp-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: var(--skills-xp-bar-height);\n  width: calc(100% - var(--skills-xp-bar-height));\n  background-color: rgba(0, 0, 0, 0.5);\n}\n\n.skill-xp-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 50%;\n  height: 100%;\n  background-color: rgba(0, 0, 250, 0.5);\n}\n\n.skill-xp-text {\n  z-index: 2;\n}\r\n";
+var css_248z$b = ".skills-modal {\n  width: 800px;\n}\n\n.skills-container {\n  display: grid;\n  grid-auto-rows: auto;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 20px 20px;\n}\n\n.skill-display {\n  width: 200px;\n  height: 300px;\n  position: relative;\n  background-size: cover;\n}\n\n.skill-title {\n  position: absolute;\n  bottom: 0px;\n  text-align: center;\n  width: 100%;\n  color: var(--skills-text-color);\n  background: var(--skills-text-background);\n}\n\n.skill-level {\n  position: absolute;\n  top: 0;\n  right: 0;\n  font-weight: 700;\n  font-size: 25px;\n  color: var(--skills-level-color);\n  width: var(--skills-xp-bar-height);\n  height: var(--skills-xp-bar-height);\n  background-color: var(--skills-level-background);\n}\n\n.skill-description-container {\n  justify-content: space-between;\n  align-items: stretch;\n}\n\n.skill-left {\n  flex-direction: column;\n  border: 1px dashed white;\n  padding: 10px;\n  justify-content: center;\n}\n\n.skill-right {\n  border: 1px dashed white;\n  flex-direction: column;\n  align-items: baseline;\n  flex-grow: 2;\n  align-items: baseline;\n}\n\n.skill-xp-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: var(--skills-xp-bar-height);\n  width: calc(100% - var(--skills-xp-bar-height));\n  background-color: rgba(0, 0, 0, 0.5);\n}\n\n.skill-xp-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 50%;\n  height: 100%;\n  background-color: rgba(0, 0, 250, 0.5);\n}\n\n.skill-xp-text {\n  z-index: 2;\n}\n";
 styleInject(css_248z$b);
 
 script$a.render = render$a;
@@ -8163,14 +8256,16 @@ script$a.render = render$a;
 var script$b = defineComponent({
     setup() {
         const store = useInventory();
+        const dialogStore = useDialogStore();
         const items = computed(() => store.items);
-        return { items };
+        const currentlyChoosing = computed(() => dialogStore.currentDialog.choices);
+        return { items, currentlyChoosing };
     },
     components: {
         Modal: script$2,
     },
     props: {
-        close: (() => { }),
+        close: Function,
     },
     data() {
         return {
@@ -8187,12 +8282,40 @@ var script$b = defineComponent({
         getItemName(item) {
             return this.itemConf[item].name;
         },
+        getItemConf(item) {
+            return this.itemConf[item];
+        },
         clickItem(item) {
             this.chosenId = item;
         },
         closeItem() {
             this.chosenId = false;
         },
+        useItem() {
+            if (this.canUseChosenItem) {
+                const onUse = this.chosenItemConf.onUse;
+                this.close();
+                if (onUse.action === 'jump') {
+                    useVM().runLabel(onUse.label);
+                }
+                else if (onUse.action === 'run_label') {
+                    useVM().runLabelFunction(onUse.label, true);
+                }
+                else {
+                    error(`Unknown action ${onUse.action}`);
+                }
+            }
+        },
+        canUseItem(item) {
+            const conf = this.itemConf[item.id];
+            if (conf &&
+                conf.onUse &&
+                !useInventory().isInteractionTagBlocked(conf.tag) &&
+                !this.currentlyChoosing) {
+                return true;
+            }
+            return false;
+        },
     },
     computed: {
         itemsToDisplay() {
@@ -8210,6 +8333,9 @@ var script$b = defineComponent({
             }
             return null;
         },
+        canUseChosenItem() {
+            return this.canUseItem(this.chosenItem);
+        },
         chosenItemConf() {
             if (this.chosenId) {
                 return this.itemConf[this.chosenId];
@@ -8223,18 +8349,15 @@ var script$b = defineComponent({
 });
 
 const _hoisted_1$a = /*#__PURE__*/createElementVNode("h3", { class: "title" }, "Inventory", -1);
-const _hoisted_2$8 = { class: "menu-content" };
-const _hoisted_3$5 = {
+const _hoisted_2$8 = {
   key: 0,
   class: "inventory-container"
 };
-const _hoisted_4$4 = ["onClick"];
-const _hoisted_5$4 = { class: "item-title" };
-const _hoisted_6$4 = { class: "item-amount" };
-const _hoisted_7$3 = {
-  key: 1,
-  class: "flex flex-row item-description-container"
-};
+const _hoisted_3$5 = ["onClick"];
+const _hoisted_4$4 = { class: "item-title" };
+const _hoisted_5$4 = { class: "item-amount" };
+const _hoisted_6$4 = { key: 1 };
+const _hoisted_7$3 = { class: "flex flex-row item-description-container" };
 const _hoisted_8$2 = { class: "flex item-left" };
 const _hoisted_9$2 = { class: "flex item-right" };
 const _hoisted_10$2 = /*#__PURE__*/createElementVNode("hr", { class: "hr-solid" }, null, -1);
@@ -8256,28 +8379,24 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
       _hoisted_1$a
     ]),
     body: withCtx(() => [
-      createElementVNode("div", _hoisted_2$8, [
-        (!_ctx.chosenItem && Object.keys(_ctx.itemsToDisplay).length > 0)
-          ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.itemsToDisplay, (item) => {
-                return (openBlock(), createElementBlock("button", {
-                  onClick: () => _ctx.clickItem(item.id),
-                  class: "item-display",
-                  style: normalizeStyle(_ctx.getItemStyle(item.id)),
-                  key: item.id
-                }, [
-                  createElementVNode("h3", _hoisted_5$4, toDisplayString(_ctx.getItemName(item.id)), 1),
-                  createElementVNode("h3", _hoisted_6$4, toDisplayString(item.amount), 1)
-                ], 12, _hoisted_4$4))
-              }), 128))
-            ]))
-          : (typeof _ctx.chosenId === 'string')
-            ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
+      (!_ctx.chosenItem && Object.keys(_ctx.itemsToDisplay).length > 0)
+        ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.itemsToDisplay, (item) => {
+              return (openBlock(), createElementBlock("button", {
+                onClick: () => _ctx.clickItem(item.id),
+                class: "item-display",
+                style: normalizeStyle(_ctx.getItemStyle(item.id)),
+                key: item.id
+              }, [
+                createElementVNode("h3", _hoisted_4$4, toDisplayString(_ctx.getItemName(item.id)), 1),
+                createElementVNode("h3", _hoisted_5$4, toDisplayString(item.amount), 1)
+              ], 12, _hoisted_3$5))
+            }), 128))
+          ]))
+        : (typeof _ctx.chosenId === 'string')
+          ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
+              createElementVNode("div", _hoisted_7$3, [
                 createElementVNode("div", _hoisted_8$2, [
-                  createElementVNode("button", {
-                    class: "button",
-                    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.closeItem && _ctx.closeItem(...args)))
-                  }, "Back"),
                   createElementVNode("div", {
                     class: "item-display",
                     style: normalizeStyle(_ctx.getItemStyle(_ctx.chosenId))
@@ -8287,17 +8406,25 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
                   createElementVNode("h2", null, toDisplayString(_ctx.getItemName(_ctx.chosenId)), 1),
                   _hoisted_10$2,
                   createElementVNode("h3", null, "Amount: " + toDisplayString(_ctx.chosenItem.amount), 1),
-                  createElementVNode("p", null, toDisplayString(_ctx.chosenItemConf.description), 1)
+                  createElementVNode("p", null, toDisplayString(_ctx.chosenItemConf.description), 1),
+                  createElementVNode("button", {
+                    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.useItem && _ctx.useItem(...args))),
+                    class: normalizeClass(["button", _ctx.canUseChosenItem ? '' : 'disabled'])
+                  }, " Use ", 2)
                 ])
-              ]))
-            : (openBlock(), createElementBlock("div", _hoisted_11$2, _hoisted_13$1))
-      ])
+              ]),
+              createElementVNode("button", {
+                class: "button",
+                onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.closeItem && _ctx.closeItem(...args)))
+              }, toDisplayString('<--'))
+            ]))
+          : (openBlock(), createElementBlock("div", _hoisted_11$2, _hoisted_13$1))
     ]),
     _: 1
   }, 8, ["onClose"]))
 }
 
-var css_248z$c = ".inventory-modal {\n  width: 800px;\n  min-height: 50%;\n}\n\n.inventory-container {\n  display: grid;\n  grid-auto-rows: auto;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 20px 20px;\n}\n\n.item-display {\n  width: 200px;\n  height: 300px;\n  position: relative;\n  background-repeat: no-repeat;\n  background-size: contain;\n}\n\n.item-title {\n  position: absolute;\n  bottom: 0px;\n  text-align: center;\n  width: 100%;\n  color: var(--inventory-text-color);\n  background: var(--inventory-text-background);\n}\n\n.item-amount {\n  position: absolute;\n  top: 0;\n  right: 0;\n  font-weight: 700;\n  font-size: 25px;\n  color: var(--inventory-amount-color);\n  width: 40px;\n  height: 40px;\n  background-color: var(--inventory-amount-background);\n}\n\n.item-description-container {\n  justify-content: space-between;\n  align-items: center;\n}\n\n.item-left {\n  flex-direction: column;\n}\n\n.item-right {\n  flex-direction: column;\n  align-items: baseline;\n}\r\n";
+var css_248z$c = ".inventory-modal {\n  width: 800px;\n  min-height: 50%;\n}\n\n.inventory-container {\n  display: grid;\n  grid-auto-rows: auto;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 20px 20px;\n}\n\n.item-display {\n  width: 200px;\n  height: 300px;\n  position: relative;\n  background-repeat: no-repeat;\n  background-size: contain;\n}\n\n.item-title {\n  position: absolute;\n  bottom: 0px;\n  text-align: center;\n  width: 100%;\n  color: var(--inventory-text-color);\n  background: var(--inventory-text-background);\n}\n\n.item-amount {\n  position: absolute;\n  top: 0;\n  right: 0;\n  font-weight: 700;\n  font-size: 25px;\n  color: var(--inventory-amount-color);\n  width: 40px;\n  height: 40px;\n  background-color: var(--inventory-amount-background);\n}\n\n.item-description-container {\n  justify-content: space-between;\n  align-items: stretch;\n}\n\n.item-left {\n  border: 1px dashed white;\n  flex-direction: column;\n  padding: 10px;\n  justify-content: center;\n}\n\n.item-right {\n  border: 1px dashed white;\n  flex-direction: column;\n  flex-grow: 2;\n  align-items: baseline;\n  padding: 10px;\n}\n";
 styleInject(css_248z$c);
 
 script$b.render = render$b;
@@ -8314,7 +8441,7 @@ var script$c = defineComponent({
         },
     },
     props: {
-        close: (() => { }),
+        close: Function,
     },
     methods: {
         getQuestData(questId) {
@@ -8393,10 +8520,10 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
                 key: quest.id
               }, [
                 createElementVNode("div", {
-                  class: normalizeClass(["quest-header", 
-              quest.state === 'completed'
-                ? 'quest-completed'
-                : 'quest-in-progress'
+                  class: normalizeClass(["quest-header", 
+              quest.state === 'completed'
+                ? 'quest-completed'
+                : 'quest-in-progress'
             ])
                 }, [
                   createElementVNode("h3", _hoisted_3$6, toDisplayString(_ctx.getQuestData(quest.id).title) + " " + toDisplayString(_ctx.getDisplayTextForQuestState(quest)), 1)
@@ -8410,10 +8537,10 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
                           key: objective.id
                         }, [
                           createElementVNode("p", {
-                            class: normalizeClass(["quest-objective-description", 
-                  objective.state === 'completed'
-                    ? 'quest-objective-completed'
-                    : 'quest-objctive-in-progress'
+                            class: normalizeClass(["quest-objective-description", 
+                  objective.state === 'completed'
+                    ? 'quest-objective-completed'
+                    : 'quest-objctive-in-progress'
                 ])
                           }, toDisplayString(_ctx.getObjectiveData(quest.id, objective.id).description), 3)
                         ]))
@@ -8429,7 +8556,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8, ["onClose"]))
 }
 
-var css_248z$d = "/* Write CSS for this vue component */\n\n.quests-modal {\n  width: 100%;\n  min-height: 50%;\n}\n\n/* CSS for .quest-header with row flex */\n\n.quest-header {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.quest-display {\n}\n\n.quest-title {\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n\n.quest-completed {\n  color: var(--completed-quest-title-color);\n}\n\n.quest-in-progress {\n  color: var(--quest-title-color);\n}\n\n.quest-state {\n  font-size: 1.25rem;\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n\n.quest-description {\n  font-size: 1.1rem;\n  text-align: justify;\n  font-style: italic;\n  margin-bottom: 0.5rem;\n}\n\n.quest-objectives-container {\n  margin-left: 10px;\n}\n\n.quest-objective-completed {\n  color: var(--objective-completed-color);\n  text-decoration: line-through;\n}\n\n.quest-objective-in-progress {\n  color: var(--objective-in-progress-color);\n}\n\n.quest-objective-description {\n  font-size: 1rem;\n  margin-bottom: 0.5rem;\n}\r\n";
+var css_248z$d = "/* Write CSS for this vue component */\n\n.quests-modal {\n  width: 100%;\n  min-height: 50%;\n}\n\n/* CSS for .quest-header with row flex */\n\n.quest-header {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.quest-display {\n}\n\n.quest-title {\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n\n.quest-completed {\n  color: var(--completed-quest-title-color);\n}\n\n.quest-in-progress {\n  color: var(--quest-title-color);\n}\n\n.quest-state {\n  font-size: 1.25rem;\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n\n.quest-description {\n  font-size: 1.1rem;\n  text-align: justify;\n  font-style: italic;\n  margin-bottom: 0.5rem;\n}\n\n.quest-objectives-container {\n  margin-left: 10px;\n}\n\n.quest-objective-completed {\n  color: var(--objective-completed-color);\n  text-decoration: line-through;\n}\n\n.quest-objective-in-progress {\n  color: var(--objective-in-progress-color);\n}\n\n.quest-objective-description {\n  font-size: 1rem;\n  margin-bottom: 0.5rem;\n}\n";
 styleInject(css_248z$d);
 
 script$c.render = render$c;
@@ -8719,7 +8846,7 @@ var script$d = defineComponent({
             }
             return {
                 title,
-                text: processText(dialogKey.text),
+                text: dialogKey.text,
                 styleId: dialogKey.speaker,
                 choices: dialogKey.choices,
                 old: index < this.dialog.length - 1,
@@ -8771,26 +8898,26 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
           (_ctx.modal === 'skills')
             ? (openBlock(), createBlock(_component_Skills, {
                 key: 0,
-                onClose: _ctx.closeModal
-              }, null, 8, ["onClose"]))
+                close: _ctx.closeModal
+              }, null, 8, ["close"]))
             : createCommentVNode("", true),
           (_ctx.modal === 'inventory')
             ? (openBlock(), createBlock(_component_Inventory, {
                 key: 1,
-                onClose: _ctx.closeModal
-              }, null, 8, ["onClose"]))
+                close: _ctx.closeModal
+              }, null, 8, ["close"]))
             : createCommentVNode("", true),
           (_ctx.modal === 'quests')
             ? (openBlock(), createBlock(_component_Quests, {
                 key: 2,
-                onClose: _ctx.closeModal
-              }, null, 8, ["onClose"]))
+                close: _ctx.closeModal
+              }, null, 8, ["close"]))
             : createCommentVNode("", true),
           (_ctx.modal === 'menu')
             ? (openBlock(), createBlock(_component_MainMenu, {
                 key: 3,
-                onClose: _ctx.closeModal
-              }, null, 8, ["onClose"]))
+                close: _ctx.closeModal
+              }, null, 8, ["close"]))
             : createCommentVNode("", true),
           createVNode(Transition, { name: "fade" }, {
             default: withCtx(() => [
@@ -8877,7 +9004,7 @@ function render$d(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$e = "#app {\n  background-color: var(--bg-color);\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-color);\n  box-sizing: border-box;\n  overflow: hidden;\n  transform-origin: center center;\n}\n\n.game {\n  background-color: var(--bg-color);\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.interact-button {\n  height: 50px;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 20px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.dialog-container {\n  flex-shrink: 2;\n  /* padding: 20px; */\n  min-height: 100%;\n  width: 100%;\n  background-color: (var(--bg-color));\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  overflow-x: hidden;\n}\n\n.dialog {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.dialog::-webkit-scrollbar {\n  display: none; /* webkit */\n}\n\n.dialog * {\n  overflow-anchor: none;\n}\n\n.background {\n  margin: 0;\n}\n\n#background-canvas {\n  height: 100%;\n}\n\n.anchor {\n  overflow-anchor: auto;\n  height: 1px;\n}\n\n.menu-toggle {\n  position: fixed;\n  bottom: 0px;\n  right: 15%;\n  z-index: 2;\n}\n\n#game-title-container {\n  margin-bottom: 50px;\n}\n\n#game-title-text {\n  text-align: center;\n  font-size: 50px;\n}\n\n.menu-button {\n  font-size: 25px;\n}\r\n";
+var css_248z$e = "#app {\n  background-color: var(--bg-color);\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-color);\n  box-sizing: border-box;\n  overflow: hidden;\n  transform-origin: center center;\n}\n\n.game {\n  background-color: var(--bg-color);\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.interact-button {\n  height: 50px;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 20px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.dialog-container {\n  flex-shrink: 2;\n  /* padding: 20px; */\n  min-height: 100%;\n  width: 100%;\n  background-color: (var(--bg-color));\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  overflow-x: hidden;\n}\n\n.dialog {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.dialog::-webkit-scrollbar {\n  display: none; /* webkit */\n}\n\n.dialog * {\n  overflow-anchor: none;\n}\n\n.background {\n  margin: 0;\n}\n\n#background-canvas {\n  height: 100%;\n}\n\n.anchor {\n  overflow-anchor: auto;\n  height: 1px;\n}\n\n.menu-toggle {\n  position: fixed;\n  bottom: 0px;\n  right: 15%;\n  z-index: 2;\n}\n\n#game-title-container {\n  margin-bottom: 50px;\n}\n\n#game-title-text {\n  text-align: center;\n  font-size: 50px;\n}\n\n.menu-button {\n  font-size: 25px;\n}\n";
 styleInject(css_248z$e);
 
 script$d.render = render$d;
@@ -9164,8 +9291,7 @@ const ifFunction = async (cmd) => {
             branch: newBranch,
             currentIndex: 0,
         };
-        vmStore.addStack(newStack);
-        return vmStore.runLine();
+        return vmStore.addStack(newStack);
     }
     return vmStore.nextLine();
 };
@@ -9390,8 +9516,7 @@ const addItemPlugin = new CommandPlugin('add_item', async (cmd) => {
         amount,
     });
     return useVM().nextLine();
-}, generateParser('add_item'));
-
+}, generateParser('add_item'));
 // Write a CommandPlugin for removeing items to the inventory store
 const removeItemPlugin = new CommandPlugin('remove_item', async (cmd) => {
     const id = cmd.args[0];
@@ -9402,7 +9527,21 @@ const removeItemPlugin = new CommandPlugin('remove_item', async (cmd) => {
         amount,
     });
     return useVM().nextLine();
-}, generateParser('remove_item'));
+}, generateParser('remove_item'));
+// Write a CommandPlugin for enabling an interactiongTag in the inventory store
+const enableInteractionPlugin = new CommandPlugin('enable_interaction', async (cmd) => {
+    const tag = cmd.args[0];
+    const inventory = useInventory();
+    inventory.enableInteraction(tag);
+    return useVM().nextLine();
+}, generateParser('enable_interaction'));
+// Write a CommandPlugin for disabling an interactiongTag in the inventory store
+const disableInteractionPlugin = new CommandPlugin('disable_interaction', async (cmd) => {
+    const tag = cmd.args[0];
+    const inventory = useInventory();
+    inventory.disableInteraction(tag);
+    return useVM().nextLine();
+}, generateParser('disable_interaction'));
 
 // Write a CommandPlugin for starting a quest with the useQuests quests store
 const startQuestPlugin = new CommandPlugin('start_quest', async (cmd) => {
@@ -9439,8 +9578,16 @@ const completeQuestPlugin = new CommandPlugin('complete_quest', async (cmd) => {
     return useVM().nextLine();
 }, generateParser('complete_quest'));
 
+// Write a CommandPlugin for running a label using the runLabelFunction of the useVM store
+const runLabelPlugin = new CommandPlugin('run_label', async (cmd) => {
+    const label = cmd.args[0];
+    if (!label) {
+        error(`run_label command needs a label to argument run`);
+    }
+    await useVM().runLabelFunction(label);
+}, generateParser('run_label'));
+
 function registerBaseCommands(vm) {
-    vm.addCommand(addItemPlugin);
     vm.addCommand(addLevelPlugin);
     vm.addCommand(addStatPlugin);
     vm.addCommand(addXpPlugin);
@@ -9452,7 +9599,6 @@ function registerBaseCommands(vm) {
     vm.addCommand(notifyPlugin);
     vm.addCommand(pauseCommand);
     vm.addCommand(playCommand);
-    vm.addCommand(removeItemPlugin);
     vm.addCommand(setButtonCommand);
     vm.addCommand(setScreenCommand);
     vm.addCommand(setStatCommand);
@@ -9461,11 +9607,19 @@ function registerBaseCommands(vm) {
     vm.addCommand(talkCommand);
     vm.addCommand(textCommandPlugin);
     vm.addCommand(waitCommand);
+    // functions and labels
+    vm.addCommand(jumpCommand);
+    vm.addCommand(runLabelPlugin);
     // Quests
     vm.addCommand(startQuestPlugin);
     vm.addCommand(startObjectivePlugin);
     vm.addCommand(completeObjectivePlugin);
     vm.addCommand(completeQuestPlugin);
+    // Inventory
+    vm.addCommand(addItemPlugin);
+    vm.addCommand(removeItemPlugin);
+    vm.addCommand(enableInteractionPlugin);
+    vm.addCommand(disableInteractionPlugin);
 }
 
 class NarratPlugin {
@@ -9508,7 +9662,7 @@ async function startApp(config, options) {
     });
     registerBaseCommands(vm);
     logManager.setupDebugger(options.debug);
-    console.log('%c Narrat game engine – 1.2.1 - June 25, 2022 14:20:12', 'background: #222; color: #bada55');
+    console.log('%c Narrat game engine – 1.3.2 - June 26, 2022 18:33:37', 'background: #222; color: #bada55');
     vm.callHook('onNarratSetup');
     app.mount('#game-holder');
     if (options.debug) {