narrat 0.9.3 → 0.11.0

package/lib/index.esm.js

@@ -1,6 +1,6 @@
-// Version: 0.9.3 - June 5, 2022 20:22:00
+// Version: 0.11.0 - June 15, 2022 15:25:13
 import 'es6-promise/auto';
-import { ref, reactive, readonly, defineComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, Fragment, renderList, createBlock, Transition, withCtx, normalizeClass, renderSlot, createTextVNode, resolveComponent, withDirectives, vModelText, toDisplayString, TransitionGroup, createVNode, createApp } from 'vue';
+import { ref, reactive, readonly, defineComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, Fragment, renderList, normalizeClass, createBlock, Transition, withCtx, renderSlot, createTextVNode, resolveComponent, withDirectives, vModelText, toDisplayString, TransitionGroup, createVNode, createApp } from 'vue';
 import { createLogger, createStore } from 'vuex';
 
 function styleInject(css, ref) {
@@ -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}\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@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}\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";
 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;}};
@@ -135,7 +135,7 @@ var script = defineComponent({
         dialogBoxStyle() {
             const style = getCharacterStyle(this.options.styleId);
             const css = {
-                opacity: this.options.old ? '0.5' : '1',
+                opacity: this.options.old ? '0.7' : '1',
             };
             if (!this.options.title) {
                 css.marginTop = '-20px';
@@ -158,7 +158,10 @@ var script = defineComponent({
             return undefined;
         },
         canInteract() {
-            return this.active && !this.passed && this.options.interactive;
+            return (this.active &&
+                !this.passed &&
+                this.options.interactive &&
+                !this.$store.state.paused);
         },
     },
     methods: {
@@ -174,6 +177,11 @@ var script = defineComponent({
             }
             return style;
         },
+        dialogClass(choice) {
+            if (!choice.allowed) {
+                return 'strike-anim';
+            }
+        },
     },
 });
 
@@ -221,10 +229,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               return (openBlock(), createElementBlock("p", {
                 key: index,
                 style: normalizeStyle(_ctx.dialogStyle(choice)),
+                class: normalizeClass([_ctx.dialogClass(choice), "dialog-choice override"]),
                 onClick: $event => (_ctx.chooseOption(choice)),
-                class: "dialog-choice override",
                 innerHTML: `${index + 1}. –  ${choice.choice}`
-              }, null, 12, _hoisted_6))
+              }, null, 14, _hoisted_6))
             }), 128))
           ]))
         : (_ctx.canInteract)
@@ -239,7 +247,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: orange;\n}\n\n.dialog-choice:hover {\n  color: var(--text-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}\r\n";
 styleInject(css_248z$1);
 
 script.render = render;
@@ -275,6 +283,9 @@ const defaultConfig = {
     },
     buttons: {},
     skills: {},
+    skillOptions: {
+        xpPerLevel: 10,
+    },
     skillChecks: {
         rollRange: 100,
         skillMultiplier: 10,
@@ -319,8 +330,22 @@ function setConfig(conf) {
 }
 function getConfig() {
     return config$1;
+}
+function getSkillConfig(commit, id) {
+    const skill = config$1.skills[id];
+    if (!skill) {
+        error(commit, `Skill config for skill ${id} doesn't exist`);
+    }
+    return skill;
 }
 
+var config$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  setConfig: setConfig,
+  getConfig: getConfig,
+  getSkillConfig: getSkillConfig
+});
+
 var script$1 = defineComponent({
     props: {
         pictureUrl: String,
@@ -367,21 +392,20 @@ styleInject(css_248z$2);
 
 script$1.render = render$1;
 
-class Logger {
+class LogManager {
     debug;
-    constructor(debug) {
-        this.debug = debug;
-    }
-    setDebug(debug) {
+    logger = {
+        log: () => { },
+    };
+    setupDebugger(debug) {
         this.debug = debug;
-    }
-    log(...args) {
-        if (this.debug) {
-            console.log(...args);
+        if (debug) {
+            this.logger.log = console.log.bind(window.console);
         }
     }
 }
-const logger = new Logger(false);
+const logManager = new LogManager();
+const logger = logManager.logger;
 
 function getPlayTime(startedAt, previousTime) {
     return Date.now() - startedAt + previousTime;
@@ -2353,19 +2377,21 @@ var script$3 = defineComponent({
         open() {
             this.showDebug = true;
             this.$nextTick(() => {
-                const variablesEditor = new xJ({
+                // eslint-disable-next-line no-unused-vars
+                const _variablesEditor = new xJ({
                     target: this.$refs.variablesViewer,
                     props: {
                         content: {
                             text: undefined,
                             json: this.variables,
                         },
-                        onChange: (updatedContent, previousContent, patchResult) => {
+                        onChange: (updatedContent) => {
                             this.$store.commit('overrideData', updatedContent.json);
                         },
                     },
                 });
-                const stateEditor = new xJ({
+                // eslint-disable-next-line no-unused-vars
+                const _stateEditor = new xJ({
                     target: this.$refs.stateViewer,
                     props: {
                         content: {
@@ -2596,9 +2622,10 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                   (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.matches, (match, index) => {
                     return (openBlock(), createElementBlock("div", {
                       class: "search-result",
-                      style: normalizeStyle(_ctx.getMatchResultStyle(index))
+                      style: normalizeStyle(_ctx.getMatchResultStyle(index)),
+                      key: index
                     }, toDisplayString(match), 5))
-                  }), 256))
+                  }), 128))
                 ]))
               : (openBlock(), createElementBlock("div", _hoisted_8, _hoisted_10))
           ]),
@@ -6262,6 +6289,7 @@ howler.Howler.volume(0.5);
 async function loadAudioAssets(config) {
     logger.log(`Loading audio`);
     const loadingPromises = [];
+    howler.Howler.volume(config.audioOptions.volume);
     for (const key in config.music) {
         // Backward compatibility with old music list
         const musicConf = {
@@ -6310,6 +6338,9 @@ async function changeMusic(ctx, newMusic) {
     if (ctx.state.audio.currentMusic) {
         if (oldHowler) {
             oldMusic.fade(oldMusic.volume(), 0, audioOptions.musicFadeOutTime * 1000, oldHowler);
+            setTimeout(() => {
+                oldMusic.stop(oldHowler);
+            }, audioOptions.musicFadeOutTime * 1000);
         }
     }
     if (oldMusic) {
@@ -6342,18 +6373,12 @@ function stopAudio(commit, key) {
     if (sound) {
         sound.stop();
     }
-    else {
-        error(commit, `Sound effect ${key} not found!`);
-    }
 }
 function pauseAudio(commit, key) {
     const sound = getAudio(key);
     if (sound) {
         sound.pause();
     }
-    else {
-        error(commit, `Sound effect ${key} not found!`);
-    }
 }
 
 function debounce(func, waitMilliseconds = 50, options = {}) {
@@ -6408,127 +6433,448 @@ function debounce(func, waitMilliseconds = 50, options = {}) {
     return debouncedFunction;
 }
 
-var script$8 = defineComponent({
-    components: {},
-    props: {},
-    data() {
-        return {
-            activeMenu: false,
-        };
-    },
-    mounted() {
-        document.addEventListener('keydown', (event) => {
-            const key = event.key;
-            if (key === 'Escape') {
-                this.toggleMenu();
-            }
+function createSkillCheckState() {
+    const skillCheck = {
+        passed: false,
+        available: true,
+    };
+    return skillCheck;
+}
+function getSkillCheckState(ctx, skillCheckId) {
+    let skillCheck = ctx.state.skillChecks[skillCheckId];
+    if (!skillCheck) {
+        skillCheck = createSkillCheckState();
+        ctx.commit('setupSkillCheck', {
+            skillCheck,
+            skillCheckId,
         });
-    },
-    methods: {
-        openMenu() {
-            this.$store.commit('openModal', 'menu');
-        },
-        openSkills() {
-            this.$store.commit('openModal', 'skills');
-        },
-        closeMenu() {
-            this.$store.commit('closeModal');
-        },
-        toggleMenu() {
-            this.$store.commit('toggleMenu');
-        },
-    },
-    computed: {
-        showSkills() {
-            if (Object.entries(getConfig().skills).length > 0) {
-                return true;
+    }
+    return skillCheck;
+}
+function getSkillCheckDifficultyScore(value, level) {
+    return value - level * getConfig().skillChecks.skillMultiplier;
+}
+function getSkillCheckDifficultyText(value, level) {
+    const difficultyScore = getSkillCheckDifficultyScore(value, level);
+    const checks = getConfig().skillChecks;
+    let found = false;
+    let i = 0;
+    let checkText = checks.difficultyText[0][1];
+    while (!found) {
+        if (checks.difficultyText.length > i) {
+            if (difficultyScore >= checks.difficultyText[i][0]) {
+                checkText = checks.difficultyText[i][1];
             }
-            return false;
-        },
-    },
-});
-
-const _hoisted_1$7 = { class: "menu-container" };
-
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
-    createElementVNode("button", {
-      class: "button menu-toggle-button",
-      id: "menu-button",
-      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.openMenu && _ctx.openMenu(...args)))
-    }, " Menu "),
-    (_ctx.showSkills)
-      ? (openBlock(), createElementBlock("button", {
-          key: 0,
-          class: "button menu-toggle-button",
-          id: "skills-menu-button",
-          onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.openSkills && _ctx.openSkills(...args)))
-        }, " Skills "))
-      : createCommentVNode("", true)
-  ]))
+            else {
+                found = true;
+            }
+        }
+        else {
+            found = true;
+        }
+        i++;
+    }
+    return checkText;
+}
+function getSkillCheckText({ context, skill, skillCheckId, value, }) {
+    const skillCheckState = getSkillCheckState(context, skillCheckId);
+    const skillConfig = getSkillConfig(context.commit, skill);
+    const level = context.state.skills[skill].level;
+    const difficultyText = getSkillCheckDifficultyText(value, level);
+    let allowed = true;
+    let text = `<span class='skill-check'>[<span class='skill-check-name'>${skillConfig.name}</span> - `;
+    if (skillCheckState.available) {
+        text += ` <span class='skill-check-difficulty'>${difficultyText}</span>]</span>`;
+    }
+    else if (skillCheckState.passed) {
+        text = '';
+    }
+    else {
+        allowed = false;
+        text += ` <span class='skill-check-difficulty'>${difficultyText}</span> - <span class='skill-check-failed'>FAILED</span>]</span>`;
+    }
+    return {
+        difficultyText: text,
+        allowed,
+    };
+}
+function getPassiveSkillCheckText(ctx, success, params) {
+    const skillConf = getSkillConfig(ctx.commit, params.skill);
+    const difficultyText = getSkillCheckDifficultyText(params.value, ctx.state.skills[params.skill].level);
+    return `<span class='passive-skill-check skill-check'>[<span class='skill-check-name'>${skillConf.name}</span> - <span class='skill-check-difficulty'>${difficultyText}</span> - ${success
+        ? '<span class="skill-check-success">Success</span>'
+        : '<span class="skill-check-failed">Failure</span>'}]</span>`;
+}
+function calculateSkillCheckRoll(state, skill) {
+    const { skillChecks } = getConfig();
+    const unmodifiedRoll = Math.floor(Math.random() * skillChecks.rollRange);
+    const rollModifier = state.skills[skill].level * skillChecks.skillMultiplier;
+    const roll = unmodifiedRoll + rollModifier;
+    logger.log(`[SKILL CHECK] Roll: ${roll}. (Base roll: ${unmodifiedRoll}, modifier: ${rollModifier} - Skill level: ${state.skills[skill].level})`);
+    return {
+        roll,
+        unmodifiedRoll,
+    };
+}
+function resolveSkillCheck(state, params) {
+    const { skills, skillChecks } = getConfig();
+    let success = true;
+    const { roll } = calculateSkillCheckRoll(state, params.skill);
+    if (roll <= skillChecks.failureChance - 1) {
+        success = false;
+    }
+    const skill = skills[params.skill];
+    if (roll < params.value) {
+        success = false;
+    }
+    logger.log(`[SKILL CHECK ${skill.name}]: ${success ? '✅' : '❌'}`, `(${params.id}) - ${roll}/${params.value}`);
+    return success;
 }
 
-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";
-styleInject(css_248z$9);
-
-script$8.render = render$8;
-
-var script$9 = defineComponent({
-    components: {
-        Modal: script$2,
-        VolumeControls: script$4,
-    },
-    props: {},
-    data() { },
-    mounted() { },
-    methods: {
-        quit() {
-            window.close();
-            // quit
-        },
-        mainMenu() {
-            this.$store.commit('reset');
-            this.$store.commit('setFlowState', 'menu');
-        },
-        getPlayTimeString() {
-            const time = getPlayTime(this.$store.state.playTime.start, this.$store.state.playTime.previousPlaytime);
-            return toHHMMSS(time / 1000);
+function processSkillCheck(ctx, skillcheck) {
+    return runSkillCheck(ctx, {
+        skill: skillcheck.skill,
+        value: skillcheck.value,
+        id: skillcheck.id,
+        success: skillcheck.success.text,
+        failure: skillcheck.failure.text,
+    });
+}
+function runSkillCheck(ctx, params) {
+    const { state } = ctx;
+    const success = resolveSkillCheck(state, params);
+    writeText(ctx, getPassiveSkillCheckText(ctx, success, params));
+    if (success) {
+        ctx.commit('passSkillCheck', params.id);
+        return true;
+    }
+    ctx.commit('failSkillCheck', params.id);
+    return false;
+}
+function runConditionCommand(ctx, command) {
+    const options = command.options;
+    const result = runCondition(ctx, options.condition);
+    logger.log(result);
+    if (result) {
+        return options.success;
+    }
+    if (!result && options.failure) {
+        return options.failure;
+    }
+    return undefined;
+}
+function writeText(ctx, text) {
+    const dialog = {
+        speaker: 'game',
+        text,
+        interactive: false,
+    };
+    ctx.commit('addDialog', {
+        dialog,
+    });
+}
+function runCondition(ctx, condition) {
+    return conditionFunction(ctx, condition);
+}
+function conditionFunction(ctx, condition) {
+    const { state } = ctx;
+    const context = {
+        data: state.machine.data,
+        skills: state.skills,
+        skillChecks: state.skillChecks,
+        stats: state.hudStats,
+        roll: (checkId, skill, value) => {
+            const skillCheckState = getSkillCheckState(ctx, checkId);
+            if (skillCheckState) {
+                if (skillCheckState.passed) {
+                    return true;
+                }
+                if (!skillCheckState.available) {
+                    return false;
+                }
+            }
+            return runSkillCheck(ctx, {
+                skill,
+                value,
+                id: checkId,
+            });
         },
-    },
-    computed: {},
-});
-
-const _hoisted_1$8 = /*#__PURE__*/createElementVNode("h3", { class: "title" }, "Menu", -1);
-const _hoisted_2$6 = { class: "menu-content" };
-
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VolumeControls = resolveComponent("VolumeControls");
-  const _component_modal = resolveComponent("modal");
+    };
+    return evalInContext(`(${condition})`, context);
+}
+function evalInContext(script, context) {
+    // # Return the results of the in-line anonymous function we .call with the passed context
+    return function () {
+        return eval(script);
+    }.call(context);
+}
+async function textCommand(commit, dialog) {
+    commit('addDialog', {
+        dialog,
+    });
+}
+function getLine(lines, index) {
+    if (index < lines.length)
+        return lines[index];
+}
 
-  return (openBlock(), createBlock(_component_modal, {
-    class: "menu",
-    onClose: _cache[2] || (_cache[2] = $event => (_ctx.$emit('close'))),
-    containerCssClass: "menu-modal"
-  }, {
-    header: withCtx(() => [
-      _hoisted_1$8
-    ]),
-    body: withCtx(() => [
-      createElementVNode("div", _hoisted_2$6, [
-        createElementVNode("h3", null, "Play time: " + toDisplayString(_ctx.getPlayTimeString()), 1),
-        createVNode(_component_VolumeControls),
-        createElementVNode("button", {
-          class: "button title quit-button",
-          onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.mainMenu && _ctx.mainMenu(...args)))
-        }, " Main Menu "),
-        createElementVNode("button", {
+async function runLine(context) {
+    const cmd = context.getters.currentLine;
+    await runCommand(context, cmd);
+}
+class VM$1 {
+    plugins = [];
+    commands = {};
+    addCommand(command) {
+        this.commands[command.keyword] = command;
+    }
+    addPlugin(plugin) {
+        this.plugins.push(plugin);
+        if (plugin.customCommands) {
+            for (const command of plugin.customCommands) {
+                this.addCommand(command);
+            }
+        }
+    }
+    callHook(hookName, ...args) {
+        for (const plugin of this.plugins) {
+            if (typeof plugin[hookName] === 'function') {
+                plugin[hookName](...args);
+            }
+        }
+    }
+}
+const vm$1 = new VM$1();
+async function runCommand(context, cmd, choices) {
+    const { state, commit } = context;
+    try {
+        const commandPlugin = vm$1.commands[cmd.commandType];
+        if (commandPlugin) {
+            commandPlugin.runner(context, cmd, choices);
+        }
+    }
+    catch (err) {
+        logger.log(`Error at: `, state.machine.stack[state.machine.stack.length - 1].label);
+        console.error(err);
+        error(commit, `Narrat script runtime error at  <span class="error-filename">${cmd.fileName}:${cmd.line + 1}</span>
+      <b>${err}</b>
+      Script: ${cmd.code}
+      Label: ${state.machine.stack[state.machine.stack.length - 1].label}`);
+    }
+}
+async function playerAnswered(context, choiceIndex) {
+    const { commit, dispatch } = context;
+    const cmd = context.getters.currentLine;
+    switch (cmd.commandType) {
+        case 'choice':
+            const options = cmd.options;
+            const choice = options.choices[choiceIndex];
+            let playerText = choice.choice;
+            let newBranch;
+            const skillcheck = choice.skillCheck;
+            if (skillcheck) {
+                const skillCheckState = getSkillCheckState(context, choice.skillCheck.id);
+                if (skillCheckState.passed) {
+                    newBranch = skillcheck.success.branch;
+                    playerText = skillcheck.success.text;
+                }
+                else {
+                    const result = processSkillCheck(context, skillcheck);
+                    const winner = result ? skillcheck.success : skillcheck.failure;
+                    newBranch = winner.branch;
+                    playerText = undefined;
+                }
+            }
+            else {
+                newBranch = choice.branch;
+            }
+            if (playerText) {
+                // If the choice involves printing a player dialog, show it
+                const dialog = {
+                    speaker: 'player',
+                    text: playerText,
+                    interactive: false,
+                };
+                commit('addDialog', { dialog });
+            }
+            if (newBranch) {
+                const newStack = {
+                    currentIndex: 0,
+                    branch: newBranch,
+                };
+                commit('addStack', newStack);
+                dispatch('runLine');
+            }
+            else {
+                dispatch('nextLine');
+            }
+            break;
+        default:
+            dispatch('nextLine');
+    }
+}
+async function nextLine(ctx) {
+    const { state, getters, dispatch, commit } = ctx;
+    if (state.machine.stack.length === 0) {
+        finishGame(ctx);
+        return;
+    }
+    const machineHead = getters.machineHead;
+    if (machineHead.currentIndex < machineHead.branch.length - 1) {
+        commit('nextLine');
+    }
+    else {
+        // This branch is finished, go back to previous stack
+        commit('previousStack');
+        return dispatch('nextLine');
+    }
+    if (state.machine.stack.length === 0) {
+        finishGame(ctx);
+    }
+    else {
+        return dispatch('runLine');
+    }
+}
+function finishGame({ commit, state }) {
+    if (state.options.debug) {
+        commit('addDialog', {
+            dialog: {
+                speaker: 'game',
+                text: '[DEBUG] Game Script is finished. This is the end of the game flow. This message only appears in debug mode.',
+            },
+        });
+    }
+}
+
+var script$8 = defineComponent({
+    components: {},
+    props: {},
+    data() {
+        return {
+            activeMenu: false,
+        };
+    },
+    mounted() {
+        document.addEventListener('keydown', (event) => {
+            const key = event.key;
+            if (key === 'Escape') {
+                this.toggleMenu();
+            }
+        });
+        vm$1.callHook('onGameMounted');
+    },
+    unmounted() {
+        vm$1.callHook('onGameUnmounted');
+    },
+    methods: {
+        openMenu() {
+            this.$store.commit('openModal', 'menu');
+        },
+        openSkills() {
+            this.$store.commit('openModal', 'skills');
+        },
+        closeMenu() {
+            this.$store.commit('closeModal');
+        },
+        toggleMenu() {
+            this.$store.commit('toggleMenu');
+        },
+    },
+    computed: {
+        showSkills() {
+            if (Object.entries(getConfig().skills).length > 0) {
+                return true;
+            }
+            return false;
+        },
+    },
+});
+
+const _hoisted_1$7 = { class: "menu-container" };
+
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
+    createElementVNode("button", {
+      class: "button menu-toggle-button",
+      id: "menu-button",
+      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.openMenu && _ctx.openMenu(...args)))
+    }, " Menu "),
+    (_ctx.showSkills)
+      ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          class: "button menu-toggle-button",
+          id: "skills-menu-button",
+          onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.openSkills && _ctx.openSkills(...args)))
+        }, " Skills "))
+      : createCommentVNode("", true)
+  ]))
+}
+
+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";
+styleInject(css_248z$9);
+
+script$8.render = render$8;
+
+var script$9 = defineComponent({
+    components: {
+        Modal: script$2,
+        VolumeControls: script$4,
+    },
+    props: {},
+    data() { },
+    mounted() { },
+    methods: {
+        quit() {
+            window.close();
+            // quit
+        },
+        close() {
+            this.$emit('close');
+        },
+        mainMenu() {
+            this.$store.dispatch('menuReturn');
+            this.$store.commit('setFlowState', 'menu');
+            this.close();
+        },
+        getPlayTimeString() {
+            const time = getPlayTime(this.$store.state.playTime.start, this.$store.state.playTime.previousPlaytime);
+            return toHHMMSS(time / 1000);
+        },
+    },
+    computed: {},
+});
+
+const _hoisted_1$8 = /*#__PURE__*/createElementVNode("h3", { class: "title" }, "Menu", -1);
+const _hoisted_2$6 = { class: "menu-content" };
+
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VolumeControls = resolveComponent("VolumeControls");
+  const _component_modal = resolveComponent("modal");
+
+  return (openBlock(), createBlock(_component_modal, {
+    class: "menu",
+    onClose: _ctx.close,
+    containerCssClass: "menu-modal"
+  }, {
+    header: withCtx(() => [
+      _hoisted_1$8
+    ]),
+    body: withCtx(() => [
+      createElementVNode("div", _hoisted_2$6, [
+        createElementVNode("h3", null, "Play time: " + toDisplayString(_ctx.getPlayTimeString()), 1),
+        createVNode(_component_VolumeControls),
+        createElementVNode("button", {
+          class: "button title quit-button",
+          onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.mainMenu && _ctx.mainMenu(...args)))
+        }, " Main Menu "),
+        createElementVNode("button", {
           class: "button title quit-button",
           onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.quit && _ctx.quit(...args)))
         }, "Exit")
       ])
     ]),
     _: 1
-  }))
+  }, 8, ["onClose"]))
 }
 
 var css_248z$a = ".quit-button {\n  margin: 20px;\n  text-align: center;\n}\r\n";
@@ -6565,6 +6911,11 @@ var script$a = defineComponent({
         closeSkill() {
             this.chosenSkill = false;
         },
+        xpBarWidth(xp) {
+            return {
+                width: `${Math.floor((xp / this.xpPerLevel) * 100)}%`,
+            };
+        },
     },
     computed: {
         skillsToDisplay() {
@@ -6584,6 +6935,9 @@ var script$a = defineComponent({
         skillConf() {
             return getConfig().skills;
         },
+        xpPerLevel() {
+            return getConfig().skillOptions.xpPerLevel;
+        },
     },
 });
 
@@ -6595,14 +6949,16 @@ const _hoisted_3$4 = {
 };
 const _hoisted_4$3 = ["onClick"];
 const _hoisted_5$3 = { class: "skill-title" };
-const _hoisted_6$3 = { class: "skill-level" };
-const _hoisted_7$2 = {
+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_8$1 = { class: "flex skill-left" };
-const _hoisted_9$1 = { class: "flex skill-right" };
-const _hoisted_10$1 = /*#__PURE__*/createElementVNode("hr", { class: "hr-solid" }, null, -1);
+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);
 
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_modal = resolveComponent("modal");
@@ -6623,16 +6979,24 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
                 return (openBlock(), createElementBlock("button", {
                   onClick: () => _ctx.clickSkill(key),
                   class: "skill-display",
-                  style: normalizeStyle(_ctx.getSkillStyle(key))
+                  style: normalizeStyle(_ctx.getSkillStyle(key)),
+                  key: key
                 }, [
                   createElementVNode("h3", _hoisted_5$3, toDisplayString(_ctx.getSkillName(key)), 1),
-                  createElementVNode("h3", _hoisted_6$3, toDisplayString(skill.level), 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))
-              }), 256))
+              }), 128))
             ]))
           : (typeof _ctx.chosenSkill === 'string')
-            ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
-                createElementVNode("div", _hoisted_8$1, [
+            ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
+                createElementVNode("div", _hoisted_10$1, [
                   createElementVNode("button", {
                     class: "button",
                     onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.closeSkill && _ctx.closeSkill(...args)))
@@ -6642,9 +7006,9 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
                     style: normalizeStyle(_ctx.getSkillStyle(_ctx.chosenSkill))
                   }, null, 4)
                 ]),
-                createElementVNode("div", _hoisted_9$1, [
+                createElementVNode("div", _hoisted_11$1, [
                   createElementVNode("h2", null, toDisplayString(_ctx.getSkillName(_ctx.chosenSkill)), 1),
-                  _hoisted_10$1,
+                  _hoisted_12$1,
                   createElementVNode("h3", null, "Level: " + toDisplayString(_ctx.skills[_ctx.chosenSkill].level), 1),
                   createElementVNode("p", null, toDisplayString(_ctx.skillConf[_ctx.chosenSkill].description), 1)
                 ])
@@ -6656,7 +7020,7 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
   }, 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: 40px;\n  height: 40px;\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}\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: 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";
 styleInject(css_248z$b);
 
 script$a.render = render$a;
@@ -6684,6 +7048,7 @@ var script$b = defineComponent({
             gameLoaded: false,
             loadingStep: 'Loading',
             loadingPercentage: 0.1,
+            hasSave: false,
         };
     },
     props: {
@@ -6691,6 +7056,7 @@ var script$b = defineComponent({
         options: Object,
     },
     async mounted() {
+        vm$1.callHook('onAppMounted');
         this.loadingStep = 'Characters';
         const charsFile = await getFile('data/characters.json');
         await setCharactersConfig(JSON.parse(charsFile));
@@ -6702,11 +7068,17 @@ var script$b = defineComponent({
         this.loadingPercentage = 0.7;
         this.loadingStep = 'Audio';
         await loadAudioAssets(getConfig());
+        vm$1.callHook('onAssetsLoaded');
         this.loadingPercentage = 0.95;
         this.loadingStep = 'Starting...';
         await this.setupMachine();
+        vm$1.callHook('onGameSetup');
         this.loadingPercentage = 0.1;
         this.gameLoaded = true;
+        const save = this.getSaveFile();
+        if (save) {
+            this.hasSave = true;
+        }
         window.addEventListener('resize', debounce(() => {
             this.updateScreenSize();
         }, 100, {
@@ -6750,10 +7122,6 @@ var script$b = defineComponent({
             }
             return undefined;
         },
-        saveFile() {
-            const saveString = localStorage.getItem(SAVE_FILE);
-            return saveString;
-        },
         backgroundStyle() {
             let height;
             if (this.layoutMode === 'vertical') {
@@ -6899,15 +7267,19 @@ var script$b = defineComponent({
                 config: getConfig(),
             });
         },
+        getSaveFile() {
+            return localStorage.getItem(SAVE_FILE);
+        },
         async startGame() {
             this.$store.dispatch('startMachine');
             await this.$store.dispatch('runLine');
             this.$store.commit('setFlowState', 'playing');
+            this.hasSave = true;
             this.$store.dispatch('saveGame');
         },
         async loadGame() {
             this.$store.dispatch('startMachine');
-            await this.$store.dispatch('loadGame', this.saveFile);
+            await this.$store.dispatch('loadGame', this.getSaveFile());
             this.$store.commit('setFlowState', 'playing');
         },
         isDialogActive(i) {
@@ -7028,7 +7400,8 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
                 createElementVNode("canvas", {
                   width: _ctx.layoutWidth,
                   height: _ctx.layoutHeight,
-                  id: "background-canvas"
+                  id: "background-canvas",
+                  class: "narrat-canvas"
                 }, null, 8, _hoisted_1$a)
               ], 4))
             : createCommentVNode("", true),
@@ -7070,7 +7443,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
                 class: "button menu-button start-button override",
                 onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.startGame && _ctx.startGame(...args)))
               }, " Start Game "),
-              (_ctx.saveFile)
+              (_ctx.hasSave)
                 ? (openBlock(), createElementBlock("button", {
                     key: 0,
                     class: "button menu-button continue-button override",
@@ -7097,633 +7470,15 @@ styleInject(css_248z$c);
 
 script$b.render = render$b;
 
-function createSkillCheckState() {
-    const skillCheck = {
-        passed: false,
-        available: true,
-    };
-    return skillCheck;
-}
-function getSkillCheckState(ctx, skillCheckId) {
-    let skillCheck = ctx.state.skillChecks[skillCheckId];
-    if (!skillCheck) {
-        skillCheck = createSkillCheckState();
-        ctx.commit('setupSkillCheck', {
-            skillCheck,
-            skillCheckId,
-        });
-    }
-    return skillCheck;
-}
-
-function processSkillCheck(ctx, skillcheck) {
-    return runSkillCheck(ctx, {
-        skill: skillcheck.skill,
-        value: skillcheck.value,
-        id: skillcheck.id,
-        success: skillcheck.success.text,
-        failure: skillcheck.failure.text,
-    });
-}
-function runSkillCheck(ctx, params) {
-    const { state } = ctx;
-    const { skills, skillChecks } = getConfig();
-    let success = true;
-    let roll = Math.floor(Math.random() * skillChecks.rollRange);
-    if (roll <= skillChecks.failureChance - 1) {
-        success = false;
-    }
-    roll += state.skills[params.skill].level * skillChecks.skillMultiplier;
-    const skill = skills[params.skill];
-    logger.log(`roll `, roll, params.value);
-    if (roll < params.value) {
-        success = false;
-    }
-    if (success) {
-        ctx.commit('passSkillCheck', params.id);
-        writeText(ctx, `[${skill.name} - Success] ${params.success || ''}`);
-        return true;
-    }
-    ctx.commit('failSkillCheck', params.id);
-    writeText(ctx, `[${skill.name} - Failure] ${params.failure || ''}`);
-    return false;
-}
-function runConditionCommand(ctx, command) {
-    const options = command.options;
-    const result = runCondition(ctx, options.condition);
-    logger.log(result);
-    if (result) {
-        return options.success;
-    }
-    if (!result && options.failure) {
-        return options.failure;
-    }
-    return undefined;
-}
-function writeText(ctx, text) {
-    const dialog = {
-        speaker: 'game',
-        text,
-        interactive: false,
-    };
-    ctx.commit('addDialog', {
-        dialog,
-    });
-}
-function runCondition(ctx, condition) {
-    return conditionFunction(ctx, condition);
-}
-function conditionFunction(ctx, condition) {
-    const { state } = ctx;
-    const context = {
-        data: state.machine.data,
-        skills: state.skills,
-        skillChecks: state.skillChecks,
-        stats: state.hudStats,
-        roll: (checkId, skill, value) => {
-            const skillCheckState = getSkillCheckState(ctx, checkId);
-            if (skillCheckState) {
-                if (skillCheckState.passed) {
-                    return true;
-                }
-                if (!skillCheckState.available) {
-                    return false;
-                }
-            }
-            return runSkillCheck(ctx, {
-                skill,
-                value,
-                id: checkId,
-            });
-        },
-    };
-    return evalInContext(`(${condition})`, context);
-}
-function evalInContext(script, context) {
-    // # Return the results of the in-line anonymous function we .call with the passed context
-    return function () {
-        return eval(script);
-    }.call(context);
-}
-
-async function runLine(context) {
-    const cmd = context.getters.currentLine;
-    await runCommand(context, cmd);
-}
-async function runCommand(context, cmd, choices) {
-    const { state, commit, dispatch } = context;
-    try {
-        switch (cmd.commandType) {
-            case 'jump':
-                const branch = cmd.args[0];
-                const newStack = {
-                    branch: state.machine.script[branch],
-                    label: branch,
-                    currentIndex: 0,
-                };
-                commit('setStack', newStack);
-                await dispatch('saveGame');
-                await dispatch('runLine');
-                break;
-            case 'text':
-                await textCommand(commit, {
-                    speaker: 'game',
-                    text: cmd.options.text,
-                    choices,
-                    interactive: true,
-                });
-                break;
-            case 'set':
-                const key = cmd.args[0];
-                const value = cmd.args[1];
-                commit('setData', { path: key, value });
-                return dispatch('nextLine');
-            case 'add':
-                const addKey = cmd.args[0];
-                const addValue = cmd.args[1];
-                commit('addInstruction', { path: addKey, value: addValue });
-                return dispatch('nextLine');
-            case 'if':
-                const newBranch = runConditionCommand(context, cmd);
-                if (newBranch) {
-                    const newStack = {
-                        branch: newBranch,
-                        currentIndex: 0,
-                    };
-                    commit('addStack', newStack);
-                    return dispatch('runLine');
-                }
-                return dispatch('nextLine');
-            case 'talk':
-                await textCommand(commit, {
-                    speaker: cmd.args[0],
-                    pose: cmd.args[1],
-                    text: `"${cmd.args[2]}"`,
-                    choices,
-                    interactive: true,
-                });
-                break;
-            case 'choice':
-                await runChoice(context, cmd);
-                break;
-            case 'set_screen':
-                commit('setScreen', cmd.options.screen);
-                return dispatch('nextLine');
-            case 'clear_dialog':
-                commit('clearDialog');
-                return dispatch('nextLine');
-            case 'set_button':
-                commit('changeButton', {
-                    button: cmd.args[0],
-                    enabled: cmd.args[1],
-                });
-                return dispatch('nextLine');
-            case 'play':
-                const playOptions = cmd.options;
-                if (playOptions.mode === 'music') {
-                    changeMusic(context, playOptions.audio);
-                }
-                else {
-                    playAudio(context.commit, playOptions.audio);
-                }
-                return dispatch('nextLine');
-            case 'stop':
-                const stopOptions = cmd.options;
-                if (stopOptions.mode === 'music') {
-                    stopAudio(commit, context.state.audio.currentMusic);
-                }
-                else if (stopOptions.mode === 'sound' && stopOptions.audio) {
-                    stopAudio(commit, stopOptions.audio);
-                }
-                else {
-                    error(commit, `stop option needs to either be in music mode, or if stopping a sound needs to have the sound name supplied as second argument.`);
-                }
-                return dispatch('nextLine');
-            case 'pause':
-                const pauseOptions = cmd.options;
-                if (pauseOptions.mode === 'music') {
-                    pauseAudio(commit, context.state.audio.currentMusic);
-                }
-                else if (stopOptions.mode === 'sound' && stopOptions.audio) {
-                    pauseAudio(commit, stopOptions.audio);
-                }
-                else {
-                    error(commit, `pause first option needs to either be in music mode, or if stopping a sound needs to have the sound name supplied as second argument.`);
-                }
-                return dispatch('nextLine');
-            case 'wait':
-                await timeout(cmd.options.duration);
-                return dispatch('nextLine');
-            case 'add_level':
-                const skillKey = cmd.args[0];
-                const levelToAdd = cmd.args[1];
-                if (!skillKey || !levelToAdd) {
-                    error(commit, `add_level command needs a skill id and a value as parameters`);
-                }
-                commit('incrementSkill', {
-                    skill: skillKey,
-                    amount: levelToAdd,
-                });
-                const skillName = getConfig().skills[skillKey].name;
-                const skillLevel = state.skills[skillKey].level;
-                dispatch('addNotification', `Your skill in ${skillName} is now level ${skillLevel}`);
-                return dispatch('nextLine');
-            case 'add_stat':
-                const statKey = cmd.args[0];
-                const amountToAdd = cmd.args[1];
-                if (!statKey || !amountToAdd) {
-                    error(commit, `add_stat command needs a stat id and a value as parameters`);
-                }
-                commit('addStat', {
-                    stat: statKey,
-                    amount: amountToAdd,
-                });
-                return dispatch('nextLine');
-            case 'set_stat':
-                const setStatKey = cmd.args[0];
-                const setAmount = cmd.args[1];
-                if (!setStatKey || !setAmount) {
-                    error(commit, `set_stat command needs a stat id and a value as parameters`);
-                }
-                commit('setStat', {
-                    stat: setStatKey,
-                    amount: setAmount,
-                });
-                return dispatch('nextLine');
-            case 'notify':
-                const text = cmd.args[0];
-                dispatch('addNotification', text);
-                return dispatch('nextLine');
-            default:
-                break;
-        }
-    }
-    catch (err) {
-        logger.log(`Error at: `, state.machine.stack[state.machine.stack.length - 1].label);
-        console.error(err);
-        error(commit, `Narrat script runtime error at  <span class="error-filename">${cmd.fileName}:${cmd.line + 1}</span>
-      <b>${err}</b>
-      Script: ${cmd.code}
-      Label: ${state.machine.stack[state.machine.stack.length - 1].label}`);
-    }
-}
-async function playerAnswered(context, choiceIndex) {
-    const { commit, dispatch } = context;
-    const cmd = context.getters.currentLine;
-    switch (cmd.commandType) {
-        case 'choice':
-            const options = cmd.options;
-            const choice = options.choices[choiceIndex];
-            let playerText = choice.choice;
-            let newBranch;
-            const skillcheck = choice.skillCheck;
-            if (skillcheck) {
-                const skillCheckState = getSkillCheckState(context, choice.skillCheck.id);
-                if (skillCheckState.passed) {
-                    newBranch = skillcheck.success.branch;
-                    playerText = skillcheck.success.text;
-                }
-                else {
-                    const result = processSkillCheck(context, skillcheck);
-                    const winner = result ? skillcheck.success : skillcheck.failure;
-                    newBranch = winner.branch;
-                    playerText = undefined;
-                }
-            }
-            else {
-                newBranch = choice.branch;
-            }
-            if (playerText) {
-                // If the choice involves printing a player dialog, show it
-                const dialog = {
-                    speaker: 'player',
-                    text: playerText,
-                    interactive: false,
-                };
-                commit('addDialog', { dialog });
-            }
-            if (newBranch) {
-                const newStack = {
-                    currentIndex: 0,
-                    branch: newBranch,
-                };
-                commit('addStack', newStack);
-                dispatch('runLine');
-            }
-            else {
-                dispatch('nextLine');
-            }
-            break;
-        default:
-            dispatch('nextLine');
-    }
-}
-async function runChoice(context, cmd) {
-    const options = cmd.options;
-    const prompt = options.prompt;
-    const choices = options.choices
-        .filter((choice) => {
-        // Delete the choice if it fails a condition
-        if (choice.condition) {
-            return runCondition(context, choice.condition);
-        }
-        return true;
-    })
-        .map((choice) => {
-        let text = choice.choice;
-        let choiceAllowed = true;
-        if (choice.skillCheck) {
-            const check = choice.skillCheck;
-            const config = getConfig();
-            const skill = config.skills[check.skill];
-            const level = context.state.skills[check.skill].level;
-            const difficultyScore = check.value - level * config.skillChecks.skillMultiplier;
-            const skillCheckState = getSkillCheckState(context, choice.skillCheck.id);
-            let found = false;
-            let i = 0;
-            let checkText = config.skillChecks.difficultyText[0][1];
-            while (!found) {
-                if (config.skillChecks.difficultyText.length > i) {
-                    if (difficultyScore >= config.skillChecks.difficultyText[i][0]) {
-                        checkText = config.skillChecks.difficultyText[i][1];
-                    }
-                    else {
-                        found = true;
-                    }
-                }
-                else {
-                    found = true;
-                }
-                i++;
-            }
-            if (!skillCheckState.available) {
-                choiceAllowed = false;
-                text = `[${skill.name} - Failed] ${text}`;
-            }
-            else if (!skillCheckState.passed) {
-                text = `[${skill.name} - ${checkText}] ${text}`;
-            }
-        }
-        const result = {
-            choice: text,
-            originalIndex: choice.index,
-            allowed: choiceAllowed,
-        };
-        return result;
-    });
-    runCommand(context, prompt, choices);
-}
-async function textCommand(commit, dialog) {
-    commit('addDialog', {
-        dialog,
-    });
-}
-async function nextLine(ctx) {
-    const { state, getters, dispatch, commit } = ctx;
-    if (state.machine.stack.length === 0) {
-        finishGame(ctx);
-        return;
-    }
-    const machineHead = getters.machineHead;
-    if (machineHead.currentIndex < machineHead.branch.length - 1) {
-        commit('nextLine');
-    }
-    else {
-        // This branch is finished, go back to previous stack
-        commit('previousStack');
-        return dispatch('nextLine');
-    }
-    if (state.machine.stack.length === 0) {
-        finishGame(ctx);
-    }
-    else {
-        return dispatch('runLine');
-    }
-}
-function finishGame({ commit, state }) {
-    if (state.options.debug) {
-        commit('addDialog', {
-            dialog: {
-                speaker: 'game',
-                text: '[DEBUG] Game Script is finished. This is the end of the game flow. This message only appears in debug mode.',
-            },
-        });
-    }
-}
-
-function jump(ctx) {
-    ctx.command.commandType = 'jump';
-    ctx.currentLine++;
-}
-function choice(ctx) {
-    const { line, command } = ctx;
-    if (!line.branch || line.branch.length < 2) {
-        ctx.parserContext.error(line.line, `Choice menu needs to have at least one option`);
-    }
-    const prompt = line.branch[0];
-    const choices = line.branch.slice(1);
-    const prompts = choices.map((choice, index) => {
-        if (!choice.branch) {
-            ctx.parserContext.error(choice.line, `Choice option doesn't have any branch to go to (${choice.code})`);
-        }
-        return parseChoiceOption(ctx, choice, index);
-    });
-    command.options = {
-        prompt: ctx.processCommandsFunction(ctx.parserContext, [prompt], line)[0],
-        choices: prompts,
-    };
-    command.commandType = 'choice';
-    ctx.currentLine++;
-}
-function set(ctx) {
-    ctx.command.commandType = 'set';
-    ctx.currentLine++;
-}
-// eslint-disable-next-line camelcase
-function add_level(ctx) {
-    ctx.command.commandType = 'add_level';
-    ctx.currentLine++;
-}
-function set_stat(ctx) {
-    ctx.command.commandType = 'set_stat';
-    ctx.currentLine++;
-}
-function add_stat(ctx) {
-    ctx.command.commandType = 'add_stat';
-    ctx.currentLine++;
-}
-function add(ctx) {
-    ctx.command.commandType = 'add';
-    ctx.currentLine++;
-}
-function talk(ctx) {
-    const { command, line } = ctx;
-    command.commandType = 'talk';
-    if (command.args.length < 3) {
-        ctx.parserContext.error(line.line, `Talk command needs 3 arguments!`);
-    }
-    ctx.currentLine++;
-}
-function ifCommand(ctx) {
-    const { command, lines, currentLine, line } = ctx;
-    command.commandType = 'if';
-    let failure;
-    const nextLine = getLine(lines, currentLine + 1);
-    if (nextLine && nextLine.operator === 'else') {
-        failure = ctx.processCommandsFunction(ctx.parserContext, nextLine.branch, line);
-        ctx.currentLine++;
-    }
-    command.options = {
-        condition: command.args[0],
-        success: ctx.processCommandsFunction(ctx.parserContext, line.branch, line),
-        failure,
-    };
-    ctx.currentLine++;
-}
-function setScreen(ctx) {
-    const { command } = ctx;
-    command.commandType = 'set_screen';
-    command.options = {
-        screen: command.args[0],
-    };
-    ctx.currentLine++;
-}
-function setButton(ctx) {
-    const { command, line } = ctx;
-    command.commandType = 'set_button';
-    if (command.args.length !== 2) {
-        ctx.parserContext.error(line.line, `set_button command should have 2 arguments`);
-    }
-    ctx.currentLine++;
-}
-function clearDialog(ctx) {
-    const { command } = ctx;
-    command.commandType = 'clear_dialog';
-    ctx.currentLine++;
-}
-function play(ctx) {
-    const { command } = ctx;
-    command.commandType = 'play';
-    command.options = {
-        mode: command.args[0],
-        audio: command.args[1],
-    };
-    ctx.currentLine++;
-}
-function stop(ctx) {
-    const { command } = ctx;
-    command.commandType = 'stop';
-    command.options = {
-        mode: command.args[0],
-        audio: command.args[1],
-    };
-    ctx.currentLine++;
-}
-function pause(ctx) {
-    const { command } = ctx;
-    command.commandType = 'pause';
-    command.options = {
-        mode: command.args[0],
-        audio: command.args[1],
-    };
-    ctx.currentLine++;
-}
-function wait(ctx) {
-    const { command } = ctx;
-    command.commandType = 'wait';
-    command.options = {
-        duration: parseInt(command.args[0], 10),
-    };
-    ctx.currentLine++;
-}
-function text(ctx) {
-    const { command, line } = ctx;
-    command.commandType = 'text';
-    command.options = {
-        text: line.operator,
-    };
-    ctx.currentLine++;
-}
-function notify(ctx) {
-    ctx.command.commandType = 'notify';
-    ctx.currentLine++;
-}
-const parserFunctions = {
-    jump,
-    choice,
-    set,
-    add,
-    talk,
-    if: ifCommand,
-    set_screen: setScreen,
-    set_button: setButton,
-    clear_dialog: clearDialog,
-    play,
-    stop,
-    pause,
-    wait,
-    text,
-    add_level,
-    notify,
-    set_stat,
-    add_stat,
-};
-function getLine(lines, index) {
-    if (index < lines.length)
-        return lines[index];
-}
-function parseChoiceOption(ctx, choice, index) {
-    let choiceText = choice.operator;
-    let condition;
-    let skillCheck;
-    if (choice.operator === 'roll') {
-        if (choice.args.length < 4) {
-            ctx.parserContext.error(choice.line, `Skillchecks need 4 arguments!`);
-        }
-        choiceText = choice.args[3];
-        const successBranch = choice.branch[0];
-        const failureBranch = choice.branch[1];
-        const success = {
-            text: successBranch.args[0],
-            branch: ctx.processCommandsFunction(ctx.parserContext, successBranch.branch, choice),
-        };
-        let failedBranch;
-        if (failureBranch.branch) {
-            failedBranch = ctx.processCommandsFunction(ctx.parserContext, failureBranch.branch, choice);
-        }
-        const failure = {
-            text: failureBranch.args[0],
-            branch: failedBranch,
-        };
-        skillCheck = {
-            id: choice.args[0],
-            skill: choice.args[1],
-            value: choice.args[2],
-            success,
-            failure,
-        };
-    }
-    if (choice.args[0] === 'if') {
-        condition = choice.args[1];
-    }
-    return {
-        choice: choiceText,
-        condition,
-        skillCheck,
-        branch: ctx.processCommandsFunction(ctx.parserContext, choice.branch, choice),
-        index,
-    };
-}
-
-function parseRenpyScript(errorHandler, code, fileName) {
-    const ctx = {
-        fileName,
-        error: (line, text) => errorHandler(ctx, line, text),
-        processCommandsFunction: processRenpyCommands,
-        indentSize: 0, // Will be overriden soon
+function parseScript(errorHandler, code, fileName) {
+    const ctx = {
+        fileName,
+        error: (line, text) => errorHandler(ctx, line, text),
+        processCommandsFunction: processCommands,
+        indentSize: 0, // Will be overriden soon
     };
     ctx.indentSize = detectIndentation(ctx, code);
-    const lines = findRenpyLines(ctx, code);
+    const lines = findLines(ctx, code);
     logger.log(lines);
     const script = {};
     for (const line of lines) {
@@ -7734,13 +7489,13 @@ function parseRenpyScript(errorHandler, code, fileName) {
         if (!line.branch) {
             ctx.error(line.line, `This line should have a branch but doesn't`);
         }
-        script[labelName] = processRenpyCommands(ctx, line.branch, undefined);
+        script[labelName] = processCommands(ctx, line.branch, undefined);
     }
     return script;
 }
-function processRenpyCommands(ctx, lines, parentLine) {
+function processCommands(ctx, lines, parentLine) {
     const branchContext = {
-        processCommandsFunction: processRenpyCommands,
+        processCommandsFunction: processCommands,
         parserContext: ctx,
         lines,
         currentLine: 0,
@@ -7767,10 +7522,11 @@ function processRenpyCommands(ctx, lines, parentLine) {
         };
         branchContext.line = line;
         branchContext.command = command;
-        let parseFunction = parserFunctions[operator];
+        const commandPlugin = vm$1.commands[operator];
+        let parseFunction = commandPlugin?.parser;
         if (!parseFunction) {
             // default to text function
-            parseFunction = parserFunctions.text;
+            parseFunction = vm$1.commands.text.parser;
         }
         parseFunction(branchContext);
         branch.push(command);
@@ -7835,7 +7591,7 @@ function parseCodeLine(codeToProcess) {
     words.forEach((word, index) => (words[index] = parseValue(word)));
     return words;
 }
-function findRenpyLines(ctx, data) {
+function findLines(ctx, data) {
     const code = data.split(/\r?\n|$/).map((line) => {
         const commentIndex = line.search(/ *\/\//g);
         if (commentIndex !== -1) {
@@ -7843,10 +7599,10 @@ function findRenpyLines(ctx, data) {
         }
         return line;
     });
-    const lines = findRenpyBranches(ctx, code, 0, 0);
+    const lines = findBranches(ctx, code, 0, 0);
     return lines.lines;
 }
-function findRenpyBranches(ctx, code, startLine, indentLevel) {
+function findBranches(ctx, code, startLine, indentLevel) {
     let stillInBranch = true;
     let currentLine = startLine;
     const lines = [];
@@ -7869,7 +7625,7 @@ function findRenpyBranches(ctx, code, startLine, indentLevel) {
                 if (lines.length === 0 || lineIndent - indentLevel !== 1) {
                     ctx.error(currentLine, `Wrong double indentation`);
                 }
-                const branchLines = findRenpyBranches(ctx, code, currentLine, lineIndent);
+                const branchLines = findBranches(ctx, code, currentLine, lineIndent);
                 lines[lines.length - 1].branch = branchLines.lines;
                 currentLine = branchLines.endLine;
             }
@@ -7914,6 +7670,138 @@ function randomId() {
     return `${Date.now() - Math.floor(Math.random() * 99999999)}`;
 }
 
+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;
+
 let key = Symbol('Store Injection Key');
 let store;
 function setupStore(options) {
@@ -7924,7 +7812,6 @@ function setupStore(options) {
     }
     // define injection key
     key = Symbol('Store Injection Key');
-    logger.setDebug(options.debug);
     logger.log('setup store');
     store = createStore({
         state: {
@@ -7965,6 +7852,7 @@ function setupStore(options) {
             options,
             flowState: 'menu',
             openModal: false,
+            paused: false,
         },
         getters: {
             machineHead(state) {
@@ -7980,7 +7868,11 @@ function setupStore(options) {
             },
         },
         actions: {
-            async setupMachine({ commit, dispatch }, payload) {
+            async setupMachine(ctx, payload) {
+                const { commit } = ctx;
+                if (payload.config.audioOptions.defaultMusic) {
+                    changeMusic(ctx, payload.config.audioOptions.defaultMusic);
+                }
                 const { scriptPaths } = payload;
                 const filePromises = [];
                 for (const path of scriptPaths) {
@@ -7993,7 +7885,7 @@ function setupStore(options) {
                     const file = files[index];
                     scripts = {
                         ...scripts,
-                        ...parseRenpyScript((ctx, line, error) => parserError(commit, ctx, line, error), file, scriptPaths[index]),
+                        ...parseScript((ctx, line, error) => parserError(commit, ctx, line, error), file, scriptPaths[index]),
                     };
                 }
                 const end = Date.now();
@@ -8001,6 +7893,7 @@ function setupStore(options) {
                 commit('setScript', scripts);
             },
             async startMachine({ commit, dispatch, state }) {
+                dispatch('stopMusic');
                 const config = getConfig();
                 commit('setButtons', config.buttons);
                 commit('setupSkills', config.skills);
@@ -8014,6 +7907,7 @@ function setupStore(options) {
                 ];
                 state.ready = true;
                 commit('startPlaying');
+                vm$1.callHook('onGameStart');
             },
             runLabel({ state, commit }, label) {
                 const branch = state.machine.script[label];
@@ -8067,26 +7961,59 @@ function setupStore(options) {
                     dispatch('runLabel', save.lastLabel);
                 }
             },
-            async addNotification({ commit }, text) {
+            stopMusic(ctx) {
+                stopAudio(ctx.commit, ctx.state.audio.currentMusic);
+            },
+            menuReturn(ctx) {
+                ctx.commit('reset');
+                ctx.dispatch('stopMusic');
+                ctx.commit('setFlowState', 'menu');
+                if (getConfig().audioOptions.defaultMusic) {
+                    changeMusic(ctx, getConfig().audioOptions.defaultMusic);
+                }
+            },
+            async addNotification(ctx, text) {
+                const { commit } = ctx;
                 const id = `${Date.now()}-${Math.random() * 10000}`;
                 const notification = {
                     text,
                 };
                 commit('addNotification', { id, notification });
+                if (getConfig().notifications.alsoPrintInDialogue) {
+                    writeText(ctx, `[NOTIFICATION] ${text}`);
+                }
                 await timeout(getConfig().notifications.timeOnScreen * 1000);
                 commit('deleteNotification', id);
             },
+            incrementSkill({ dispatch, state }, { skill, amount }) {
+                state.skills[skill].level += amount;
+                dispatch('levelledUp', skill);
+            },
+            levelledUp({ dispatch, state }, skill) {
+                const skillName = getConfig().skills[skill].name;
+                const skillLevel = state.skills[skill].level;
+                dispatch('addNotification', `Your skill in ${skillName} is now level ${skillLevel}`);
+            },
+            addXp({ state, dispatch }, { skill, amount }) {
+                const skillState = state.skills[skill];
+                skillState.xp += amount;
+                if (skillState.xp > getConfig().skillOptions.xpPerLevel) {
+                    skillState.level += 1;
+                    skillState.xp = 0;
+                    dispatch('levelledUp', skill);
+                }
+            },
         },
         mutations: {
             setLoadedData(state, save) {
                 state.machine.data = save.data;
-                state.skills = save.skills;
+                state.skills = cjs(state.skillChecks, save.skills);
                 state.dialog = save.dialog;
-                state.buttons = save.buttons;
+                state.buttons = cjs(state.buttons, save.buttons);
                 state.lastLabel = save.lastLabel;
-                state.skillChecks = save.skillChecks;
+                state.skillChecks = cjs(state.skillChecks, save.skillChecks);
                 state.playTime.previousPlaytime = save.playTime;
-                state.hudStats = save.hudStats;
+                state.hudStats = cjs(state.hudStats, save.hudStats);
                 state.currentScreen = save.currentScreen;
                 state.audio.currentMusic = save.audio.currentMusic;
             },
@@ -8124,6 +8051,7 @@ function setupStore(options) {
                 for (const skill in skills) {
                     state.skills[skill] = {
                         level: skills[skill].startingLevel || 0,
+                        xp: 0,
                     };
                 }
             },
@@ -8132,9 +8060,6 @@ function setupStore(options) {
                     state.hudStats[stat] = stats[stat].startingValue;
                 }
             },
-            incrementSkill(state, { skill, amount }) {
-                state.skills[skill].level += amount;
-            },
             setStat(state, { stat, amount }) {
                 state.hudStats[stat] = amount;
             },
@@ -8248,112 +8173,607 @@ function setupStore(options) {
                     state.openModal = 'menu';
                 }
             },
+            pause(state) {
+                state.paused = true;
+            },
+            unpause(state) {
+                state.paused = false;
+            },
         },
         plugins,
     });
     return {
-        store,
-        key,
+        store,
+        key,
+    };
+}
+
+let canvas;
+let ctx;
+let store$1;
+const mousePos = {
+    x: 0,
+    y: 0,
+};
+function startGameLoop(appStore) {
+    store$1 = appStore;
+    document.addEventListener('mousemove', (e) => {
+        mousePos.x = e.clientX;
+        mousePos.y = e.clientY;
+    });
+    document.addEventListener('click', debounce(mouseclick, 100, { maxWait: 200 }));
+    gameLoop();
+}
+function gameLoop() {
+    if (store$1.state.playing) {
+        if (!canvas) {
+            canvas = document.querySelector('#background-canvas');
+            if (canvas && !ctx) {
+                ctx = canvas.getContext('2d');
+            }
+        }
+        else {
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            const currentScreen = store$1.state.currentScreen;
+            const screen = getConfig().screens[currentScreen];
+            const bg = screen.background;
+            ctx.drawImage(images[bg], 0, 0);
+            let foundCollision = false;
+            const scaledMousePos = screenToCanvas(mousePos.x, mousePos.y, canvas);
+            if (screen.buttons) {
+                for (const buttonName of screen.buttons) {
+                    if (store$1.state.buttons[buttonName].enabled) {
+                        const button = getConfig().buttons[buttonName];
+                        const image = images[button.background];
+                        ctx.drawImage(image, button.position.left, button.position.top);
+                        if (aabb(scaledMousePos.x, scaledMousePos.y, 1, 1, button.position.left, button.position.top, button.position.width, button.position.height)) {
+                            foundCollision = true;
+                        }
+                    }
+                }
+            }
+            if (foundCollision) {
+                document.body.style.cursor = 'pointer';
+            }
+            else {
+                document.body.style.cursor = 'default';
+            }
+            ctx.fillStyle = 'black';
+            ctx.textAlign = 'left';
+            // ctx.fillText(`x: ${scaledMousePos.x}, y: ${scaledMousePos.y}`, 0, 20);
+        }
+    }
+    else {
+        canvas = undefined;
+        ctx = undefined;
+    }
+    window.requestAnimationFrame(gameLoop);
+}
+function mouseclick(e) {
+    if (!canvas) {
+        return;
+    }
+    mousePos.x = e.clientX;
+    mousePos.y = e.clientY;
+    const scaledMousePos = screenToCanvas(mousePos.x, mousePos.y, canvas);
+    const currentScreen = store$1.state.currentScreen;
+    const screen = getConfig().screens[currentScreen];
+    if (screen.buttons) {
+        for (const buttonName of screen.buttons) {
+            if (store$1.state.buttons[buttonName].enabled) {
+                const button = getConfig().buttons[buttonName];
+                if (aabb(scaledMousePos.x, scaledMousePos.y, 1, 1, button.position.left, button.position.top, button.position.width, button.position.height)) {
+                    // clicked button
+                    const scriptToRun = button.action;
+                    const newStack = {
+                        branch: store$1.state.machine.script[scriptToRun],
+                        currentIndex: 0,
+                        label: scriptToRun,
+                    };
+                    store$1.commit('setStack', newStack);
+                    store$1.dispatch('runLine');
+                }
+            }
+        }
+    }
+}
+
+class CommandPlugin {
+    keyword;
+    runner;
+    parser;
+    constructor(keyword, runner, parser) {
+        this.keyword = keyword;
+        this.runner = runner;
+        this.parser = parser;
+    }
+}
+function generateParser(keyword) {
+    return (ctx) => {
+        ctx.command.commandType = keyword;
+        ctx.currentLine++;
+    };
+}
+
+const add = async (context, cmd, choices) => {
+    const { commit, dispatch } = context;
+    const addKey = cmd.args[0];
+    const addValue = cmd.args[1];
+    commit('addInstruction', { path: addKey, value: addValue });
+    return dispatch('nextLine');
+};
+const addPlugin = new CommandPlugin('add', add, generateParser('add'));
+
+const addLevelRunner = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    const skillKey = cmd.args[0];
+    const levelToAdd = cmd.args[1];
+    if (!skillKey || !levelToAdd) {
+        error(commit, `add_level command needs a skill id and a value as parameters`);
+    }
+    dispatch('incrementSkill', {
+        skill: skillKey,
+        amount: levelToAdd,
+    });
+    return dispatch('nextLine');
+};
+const addLevelParser = (ctx) => {
+    ctx.command.commandType = 'add_level';
+    ctx.currentLine++;
+};
+const addLevelPlugin = new CommandPlugin('add_level', addLevelRunner, addLevelParser);
+
+const addStatRunner = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    const statKey = cmd.args[0];
+    const amountToAdd = cmd.args[1];
+    if (!statKey || !amountToAdd) {
+        error(commit, `add_stat command needs a stat id and a value as parameters`);
+    }
+    commit('addStat', {
+        stat: statKey,
+        amount: amountToAdd,
+    });
+    return dispatch('nextLine');
+};
+const addStatParser = (ctx) => {
+    ctx.command.commandType = 'add_stat';
+    ctx.currentLine++;
+};
+const addStatPlugin = new CommandPlugin('add_stat', addStatRunner, addStatParser);
+
+const addXp = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    const xpKey = cmd.args[0];
+    const xpToAdd = cmd.args[1];
+    if (!xpKey || !xpToAdd) {
+        error(commit, `add_xp command needs a skill id and a value as parameters`);
+    }
+    dispatch('addXp', {
+        skill: xpKey,
+        amount: xpToAdd,
+    });
+    return dispatch('nextLine');
+};
+const addXpPlugin = new CommandPlugin('add_xp', addXp, generateParser('add_xp'));
+
+const choice = async (context, cmd) => {
+    await runChoice(context, cmd);
+};
+async function runChoice(context, cmd) {
+    const options = cmd.options;
+    const prompt = options.prompt;
+    const choices = options.choices
+        .filter((choice) => {
+        // Delete the choice if it fails a condition
+        if (choice.condition) {
+            return runCondition(context, choice.condition);
+        }
+        if (choice.skillCheck) {
+            if (!getSkillCheckState(context, choice.skillCheck.id).available &&
+                choice.skillCheck.hideAfterRoll) {
+                return false;
+            }
+        }
+        return true;
+    })
+        .map((choice) => {
+        let text = choice.choice;
+        let choiceAllowed = true;
+        if (choice.skillCheck) {
+            const check = choice.skillCheck;
+            const { difficultyText, allowed } = getSkillCheckText({
+                context,
+                skill: check.skill,
+                skillCheckId: check.id,
+                value: check.value,
+            });
+            text = `${difficultyText} ${text}`;
+            choiceAllowed = allowed;
+        }
+        const result = {
+            choice: text,
+            originalIndex: choice.index,
+            allowed: choiceAllowed,
+        };
+        return result;
+    });
+    runCommand(context, prompt, choices);
+}
+const choiceParser = (ctx) => {
+    const { line, command } = ctx;
+    if (!line.branch || line.branch.length < 2) {
+        ctx.parserContext.error(line.line, `Choice menu needs to have at least one option`);
+    }
+    const prompt = line.branch[0];
+    const choices = line.branch.slice(1);
+    const prompts = choices.map((choice, index) => {
+        if (!choice.branch) {
+            ctx.parserContext.error(choice.line, `Choice option doesn't have any branch to go to (${choice.code})`);
+        }
+        return parseChoiceOption(ctx, choice, index);
+    });
+    command.options = {
+        prompt: ctx.processCommandsFunction(ctx.parserContext, [prompt], line)[0],
+        choices: prompts,
+    };
+    command.commandType = 'choice';
+    ctx.currentLine++;
+};
+function parseChoiceOption(ctx, choice, index) {
+    let choiceText = choice.operator;
+    let condition;
+    let skillCheck;
+    if (choice.operator === 'roll') {
+        if (choice.args.length < 4) {
+            ctx.parserContext.error(choice.line, `Skillchecks need 4 arguments!`);
+        }
+        choiceText = choice.args[3];
+        const hideAfterRoll = choice.args.length >= 5;
+        const successBranch = choice.branch[0];
+        const failureBranch = choice.branch[1];
+        const success = {
+            text: successBranch.args[0],
+            branch: ctx.processCommandsFunction(ctx.parserContext, successBranch.branch, choice),
+        };
+        let failedBranch;
+        if (failureBranch.branch) {
+            failedBranch = ctx.processCommandsFunction(ctx.parserContext, failureBranch.branch, choice);
+        }
+        const failure = {
+            text: failureBranch.args[0],
+            branch: failedBranch,
+        };
+        skillCheck = {
+            id: choice.args[0],
+            skill: choice.args[1],
+            value: choice.args[2],
+            hideAfterRoll,
+            success,
+            failure,
+        };
+    }
+    if (choice.args[0] === 'if') {
+        condition = choice.args[1];
+    }
+    return {
+        choice: choiceText,
+        condition,
+        skillCheck,
+        branch: ctx.processCommandsFunction(ctx.parserContext, choice.branch, choice),
+        index,
     };
-}
+}
+const choicePlugin = new CommandPlugin('choice', choice, choiceParser);
 
-let canvas;
-let ctx;
-let store$1;
-const mousePos = {
-    x: 0,
-    y: 0,
+const clearDialog = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    commit('clearDialog');
+    return dispatch('nextLine');
 };
-function startGameLoop(appStore) {
-    store$1 = appStore;
-    document.addEventListener('mousemove', (e) => {
-        mousePos.x = e.clientX;
-        mousePos.y = e.clientY;
-    });
-    document.addEventListener('click', debounce(mouseclick, 100, { maxWait: 200 }));
-    gameLoop();
-}
-function gameLoop() {
-    if (store$1.state.playing) {
-        if (!canvas) {
-            canvas = document.querySelector('#background-canvas');
-            if (canvas && !ctx) {
-                ctx = canvas.getContext('2d');
-            }
-        }
-        else {
-            ctx.fillStyle = 'white';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            const currentScreen = store$1.state.currentScreen;
-            const screen = getConfig().screens[currentScreen];
-            const bg = screen.background;
-            ctx.drawImage(images[bg], 0, 0);
-            let foundCollision = false;
-            const scaledMousePos = screenToCanvas(mousePos.x, mousePos.y, canvas);
-            if (screen.buttons) {
-                for (const buttonName of screen.buttons) {
-                    if (store$1.state.buttons[buttonName].enabled) {
-                        const button = getConfig().buttons[buttonName];
-                        const image = images[button.background];
-                        ctx.drawImage(image, button.position.left, button.position.top);
-                        if (aabb(scaledMousePos.x, scaledMousePos.y, 1, 1, button.position.left, button.position.top, button.position.width, button.position.height)) {
-                            foundCollision = true;
-                        }
-                    }
-                }
-            }
-            if (foundCollision) {
-                document.body.style.cursor = 'pointer';
-            }
-            else {
-                document.body.style.cursor = 'default';
-            }
-            ctx.fillStyle = 'black';
-            ctx.textAlign = 'left';
-            // ctx.fillText(`x: ${scaledMousePos.x}, y: ${scaledMousePos.y}`, 0, 20);
-        }
+const clearDialogPlugin = new CommandPlugin('clear_dialog', clearDialog, generateParser('clear_dialog'));
+
+const ifFunction = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    const newBranch = runConditionCommand(context, cmd);
+    if (newBranch) {
+        const newStack = {
+            branch: newBranch,
+            currentIndex: 0,
+        };
+        commit('addStack', newStack);
+        return dispatch('runLine');
+    }
+    return dispatch('nextLine');
+};
+const ifParser = (ctx) => {
+    const { command, lines, currentLine, line } = ctx;
+    command.commandType = 'if';
+    let failure;
+    const nextLine = getLine(lines, currentLine + 1);
+    if (nextLine && nextLine.operator === 'else') {
+        failure = ctx.processCommandsFunction(ctx.parserContext, nextLine.branch, line);
+        ctx.currentLine++;
+    }
+    command.options = {
+        condition: command.args[0],
+        success: ctx.processCommandsFunction(ctx.parserContext, line.branch, line),
+        failure,
+    };
+    ctx.currentLine++;
+};
+const ifCommand = new CommandPlugin('if', ifFunction, ifParser);
+
+const jump = async (context, cmd, choices) => {
+    const { state, commit, dispatch } = context;
+    const branch = cmd.args[0];
+    const newStack = {
+        branch: state.machine.script[branch],
+        label: branch,
+        currentIndex: 0,
+    };
+    commit('setStack', newStack);
+    await dispatch('saveGame');
+    await dispatch('runLine');
+};
+const jumpCommand = new CommandPlugin('jump', jump, generateParser('jump'));
+
+const notify = async (context, cmd) => {
+    const { dispatch } = context;
+    const text = cmd.args[0];
+    dispatch('addNotification', text);
+    return dispatch('nextLine');
+};
+const notifyPlugin = new CommandPlugin('notify', notify, generateParser('notify'));
+
+const pause = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    const pauseOptions = cmd.options;
+    if (pauseOptions.mode === 'music') {
+        pauseAudio(commit, context.state.audio.currentMusic);
+    }
+    else if (pauseOptions.mode === 'sound' && pauseOptions.audio) {
+        pauseAudio(commit, pauseOptions.audio);
     }
     else {
-        canvas = undefined;
-        ctx = undefined;
+        error(commit, `pause first option needs to either be in music mode, or if stopping a sound needs to have the sound name supplied as second argument.`);
     }
-    window.requestAnimationFrame(gameLoop);
-}
-function mouseclick(e) {
-    if (!canvas) {
-        return;
+    return dispatch('nextLine');
+};
+const pauseParser = (ctx) => {
+    const { command } = ctx;
+    command.commandType = 'pause';
+    command.options = {
+        mode: command.args[0],
+        audio: command.args[1],
+    };
+    ctx.currentLine++;
+};
+const pauseCommand = new CommandPlugin('pause', pause, pauseParser);
+
+const play = async (context, cmd) => {
+    const { dispatch } = context;
+    const playOptions = cmd.options;
+    if (playOptions.mode === 'music') {
+        changeMusic(context, playOptions.audio);
     }
-    mousePos.x = e.clientX;
-    mousePos.y = e.clientY;
-    const scaledMousePos = screenToCanvas(mousePos.x, mousePos.y, canvas);
-    const currentScreen = store$1.state.currentScreen;
-    const screen = getConfig().screens[currentScreen];
-    if (screen.buttons) {
-        for (const buttonName of screen.buttons) {
-            if (store$1.state.buttons[buttonName].enabled) {
-                const button = getConfig().buttons[buttonName];
-                if (aabb(scaledMousePos.x, scaledMousePos.y, 1, 1, button.position.left, button.position.top, button.position.width, button.position.height)) {
-                    // clicked button
-                    const scriptToRun = button.action;
-                    const newStack = {
-                        branch: store$1.state.machine.script[scriptToRun],
-                        currentIndex: 0,
-                        label: scriptToRun,
-                    };
-                    store$1.commit('setStack', newStack);
-                    store$1.dispatch('runLine');
-                }
-            }
-        }
+    else {
+        playAudio(context.commit, playOptions.audio);
+    }
+    return dispatch('nextLine');
+};
+const playParser = (ctx) => {
+    const { command } = ctx;
+    command.commandType = 'play';
+    command.options = {
+        mode: command.args[0],
+        audio: command.args[1],
+    };
+    ctx.currentLine++;
+};
+const playCommand = new CommandPlugin('play', play, playParser);
+
+const set = async (context, cmd, choices) => {
+    const { commit, dispatch } = context;
+    const key = cmd.args[0];
+    const value = cmd.args[1];
+    commit('setData', { path: key, value });
+    return dispatch('nextLine');
+};
+const setCommand = new CommandPlugin('set', set, generateParser('set'));
+
+const setButton = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    commit('changeButton', {
+        button: cmd.args[0],
+        enabled: cmd.args[1],
+    });
+    return dispatch('nextLine');
+};
+const setButtonParser = (ctx) => {
+    const { command, line } = ctx;
+    command.commandType = 'set_button';
+    if (command.args.length !== 2) {
+        ctx.parserContext.error(line.line, `set_button command should have 2 arguments`);
+    }
+    ctx.currentLine++;
+};
+const setButtonCommand = new CommandPlugin('set_button', setButton, setButtonParser);
+
+const setScreen = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    commit('setScreen', cmd.options.screen);
+    return dispatch('nextLine');
+};
+const setScreenParser = (ctx) => {
+    const { command } = ctx;
+    command.commandType = 'set_screen';
+    command.options = {
+        screen: command.args[0],
+    };
+    ctx.currentLine++;
+};
+const setScreenCommand = new CommandPlugin('set_screen', setScreen, setScreenParser);
+
+const setStat = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    const setStatKey = cmd.args[0];
+    const setAmount = cmd.args[1];
+    if (!setStatKey || !setAmount) {
+        error(commit, `set_stat command needs a stat id and a value as parameters`);
+    }
+    commit('setStat', {
+        stat: setStatKey,
+        amount: setAmount,
+    });
+    return dispatch('nextLine');
+};
+const setStatCommand = new CommandPlugin('set_stat', setStat, generateParser('set_stat'));
+
+const stop = async (context, cmd) => {
+    const { commit, dispatch } = context;
+    const stopOptions = cmd.options;
+    if (stopOptions.mode === 'music') {
+        stopAudio(commit, context.state.audio.currentMusic);
+    }
+    else if (stopOptions.mode === 'sound' && stopOptions.audio) {
+        stopAudio(commit, stopOptions.audio);
+    }
+    else {
+        error(commit, `stop option needs to either be in music mode, or if stopping a sound needs to have the sound name supplied as second argument.`);
+    }
+    return dispatch('nextLine');
+};
+const stopParser = (ctx) => {
+    const { command } = ctx;
+    command.commandType = 'stop';
+    command.options = {
+        mode: command.args[0],
+        audio: command.args[1],
+    };
+    ctx.currentLine++;
+};
+const stopCommand = new CommandPlugin('stop', stop, stopParser);
+
+const talk = async (context, cmd, choices) => {
+    const { commit } = context;
+    await textCommand(commit, {
+        speaker: cmd.args[0],
+        pose: cmd.args[1],
+        text: `"${cmd.args[2]}"`,
+        choices,
+        interactive: true,
+    });
+};
+const talkParser = (ctx) => {
+    const { command, line } = ctx;
+    command.commandType = 'talk';
+    if (command.args.length < 3) {
+        ctx.parserContext.error(line.line, `Talk command needs 3 arguments!`);
     }
+    ctx.currentLine++;
+};
+const talkCommand = new CommandPlugin('talk', talk, talkParser);
+
+const text = async (context, cmd, choices) => {
+    const { commit } = context;
+    await textCommand(commit, {
+        speaker: 'game',
+        text: cmd.options.text,
+        choices,
+        interactive: true,
+    });
+};
+const textParser = (ctx) => {
+    const { command, line } = ctx;
+    command.commandType = 'text';
+    command.options = {
+        text: line.operator,
+    };
+    ctx.currentLine++;
+};
+const textCommandPlugin = new CommandPlugin('text', text, textParser);
+
+const wait = async (context, cmd) => {
+    const { dispatch } = context;
+    await timeout(cmd.options.duration);
+    return dispatch('nextLine');
+};
+const waitParser = (ctx) => {
+    const { command } = ctx;
+    command.commandType = 'wait';
+    command.options = {
+        duration: parseInt(command.args[0], 10),
+    };
+    ctx.currentLine++;
+};
+const waitCommand = new CommandPlugin('wait', wait, waitParser);
+
+function registerBaseCommands(vm) {
+    vm.addCommand(addLevelPlugin);
+    vm.addCommand(addStatPlugin);
+    vm.addCommand(addXpPlugin);
+    vm.addCommand(addPlugin);
+    vm.addCommand(choicePlugin);
+    vm.addCommand(clearDialogPlugin);
+    vm.addCommand(ifCommand);
+    vm.addCommand(jumpCommand);
+    vm.addCommand(notifyPlugin);
+    vm.addCommand(pauseCommand);
+    vm.addCommand(playCommand);
+    vm.addCommand(setButtonCommand);
+    vm.addCommand(setScreenCommand);
+    vm.addCommand(setStatCommand);
+    vm.addCommand(setCommand);
+    vm.addCommand(stopCommand);
+    vm.addCommand(talkCommand);
+    vm.addCommand(textCommandPlugin);
+    vm.addCommand(waitCommand);
+}
+
+class NarratPlugin {
+    onPageLoaded() { }
+    onNarratSetup() { }
+    onAppMounted() { }
+    onAssetsLoaded() { }
+    onGameSetup() { }
+    onGameStart() { }
+    onGameMounted() { }
+    onGameDismounted() { }
+}
+
+function registerPlugin(plugin) {
+    vm$1.addPlugin(plugin);
+}
+function addCommand(command) {
+    vm$1.addCommand(command);
 }
 
+var plugins = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  CommandPlugin: CommandPlugin,
+  NarratPlugin: NarratPlugin,
+  registerPlugin: registerPlugin,
+  addCommand: addCommand,
+  generateParser: generateParser
+});
+
+var display = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  aspectRatioFit: aspectRatioFit
+});
+
 let app;
 let store$2;
+vm$1.callHook('onPageLoaded');
 async function startApp(config, options) {
+    registerBaseCommands(vm$1);
+    logManager.setupDebugger(options.debug);
     const configFile = await getFile('data/config.json');
     setConfig(JSON.parse(configFile));
-    console.log('%c Narrat game engine – 0.9.3 - June 5, 2022 20:22:00', 'background: #222; color: #bada55');
+    console.log('%c Narrat game engine – 0.11.0 - June 15, 2022 15:25:13', 'background: #222; color: #bada55');
+    vm$1.callHook('onNarratSetup');
     const storeSetup = setupStore(options);
     store$2 = storeSetup.store;
     app = createApp(script$b, {
@@ -8375,6 +8795,10 @@ async function startApp(config, options) {
             store: store$2,
             app,
             state: store$2.state,
+            vm: vm$1,
+            jump: (label) => {
+                store$2.dispatch('runLabel', label);
+            },
         };
         window.narrat = narrat;
     }
@@ -8387,7 +8811,14 @@ async function startApp(config, options) {
         });
     }
     startGameLoop(store$2);
-}
+}
+var index = {
+    startApp,
+    plugins,
+    display,
+    config: config$2,
+};
 
-export { startApp };
+export default index;
+export { config$2 as config, display, plugins, startApp };
 //# sourceMappingURL=index.esm.js.map