narrat 0.8.1 → 0.8.4

package/lib/index.esm.js

@@ -1,6 +1,6 @@
-// Version: 0.8.1 - April 26, 2022 13:28:12
+// Version: 0.8.4 - June 4, 2022 18:58:52
 import 'es6-promise/auto';
-import { ref, reactive, readonly, defineComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, Fragment, renderList, createBlock, Transition, withCtx, renderSlot, createTextVNode, resolveComponent, toDisplayString, createVNode, TransitionGroup, createApp } from 'vue';
+import { ref, reactive, readonly, defineComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, Fragment, renderList, createBlock, Transition, withCtx, renderSlot, createTextVNode, resolveComponent, toDisplayString, TransitionGroup, createVNode, createApp } from 'vue';
 import { createLogger, createStore } from 'vuex';
 
 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.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.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.list-item {\n  display: inline-block;\n  margin-right: 10px;\n}\n\n.list-enter-active,\n.list-leave-active {\n  transition: all 0.3s ease;\n}\n\n/* .list-move {\n  transition: transform 0.3s ease;\n} */\n\n.list-enter-from,\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(300px);\n}\n\n.notification-item {\n  display: inline-block;\n  margin-right: 10px;\n}\n\n.notification-enter-active,\n.notification-leave-active {\n  transition: all 0.3s ease;\n}\n\n/* .notification-move {\n  transition: transform 0.3s ease;\n} */\n\n.notification-enter-from,\n.notification-leave-to {\n  opacity: 0;\n  transform: translateY(-300px);\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.3s ease;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n  opacity: 0;\n}\n\n.fade-in-enter-active {\n  transition: opacity 0.1s ease;\n}\n\n.fade-in-enter-from {\n  opacity: 0;\n}\n\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: Arial, sans-serif;\n}\n\nselect {\n  background-color: grey;\n}\n\nbutton {\n  background-color: #72080f;\n  color: white;\n  border-radius: 30px;\n  padding: 5px;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 5px;\n}\n\na {\n  color: pink;\n  text-decoration: underline;\n}\n\nth,\ntd {\n  padding: 4px;\n  border: 1px solid white;\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@media (min-width: 640px) {\n}\n\n@media (min-width: 768px) {\n}\n\n@media (min-width: 1024px) {\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}\n";
+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.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.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}\n\nselect {\n  background-color: grey;\n}\n\n.button {\n  background-color: #72080f;\n  color: white;\n  border-radius: 15px;\n  padding: 10px;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 10px;\n}\n\na {\n  color: pink;\n  text-decoration: underline;\n}\n\nth,\r\ntd {\n  padding: 4px;\n  border: 1px solid white;\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\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;}};
@@ -239,7 +239,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: white;\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: white;\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  height: 50px;\n  background-color: #72080f;\n  color: white;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 24px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n";
+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: white;\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: white;\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  height: 50px;\n  background-color: #72080f;\n  color: white;\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;
@@ -303,11 +303,27 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$2 = ".dialog-picture {\n  position: absolute;\n  width: 80px;\n  height: 80px;\n  border: 2px solid white;\n  border-radius: 10px;\n  background-color: grey;\n  z-index: 99;\n}\n\n.dialog-picture img {\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z$2 = ".dialog-picture {\n  position: absolute;\n  width: 80px;\n  height: 80px;\n  border: 2px solid white;\n  border-radius: 10px;\n  background-color: grey;\n  z-index: 99;\n}\n\n.dialog-picture img {\n  width: 100%;\n  height: 100%;\n}\r\n";
 styleInject(css_248z$2);
 
 script$1.render = render$1;
 
+class Logger {
+    debug;
+    constructor(debug) {
+        this.debug = debug;
+    }
+    setDebug(debug) {
+        this.debug = debug;
+    }
+    log(...args) {
+        if (this.debug) {
+            console.log(...args);
+        }
+    }
+}
+const logger = new Logger(false);
+
 function getPlayTime(startedAt, previousTime) {
     return Date.now() - startedAt + previousTime;
 }
@@ -360,7 +376,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
               renderSlot(_ctx.$slots, "footer", {}, () => [
                 _hoisted_9,
                 createElementVNode("button", {
-                  class: "modal-default-button",
+                  class: "modal-default-button button",
                   onClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('close')))
                 }, " Close ")
               ])
@@ -373,7 +389,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }))
 }
 
-var css_248z$3 = ".modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: table;\n  transition: opacity 0.3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  min-width: 300px;\n  max-width: 90vw;\n  max-height: 75vh;\n  overflow-y: auto;\n  margin: 0px auto;\n  padding: 20px 30px;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n}\n\n.modal-header h3 {\n  margin-top: 0;\n  color: #42b983;\n}\n\n.modal-body {\n  margin: 20px 0;\n}\n\n.modal-default-button {\n  float: right;\n}\n\n/*\n * The following styles are auto-applied to elements with\n * transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave-active .modal-container {\n  transform: scale(1.1);\n}\n";
+var css_248z$3 = ".modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: table;\n  transition: opacity 0.3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  min-width: 300px;\n  max-width: 90vw;\n  max-height: 75vh;\n  overflow-y: auto;\n  margin: 0px auto;\n  padding: 20px 30px;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n}\n\n.modal-header h3 {\n  margin-top: 0;\n  color: #42b983;\n}\n\n.modal-body {\n  margin: 20px 0;\n}\n\n.modal-default-button {\n  float: right;\n}\n\n/*\r\n * The following styles are auto-applied to elements with\r\n * transition=\"modal\" when their visibility is toggled\r\n * by Vue.js.\r\n *\r\n * You can easily play with the modal transition by editing\r\n * these styles.\r\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\r\n.modal-leave-active .modal-container {\n  transform: scale(1.1);\n}\r\n";
 styleInject(css_248z$3);
 
 script$2.render = render$2;
@@ -408,7 +424,7 @@ var script$3 = defineComponent({
         wordCount() {
             const scripts = Object.values(this.$store.state.machine.script);
             const count = scripts.reduce((count, script) => {
-                console.log(count);
+                logger.log(count);
                 return count + this.countWordsInScriptBranch(script);
             }, 0);
             alert(`You have ${count} words`);
@@ -475,26 +491,27 @@ var script$3 = defineComponent({
 });
 
 const _hoisted_1$3 = { class: "debug-menu" };
-const _hoisted_2$2 = /*#__PURE__*/createElementVNode("h3", null, "Error(s)", -1);
+const _hoisted_2$2 = /*#__PURE__*/createElementVNode("h3", { class: "title" }, "Error(s)", -1);
 const _hoisted_3$2 = /*#__PURE__*/createTextVNode(" There are errors in your dialogue scripts. Open the developer console for more details. ");
 const _hoisted_4$2 = ["innerHTML"];
-const _hoisted_5$2 = /*#__PURE__*/createElementVNode("h3", null, "Debug Menu!", -1);
-const _hoisted_6$2 = /*#__PURE__*/createTextVNode(" Hello this is the debug menu. ");
-const _hoisted_7$2 = /*#__PURE__*/createElementVNode("option", {
+const _hoisted_5$2 = /*#__PURE__*/createElementVNode("h3", { class: "title" }, "Debug Menu!", -1);
+const _hoisted_6$2 = { class: "container" };
+const _hoisted_7$2 = /*#__PURE__*/createTextVNode(" Hello this is the debug menu. ");
+const _hoisted_8$1 = /*#__PURE__*/createElementVNode("option", {
   selected: "",
   disabled: ""
 }, "Jump to a label", -1);
-const _hoisted_8$1 = ["value"];
-const _hoisted_9$1 = { class: "grid grid-cols-3 gap-4" };
-const _hoisted_10 = /*#__PURE__*/createElementVNode("h2", null, "Skills", -1);
-const _hoisted_11 = { class: "table-auto" };
-const _hoisted_12 = /*#__PURE__*/createElementVNode("tr", null, [
+const _hoisted_9$1 = ["value"];
+const _hoisted_10 = { class: "grid grid-cols-3 gap-4" };
+const _hoisted_11 = /*#__PURE__*/createElementVNode("h2", null, "Skills", -1);
+const _hoisted_12 = { class: "table-auto" };
+const _hoisted_13 = /*#__PURE__*/createElementVNode("tr", null, [
   /*#__PURE__*/createElementVNode("th", null, "Skill"),
   /*#__PURE__*/createElementVNode("th", null, "Level")
 ], -1);
-const _hoisted_13 = /*#__PURE__*/createElementVNode("h2", null, "Skill Checks", -1);
-const _hoisted_14 = { class: "table-auto" };
-const _hoisted_15 = /*#__PURE__*/createElementVNode("thead", null, [
+const _hoisted_14 = /*#__PURE__*/createElementVNode("h2", null, "Skill Checks", -1);
+const _hoisted_15 = { class: "table-auto" };
+const _hoisted_16 = /*#__PURE__*/createElementVNode("thead", null, [
   /*#__PURE__*/createElementVNode("tr", null, [
     /*#__PURE__*/createElementVNode("th", null, "Skill Check"),
     /*#__PURE__*/createElementVNode("th", null, "Available"),
@@ -508,7 +525,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1$3, [
     createElementVNode("button", {
       onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.open && _ctx.open(...args))),
-      class: "debug-button"
+      class: "button debug-button"
     }, "Debug Menu"),
     (_ctx.errors.length > 0)
       ? (openBlock(), createBlock(_component_modal, {
@@ -542,49 +559,53 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             _hoisted_5$2
           ]),
           body: withCtx(() => [
-            _hoisted_6$2,
-            createElementVNode("select", {
-              name: "label-selector",
-              onChange: _cache[1] || (_cache[1] = $event => (_ctx.labelSelected($event)))
-            }, [
+            createElementVNode("div", _hoisted_6$2, [
               _hoisted_7$2,
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.labels, (label) => {
-                return (openBlock(), createElementBlock("option", {
-                  value: label,
-                  key: label
-                }, toDisplayString(label), 9, _hoisted_8$1))
-              }), 128))
-            ], 32),
-            createElementVNode("div", _hoisted_9$1, [
-              createElementVNode("button", {
-                onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.wordCount && _ctx.wordCount(...args)))
-              }, "Word Count"),
-              createElementVNode("button", {
-                onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.save && _ctx.save(...args)))
-              }, "Save Game")
-            ]),
-            createElementVNode("h3", null, "Play time: " + toDisplayString(_ctx.getPlayTimeString()), 1),
-            _hoisted_10,
-            createElementVNode("table", _hoisted_11, [
-              _hoisted_12,
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skills, (skill, key) => {
-                return (openBlock(), createElementBlock("tr", { key: key }, [
-                  createElementVNode("td", null, toDisplayString(key), 1),
-                  createElementVNode("td", null, toDisplayString(skill.level), 1)
-                ]))
-              }), 128))
-            ]),
-            _hoisted_13,
-            createElementVNode("table", _hoisted_14, [
-              _hoisted_15,
-              createElementVNode("tbody", null, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skillChecks, (check, key) => {
+              createElementVNode("select", {
+                name: "label-selector",
+                onChange: _cache[1] || (_cache[1] = $event => (_ctx.labelSelected($event)))
+              }, [
+                _hoisted_8$1,
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.labels, (label) => {
+                  return (openBlock(), createElementBlock("option", {
+                    value: label,
+                    key: label
+                  }, toDisplayString(label), 9, _hoisted_9$1))
+                }), 128))
+              ], 32),
+              createElementVNode("div", _hoisted_10, [
+                createElementVNode("button", {
+                  onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.wordCount && _ctx.wordCount(...args))),
+                  class: "button"
+                }, "Word Count"),
+                createElementVNode("button", {
+                  onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.save && _ctx.save(...args))),
+                  class: "button"
+                }, "Save Game")
+              ]),
+              createElementVNode("h3", null, "Play time: " + toDisplayString(_ctx.getPlayTimeString()), 1),
+              _hoisted_11,
+              createElementVNode("table", _hoisted_12, [
+                _hoisted_13,
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skills, (skill, key) => {
                   return (openBlock(), createElementBlock("tr", { key: key }, [
                     createElementVNode("td", null, toDisplayString(key), 1),
-                    createElementVNode("td", null, toDisplayString(check.available ? '✅' : '❌'), 1),
-                    createElementVNode("td", null, toDisplayString(check.passed ? '✅' : '❌'), 1)
+                    createElementVNode("td", null, toDisplayString(skill.level), 1)
                   ]))
                 }), 128))
+              ]),
+              _hoisted_14,
+              createElementVNode("table", _hoisted_15, [
+                _hoisted_16,
+                createElementVNode("tbody", null, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skillChecks, (check, key) => {
+                    return (openBlock(), createElementBlock("tr", { key: key }, [
+                      createElementVNode("td", null, toDisplayString(key), 1),
+                      createElementVNode("td", null, toDisplayString(check.available ? '✅' : '❌'), 1),
+                      createElementVNode("td", null, toDisplayString(check.passed ? '✅' : '❌'), 1)
+                    ]))
+                  }), 128))
+                ])
               ])
             ])
           ]),
@@ -594,7 +615,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$4 = ".debug-menu {\n  z-index: 9999;\n}\n\n.debug-button {\n  background-color: #4fc08d;\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  padding: 2px;\n}\n\n.error-message {\n  color: orangered;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n.error-filename {\n  color: grey;\n  text-decoration: underline;\n}\n";
+var css_248z$4 = ".debug-menu {\n  z-index: 9999;\n}\n\n.debug-button {\n  background-color: #4fc08d;\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  padding: 5px;\n}\n\n.error-message {\n  color: orangered;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n.error-filename {\n  color: grey;\n  text-decoration: underline;\n}\r\n";
 styleInject(css_248z$4);
 
 script$3.render = render$3;
@@ -3853,14 +3874,13 @@ var script$4 = defineComponent({
         };
     },
     mounted() {
-        howler.Howler.volume(0.5);
+        const volume = howler.Howler.volume();
+        this.$refs.slider.value = volume;
     },
     methods: {
         changeVolume(event) {
-            console.log(event);
             const target = event.target;
             howler.Howler.volume(target.value);
-            console.log(target.value);
         },
         toggleMute() {
             if (this.muted) {
@@ -3876,12 +3896,16 @@ var script$4 = defineComponent({
 });
 
 const _hoisted_1$4 = { class: "volume-controls" };
-const _hoisted_2$3 = /*#__PURE__*/createElementVNode("label", { for: "volume" }, "Volume", -1);
+const _hoisted_2$3 = /*#__PURE__*/createElementVNode("label", {
+  for: "volume",
+  class: "volume-label"
+}, "Volume:", -1);
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1$4, [
     _hoisted_2$3,
     createElementVNode("input", {
+      ref: "slider",
       class: "volume-slider",
       type: "range",
       id: "volume",
@@ -3891,11 +3915,11 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       step: "0.1",
       value: "0.5",
       onChange: _cache[0] || (_cache[0] = (...args) => (_ctx.changeVolume && _ctx.changeVolume(...args)))
-    }, null, 32)
+    }, null, 544)
   ]))
 }
 
-var css_248z$5 = ".volume-controls {\n  color: white;\n  font-size: 18px;\n  -webkit-text-stroke: 1px black;\n}\n\n.volume-slider {\n  width: 50px;\n  background-color: blue;\n}\n";
+var css_248z$5 = ".volume-label {\n  margin: 5px 20px;\n}\n\n.volume-controls {\n  color: white;\n  font-size: 20px;\n  display: flex;\n  align-items: center;\n}\n\n.volume-slider {\n  width: 200px;\n  background-color: blue;\n}\r\n";
 styleInject(css_248z$5);
 
 script$4.render = render$4;
@@ -3930,13 +3954,10 @@ const _hoisted_2$4 = { class: "bold" };
 const _hoisted_3$3 = /*#__PURE__*/createTextVNode(": ");
 
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VolumeControls = resolveComponent("VolumeControls");
-
   return (openBlock(), createElementBlock("div", {
     class: "hud",
     style: normalizeStyle(_ctx.hudStyle)
   }, [
-    createVNode(_component_VolumeControls),
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.stats, (value, key) => {
       return (openBlock(), createElementBlock("div", {
         key: key,
@@ -3954,7 +3975,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$6 = ".hud {\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  flex-direction: row-reverse;\n  z-index: 3;\n}\n\n.hud-stat {\n  border: 1px dotted white;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  padding: 5px;\n}\n\n.hud-icon {\n  display: inline-block;\n  height: 1em;\n}\n";
+var css_248z$6 = ".hud {\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  flex-direction: row-reverse;\n  z-index: 3;\n}\n\n.hud-stat {\n  border: 1px dotted white;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  padding: 5px;\n}\n\n.hud-icon {\n  display: inline-block;\n  height: 1em;\n}\r\n";
 styleInject(css_248z$6);
 
 script$5.render = render$5;
@@ -3991,7 +4012,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-var css_248z$7 = ".loading-bar {\n  position: relative;\n  width: 40vw;\n  height: 10vh;\n  border: 1px solid black;\n  background-color: lightgrey;\n}\n\n.inner-loading-bar {\n  height: 100%;\n  background-color: lightgreen;\n  color: black;\n}\n\n.loading-text {\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  color: black;\n  top: 0;\n}\n";
+var css_248z$7 = ".loading-bar {\n  position: relative;\n  width: 40vw;\n  height: 10vh;\n  border: 1px solid black;\n  background-color: lightgrey;\n}\n\n.inner-loading-bar {\n  height: 100%;\n  background-color: lightgreen;\n  color: black;\n}\n\n.loading-text {\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  color: black;\n  top: 0;\n}\r\n";
 styleInject(css_248z$7);
 
 script$6.render = render$6;
@@ -4026,7 +4047,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   }))
 }
 
-var css_248z$8 = ".notifications-holder {\n  position: fixed;\n  top: 0;\n  left: 0;\n  padding: 10px;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  pointer-events: none;\n}\n\n.notification {\n  margin-top: 10px;\n  margin-bottom: 10px;\n  border-radius: 10px;\n  padding: 15px;\n  background-color: darkslateblue;\n  color: white;\n  width: 40vh;\n  text-align: center;\n}\n";
+var css_248z$8 = ".notifications-holder {\n  position: fixed;\n  top: 0;\n  left: 0;\n  padding: 10px;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  pointer-events: none;\n}\n\n.notification {\n  margin-top: 10px;\n  margin-bottom: 10px;\n  border-radius: 10px;\n  padding: 15px;\n  background-color: darkslateblue;\n  color: white;\n  width: 40vh;\n  text-align: center;\n}\r\n";
 styleInject(css_248z$8);
 
 script$7.render = render$7;
@@ -4125,7 +4146,7 @@ const images = {};
 let imagesToLoad = 0;
 let imagesLoaded = 0;
 function loadImages(config) {
-    console.log(`Loading images`);
+    logger.log(`Loading images`);
     return new Promise((resolve, reject) => {
         for (const key in config.images) {
             const path = config.images[key];
@@ -4135,27 +4156,28 @@ function loadImages(config) {
 }
 function loadImage(key, path, resolver, rejecter) {
     imagesToLoad++;
-    console.log(`Loading image ${key} at ${path}`);
+    logger.log(`Loading image ${key} at ${path}`);
     const image = new Image();
     image.onload = () => {
         imagesLoaded += 1;
         images[key] = image;
-        console.log(`Loaded image ${key} successfully`);
+        logger.log(`Loaded image ${key} successfully`);
         if (imagesLoaded >= imagesToLoad) {
-            console.log(`All images loaded`);
+            logger.log(`All images loaded`);
             resolver();
         }
     };
     image.onerror = (e) => {
-        console.log(`Error loading image ${key}`);
+        console.error(`Error loading image ${key}`);
         rejecter(e);
     };
     image.src = path;
 }
 
 const audio = {};
+howler.Howler.volume(0.5);
 async function loadAudioAssets(config) {
-    console.log(`Loading audio`);
+    logger.log(`Loading audio`);
     const loadingPromises = [];
     for (const key in config.music) {
         // Backward compatibility with old music list
@@ -4185,7 +4207,7 @@ async function loadAudioAssets(config) {
 }
 async function loadAudio(key, config) {
     return new Promise((resolve, reject) => {
-        console.log(`Loading audio ${config.src}`);
+        logger.log(`Loading audio ${config.src}`);
         const sound = new howler.Howl({
             ...config,
         });
@@ -4297,8 +4319,86 @@ function debounce(func, waitMilliseconds = 50, options = {}) {
     return debouncedFunction;
 }
 
-console.log('hello app');
 var script$8 = defineComponent({
+    components: {
+        Modal: script$2,
+        VolumeControls: script$4,
+    },
+    props: {},
+    data() {
+        return {
+            menuActive: false,
+        };
+    },
+    mounted() {
+        document.addEventListener('keydown', (event) => {
+            const key = event.key;
+            if (key === 'Escape') {
+                this.toggleMenu();
+            }
+        });
+    },
+    methods: {
+        openMenu() {
+            this.menuActive = true;
+        },
+        closeMenu() {
+            this.menuActive = false;
+        },
+        toggleMenu() {
+            this.menuActive = !this.menuActive;
+        },
+        quit() {
+            window.close();
+            // quit
+        },
+    },
+    computed: {},
+});
+
+const _hoisted_1$7 = { class: "menu-container" };
+const _hoisted_2$6 = /*#__PURE__*/createElementVNode("h3", { class: "title" }, "Menu", -1);
+const _hoisted_3$4 = { class: "menu-content" };
+
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_VolumeControls = resolveComponent("VolumeControls");
+  const _component_modal = resolveComponent("modal");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
+    createElementVNode("button", {
+      class: "button menu-toggle-button",
+      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.openMenu && _ctx.openMenu(...args)))
+    }, "Menu"),
+    (_ctx.menuActive)
+      ? (openBlock(), createBlock(_component_modal, {
+          key: 0,
+          class: "menu",
+          onClose: _ctx.closeMenu
+        }, {
+          header: withCtx(() => [
+            _hoisted_2$6
+          ]),
+          body: withCtx(() => [
+            createElementVNode("div", _hoisted_3$4, [
+              createVNode(_component_VolumeControls),
+              createElementVNode("button", {
+                class: "button title quit-button",
+                onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.quit && _ctx.quit(...args)))
+              }, "Quit")
+            ])
+          ]),
+          _: 1
+        }, 8, ["onClose"]))
+      : createCommentVNode("", true)
+  ]))
+}
+
+var css_248z$9 = ".menu-content {\n  margin: 50px;\n  text-align: center;\n}\n\n.menu-toggle-button {\n  margin: 0;\n  padding: 2px;\n  border-radius: 5px;\n}\n\n.quit-button {\n  margin: 50px;\n  text-align: center;\n}\r\n";
+styleInject(css_248z$9);
+
+script$8.render = render$8;
+
+var script$9 = defineComponent({
     $refs: {
         dialogContainer: HTMLInputElement,
     },
@@ -4310,6 +4410,7 @@ var script$8 = defineComponent({
         LoadingBar: script$6,
         NotificationToast: script$7,
         Hud: script$5,
+        Menu: script$8,
     },
     data() {
         return {
@@ -4356,7 +4457,6 @@ var script$8 = defineComponent({
         dialogLength(newCount, oldCount) {
             if (this.$refs.dialog) {
                 const dialog = this.$refs.dialog;
-                console.log('hello dialog');
                 dialog.scrollTop = dialog.scrollHeight + 100000;
             }
         },
@@ -4579,16 +4679,17 @@ var script$8 = defineComponent({
     },
 });
 
-const _hoisted_1$7 = ["width", "height"];
-const _hoisted_2$6 = /*#__PURE__*/createElementVNode("div", { class: "anchor" }, null, -1);
-const _hoisted_3$4 = {
+const _hoisted_1$8 = ["width", "height"];
+const _hoisted_2$7 = /*#__PURE__*/createElementVNode("div", { class: "anchor" }, null, -1);
+const _hoisted_3$5 = {
   key: 1,
   class: "flex flex-col"
 };
 const _hoisted_4$3 = { key: 2 };
 
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Hud = resolveComponent("Hud");
+  const _component_Menu = resolveComponent("Menu");
   const _component_DialogPicture = resolveComponent("DialogPicture");
   const _component_DialogBox = resolveComponent("DialogBox");
   const _component_LoadingBar = resolveComponent("LoadingBar");
@@ -4606,6 +4707,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
           class: "game",
           style: normalizeStyle(_ctx.gameStyle)
         }, [
+          createVNode(_component_Menu, { class: "menu-toggle" }),
           createVNode(Transition, { name: "fade" }, {
             default: withCtx(() => [
               (_ctx.picture)
@@ -4627,7 +4729,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                   width: _ctx.layoutWidth,
                   height: _ctx.layoutHeight,
                   id: "background-canvas"
-                }, null, 8, _hoisted_1$7)
+                }, null, 8, _hoisted_1$8)
               ], 4))
             : createCommentVNode("", true),
           (_ctx.dialogPlaying)
@@ -4654,12 +4756,12 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                   ]),
                   _: 1
                 }, 8, ["style"]),
-                _hoisted_2$6
+                _hoisted_2$7
               ], 4))
             : createCommentVNode("", true)
         ], 4))
       : (_ctx.gameLoaded)
-        ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
+        ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
             createElementVNode("button", {
               class: "button menu-button start-button override",
               onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.startGame && _ctx.startGame(...args)))
@@ -4685,10 +4787,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4))
 }
 
-var css_248z$9 = "#app {\n  background-color: black;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  box-sizing: border-box;\n  overflow: hidden;\n  transform-origin: center center;\n}\n\n.game {\n  background-color: black;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.interact-button {\n  height: 50px;\n  background-color: #72080f;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 20px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.dialog-container {\n  flex-shrink: 2;\n  /* padding: 20px; */\n  min-height: 100%;\n  width: 100%;\n  background-color: #171717;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  overflow-x: hidden;\n}\n\n.dialog {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n}\n\n.dialog * {\n  overflow-anchor: none;\n}\n\n.background {\n  margin: 0;\n}\n\n#background-canvas {\n  height: 100%;\n}\n\n.anchor {\n  overflow-anchor: auto;\n  height: 1px;\n}\n";
-styleInject(css_248z$9);
+var css_248z$a = "#app {\n  background-color: black;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  box-sizing: border-box;\n  overflow: hidden;\n  transform-origin: center center;\n}\n\n.game {\n  background-color: black;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.interact-button {\n  height: 50px;\n  background-color: #72080f;\n  border: 1px solid black;\n  font-weight: bold;\n  font-size: 20px;\n  text-align: center;\n  flex-grow: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.interact-button:not(:last-child) {\n  margin-right: 10px;\n}\n\n.dialog-container {\n  flex-shrink: 2;\n  /* padding: 20px; */\n  min-height: 100%;\n  width: 100%;\n  background-color: #171717;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  overflow-x: hidden;\n}\n\n.dialog {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.dialog::-webkit-scrollbar {\n  display: none; /* webkit */\n}\n\n.dialog * {\n  overflow-anchor: none;\n}\n\n.background {\n  margin: 0;\n}\n\n#background-canvas {\n  height: 100%;\n}\n\n.anchor {\n  overflow-anchor: auto;\n  height: 1px;\n}\n\n.menu-toggle {\n  position: fixed;\n  bottom: 0px;\n  right: 15%;\n  z-index: 108398;\n}\r\n";
+styleInject(css_248z$a);
 
-script$8.render = render$8;
+script$9.render = render$9;
 
 function timeout(durationMs) {
     return new Promise((resolve, reject) => {
@@ -4734,7 +4836,7 @@ function runSkillCheck(ctx, params) {
     }
     roll += state.skills[params.skill].level * skillChecks.skillMultiplier;
     const skill = skills[params.skill];
-    console.log(`roll `, roll, params.value);
+    logger.log(`roll `, roll, params.value);
     if (roll < params.value) {
         success = false;
     }
@@ -4750,7 +4852,7 @@ function runSkillCheck(ctx, params) {
 function runConditionCommand(ctx, command) {
     const options = command.options;
     const result = runCondition(ctx, options.condition);
-    console.log(result);
+    logger.log(result);
     if (result) {
         return options.success;
     }
@@ -4821,6 +4923,7 @@ async function runCommand(context, cmd, choices) {
                     currentIndex: 0,
                 };
                 commit('setStack', newStack);
+                await dispatch('saveGame');
                 await dispatch('runLine');
                 break;
             case 'text':
@@ -4871,7 +4974,6 @@ async function runCommand(context, cmd, choices) {
                 commit('clearDialog');
                 return dispatch('nextLine');
             case 'set_button':
-                console.log(cmd.args);
                 commit('changeButton', {
                     button: cmd.args[0],
                     enabled: cmd.args[1],
@@ -4958,11 +5060,11 @@ async function runCommand(context, cmd, choices) {
         }
     }
     catch (err) {
-        console.log(state.machine.stack[state.machine.stack.length - 1].label);
+        logger.log(`Error at: `, state.machine.stack[state.machine.stack.length - 1].label);
         console.error(err);
-        error(commit, `Narrat script runtime error at  <span class="error-filename">${cmd.fileName}:${cmd.line + 1}</span>
-      <b>${err}</b>
-      Script: ${cmd.code}
+        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}`);
     }
 }
@@ -5037,7 +5139,6 @@ async function runChoice(context, cmd) {
             const skill = config.skills[check.skill];
             const level = context.state.skills[check.skill].level;
             const difficultyScore = check.value - level * config.skillChecks.skillMultiplier;
-            console.log(`Check `, check, `score `, difficultyScore);
             const skillCheckState = getSkillCheckState(context, choice.skillCheck.id);
             let found = false;
             let i = 0;
@@ -5324,7 +5425,7 @@ function parseRenpyScript(errorHandler, code, fileName) {
     };
     ctx.indentSize = detectIndentation(ctx, code);
     const lines = findRenpyLines(ctx, code);
-    console.log(lines);
+    logger.log(lines);
     const script = {};
     for (const line of lines) {
         if (line.code.search(':') === -1) {
@@ -5506,7 +5607,7 @@ function detectIndentation(ctx, script) {
     if (result.length < 2) {
         ctx.error(0, `Can't detect indentation level. Make sure you indent with at least 2 spaces and consistently`);
     }
-    console.log(result);
+    logger.log(result);
     return result[1].length;
 }
 
@@ -5520,7 +5621,8 @@ function setupStore(options) {
     }
     // define injection key
     key = Symbol('Store Injection Key');
-    console.log('setup store');
+    logger.setDebug(options.debug);
+    logger.log('setup store');
     store = createStore({
         state: {
             machine: {
@@ -5590,7 +5692,7 @@ function setupStore(options) {
                     };
                 }
                 const end = Date.now();
-                console.log(`script parsed in ${end - start} ms`);
+                logger.log(`script parsed in ${end - start} ms`);
                 commit('setButtons', payload.config.buttons);
                 commit('setScript', scripts);
                 commit('setupSkills', payload.config.skills);
@@ -5612,7 +5714,6 @@ function setupStore(options) {
                 this.dispatch('runLine');
             },
             async runLine(context) {
-                await this.dispatch('saveGame');
                 await runLine(context);
             },
             nextLine(context) {
@@ -5630,13 +5731,22 @@ function setupStore(options) {
                     lastLabel: state.lastLabel,
                     skillChecks: state.skillChecks,
                     playTime: getPlayTime(state.playTime.start, state.playTime.previousPlaytime),
+                    hudStats: state.hudStats,
+                    currentScreen: state.currentScreen,
+                    audio: {
+                        currentMusic: state.audio.currentMusic,
+                    },
                 };
                 localStorage.setItem(SAVE_FILE, JSON.stringify(save));
             },
-            loadGame({ commit, dispatch }, saveFile) {
+            loadGame(ctx, saveFile) {
+                const { commit, dispatch } = ctx;
                 if (saveFile) {
                     const save = JSON.parse(saveFile);
                     commit('setLoadedData', save);
+                    if (save.audio.currentMusic) {
+                        changeMusic(ctx, save.audio.currentMusic);
+                    }
                     dispatch('runLabel', save.lastLabel);
                 }
             },
@@ -5659,6 +5769,9 @@ function setupStore(options) {
                 state.lastLabel = save.lastLabel;
                 state.skillChecks = save.skillChecks;
                 state.playTime.previousPlaytime = save.playTime;
+                state.hudStats = save.hudStats;
+                state.currentScreen = save.currentScreen;
+                state.audio = save.audio;
             },
             reset(state) {
                 state.ready = false;
@@ -5728,6 +5841,7 @@ function setupStore(options) {
             },
             setStack(state, newStack) {
                 state.machine.stack = [];
+                state.lastLabel = newStack.label;
                 state.machine.stack.push(newStack);
             },
             setData(state, { path, value }) {
@@ -5787,7 +5901,7 @@ function setupStore(options) {
                 return id;
             },
             deleteNotification(state, id) {
-                console.log('delete notif', id);
+                logger.log('delete notif', id);
                 delete state.notifications[id];
             },
         },
@@ -5812,10 +5926,10 @@ async function startApp(config, options) {
         mousePos.x = e.clientX;
         mousePos.y = e.clientY;
     });
-    console.log('%c Narrat game engine – 0.8.1 - April 26, 2022 13:28:12', 'background: #222; color: #bada55');
+    console.log('%c Narrat game engine – 0.8.4 - June 4, 2022 18:58:52', 'background: #222; color: #bada55');
     const storeSetup = setupStore(options);
     store$1 = storeSetup.store;
-    app = createApp(script$8, {
+    app = createApp(script$9, {
         config,
         options,
     });