npm - narrat - Versions diffs - 0.8.0 → 0.8.3 - Mend

narrat 0.8.0 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md +16 -2
package/lib/components/menu.vue.d.ts +61 -0
package/lib/index.esm.js +171 -80
package/lib/index.js +170 -79
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,9 +1,23 @@
 # Narrat changelog
-## 0.7.2
+## 0.8.3
+- Fixed bug where menu button would move up as more text gets added to the game
+## 0.8.2
+- Added css to hide scrollbars in the game UI
+- Added a new Menu button with the options to quit and change volume
+- Removed volume slider from the HUD and moved it to the new menu
+## 0.8.1
+- Fixed a bug in accessing values inside conditions caused by changed in 0.7.2
+## 0.8.0
 - Changed the `set` method to access things without caps (`data`, `skills`, `buttons` instead of `DATA`, `SKILLS`, `BUTTONS`) for consistency.
-- Changed string interpolation to have more accessible objects, now values in `data` need to be access with `%{data.something}` instead of just `%{something}`
+- Changed string interpolation to have more accessible objects, now values in `data` need to be accessed with `%{data.something}` instead of just `%{something}`
 - Now possible to access skill levels in string interpolation with `%{skills.someSkill.level}`
 - Improvements to how skill checks are printed to be less awkward

package/lib/components/menu.vue.d.ts ADDED Viewed

@@ -0,0 +1,61 @@
+declare const _default: import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
+    [x: string]: unknown;
+}>>, unknown, {
+    menuActive: boolean;
+}, {}, {
+    openMenu(): void;
+    closeMenu(): void;
+    toggleMenu(): void;
+    quit(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<(readonly unknown[] & {
+    [x: number]: string;
+} & {
+    [Symbol.iterator]?: IterableIterator<string>;
+    length?: number;
+    toString?: string;
+    toLocaleString?: string;
+    concat?: string[];
+    join?: string;
+    slice?: string[];
+    indexOf?: (searchElement: string, fromIndex?: number) => number;
+    lastIndexOf?: (searchElement: string, fromIndex?: number) => number;
+    every?: {
+        <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[];
+        (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean;
+    };
+    some?: (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean;
+    forEach?: (callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void;
+    map?: <U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[];
+    filter?: {
+        <S_1 extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S_1, thisArg?: any): S_1[];
+        (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[];
+    };
+    reduce?: {
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string;
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string;
+        <U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: readonly string[]) => U_1, initialValue: U_1): U_1;
+    };
+    reduceRight?: {
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string;
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string;
+        <U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: readonly string[]) => U_2, initialValue: U_2): U_2;
+    };
+    find?: {
+        <S_2 extends string>(predicate: (this: void, value: string, index: number, obj: readonly string[]) => value is S_2, thisArg?: any): S_2;
+        (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string;
+    };
+    findIndex?: (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number;
+    entries?: IterableIterator<[number, string]>;
+    keys?: IterableIterator<number>;
+    values?: IterableIterator<string>;
+    includes?: (searchElement: string, fromIndex?: number) => boolean;
+    flatMap?: <U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This) => U_3[];
+    flat?: unknown[];
+}) | ({
+    [x: string]: unknown;
+} & {} & {
+    [x: string]: unknown;
+})> & {}, {
+    [x: number]: string;
+} | {}>;
+export default _default;

package/lib/index.esm.js CHANGED Viewed

@@ -1,6 +1,6 @@
-// Version: 0.8.0 - April 26, 2022 13:18:38
+// Version: 0.8.3 - May 16, 2022 14:42:27
 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,\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\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,\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}\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;}};
@@ -360,7 +360,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 ")
               ])
@@ -475,26 +475,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 +509,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 +543,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 +599,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}\n";
 styleInject(css_248z$4);
 script$3.render = render$3;
@@ -3853,7 +3858,8 @@ var script$4 = defineComponent({
         };
     },
     mounted() {
-        howler.Howler.volume(0.5);
+        const volume = howler.Howler.volume();
+        this.$refs.slider.value = volume;
     },
     methods: {
         changeVolume(event) {
@@ -3876,12 +3882,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 +3901,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}\n";
 styleInject(css_248z$5);
 script$4.render = render$4;
@@ -3930,13 +3940,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,
@@ -4154,6 +4161,7 @@ function loadImage(key, path, resolver, rejecter) {
 }
 const audio = {};
+howler.Howler.volume(0.5);
 async function loadAudioAssets(config) {
     console.log(`Loading audio`);
     const loadingPromises = [];
@@ -4297,8 +4305,87 @@ 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}\n";
+styleInject(css_248z$9);
+script$8.render = render$8;
+console.log('hello app');
+var script$9 = defineComponent({
     $refs: {
         dialogContainer: HTMLInputElement,
     },
@@ -4310,6 +4397,7 @@ var script$8 = defineComponent({
         LoadingBar: script$6,
         NotificationToast: script$7,
         Hud: script$5,
+        Menu: script$8,
     },
     data() {
         return {
@@ -4579,16 +4667,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 +4695,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 +4717,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 +4744,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 +4775,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}\n";
+styleInject(css_248z$a);
-script$8.render = render$8;
+script$9.render = render$9;
 function timeout(durationMs) {
     return new Promise((resolve, reject) => {
@@ -4775,10 +4865,10 @@ function runCondition(ctx, condition) {
 function conditionFunction(ctx, condition) {
     const { state } = ctx;
     const context = {
-        DATA: state.machine.data,
-        SKILLS: state.skills,
-        SKILLCHECKS: state.skillChecks,
-        STATS: state.hudStats,
+        data: state.machine.data,
+        skills: state.skills,
+        skillChecks: state.skillChecks,
+        stats: state.hudStats,
         roll: (checkId, skill, value) => {
             const skillCheckState = getSkillCheckState(ctx, checkId);
             if (skillCheckState) {
@@ -4959,6 +5049,7 @@ async function runCommand(context, cmd, choices) {
     }
     catch (err) {
         console.log(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}
@@ -5811,10 +5902,10 @@ async function startApp(config, options) {
         mousePos.x = e.clientX;
         mousePos.y = e.clientY;
     });
-    console.log('%c Narrat game engine – 0.8.0 - April 26, 2022 13:18:38', 'background: #222; color: #bada55');
+    console.log('%c Narrat game engine – 0.8.3 - May 16, 2022 14:42:27', 'background: #222; color: #bada55');
     const storeSetup = setupStore(options);
     store$1 = storeSetup.store;
-    app = createApp(script$8, {
+    app = createApp(script$9, {
         config,
         options,
     });

package/lib/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-// Version: 0.8.0 - April 26, 2022 13:18:38
+// Version: 0.8.3 - May 16, 2022 14:42:27
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -34,7 +34,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,\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\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,\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}\n";
 styleInject(css_248z);
 const f=vue.ref([]),v=vue.ref(null),m=vue.ref(null),g=vue.ref(null),h=vue.reactive({current:""}),y=[],b=vue.ref(!1),k=vue.readonly(f),w=vue.readonly(v),M=vue.readonly(m),q=vue.readonly(g),x=vue.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;}};
@@ -364,7 +364,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
               vue.renderSlot(_ctx.$slots, "footer", {}, () => [
                 _hoisted_9,
                 vue.createElementVNode("button", {
-                  class: "modal-default-button",
+                  class: "modal-default-button button",
                   onClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('close')))
                 }, " Close ")
               ])
@@ -479,26 +479,27 @@ var script$3 = vue.defineComponent({
 });
 const _hoisted_1$3 = { class: "debug-menu" };
-const _hoisted_2$2 = /*#__PURE__*/vue.createElementVNode("h3", null, "Error(s)", -1);
+const _hoisted_2$2 = /*#__PURE__*/vue.createElementVNode("h3", { class: "title" }, "Error(s)", -1);
 const _hoisted_3$2 = /*#__PURE__*/vue.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__*/vue.createElementVNode("h3", null, "Debug Menu!", -1);
-const _hoisted_6$2 = /*#__PURE__*/vue.createTextVNode(" Hello this is the debug menu. ");
-const _hoisted_7$2 = /*#__PURE__*/vue.createElementVNode("option", {
+const _hoisted_5$2 = /*#__PURE__*/vue.createElementVNode("h3", { class: "title" }, "Debug Menu!", -1);
+const _hoisted_6$2 = { class: "container" };
+const _hoisted_7$2 = /*#__PURE__*/vue.createTextVNode(" Hello this is the debug menu. ");
+const _hoisted_8$1 = /*#__PURE__*/vue.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__*/vue.createElementVNode("h2", null, "Skills", -1);
-const _hoisted_11 = { class: "table-auto" };
-const _hoisted_12 = /*#__PURE__*/vue.createElementVNode("tr", null, [
+const _hoisted_9$1 = ["value"];
+const _hoisted_10 = { class: "grid grid-cols-3 gap-4" };
+const _hoisted_11 = /*#__PURE__*/vue.createElementVNode("h2", null, "Skills", -1);
+const _hoisted_12 = { class: "table-auto" };
+const _hoisted_13 = /*#__PURE__*/vue.createElementVNode("tr", null, [
   /*#__PURE__*/vue.createElementVNode("th", null, "Skill"),
   /*#__PURE__*/vue.createElementVNode("th", null, "Level")
 ], -1);
-const _hoisted_13 = /*#__PURE__*/vue.createElementVNode("h2", null, "Skill Checks", -1);
-const _hoisted_14 = { class: "table-auto" };
-const _hoisted_15 = /*#__PURE__*/vue.createElementVNode("thead", null, [
+const _hoisted_14 = /*#__PURE__*/vue.createElementVNode("h2", null, "Skill Checks", -1);
+const _hoisted_15 = { class: "table-auto" };
+const _hoisted_16 = /*#__PURE__*/vue.createElementVNode("thead", null, [
   /*#__PURE__*/vue.createElementVNode("tr", null, [
     /*#__PURE__*/vue.createElementVNode("th", null, "Skill Check"),
     /*#__PURE__*/vue.createElementVNode("th", null, "Available"),
@@ -512,7 +513,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
     vue.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)
       ? (vue.openBlock(), vue.createBlock(_component_modal, {
@@ -546,49 +547,53 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             _hoisted_5$2
           ]),
           body: vue.withCtx(() => [
-            _hoisted_6$2,
-            vue.createElementVNode("select", {
-              name: "label-selector",
-              onChange: _cache[1] || (_cache[1] = $event => (_ctx.labelSelected($event)))
-            }, [
+            vue.createElementVNode("div", _hoisted_6$2, [
               _hoisted_7$2,
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.labels, (label) => {
-                return (vue.openBlock(), vue.createElementBlock("option", {
-                  value: label,
-                  key: label
-                }, vue.toDisplayString(label), 9, _hoisted_8$1))
-              }), 128))
-            ], 32),
-            vue.createElementVNode("div", _hoisted_9$1, [
-              vue.createElementVNode("button", {
-                onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.wordCount && _ctx.wordCount(...args)))
-              }, "Word Count"),
-              vue.createElementVNode("button", {
-                onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.save && _ctx.save(...args)))
-              }, "Save Game")
-            ]),
-            vue.createElementVNode("h3", null, "Play time: " + vue.toDisplayString(_ctx.getPlayTimeString()), 1),
-            _hoisted_10,
-            vue.createElementVNode("table", _hoisted_11, [
-              _hoisted_12,
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.skills, (skill, key) => {
-                return (vue.openBlock(), vue.createElementBlock("tr", { key: key }, [
-                  vue.createElementVNode("td", null, vue.toDisplayString(key), 1),
-                  vue.createElementVNode("td", null, vue.toDisplayString(skill.level), 1)
-                ]))
-              }), 128))
-            ]),
-            _hoisted_13,
-            vue.createElementVNode("table", _hoisted_14, [
-              _hoisted_15,
-              vue.createElementVNode("tbody", null, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.skillChecks, (check, key) => {
+              vue.createElementVNode("select", {
+                name: "label-selector",
+                onChange: _cache[1] || (_cache[1] = $event => (_ctx.labelSelected($event)))
+              }, [
+                _hoisted_8$1,
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.labels, (label) => {
+                  return (vue.openBlock(), vue.createElementBlock("option", {
+                    value: label,
+                    key: label
+                  }, vue.toDisplayString(label), 9, _hoisted_9$1))
+                }), 128))
+              ], 32),
+              vue.createElementVNode("div", _hoisted_10, [
+                vue.createElementVNode("button", {
+                  onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.wordCount && _ctx.wordCount(...args))),
+                  class: "button"
+                }, "Word Count"),
+                vue.createElementVNode("button", {
+                  onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.save && _ctx.save(...args))),
+                  class: "button"
+                }, "Save Game")
+              ]),
+              vue.createElementVNode("h3", null, "Play time: " + vue.toDisplayString(_ctx.getPlayTimeString()), 1),
+              _hoisted_11,
+              vue.createElementVNode("table", _hoisted_12, [
+                _hoisted_13,
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.skills, (skill, key) => {
                   return (vue.openBlock(), vue.createElementBlock("tr", { key: key }, [
                     vue.createElementVNode("td", null, vue.toDisplayString(key), 1),
-                    vue.createElementVNode("td", null, vue.toDisplayString(check.available ? '✅' : '❌'), 1),
-                    vue.createElementVNode("td", null, vue.toDisplayString(check.passed ? '✅' : '❌'), 1)
+                    vue.createElementVNode("td", null, vue.toDisplayString(skill.level), 1)
                   ]))
                 }), 128))
+              ]),
+              _hoisted_14,
+              vue.createElementVNode("table", _hoisted_15, [
+                _hoisted_16,
+                vue.createElementVNode("tbody", null, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.skillChecks, (check, key) => {
+                    return (vue.openBlock(), vue.createElementBlock("tr", { key: key }, [
+                      vue.createElementVNode("td", null, vue.toDisplayString(key), 1),
+                      vue.createElementVNode("td", null, vue.toDisplayString(check.available ? '✅' : '❌'), 1),
+                      vue.createElementVNode("td", null, vue.toDisplayString(check.passed ? '✅' : '❌'), 1)
+                    ]))
+                  }), 128))
+                ])
               ])
             ])
           ]),
@@ -598,7 +603,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}\n";
 styleInject(css_248z$4);
 script$3.render = render$3;
@@ -3857,7 +3862,8 @@ var script$4 = vue.defineComponent({
         };
     },
     mounted() {
-        howler.Howler.volume(0.5);
+        const volume = howler.Howler.volume();
+        this.$refs.slider.value = volume;
     },
     methods: {
         changeVolume(event) {
@@ -3880,12 +3886,16 @@ var script$4 = vue.defineComponent({
 });
 const _hoisted_1$4 = { class: "volume-controls" };
-const _hoisted_2$3 = /*#__PURE__*/vue.createElementVNode("label", { for: "volume" }, "Volume", -1);
+const _hoisted_2$3 = /*#__PURE__*/vue.createElementVNode("label", {
+  for: "volume",
+  class: "volume-label"
+}, "Volume:", -1);
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
     _hoisted_2$3,
     vue.createElementVNode("input", {
+      ref: "slider",
       class: "volume-slider",
       type: "range",
       id: "volume",
@@ -3895,11 +3905,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}\n";
 styleInject(css_248z$5);
 script$4.render = render$4;
@@ -3934,13 +3944,10 @@ const _hoisted_2$4 = { class: "bold" };
 const _hoisted_3$3 = /*#__PURE__*/vue.createTextVNode(": ");
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VolumeControls = vue.resolveComponent("VolumeControls");
   return (vue.openBlock(), vue.createElementBlock("div", {
     class: "hud",
     style: vue.normalizeStyle(_ctx.hudStyle)
   }, [
-    vue.createVNode(_component_VolumeControls),
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.stats, (value, key) => {
       return (vue.openBlock(), vue.createElementBlock("div", {
         key: key,
@@ -4158,6 +4165,7 @@ function loadImage(key, path, resolver, rejecter) {
 }
 const audio = {};
+howler.Howler.volume(0.5);
 async function loadAudioAssets(config) {
     console.log(`Loading audio`);
     const loadingPromises = [];
@@ -4301,8 +4309,87 @@ function debounce(func, waitMilliseconds = 50, options = {}) {
     return debouncedFunction;
 }
-console.log('hello app');
 var script$8 = vue.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__*/vue.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 = vue.resolveComponent("VolumeControls");
+  const _component_modal = vue.resolveComponent("modal");
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+    vue.createElementVNode("button", {
+      class: "button menu-toggle-button",
+      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.openMenu && _ctx.openMenu(...args)))
+    }, "Menu"),
+    (_ctx.menuActive)
+      ? (vue.openBlock(), vue.createBlock(_component_modal, {
+          key: 0,
+          class: "menu",
+          onClose: _ctx.closeMenu
+        }, {
+          header: vue.withCtx(() => [
+            _hoisted_2$6
+          ]),
+          body: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_3$4, [
+              vue.createVNode(_component_VolumeControls),
+              vue.createElementVNode("button", {
+                class: "button title quit-button",
+                onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.quit && _ctx.quit(...args)))
+              }, "Quit")
+            ])
+          ]),
+          _: 1
+        }, 8, ["onClose"]))
+      : vue.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}\n";
+styleInject(css_248z$9);
+script$8.render = render$8;
+console.log('hello app');
+var script$9 = vue.defineComponent({
     $refs: {
         dialogContainer: HTMLInputElement,
     },
@@ -4314,6 +4401,7 @@ var script$8 = vue.defineComponent({
         LoadingBar: script$6,
         NotificationToast: script$7,
         Hud: script$5,
+        Menu: script$8,
     },
     data() {
         return {
@@ -4583,16 +4671,17 @@ var script$8 = vue.defineComponent({
     },
 });
-const _hoisted_1$7 = ["width", "height"];
-const _hoisted_2$6 = /*#__PURE__*/vue.createElementVNode("div", { class: "anchor" }, null, -1);
-const _hoisted_3$4 = {
+const _hoisted_1$8 = ["width", "height"];
+const _hoisted_2$7 = /*#__PURE__*/vue.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 = vue.resolveComponent("Hud");
+  const _component_Menu = vue.resolveComponent("Menu");
   const _component_DialogPicture = vue.resolveComponent("DialogPicture");
   const _component_DialogBox = vue.resolveComponent("DialogBox");
   const _component_LoadingBar = vue.resolveComponent("LoadingBar");
@@ -4610,6 +4699,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
           class: "game",
           style: vue.normalizeStyle(_ctx.gameStyle)
         }, [
+          vue.createVNode(_component_Menu, { class: "menu-toggle" }),
           vue.createVNode(vue.Transition, { name: "fade" }, {
             default: vue.withCtx(() => [
               (_ctx.picture)
@@ -4631,7 +4721,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))
             : vue.createCommentVNode("", true),
           (_ctx.dialogPlaying)
@@ -4658,12 +4748,12 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                   ]),
                   _: 1
                 }, 8, ["style"]),
-                _hoisted_2$6
+                _hoisted_2$7
               ], 4))
             : vue.createCommentVNode("", true)
         ], 4))
       : (_ctx.gameLoaded)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [
             vue.createElementVNode("button", {
               class: "button menu-button start-button override",
               onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.startGame && _ctx.startGame(...args)))
@@ -4689,10 +4779,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}\n";
+styleInject(css_248z$a);
-script$8.render = render$8;
+script$9.render = render$9;
 function timeout(durationMs) {
     return new Promise((resolve, reject) => {
@@ -4779,10 +4869,10 @@ function runCondition(ctx, condition) {
 function conditionFunction(ctx, condition) {
     const { state } = ctx;
     const context = {
-        DATA: state.machine.data,
-        SKILLS: state.skills,
-        SKILLCHECKS: state.skillChecks,
-        STATS: state.hudStats,
+        data: state.machine.data,
+        skills: state.skills,
+        skillChecks: state.skillChecks,
+        stats: state.hudStats,
         roll: (checkId, skill, value) => {
             const skillCheckState = getSkillCheckState(ctx, checkId);
             if (skillCheckState) {
@@ -4963,6 +5053,7 @@ async function runCommand(context, cmd, choices) {
     }
     catch (err) {
         console.log(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}
@@ -5815,10 +5906,10 @@ async function startApp(config, options) {
         mousePos.x = e.clientX;
         mousePos.y = e.clientY;
     });
-    console.log('%c Narrat game engine – 0.8.0 - April 26, 2022 13:18:38', 'background: #222; color: #bada55');
+    console.log('%c Narrat game engine – 0.8.3 - May 16, 2022 14:42:27', 'background: #222; color: #bada55');
     const storeSetup = setupStore(options);
     store$1 = storeSetup.store;
-    app = vue.createApp(script$8, {
+    app = vue.createApp(script$9, {
         config,
         options,
     });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "narrat",
-  "version": "0.8.0",
+  "version": "0.8.3",
   "description": "narrat narrative engine",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",