From dc8a5fb5587bc539c930d07a93771d6980438321 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 24 Apr 2022 21:47:08 -0500
Subject: [PATCH 01/38] Fix layer.minWidth being ignored

---
 src/components/Layer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layer.vue b/src/components/Layer.vue
index 30be10d..b051687 100644
--- a/src/components/Layer.vue
+++ b/src/components/Layer.vue
@@ -110,7 +110,7 @@ export default defineComponent({
                     tabValue.style.flexGrow = "";
                     tabValue.style.flexShrink = "";
                     tabValue.style.width = "";
-                    tabValue.style.minWidth = tabValue.style.flexBasis = `${width}px`;
+                    tabValue.style.minWidth = tabValue.style.flexBasis = width;
                     tabValue.style.margin = "";
                 }
             }

From eb81fdfb2c95eb6ec74c4d3ec699a3c2b5f5f885 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 24 Apr 2022 21:48:27 -0500
Subject: [PATCH 02/38] Fixed separators getting cut off if the tab on the left
 can be scrolled This also required some cleanup around the stick CSS

---
 src/components/Game.vue          | 13 +++----------
 src/components/layout/Sticky.vue | 13 +------------
 src/features/tabs/TabFamily.vue  | 23 ++++++-----------------
 3 files changed, 10 insertions(+), 39 deletions(-)

diff --git a/src/components/Game.vue b/src/components/Game.vue
index ca992ad..570706f 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -11,7 +11,6 @@
                 />
                 <component :is="tab" :index="index" v-else />
             </div>
-            <div class="separator" v-if="index !== tabs.length - 1"></div>
         </div>
     </div>
 </template>
@@ -66,14 +65,8 @@ function gatherLayerProps(layer: GenericLayer) {
     flex-grow: 1;
 }
 
-.separator {
-    position: absolute;
-    right: -4px;
-    top: 0;
-    bottom: 0;
-    width: 8px;
-    background: var(--outline);
-    z-index: 1;
+.tab + .tab > .inner-tab {
+    border-left: solid 4px var(--outline);
 }
 </style>
 
@@ -82,7 +75,7 @@ function gatherLayerProps(layer: GenericLayer) {
     height: 4px;
     border: none;
     background: var(--outline);
-    margin: var(--feature-margin) -10px;
+    margin: var(--feature-margin) 0;
 }
 
 .tab .modal-body hr {
diff --git a/src/components/layout/Sticky.vue b/src/components/layout/Sticky.vue
index 5413d36..4a598d4 100644
--- a/src/components/layout/Sticky.vue
+++ b/src/components/layout/Sticky.vue
@@ -43,18 +43,7 @@ onMounted(() => {
 .sticky {
     position: sticky;
     background: var(--background);
-    margin-left: -10px;
-    margin-right: -10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    width: 100%;
+    width: calc(100% - 2px);
     z-index: 3;
 }
-
-.modal-body .sticky {
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 0;
-    padding-right: 0;
-}
 </style>
diff --git a/src/features/tabs/TabFamily.vue b/src/features/tabs/TabFamily.vue
index 72ccd8b..4d52ab8 100644
--- a/src/features/tabs/TabFamily.vue
+++ b/src/features/tabs/TabFamily.vue
@@ -168,29 +168,22 @@ export default defineComponent({
     margin-bottom: 20px;
 }
 
-.tab-family-container .sticky {
-    margin-left: -3px !important;
-    margin-right: -3px !important;
-}
-
 .tab-buttons-container {
-    width: calc(100% - 14px);
     z-index: 4;
 }
 
 .tab-buttons-container:not(.floating) {
-    border-top: solid 4px;
     border-bottom: solid 4px;
     border-color: inherit;
 }
 
+:not(.layer-tab):not(.modal-body) > .tab-family-container > .tab-buttons-container:not(.floating) {
+    width: calc(100% + 6px);
+    margin-left: -3px;
+}
+
 .tab-buttons-container:not(.floating) .tab-buttons {
-    width: calc(100% + 14px);
-    margin-left: -7px;
-    margin-right: -7px;
-    box-sizing: border-box;
     text-align: left;
-    padding-left: 14px;
     margin-bottom: -4px;
 }
 
@@ -239,11 +232,7 @@ export default defineComponent({
     > .tab-family-container
     > .tab-buttons-container:not(.floating):first-child
     .tab-buttons {
-    padding-left: 2px;
-}
-
-.tab-buttons-container:not(.floating):first-child {
-    border-top: 0;
+    padding-left: 0;
 }
 
 .minimizable > .tab-buttons-container:not(.floating):first-child {

From f49edc3de223df858942cb20fd38303678a116f5 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 24 Apr 2022 22:04:33 -0500
Subject: [PATCH 03/38] Made goBack and minimize buttons look more consistent

---
 src/components/Layer.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Layer.vue b/src/components/Layer.vue
index b051687..311b4c4 100644
--- a/src/components/Layer.vue
+++ b/src/components/Layer.vue
@@ -193,7 +193,6 @@ export default defineComponent({
     right: 9px;
     z-index: 7;
     line-height: 30px;
-    width: 30px;
     border: none;
     background: var(--background);
     box-shadow: var(--background) 0 2px 3px 5px;
@@ -201,7 +200,6 @@ export default defineComponent({
     color: var(--foreground);
     font-size: 40px;
     cursor: pointer;
-    padding: 0;
     margin-top: -44px;
     margin-right: -30px;
 }
@@ -214,15 +212,19 @@ export default defineComponent({
 }
 
 .goBack {
-    position: absolute;
-    top: 0;
+    position: sticky;
+    top: 6px;
     left: 20px;
-    background-color: transparent;
-    border: 1px solid transparent;
+    line-height: 30px;
+    margin-top: -50px;
+    margin-left: -35px;
+    border: none;
+    background: var(--background);
+    box-shadow: var(--background) 0 2px 3px 5px;
+    border-radius: 50%;
     color: var(--foreground);
     font-size: 40px;
     cursor: pointer;
-    line-height: 40px;
     z-index: 7;
 }
 

From 64533b55dcdee98945a7aae4451c1633d165127b Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 24 Apr 2022 20:12:30 -0500
Subject: [PATCH 04/38] Fix Particles causing scroll issues

---
 src/features/links/Links.vue         | 8 ++++----
 src/features/particles/Particles.vue | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/features/links/Links.vue b/src/features/links/Links.vue
index a5877b5..62b774f 100644
--- a/src/features/links/Links.vue
+++ b/src/features/links/Links.vue
@@ -64,10 +64,10 @@ const validLinks = computed(() => {
 .resize-listener,
 svg {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
     z-index: -10;
     pointer-events: none;
 }
diff --git a/src/features/particles/Particles.vue b/src/features/particles/Particles.vue
index 0050545..4b6c41e 100644
--- a/src/features/particles/Particles.vue
+++ b/src/features/particles/Particles.vue
@@ -102,10 +102,10 @@ export default defineComponent({
 .not-fullscreen,
 .resize-listener {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
     pointer-events: none;
 }
 </style>

From 8e6fc852d7ec6e8c8b66fb5a510130b94f8db0bb Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 26 Apr 2022 23:06:19 -0500
Subject: [PATCH 05/38] Made modifier section's base customizable

---
 src/game/modifiers.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx
index ef66911..ffbef3c 100644
--- a/src/game/modifiers.tsx
+++ b/src/game/modifiers.tsx
@@ -119,7 +119,8 @@ export function createModifierSection(
     subtitle: string,
     modifier: Required<Modifier>,
     base: DecimalSource = 1,
-    unit = ""
+    unit = "",
+    baseText: CoercableComponent = "Base"
 ) {
     return (
         <div>
@@ -133,7 +134,7 @@ export function createModifierSection(
                     {format(base)}
                     {unit}
                 </span>
-                <span class="modifier-description">Base</span>
+                <span class="modifier-description">{renderJSX(baseText)}</span>
             </div>
             {renderJSX(unref(modifier.description))}
             <hr />

From d4c1e16fb484d1cf09df1d9ead03181205183606 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Wed, 27 Apr 2022 08:07:37 -0500
Subject: [PATCH 06/38] Fix tree branches not appearing in the correct
 positions

---
 src/features/links/Links.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/features/links/Links.vue b/src/features/links/Links.vue
index 62b774f..eccd7be 100644
--- a/src/features/links/Links.vue
+++ b/src/features/links/Links.vue
@@ -61,8 +61,7 @@ const validLinks = computed(() => {
 </script>
 
 <style scoped>
-.resize-listener,
-svg {
+.resize-listener {
     position: absolute;
     top: 5px;
     left: 5px;
@@ -71,4 +70,14 @@ svg {
     z-index: -10;
     pointer-events: none;
 }
+
+svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -10;
+    pointer-events: none;
+}
 </style>

From 1479c1d44d24ff25d445c27f4ce856e62082a073 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Wed, 27 Apr 2022 08:20:09 -0500
Subject: [PATCH 07/38] Fixed tree nodes not being clickable on the edges

---
 src/features/trees/TreeNode.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/features/trees/TreeNode.vue b/src/features/trees/TreeNode.vue
index b4b7522..a26f5a4 100644
--- a/src/features/trees/TreeNode.vue
+++ b/src/features/trees/TreeNode.vue
@@ -7,15 +7,15 @@
             can: unref(canClick),
             ...unref(classes)
         }"
+        @click="onClick"
+        @mousedown="start"
+        @mouseleave="stop"
+        @mouseup="stop"
+        @touchstart="start"
+        @touchend="stop"
+        @touchcancel="stop"
     >
         <div
-            @click="onClick"
-            @mousedown="start"
-            @mouseleave="stop"
-            @mouseup="stop"
-            @touchstart="start"
-            @touchend="stop"
-            @touchcancel="stop"
             :style="[
                 {
                     backgroundColor: unref(color),

From c692578da70c7fd05f922380572199d3a935d3a3 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 30 Apr 2022 16:42:03 -0500
Subject: [PATCH 08/38] Made createCollapsibleModifierSections utility function

---
 src/data/common.css |  9 +++++
 src/data/common.tsx | 81 +++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 src/data/common.css

diff --git a/src/data/common.css b/src/data/common.css
new file mode 100644
index 0000000..728c160
--- /dev/null
+++ b/src/data/common.css
@@ -0,0 +1,9 @@
+.modifier-toggle {
+    padding-right: 10px;
+    transform: translateY(-1px);
+    display: inline-block;
+}
+
+.modifier-toggle.collapsed {
+    transform: translate(-5px, -5px) rotate(-90deg);
+}
diff --git a/src/data/common.tsx b/src/data/common.tsx
index f9f58fb..f7ba494 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -5,7 +5,14 @@ import {
     GenericClickable
 } from "features/clickables/clickable";
 import { GenericConversion } from "features/conversion";
-import { CoercableComponent, jsx, OptionsFunc, Replace, setDefault } from "features/feature";
+import {
+    CoercableComponent,
+    jsx,
+    JSXFunction,
+    OptionsFunc,
+    Replace,
+    setDefault
+} from "features/feature";
 import { displayResource } from "features/resources/resource";
 import {
     createTreeNode,
@@ -14,16 +21,21 @@ import {
     TreeNode,
     TreeNodeOptions
 } from "features/trees/tree";
+import { Modifier } from "game/modifiers";
+import { Persistent, persistent } from "game/persistence";
 import player from "game/player";
-import Decimal, { DecimalSource } from "util/bignum";
+import Decimal, { DecimalSource, format } from "util/bignum";
 import {
     Computable,
+    convertComputable,
     GetComputableType,
     GetComputableTypeWithDefault,
     processComputable,
     ProcessedComputable
 } from "util/computed";
+import { renderJSX } from "util/vue";
 import { computed, Ref, unref } from "vue";
+import "./common.css";
 
 export interface ResetButtonOptions extends ClickableOptions {
     conversion: GenericConversion;
@@ -177,3 +189,68 @@ export function createLayerTreeNode<T extends LayerTreeNodeOptions>(
         };
     }) as unknown as LayerTreeNode<T>;
 }
+
+export function createCollapsibleModifierSections(
+    sections: {
+        title: string;
+        subtitle?: string;
+        modifier: Required<Modifier>;
+        base?: Computable<DecimalSource>;
+        unit?: string;
+        baseText?: Computable<CoercableComponent>;
+        visible?: Computable<boolean>;
+    }[]
+): [JSXFunction, Persistent<boolean>[]] {
+    const processedBase = sections.map(s => convertComputable(s.base));
+    const processedBaseText = sections.map(s => convertComputable(s.baseText));
+    const processedVisible = sections.map(s => convertComputable(s.visible));
+    const collapsed = sections.map(() => persistent<boolean>(false));
+    const jsxFunc = jsx(() => {
+        const sectionJSX = sections.map((s, i) => {
+            if (unref(processedVisible[i]) === false) return null;
+            const header = (
+                <h3
+                    onClick={() => (collapsed[i].value = !collapsed[i].value)}
+                    style="cursor: pointer"
+                >
+                    <span class={"modifier-toggle" + (unref(collapsed[i]) ? " collapsed" : "")}>
+                        ▼
+                    </span>
+                    {s.title}
+                    {s.subtitle ? <span class="subtitle"> ({s.subtitle})</span> : null}
+                </h3>
+            );
+
+            const modifiers = unref(collapsed[i]) ? null : (
+                <>
+                    <div class="modifier-container">
+                        <span class="modifier-amount">
+                            {format(unref(processedBase[i]) ?? 1)}
+                            {s.unit}
+                        </span>
+                        <span class="modifier-description">
+                            {renderJSX(unref(processedBaseText[i]) ?? "Base")}
+                        </span>
+                    </div>
+                    {renderJSX(unref(s.modifier.description))}
+                </>
+            );
+
+            return (
+                <>
+                    {i === 0 ? null : <br />}
+                    <div>
+                        {header}
+                        <br />
+                        {modifiers}
+                        <hr />
+                        Total: {format(s.modifier.apply(unref(processedBase[i]) ?? 1))}
+                        {s.unit}
+                    </div>
+                </>
+            );
+        });
+        return <>{sectionJSX}</>;
+    });
+    return [jsxFunc, collapsed];
+}

From 77bcc10580f9fbea9ff4594c256697e05b5b123c Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 30 Apr 2022 18:41:04 -0500
Subject: [PATCH 09/38] Open newly created saves automatically

---
 src/components/SavesManager.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/SavesManager.vue b/src/components/SavesManager.vue
index 7c3eaa8..940bfc2 100644
--- a/src/components/SavesManager.vue
+++ b/src/components/SavesManager.vue
@@ -33,7 +33,7 @@
                 <div class="field">
                     <span class="field-title">Create Save</span>
                     <div class="field-buttons">
-                        <button class="button" @click="newSave">New Game</button>
+                        <button class="button" @click="openSave(newSave().id)">New Game</button>
                         <Select
                             v-if="Object.keys(bank).length > 0"
                             :options="bank"
@@ -263,6 +263,8 @@ function newFromPreset(preset: string) {
     save(playerData as PlayerData);
 
     settings.saves.push(playerData.id);
+
+    openSave(playerData.id);
 }
 
 function editSave(id: string, newName: string) {

From 665ddff196c65f76f7c1ff6f4df552157c5067cf Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 30 Apr 2022 22:08:29 -0500
Subject: [PATCH 10/38] Replaced the two Direction enums with a single one

---
 src/components/Nav.vue            | 27 +++++++++++----------------
 src/features/bars/Bar.vue         |  2 +-
 src/features/bars/bar.ts          |  9 +--------
 src/features/tooltips/Tooltip.vue | 14 +++++++-------
 src/features/tooltips/tooltip.ts  | 16 +++++-----------
 src/util/common.ts                |  8 ++++++++
 6 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 66453b3..273017d 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -3,7 +3,7 @@
         <img v-if="banner" :src="banner" class="banner" :alt="title" />
         <div v-else class="title">{{ title }}</div>
         <div @click="changelog?.open()" class="version-container">
-            <Tooltip display="Changelog" :direction="TooltipDirection.DOWN" class="version"
+            <Tooltip display="Changelog" :direction="Direction.Down" class="version"
                 ><span>v{{ versionNumber }}</span></Tooltip
             >
         </div>
@@ -26,56 +26,51 @@
         </div>
         <div>
             <a href="https://forums.moddingtree.com/" target="_blank">
-                <Tooltip display="Forums" :direction="TooltipDirection.DOWN" yoffset="5px">
+                <Tooltip display="Forums" :direction="Direction.Down" yoffset="5px">
                     <span class="material-icons">forum</span>
                 </Tooltip>
             </a>
         </div>
         <div @click="info?.open()">
-            <Tooltip display="Info" :direction="TooltipDirection.DOWN" class="info">
+            <Tooltip display="Info" :direction="Direction.Down" class="info">
                 <span class="material-icons">info</span>
             </Tooltip>
         </div>
         <div @click="savesManager?.open()">
-            <Tooltip display="Saves" :direction="TooltipDirection.DOWN" xoffset="-20px">
+            <Tooltip display="Saves" :direction="Direction.Down" xoffset="-20px">
                 <span class="material-icons">library_books</span>
             </Tooltip>
         </div>
         <div @click="options?.open()">
-            <Tooltip display="Options" :direction="TooltipDirection.DOWN" xoffset="-66px">
+            <Tooltip display="Options" :direction="Direction.Down" xoffset="-66px">
                 <span class="material-icons">settings</span>
             </Tooltip>
         </div>
     </div>
     <div v-else class="overlay-nav" v-bind="$attrs">
         <div @click="changelog?.open()" class="version-container">
-            <Tooltip
-                display="Changelog"
-                :direction="TooltipDirection.RIGHT"
-                xoffset="25%"
-                class="version"
-            >
+            <Tooltip display="Changelog" :direction="Direction.Right" xoffset="25%" class="version">
                 <span>v{{ versionNumber }}</span>
             </Tooltip>
         </div>
         <div @click="savesManager?.open()">
-            <Tooltip display="Saves" :direction="TooltipDirection.RIGHT">
+            <Tooltip display="Saves" :direction="Direction.Right">
                 <span class="material-icons">library_books</span>
             </Tooltip>
         </div>
         <div @click="options?.open()">
-            <Tooltip display="Options" :direction="TooltipDirection.RIGHT">
+            <Tooltip display="Options" :direction="Direction.Right">
                 <span class="material-icons">settings</span>
             </Tooltip>
         </div>
         <div @click="info?.open()">
-            <Tooltip display="Info" :direction="TooltipDirection.RIGHT">
+            <Tooltip display="Info" :direction="Direction.Right">
                 <span class="material-icons">info</span>
             </Tooltip>
         </div>
         <div>
             <a href="https://forums.moddingtree.com/" target="_blank">
-                <Tooltip display="Forums" :direction="TooltipDirection.RIGHT" xoffset="7px">
+                <Tooltip display="Forums" :direction="Direction.Right" xoffset="7px">
                     <span class="material-icons">forum</span>
                 </Tooltip>
             </a>
@@ -111,7 +106,7 @@ import Info from "./Info.vue";
 import Options from "./Options.vue";
 import SavesManager from "./SavesManager.vue";
 import Tooltip from "features/tooltips/Tooltip.vue";
-import { TooltipDirection } from "features/tooltips/tooltip";
+import { Direction } from "util/common";
 
 const info = ref<ComponentPublicInstance<typeof Info> | null>(null);
 const savesManager = ref<ComponentPublicInstance<typeof SavesManager> | null>(null);
diff --git a/src/features/bars/Bar.vue b/src/features/bars/Bar.vue
index 9c40732..22bc6ab 100644
--- a/src/features/bars/Bar.vue
+++ b/src/features/bars/Bar.vue
@@ -45,13 +45,13 @@
 </template>
 
 <script lang="ts">
-import { Direction } from "./bar";
 import { CoercableComponent, Visibility } from "features/feature";
 import Decimal, { DecimalSource } from "util/bignum";
 import { computeOptionalComponent, processedPropType, unwrapRef } from "util/vue";
 import { computed, CSSProperties, defineComponent, StyleValue, toRefs, unref } from "vue";
 import Node from "components/Node.vue";
 import MarkNode from "components/MarkNode.vue";
+import { Direction } from "util/common";
 
 export default defineComponent({
     props: {
diff --git a/src/features/bars/bar.ts b/src/features/bars/bar.ts
index b732048..ed9bac0 100644
--- a/src/features/bars/bar.ts
+++ b/src/features/bars/bar.ts
@@ -11,6 +11,7 @@ import {
     Visibility
 } from "features/feature";
 import { DecimalSource } from "util/bignum";
+import { Direction } from "util/common";
 import {
     Computable,
     GetComputableType,
@@ -23,14 +24,6 @@ import { unref } from "vue";
 
 export const BarType = Symbol("Bar");
 
-export enum Direction {
-    Up = "Up",
-    Down = "Down",
-    Left = "Left",
-    Right = "Right",
-    Default = "Up"
-}
-
 export interface BarOptions {
     visibility?: Computable<Visibility>;
     width: Computable<number>;
diff --git a/src/features/tooltips/Tooltip.vue b/src/features/tooltips/Tooltip.vue
index 618d5b3..c1fd92f 100644
--- a/src/features/tooltips/Tooltip.vue
+++ b/src/features/tooltips/Tooltip.vue
@@ -13,10 +13,10 @@
                 v-if="isShown"
                 class="tooltip"
                 :class="{
-                    top: unref(direction) === TooltipDirection.UP,
-                    left: unref(direction) === TooltipDirection.LEFT,
-                    right: unref(direction) === TooltipDirection.RIGHT,
-                    bottom: unref(direction) === TooltipDirection.DOWN,
+                    top: unref(direction) === Direction.Up,
+                    left: unref(direction) === Direction.Left,
+                    right: unref(direction) === Direction.Right,
+                    bottom: unref(direction) === Direction.Down,
                     ...unref(classes)
                 }"
                 :style="[
@@ -39,6 +39,7 @@ import themes from "data/themes";
 import { CoercableComponent, jsx, StyleValue } from "features/feature";
 import { Persistent } from "game/persistence";
 import settings from "game/settings";
+import { Direction } from "util/common";
 import {
     coerceComponent,
     computeOptionalComponent,
@@ -58,7 +59,6 @@ import {
     unref,
     watchEffect
 } from "vue";
-import { TooltipDirection } from "./tooltip";
 
 export default defineComponent({
     props: {
@@ -69,7 +69,7 @@ export default defineComponent({
         },
         style: processedPropType<StyleValue>(Object, String, Array),
         classes: processedPropType<Record<string, boolean>>(Object),
-        direction: processedPropType<TooltipDirection>(Number),
+        direction: processedPropType<Direction>(Number),
         xoffset: processedPropType<string>(String),
         yoffset: processedPropType<string>(String),
         pinned: Object as PropType<Persistent<boolean>>
@@ -102,7 +102,7 @@ export default defineComponent({
         const showPin = computed(() => unwrapRef(pinned) && themes[settings.theme].showPin);
 
         return {
-            TooltipDirection,
+            Direction,
             isHovered,
             isShown,
             comp,
diff --git a/src/features/tooltips/tooltip.ts b/src/features/tooltips/tooltip.ts
index 0c4135a..e01c96e 100644
--- a/src/features/tooltips/tooltip.ts
+++ b/src/features/tooltips/tooltip.ts
@@ -17,6 +17,7 @@ import {
 import { VueFeature } from "util/vue";
 import { nextTick, Ref, unref } from "vue";
 import { persistent } from "game/persistence";
+import { Direction } from "util/common";
 
 declare module "@vue/runtime-dom" {
     interface CSSProperties {
@@ -25,19 +26,12 @@ declare module "@vue/runtime-dom" {
     }
 }
 
-export enum TooltipDirection {
-    UP,
-    LEFT,
-    RIGHT,
-    DOWN
-}
-
 export interface TooltipOptions {
     pinnable?: boolean;
     display: Computable<CoercableComponent>;
     classes?: Computable<Record<string, boolean>>;
     style?: Computable<StyleValue>;
-    direction?: Computable<TooltipDirection>;
+    direction?: Computable<Direction>;
     xoffset?: Computable<string>;
     yoffset?: Computable<string>;
 }
@@ -54,7 +48,7 @@ export type Tooltip<T extends TooltipOptions> = Replace<
         display: GetComputableType<T["display"]>;
         classes: GetComputableType<T["classes"]>;
         style: GetComputableType<T["style"]>;
-        direction: GetComputableTypeWithDefault<T["direction"], TooltipDirection.UP>;
+        direction: GetComputableTypeWithDefault<T["direction"], Direction.Up>;
         xoffset: GetComputableType<T["xoffset"]>;
         yoffset: GetComputableType<T["yoffset"]>;
     }
@@ -65,7 +59,7 @@ export type GenericTooltip = Replace<
     {
         pinnable: boolean;
         pinned: Ref<boolean> | undefined;
-        direction: ProcessedComputable<TooltipDirection>;
+        direction: ProcessedComputable<Direction>;
     }
 >;
 
@@ -77,7 +71,7 @@ export function addTooltip<T extends TooltipOptions>(
     processComputable(options as T, "classes");
     processComputable(options as T, "style");
     processComputable(options as T, "direction");
-    setDefault(options, "direction", TooltipDirection.UP);
+    setDefault(options, "direction", Direction.Up);
     processComputable(options as T, "xoffset");
     processComputable(options as T, "yoffset");
 
diff --git a/src/util/common.ts b/src/util/common.ts
index 5122008..8e2ded1 100644
--- a/src/util/common.ts
+++ b/src/util/common.ts
@@ -14,3 +14,11 @@ export function isPlainObject(object: unknown): boolean {
 export function isFunction(func: unknown): func is Function {
     return typeof func === "function";
 }
+
+export enum Direction {
+    Up = "Up",
+    Down = "Down",
+    Left = "Left",
+    Right = "Right",
+    Default = "Up"
+}

From 8f7160c725765fb9b0ebd1aaa4277e9bc06c556b Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 14:12:00 -0500
Subject: [PATCH 11/38] Add comments for modifiers

---
 src/game/modifiers.tsx | 165 +++++++++++++++++++++++++++++------------
 src/util/common.ts     |   2 +
 2 files changed, 120 insertions(+), 47 deletions(-)

diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx
index ffbef3c..1dd73be 100644
--- a/src/game/modifiers.tsx
+++ b/src/game/modifiers.tsx
@@ -1,17 +1,45 @@
+import "components/common/modifiers.css";
 import { CoercableComponent, jsx } from "features/feature";
 import Decimal, { DecimalSource, format } from "util/bignum";
+import { WithRequired } from "util/common";
 import { Computable, convertComputable, ProcessedComputable } from "util/computed";
 import { renderJSX } from "util/vue";
 import { computed, unref } from "vue";
-import "components/common/modifiers.css";
 
+/**
+ * An object that can be used to apply or unapply some modification to a number.
+ * Being reversible requires the operation being invertible, but some features may rely on that.
+ * Descriptions can be optionally included for displaying them to the player.
+ * The built-in modifier creators are designed to display the modifiers using
+ * {@link createModifierSection}
+ */
 export interface Modifier {
+    /**
+     * Applies some operation on the input and returns the result
+     */
     apply: (gain: DecimalSource) => DecimalSource;
-    revert: (gain: DecimalSource) => DecimalSource;
-    enabled: ProcessedComputable<boolean>;
+    /**
+     * Reverses the operation applied by the apply property. Required by some features
+     */
+    revert?: (gain: DecimalSource) => DecimalSource;
+    /**
+     * Whether or not this modifier should be considered enabled.
+     * Typically for use with modifiers passed into {@link createSequentialModifier}
+     */
+    enabled?: ProcessedComputable<boolean>;
+    /**
+     * A description of this modifier.
+     * @see {@link createModifierSection}
+     */
     description?: ProcessedComputable<CoercableComponent>;
 }
 
+/**
+ * Create a modifier that adds some value to the input value
+ * @param addend The amount to add to the input value
+ * @param description Description of what this modifier is doing
+ * @param enabled A computable that will be processed and passed directly into the returned modifier
+ */
 export function createAdditiveModifier(
     addend: Computable<DecimalSource>,
     description?: Computable<CoercableComponent>,
@@ -19,25 +47,34 @@ export function createAdditiveModifier(
 ): Modifier {
     const processedAddend = convertComputable(addend);
     const processedDescription = convertComputable(description);
-    const processedEnabled = convertComputable(enabled == null ? true : enabled);
+    const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
     return {
         apply: gain => Decimal.add(gain, unref(processedAddend)),
         revert: gain => Decimal.sub(gain, unref(processedAddend)),
         enabled: processedEnabled,
-        description: jsx(() => (
-            <div class="modifier-container">
-                <span class="modifier-amount">+{format(unref(processedAddend))}</span>
-                {unref(processedDescription) ? (
-                    <span class="modifier-description">
-                        {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
-                        {renderJSX(unref(processedDescription)!)}
-                    </span>
-                ) : null}
-            </div>
-        ))
+        description:
+            description == null
+                ? undefined
+                : jsx(() => (
+                      <div class="modifier-container">
+                          <span class="modifier-amount">+{format(unref(processedAddend))}</span>
+                          {unref(processedDescription) ? (
+                              <span class="modifier-description">
+                                  {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
+                                  {renderJSX(unref(processedDescription)!)}
+                              </span>
+                          ) : null}
+                      </div>
+                  ))
     };
 }
 
+/**
+ * Create a modifier that multiplies the input value by some value
+ * @param multiplier The value to multiply the input value by
+ * @param description Description of what this modifier is doing
+ * @param enabled A computable that will be processed and passed directly into the returned modifier
+ */
 export function createMultiplicativeModifier(
     multiplier: Computable<DecimalSource>,
     description?: Computable<CoercableComponent>,
@@ -45,25 +82,34 @@ export function createMultiplicativeModifier(
 ): Modifier {
     const processedMultiplier = convertComputable(multiplier);
     const processedDescription = convertComputable(description);
-    const processedEnabled = convertComputable(enabled == null ? true : enabled);
+    const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
     return {
         apply: gain => Decimal.times(gain, unref(processedMultiplier)),
         revert: gain => Decimal.div(gain, unref(processedMultiplier)),
         enabled: processedEnabled,
-        description: jsx(() => (
-            <div class="modifier-container">
-                <span class="modifier-amount">x{format(unref(processedMultiplier))}</span>
-                {unref(processedDescription) ? (
-                    <span class="modifier-description">
-                        {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
-                        {renderJSX(unref(processedDescription)!)}
-                    </span>
-                ) : null}
-            </div>
-        ))
+        description:
+            description == null
+                ? undefined
+                : jsx(() => (
+                      <div class="modifier-container">
+                          <span class="modifier-amount">x{format(unref(processedMultiplier))}</span>
+                          {unref(processedDescription) ? (
+                              <span class="modifier-description">
+                                  {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
+                                  {renderJSX(unref(processedDescription)!)}
+                              </span>
+                          ) : null}
+                      </div>
+                  ))
     };
 }
 
+/**
+ * Create a modifier that raises the input value to the power of some value
+ * @param exponent The value to raise the input value to the power of
+ * @param description Description of what this modifier is doing
+ * @param enabled A computable that will be processed and passed directly into the returned modifier
+ */
 export function createExponentialModifier(
     exponent: Computable<DecimalSource>,
     description?: Computable<CoercableComponent>,
@@ -71,41 +117,56 @@ export function createExponentialModifier(
 ): Modifier {
     const processedExponent = convertComputable(exponent);
     const processedDescription = convertComputable(description);
-    const processedEnabled = convertComputable(enabled == null ? true : enabled);
+    const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
     return {
         apply: gain => Decimal.pow(gain, unref(processedExponent)),
         revert: gain => Decimal.root(gain, unref(processedExponent)),
         enabled: processedEnabled,
-        description: jsx(() => (
-            <div class="modifier-container">
-                <span class="modifier-amount">^{format(unref(processedExponent))}</span>
-                {unref(processedDescription) ? (
-                    <span class="modifier-description">
-                        {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
-                        {renderJSX(unref(processedDescription)!)}
-                    </span>
-                ) : null}
-            </div>
-        ))
+        description:
+            description == null
+                ? undefined
+                : jsx(() => (
+                      <div class="modifier-container">
+                          <span class="modifier-amount">^{format(unref(processedExponent))}</span>
+                          {unref(processedDescription) ? (
+                              <span class="modifier-description">
+                                  {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
+                                  {renderJSX(unref(processedDescription)!)}
+                              </span>
+                          ) : null}
+                      </div>
+                  ))
     };
 }
 
-export function createSequentialModifier(...modifiers: Modifier[]): Required<Modifier> {
+/**
+ * Takes an array of modifiers and applies and reverses them in order.
+ * Modifiers that are not enabled will not be applied nor reversed.
+ * Also joins their descriptions together.
+ * @param modifiers The modifiers to perform sequentially
+ * @see {@link createModifierSection}
+ */
+export function createSequentialModifier(
+    ...modifiers: Modifier[]
+): WithRequired<Modifier, "description"> {
     return {
         apply: gain =>
             modifiers
-                .filter(m => unref(m.enabled))
+                .filter(m => unref(m.enabled) !== false)
                 .reduce((gain, modifier) => modifier.apply(gain), gain),
-        revert: gain =>
-            modifiers
-                .filter(m => unref(m.enabled))
-                .reduceRight((gain, modifier) => modifier.revert(gain), gain),
-        enabled: computed(() => modifiers.filter(m => unref(m.enabled)).length > 0),
+        revert: modifiers.every(m => m.revert != null)
+            ? gain =>
+                  modifiers
+                      .filter(m => unref(m.enabled) !== false)
+                      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                      .reduceRight((gain, modifier) => modifier.revert!(gain), gain)
+            : undefined,
+        enabled: computed(() => modifiers.filter(m => unref(m.enabled) !== false).length > 0),
         description: jsx(() => (
             <>
                 {(
                     modifiers
-                        .filter(m => unref(m.enabled))
+                        .filter(m => unref(m.enabled) !== false)
                         .map(m => unref(m.description))
                         .filter(d => d) as CoercableComponent[]
                 ).map(renderJSX)}
@@ -114,6 +175,16 @@ export function createSequentialModifier(...modifiers: Modifier[]): Required<Mod
     };
 }
 
+/**
+ * Create a JSX element that displays a modifier.
+ * Intended to be used with the output from {@link createSequentialModifier}
+ * @param title The header for the section
+ * @param subtitle Smaller text that appears in the header after the title
+ * @param modifier The modifier to render
+ * @param base The base value that'll be passed into the modifier
+ * @param unit The unit of the value being modified, if any
+ * @param baseText The label to use for the base value
+ */
 export function createModifierSection(
     title: string,
     subtitle: string,
diff --git a/src/util/common.ts b/src/util/common.ts
index 8e2ded1..3a7d217 100644
--- a/src/util/common.ts
+++ b/src/util/common.ts
@@ -1,3 +1,5 @@
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+
 // Reference:
 // https://stackoverflow.com/questions/7225407/convert-camelcasetext-to-sentence-case-text
 export function camelToTitle(camel: string): string {

From ade00f2ebd751d24bfc0bb6c4bec194f5e7e7b86 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 14:12:12 -0500
Subject: [PATCH 12/38] Remove unused lib file

---
 src/lib/tsParticles.d.ts | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 src/lib/tsParticles.d.ts

diff --git a/src/lib/tsParticles.d.ts b/src/lib/tsParticles.d.ts
deleted file mode 100644
index 44c037a..0000000
--- a/src/lib/tsParticles.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module "particles.vue3";

From 7eaae981d8ee1b335cab55c1119e9c50d4137596 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 14:46:23 -0500
Subject: [PATCH 13/38] Fixed createCollapsibleModifierSections typing

---
 src/data/common.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/data/common.tsx b/src/data/common.tsx
index f7ba494..03a3145 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -25,6 +25,7 @@ import { Modifier } from "game/modifiers";
 import { Persistent, persistent } from "game/persistence";
 import player from "game/player";
 import Decimal, { DecimalSource, format } from "util/bignum";
+import { WithRequired } from "util/common";
 import {
     Computable,
     convertComputable,
@@ -194,7 +195,7 @@ export function createCollapsibleModifierSections(
     sections: {
         title: string;
         subtitle?: string;
-        modifier: Required<Modifier>;
+        modifier: WithRequired<Modifier, "description">;
         base?: Computable<DecimalSource>;
         unit?: string;
         baseText?: Computable<CoercableComponent>;

From 75fde0f099abf5225ab728456c7e49f74d515cd0 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 14:59:35 -0500
Subject: [PATCH 14/38] Fix tooltip component expecting direction to be a
 number instead of string

---
 src/features/tooltips/Tooltip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/tooltips/Tooltip.vue b/src/features/tooltips/Tooltip.vue
index c1fd92f..3274b0d 100644
--- a/src/features/tooltips/Tooltip.vue
+++ b/src/features/tooltips/Tooltip.vue
@@ -69,7 +69,7 @@ export default defineComponent({
         },
         style: processedPropType<StyleValue>(Object, String, Array),
         classes: processedPropType<Record<string, boolean>>(Object),
-        direction: processedPropType<Direction>(Number),
+        direction: processedPropType<Direction>(String),
         xoffset: processedPropType<string>(String),
         yoffset: processedPropType<string>(String),
         pinned: Object as PropType<Persistent<boolean>>

From 22f34150692ef1c655dd26ea4426944c7e8e5813 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 15:00:00 -0500
Subject: [PATCH 15/38] Fix adding new layers not allowing them to be displayed
 until refresh

---
 src/game/layers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/game/layers.tsx b/src/game/layers.tsx
index 85b7a17..cb7462a 100644
--- a/src/game/layers.tsx
+++ b/src/game/layers.tsx
@@ -17,7 +17,7 @@ import {
 } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import { createNanoEvents, Emitter } from "nanoevents";
-import { InjectionKey, Ref, ref, unref } from "vue";
+import { InjectionKey, Ref, ref, shallowReactive, unref } from "vue";
 import { globalBus } from "./events";
 import { Persistent, persistent } from "./persistence";
 import player from "./player";
@@ -44,7 +44,7 @@ export interface LayerEvents {
     postUpdate: (diff: number) => void;
 }
 
-export const layers: Record<string, Readonly<GenericLayer> | undefined> = {};
+export const layers: Record<string, Readonly<GenericLayer> | undefined> = shallowReactive({});
 window.layers = layers;
 
 declare module "@vue/runtime-dom" {

From b7789563e205c959c7b07b653ba9169b89b9368e Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 17:25:10 -0500
Subject: [PATCH 16/38] Made modifier constructors have more explicit typing

---
 src/game/modifiers.tsx | 74 +++++++++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx
index 1dd73be..eb13629 100644
--- a/src/game/modifiers.tsx
+++ b/src/game/modifiers.tsx
@@ -34,23 +34,34 @@ export interface Modifier {
     description?: ProcessedComputable<CoercableComponent>;
 }
 
+/**
+ * Utility type used to narrow down a modifier type that will have a description and/or enabled property based on optional parameters, T and S (respectively).
+ */
+export type ModifierFromOptionalParams<T, S> = T extends undefined
+    ? S extends undefined
+        ? Omit<WithRequired<Modifier, "revert">, "description" | "enabled">
+        : Omit<WithRequired<Modifier, "revert" | "enabled">, "description">
+    : S extends undefined
+    ? Omit<WithRequired<Modifier, "revert" | "description">, "enabled">
+    : WithRequired<Modifier, "revert" | "enabled" | "description">;
+
 /**
  * Create a modifier that adds some value to the input value
  * @param addend The amount to add to the input value
  * @param description Description of what this modifier is doing
  * @param enabled A computable that will be processed and passed directly into the returned modifier
  */
-export function createAdditiveModifier(
-    addend: Computable<DecimalSource>,
-    description?: Computable<CoercableComponent>,
-    enabled?: Computable<boolean>
-): Modifier {
+export function createAdditiveModifier<
+    T extends Computable<CoercableComponent> | undefined,
+    S extends Computable<boolean> | undefined,
+    R = ModifierFromOptionalParams<T, S>
+>(addend: Computable<DecimalSource>, description?: T, enabled?: S): R {
     const processedAddend = convertComputable(addend);
     const processedDescription = convertComputable(description);
     const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
     return {
-        apply: gain => Decimal.add(gain, unref(processedAddend)),
-        revert: gain => Decimal.sub(gain, unref(processedAddend)),
+        apply: (gain: DecimalSource) => Decimal.add(gain, unref(processedAddend)),
+        revert: (gain: DecimalSource) => Decimal.sub(gain, unref(processedAddend)),
         enabled: processedEnabled,
         description:
             description == null
@@ -66,7 +77,7 @@ export function createAdditiveModifier(
                           ) : null}
                       </div>
                   ))
-    };
+    } as unknown as R;
 }
 
 /**
@@ -75,17 +86,17 @@ export function createAdditiveModifier(
  * @param description Description of what this modifier is doing
  * @param enabled A computable that will be processed and passed directly into the returned modifier
  */
-export function createMultiplicativeModifier(
-    multiplier: Computable<DecimalSource>,
-    description?: Computable<CoercableComponent>,
-    enabled?: Computable<boolean>
-): Modifier {
+export function createMultiplicativeModifier<
+    T extends Computable<CoercableComponent> | undefined,
+    S extends Computable<boolean> | undefined,
+    R = ModifierFromOptionalParams<T, S>
+>(multiplier: Computable<DecimalSource>, description?: T, enabled?: S): R {
     const processedMultiplier = convertComputable(multiplier);
     const processedDescription = convertComputable(description);
     const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
     return {
-        apply: gain => Decimal.times(gain, unref(processedMultiplier)),
-        revert: gain => Decimal.div(gain, unref(processedMultiplier)),
+        apply: (gain: DecimalSource) => Decimal.times(gain, unref(processedMultiplier)),
+        revert: (gain: DecimalSource) => Decimal.div(gain, unref(processedMultiplier)),
         enabled: processedEnabled,
         description:
             description == null
@@ -101,7 +112,7 @@ export function createMultiplicativeModifier(
                           ) : null}
                       </div>
                   ))
-    };
+    } as unknown as R;
 }
 
 /**
@@ -110,17 +121,17 @@ export function createMultiplicativeModifier(
  * @param description Description of what this modifier is doing
  * @param enabled A computable that will be processed and passed directly into the returned modifier
  */
-export function createExponentialModifier(
-    exponent: Computable<DecimalSource>,
-    description?: Computable<CoercableComponent>,
-    enabled?: Computable<boolean>
-): Modifier {
+export function createExponentialModifier<
+    T extends Computable<CoercableComponent> | undefined,
+    S extends Computable<boolean> | undefined,
+    R = ModifierFromOptionalParams<T, S>
+>(exponent: Computable<DecimalSource>, description?: T, enabled?: S): R {
     const processedExponent = convertComputable(exponent);
     const processedDescription = convertComputable(description);
     const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
     return {
-        apply: gain => Decimal.pow(gain, unref(processedExponent)),
-        revert: gain => Decimal.root(gain, unref(processedExponent)),
+        apply: (gain: DecimalSource) => Decimal.pow(gain, unref(processedExponent)),
+        revert: (gain: DecimalSource) => Decimal.root(gain, unref(processedExponent)),
         enabled: processedEnabled,
         description:
             description == null
@@ -136,7 +147,7 @@ export function createExponentialModifier(
                           ) : null}
                       </div>
                   ))
-    };
+    } as unknown as R;
 }
 
 /**
@@ -146,16 +157,19 @@ export function createExponentialModifier(
  * @param modifiers The modifiers to perform sequentially
  * @see {@link createModifierSection}
  */
-export function createSequentialModifier(
-    ...modifiers: Modifier[]
-): WithRequired<Modifier, "description"> {
+export function createSequentialModifier<
+    T extends Modifier[],
+    S = T extends WithRequired<Modifier, "revert">[]
+        ? WithRequired<Modifier, "description" | "revert">
+        : Omit<WithRequired<Modifier, "description">, "revert">
+>(...modifiers: T): S {
     return {
-        apply: gain =>
+        apply: (gain: DecimalSource) =>
             modifiers
                 .filter(m => unref(m.enabled) !== false)
                 .reduce((gain, modifier) => modifier.apply(gain), gain),
         revert: modifiers.every(m => m.revert != null)
-            ? gain =>
+            ? (gain: DecimalSource) =>
                   modifiers
                       .filter(m => unref(m.enabled) !== false)
                       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -172,7 +186,7 @@ export function createSequentialModifier(
                 ).map(renderJSX)}
             </>
         ))
-    };
+    } as unknown as S;
 }
 
 /**

From eb1d394f04eafaa02fa7f73f8c7b2e08ce97ed76 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 19:13:21 -0500
Subject: [PATCH 17/38] Added periods to modifiers doc comments

---
 src/game/modifiers.tsx | 54 +++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx
index eb13629..9a3407b 100644
--- a/src/game/modifiers.tsx
+++ b/src/game/modifiers.tsx
@@ -10,26 +10,26 @@ import { computed, unref } from "vue";
  * An object that can be used to apply or unapply some modification to a number.
  * Being reversible requires the operation being invertible, but some features may rely on that.
  * Descriptions can be optionally included for displaying them to the player.
- * The built-in modifier creators are designed to display the modifiers using
- * {@link createModifierSection}
+ * The built-in modifier creators are designed to display the modifiers using.
+ * {@link createModifierSection}.
  */
 export interface Modifier {
     /**
-     * Applies some operation on the input and returns the result
+     * Applies some operation on the input and returns the result.
      */
     apply: (gain: DecimalSource) => DecimalSource;
     /**
-     * Reverses the operation applied by the apply property. Required by some features
+     * Reverses the operation applied by the apply property. Required by some features.
      */
     revert?: (gain: DecimalSource) => DecimalSource;
     /**
      * Whether or not this modifier should be considered enabled.
-     * Typically for use with modifiers passed into {@link createSequentialModifier}
+     * Typically for use with modifiers passed into {@link createSequentialModifier}.
      */
     enabled?: ProcessedComputable<boolean>;
     /**
      * A description of this modifier.
-     * @see {@link createModifierSection}
+     * @see {@link createModifierSection}.
      */
     description?: ProcessedComputable<CoercableComponent>;
 }
@@ -46,10 +46,10 @@ export type ModifierFromOptionalParams<T, S> = T extends undefined
     : WithRequired<Modifier, "revert" | "enabled" | "description">;
 
 /**
- * Create a modifier that adds some value to the input value
- * @param addend The amount to add to the input value
- * @param description Description of what this modifier is doing
- * @param enabled A computable that will be processed and passed directly into the returned modifier
+ * Create a modifier that adds some value to the input value.
+ * @param addend The amount to add to the input value.
+ * @param description Description of what this modifier is doing.
+ * @param enabled A computable that will be processed and passed directly into the returned modifier.
  */
 export function createAdditiveModifier<
     T extends Computable<CoercableComponent> | undefined,
@@ -81,10 +81,10 @@ export function createAdditiveModifier<
 }
 
 /**
- * Create a modifier that multiplies the input value by some value
- * @param multiplier The value to multiply the input value by
- * @param description Description of what this modifier is doing
- * @param enabled A computable that will be processed and passed directly into the returned modifier
+ * Create a modifier that multiplies the input value by some value.
+ * @param multiplier The value to multiply the input value by.
+ * @param description Description of what this modifier is doing.
+ * @param enabled A computable that will be processed and passed directly into the returned modifier.
  */
 export function createMultiplicativeModifier<
     T extends Computable<CoercableComponent> | undefined,
@@ -116,10 +116,10 @@ export function createMultiplicativeModifier<
 }
 
 /**
- * Create a modifier that raises the input value to the power of some value
- * @param exponent The value to raise the input value to the power of
- * @param description Description of what this modifier is doing
- * @param enabled A computable that will be processed and passed directly into the returned modifier
+ * Create a modifier that raises the input value to the power of some value.
+ * @param exponent The value to raise the input value to the power of.
+ * @param description Description of what this modifier is doing.
+ * @param enabled A computable that will be processed and passed directly into the returned modifier.
  */
 export function createExponentialModifier<
     T extends Computable<CoercableComponent> | undefined,
@@ -154,8 +154,8 @@ export function createExponentialModifier<
  * Takes an array of modifiers and applies and reverses them in order.
  * Modifiers that are not enabled will not be applied nor reversed.
  * Also joins their descriptions together.
- * @param modifiers The modifiers to perform sequentially
- * @see {@link createModifierSection}
+ * @param modifiers The modifiers to perform sequentially.
+ * @see {@link createModifierSection}.
  */
 export function createSequentialModifier<
     T extends Modifier[],
@@ -191,13 +191,13 @@ export function createSequentialModifier<
 
 /**
  * Create a JSX element that displays a modifier.
- * Intended to be used with the output from {@link createSequentialModifier}
- * @param title The header for the section
- * @param subtitle Smaller text that appears in the header after the title
- * @param modifier The modifier to render
- * @param base The base value that'll be passed into the modifier
- * @param unit The unit of the value being modified, if any
- * @param baseText The label to use for the base value
+ * Intended to be used with the output from {@link createSequentialModifier}.
+ * @param title The header for the section.
+ * @param subtitle Smaller text that appears in the header after the title.
+ * @param modifier The modifier to render.
+ * @param base The base value that'll be passed into the modifier.
+ * @param unit The unit of the value being modified, if any.
+ * @param baseText The label to use for the base value.
  */
 export function createModifierSection(
     title: string,

From 17642b95a69d02bdef98fcdd45e62817f3cec980 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 19:13:41 -0500
Subject: [PATCH 18/38] Documented conversion.ts

---
 src/features/conversion.ts | 184 +++++++++++++++++++++++++++++++++++--
 1 file changed, 174 insertions(+), 10 deletions(-)

diff --git a/src/features/conversion.ts b/src/features/conversion.ts
index 785a6d1..7c40ab0 100644
--- a/src/features/conversion.ts
+++ b/src/features/conversion.ts
@@ -1,6 +1,7 @@
 import { GenericLayer } from "game/layers";
 import { Modifier } from "game/modifiers";
 import Decimal, { DecimalSource } from "util/bignum";
+import { WithRequired } from "util/common";
 import {
     Computable,
     GetComputableTypeWithDefault,
@@ -12,24 +13,78 @@ import { computed, isRef, Ref, unref } from "vue";
 import { OptionsFunc, Replace, setDefault } from "./feature";
 import { Resource } from "./resources/resource";
 
+/**
+ * An object that configures a {@link conversion}.
+ */
 export interface ConversionOptions {
+    /**
+     * The scaling function that is used to determine the rate of conversion from one {@link resource} to the other.
+     */
     scaling: ScalingFunction;
+    /**
+     * How much of the output resource the conversion can currently convert for.
+     * Typically this will be set for you in a conversion constructor.
+     */
     currentGain?: Computable<DecimalSource>;
+    /**
+     * The absolute amount the output resource will be changed by.
+     * Typically this will be set for you in a conversion constructor.
+     * This will differ from {@link currentGain} in the cases where the conversion isn't just adding the converted amount to the output resource.
+     */
     actualGain?: Computable<DecimalSource>;
+    /**
+     * The amount of the input resource currently being required in order to produce the {@link currentGain}.
+     * That is, if it went below this value then {@link currentGain} would decrease.
+     * Typically this will be set for you in a conversion constructor.
+     */
     currentAt?: Computable<DecimalSource>;
+    /**
+     * The amount of the input resource required to make {@link currentGain} increase.
+     * Typically this will be set for you in a conversion constructor.
+     */
     nextAt?: Computable<DecimalSource>;
+    /**
+     * The input {@link resource} for this conversion.
+     */
     baseResource: Resource;
+    /**
+     * The output {@link resource} for this conversion. i.e. the resource being generated.
+     */
     gainResource: Resource;
+    /**
+     * Whether or not to cap the amount of the output resource gained by converting at 1.
+     */
     buyMax?: Computable<boolean>;
+    /**
+     * Whether or not to round up the cost to generate a given amount of the output resource.
+     */
     roundUpCost?: Computable<boolean>;
+    /**
+     * The function that performs the actual conversion from {@link baseResource} to {@link gainResource}.
+     * Typically this will be set for you in a conversion constructor.
+     */
     convert?: VoidFunction;
-    gainModifier?: Modifier;
+    /**
+     * An addition modifier that will be applied to the gain amounts.
+     * Must be reversible in order to correctly calculate {@link nextAt}.
+     * @see {@link createSequentialModifier} if you want to apply multiple modifiers.
+     */
+    gainModifier?: WithRequired<Modifier, "revert">;
 }
 
+/**
+ * The properties that are added onto a processed {@link ConversionOptions} to create a {@link Conversion}.
+ */
 export interface BaseConversion {
+    /**
+     * The function that performs the actual conversion.
+     */
     convert: VoidFunction;
 }
 
+/**
+ * An object that converts one {@link resource} into another at a given rate.
+ */
 export type Conversion<T extends ConversionOptions> = Replace<
     T & BaseConversion,
     {
@@ -42,6 +97,9 @@ export type Conversion<T extends ConversionOptions> = Replace<
     }
 >;
 
+/**
+ * A type that matches any {@link conversion} object.
+ */
 export type GenericConversion = Replace<
     Conversion<ConversionOptions>,
     {
@@ -54,6 +112,13 @@ export type GenericConversion = Replace<
     }
 >;
 
+/**
+ * Lazily creates a conversion with the given options.
+ * You typically shouldn't use this function directly. Instead use one of the other conversion constructors, which will then call this.
+ * @param optionsFunc Conversion options.
+ * @see {@link createCumulativeConversion}.
+ * @see {@link createIndependentConversion}.
+ */
 export function createConversion<T extends ConversionOptions>(
     optionsFunc: OptionsFunc<T, Conversion<T>, BaseConversion>
 ): Conversion<T> {
@@ -117,14 +182,49 @@ export function createConversion<T extends ConversionOptions>(
     });
 }
 
-export type ScalingFunction = {
+/**
+ * A collection of functions that allow a conversion to scale the amount of resources gained based on the input resource.
+ * This typically shouldn't be created directly. Instead use one of the scaling function constructors.
+ * @see {@link createLinearScaling}.
+ * @see {@link createPolynomialScaling}.
+ */
+export interface ScalingFunction {
+    /**
+     * Calculates the amount of the output resource a conversion should be able to currently produce.
+     * This should be based off of `conversion.baseResource.value`.
+     * The conversion is responsible for applying the gainModifier, so this function should be un-modified.
+     * It does not need to be clamped or rounded.
+     */
     currentGain: (conversion: GenericConversion) => DecimalSource;
+    /**
+     * Calculates the amount of the input resource that is required for the current value of `conversion.currentGain`.
+     * Note that `conversion.currentGain` has been modified by `conversion.gainModifier`, so you will need to revert that as appropriate.
+     * The conversion is responsible for rounding up the amount as appropriate.
+     * The returned value should not be below 0.
+     */
     currentAt: (conversion: GenericConversion) => DecimalSource;
+    /**
+     * Calculates the amount of the input resource that would be required for the current value of `conversion.currentGain` to increase.
+     * Note that `conversion.currentGain` has been modified by `conversion.gainModifier`, so you will need to revert that as appropriate.
+     * The conversion is responsible for rounding up the amount as appropriate.
+     * The returned value should not be below 0.
+     */
     nextAt: (conversion: GenericConversion) => DecimalSource;
-};
+}
 
-// Gain formula is (baseResource - base) * coefficient
-// e.g. if base is 10 and coefficient is 0.5, 10 points makes 1 gain, 12 points is 2
+/**
+ * Creates a scaling function based off the formula `(baseResource - base) * coefficient`.
+ * If the baseResource value is less than base then the currentGain will be 0.
+ * @param base The base variable in the scaling formula.
+ * @param coefficient The coefficient variable in the scaling formula.
+ * @example
+ * A scaling function created via `createLinearScaling(10, 0.5)` would produce the following values:
+ * | Base Resource | Current Gain |
+ * | ------------- | ------------ |
+ * | 10            | 1            |
+ * | 12            | 2            |
+ * | 20            | 6            |
+ */
 export function createLinearScaling(
     base: DecimalSource | Ref<DecimalSource>,
     coefficient: DecimalSource | Ref<DecimalSource>
@@ -146,7 +246,7 @@ export function createLinearScaling(
                 current = conversion.gainModifier.revert(current);
             }
             current = Decimal.max(0, current);
-            return Decimal.times(current, unref(coefficient)).add(unref(base));
+            return Decimal.sub(current, 1).div(unref(coefficient)).add(unref(base));
         },
         nextAt(conversion) {
             let next: DecimalSource = Decimal.add(unref(conversion.currentGain), 1);
@@ -154,19 +254,34 @@ export function createLinearScaling(
                 next = conversion.gainModifier.revert(next);
             }
             next = Decimal.max(0, next);
-            return Decimal.times(next, unref(coefficient)).add(unref(base)).max(unref(base));
+            return Decimal.sub(next, 1).div(unref(coefficient)).add(unref(base)).max(unref(base));
         }
     };
 }
 
-// Gain formula is (baseResource / base) ^ exponent
-// e.g. if exponent is 0.5 and base is 10, then having 10 points makes gain 1, and 40 points is 2
+/**
+ * Creates a scaling function based off the formula `(baseResource / base) ^ exponent`.
+ * If the baseResource value is less than base then the currentGain will be 0.
+ * @param base The base variable in the scaling formula.
+ * @param exponent The exponent variable in the scaling formula.
+ * @example
+ * A scaling function created via `createLinearScaling(10, 0.5)` would produce the following values:
+ * | Base Resource | Current Gain |
+ * | ------------- | ------------ |
+ * | 10            | 1            |
+ * | 40            | 2            |
+ * | 250           | 5            |
+ */
 export function createPolynomialScaling(
     base: DecimalSource | Ref<DecimalSource>,
     exponent: DecimalSource | Ref<DecimalSource>
 ): ScalingFunction {
     return {
         currentGain(conversion) {
+            if (Decimal.lt(conversion.baseResource.value, unref(base))) {
+                return 0;
+            }
+
             const gain = Decimal.div(conversion.baseResource.value, unref(base)).pow(
                 unref(exponent)
             );
@@ -195,12 +310,23 @@ export function createPolynomialScaling(
     };
 }
 
+/**
+ * Creates a conversion that simply adds to the gainResource amount upon converting.
+ * This is similar to the behavior of "normal" layers in The Modding Tree.
+ * This is equivalent to just calling createConversion directly.
+ * @param optionsFunc Conversion options.
+ */
 export function createCumulativeConversion<S extends ConversionOptions>(
     optionsFunc: OptionsFunc<S, Conversion<S>>
 ): Conversion<S> {
     return createConversion(optionsFunc);
 }
 
+/**
+ * Creates a conversion that will replace the gainResource amount with the new amount upon converting.
+ * This is similar to the behavior of "static" layers in The Modding Tree.
+ * @param optionsFunc Converison options.
+ */
 export function createIndependentConversion<S extends ConversionOptions>(
     optionsFunc: OptionsFunc<S, Conversion<S>>
 ): Conversion<S> {
@@ -253,6 +379,14 @@ export function createIndependentConversion<S extends ConversionOptions>(
     });
 }
 
+/**
+ * This will automatically increase the value of conversion.gainResource without lowering the value of the input resource.
+ * It will by default perform 100% of a conversion's currentGain per second.
+ * If you use a ref for the rate you can set it's value to 0 when passive generation should be disabled.
+ * @param layer The layer this passive generation will be associated with.
+ * @param conversion The conversion that will determine how much generation there is.
+ * @param rate A multiplier to multiply against the conversion's currentGain.
+ */
 export function setupPassiveGeneration(
     layer: GenericLayer,
     conversion: GenericConversion,
@@ -269,7 +403,22 @@ export function setupPassiveGeneration(
     });
 }
 
-function softcap(
+/**
+ * Given a value, this function finds the amount above a certain value and raises it to a power.
+ * If the power is <1, this will effectively make the value scale slower after the cap.
+ * @param value The raw value.
+ * @param cap The value after which the softcap should be applied.
+ * @param power The power to raise value above the cap to.
+ * @example
+ * A softcap added via `addSoftcap(scaling, 100, 0.5)` would produce the following values:
+ * | Raw Value | Softcapped Value |
+ * | --------- | ---------------- |
+ * | 1         | 1                |
+ * | 100       | 100              |
+ * | 125       | 105              |
+ * | 200       | 110              |
+ */
+export function softcap(
     value: DecimalSource,
     cap: DecimalSource,
     power: DecimalSource = 0.5
@@ -281,6 +430,15 @@ function softcap(
     }
 }
 
+/**
+ * Creates a scaling function based off an existing scaling function, with a softcap applied to it.
+ * The softcap will take any value above a certain value and raise it to a power.
+ * If the power is <1, this will effectively make the value scale slower after the cap.
+ * @param scaling The raw scaling function.
+ * @param cap The value after which the softcap should be applied.
+ * @param power The power to raise value about the cap to.
+ * @see {@link softcap}.
+ */
 export function addSoftcap(
     scaling: ScalingFunction,
     cap: ProcessedComputable<DecimalSource>,
@@ -293,6 +451,12 @@ export function addSoftcap(
     };
 }
 
+/**
+ * Creates a scaling function off an existing function, with a hardcap applied to it.
+ * The harcap will ensure that the currentGain will stop at a given cap.
+ * @param scaling The raw scaling function.
+ * @param cap The maximum value the scaling function can output.
+ */
 export function addHardcap(
     scaling: ScalingFunction,
     cap: ProcessedComputable<DecimalSource>

From 4f3d73acd7f67b3990e634c6256dd63a095b325f Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 19:23:16 -0500
Subject: [PATCH 19/38] Make scaling functions use computables instead of
 processed computables

---
 src/features/conversion.ts | 45 ++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/features/conversion.ts b/src/features/conversion.ts
index 7c40ab0..397eb4a 100644
--- a/src/features/conversion.ts
+++ b/src/features/conversion.ts
@@ -4,6 +4,7 @@ import Decimal, { DecimalSource } from "util/bignum";
 import { WithRequired } from "util/common";
 import {
     Computable,
+    convertComputable,
     GetComputableTypeWithDefault,
     processComputable,
     ProcessedComputable
@@ -226,18 +227,20 @@ export interface ScalingFunction {
  * | 20            | 6            |
  */
 export function createLinearScaling(
-    base: DecimalSource | Ref<DecimalSource>,
-    coefficient: DecimalSource | Ref<DecimalSource>
+    base: Computable<DecimalSource>,
+    coefficient: Computable<DecimalSource>
 ): ScalingFunction {
+    const processedBase = convertComputable(base);
+    const processedCoefficient = convertComputable(coefficient);
     return {
         currentGain(conversion) {
-            if (Decimal.lt(conversion.baseResource.value, unref(base))) {
+            if (Decimal.lt(conversion.baseResource.value, unref(processedBase))) {
                 return 0;
             }
 
-            return Decimal.sub(conversion.baseResource.value, unref(base))
+            return Decimal.sub(conversion.baseResource.value, unref(processedBase))
                 .sub(1)
-                .times(unref(coefficient))
+                .times(unref(processedCoefficient))
                 .add(1);
         },
         currentAt(conversion) {
@@ -246,7 +249,9 @@ export function createLinearScaling(
                 current = conversion.gainModifier.revert(current);
             }
             current = Decimal.max(0, current);
-            return Decimal.sub(current, 1).div(unref(coefficient)).add(unref(base));
+            return Decimal.sub(current, 1)
+                .div(unref(processedCoefficient))
+                .add(unref(processedBase));
         },
         nextAt(conversion) {
             let next: DecimalSource = Decimal.add(unref(conversion.currentGain), 1);
@@ -254,7 +259,10 @@ export function createLinearScaling(
                 next = conversion.gainModifier.revert(next);
             }
             next = Decimal.max(0, next);
-            return Decimal.sub(next, 1).div(unref(coefficient)).add(unref(base)).max(unref(base));
+            return Decimal.sub(next, 1)
+                .div(unref(processedCoefficient))
+                .add(unref(processedBase))
+                .max(unref(processedBase));
         }
     };
 }
@@ -273,17 +281,19 @@ export function createLinearScaling(
  * | 250           | 5            |
  */
 export function createPolynomialScaling(
-    base: DecimalSource | Ref<DecimalSource>,
-    exponent: DecimalSource | Ref<DecimalSource>
+    base: Computable<DecimalSource>,
+    exponent: Computable<DecimalSource>
 ): ScalingFunction {
+    const processedBase = convertComputable(base);
+    const processedExponent = convertComputable(exponent);
     return {
         currentGain(conversion) {
-            if (Decimal.lt(conversion.baseResource.value, unref(base))) {
+            if (Decimal.lt(conversion.baseResource.value, unref(processedBase))) {
                 return 0;
             }
 
-            const gain = Decimal.div(conversion.baseResource.value, unref(base)).pow(
-                unref(exponent)
+            const gain = Decimal.div(conversion.baseResource.value, unref(processedBase)).pow(
+                unref(processedExponent)
             );
 
             if (gain.isNan()) {
@@ -297,7 +307,7 @@ export function createPolynomialScaling(
                 current = conversion.gainModifier.revert(current);
             }
             current = Decimal.max(0, current);
-            return Decimal.root(current, unref(exponent)).times(unref(base));
+            return Decimal.root(current, unref(processedExponent)).times(unref(processedBase));
         },
         nextAt(conversion) {
             let next: DecimalSource = Decimal.add(unref(conversion.currentGain), 1);
@@ -305,7 +315,9 @@ export function createPolynomialScaling(
                 next = conversion.gainModifier.revert(next);
             }
             next = Decimal.max(0, next);
-            return Decimal.root(next, unref(exponent)).times(unref(base)).max(unref(base));
+            return Decimal.root(next, unref(processedExponent))
+                .times(unref(processedBase))
+                .max(unref(processedBase));
         }
     };
 }
@@ -390,10 +402,11 @@ export function createIndependentConversion<S extends ConversionOptions>(
 export function setupPassiveGeneration(
     layer: GenericLayer,
     conversion: GenericConversion,
-    rate: ProcessedComputable<DecimalSource> = 1
+    rate: Computable<DecimalSource> = 1
 ): void {
+    const processedRate = convertComputable(rate);
     layer.on("preUpdate", diff => {
-        const currRate = isRef(rate) ? rate.value : rate;
+        const currRate = unref(processedRate);
         if (Decimal.neq(currRate, 0)) {
             conversion.gainResource.value = Decimal.add(
                 conversion.gainResource.value,

From f94c4a966f0f99eb33b7f94bc58c96de677803ec Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 1 May 2022 19:38:29 -0500
Subject: [PATCH 20/38] Version Bump

---
 CHANGELOG.md      | 29 +++++++++++++++++++++++++++++
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39fbfc1..07279d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4] - 2022-05-01
+### Added
+- Saves can now be encoded in two new options: plaintext and lz compressed, determined by a new "saveEncoding" property in projInfo
+    - Saves will be loaded in whatever format is detected. The setting only applies when writing saves
+- createModifierSection has new parameter to override the label used for the base value
+- createCollapsibleModifierSections utility function to display `createModifierSection`s in collapsible forms
+### Fixed
+- Saves manager would not clear the current save from its cache when switching saves, leading to progress loss if flipping between saves
+- Layer.minWidth being ignored
+- Separators between tabs (player.tabs) would not extend to the bottom of the screen when scrolling
+- Tree nodes not being clicked on their edges
+### Changed
+- **BREAKING** No features extend persistent anymore
+    - This will break ALL existing saves that aren't manually dealt with in fixOldSave
+    - Affected features: Achievement, Buyable, Grid, Infobox, Milestone, TabFamily, and Upgrade
+    - Affected features will now have a property within them where the persistent ref is stored. This means new persistent refs can now be safely added to these features
+- Features with option functions with 0 required properties now don't require passing in an options function
+- Improved the look of the goBack and minimize buttons (and made them more consistent with each other)
+- Newly created saves are immediately switched to
+- TooltipDirection and Direction have been merged into one enum
+- Made layers shallow reactive, so it works better with dynamic layers
+- Modifier functions all have more explicit types now
+- Scaling functions take computables instead of processed computables
+### Removed
+- Unused tsParticles.d.ts file
+### Documented
+- modifiers.ts
+- conversions.ts
+
 ## [0.3.3] - 2022-04-24
 ### Fixed
 - Spacing between rows in Tree components
diff --git a/package-lock.json b/package-lock.json
index 9d95c7f..8217435 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "profectus",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "profectus",
-      "version": "0.3.3",
+      "version": "0.4.0",
       "dependencies": {
         "@pixi/particle-emitter": "^5.0.4",
         "core-js": "^3.6.5",
diff --git a/package.json b/package.json
index d5fb30b..0560760 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "profectus",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "start": "vue-cli-service serve",

From 2d9de004247f9230d797336992f6636734e38b91 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 2 May 2022 08:53:58 -0500
Subject: [PATCH 21/38] Make nested player proxies of arrays as well as objects

---
 src/game/player.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/game/player.ts b/src/game/player.ts
index 7431c84..f181b49 100644
--- a/src/game/player.ts
+++ b/src/game/player.ts
@@ -51,7 +51,11 @@ const playerHandler: ProxyHandler<Record<PropertyKey, any>> = {
         }
 
         const value = target[ProxyState][key];
-        if (key !== "value" && isPlainObject(value) && !(value instanceof Decimal)) {
+        if (
+            key !== "value" &&
+            (isPlainObject(value) || Array.isArray(value)) &&
+            !(value instanceof Decimal)
+        ) {
             if (value !== target[key]?.[ProxyState]) {
                 const path = [...target[ProxyPath], key];
                 target[key] = new Proxy({ [ProxyState]: value, [ProxyPath]: path }, playerHandler);

From 9a40249c00583baedd1c9f3e8405d36e796dde5b Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 2 May 2022 20:50:05 -0500
Subject: [PATCH 22/38] Fixed error when switching between saves with different
 layers

---
 src/util/save.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/util/save.ts b/src/util/save.ts
index 3f5f1d6..6e602e4 100644
--- a/src/util/save.ts
+++ b/src/util/save.ts
@@ -102,8 +102,10 @@ export async function loadSave(playerObj: Partial<PlayerData>): Promise<void> {
     const { fixOldSave, getInitialLayers } = await import("data/projEntry");
 
     for (const layer in layers) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        removeLayer(layers[layer]!);
+        const l = layers[layer];
+        if (l) {
+            removeLayer(l);
+        }
     }
     getInitialLayers(playerObj).forEach(layer => addLayer(layer, playerObj));
 

From 4058fad711a22e29c1f50031f80bfff21fcbe6f5 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 2 May 2022 20:50:19 -0500
Subject: [PATCH 23/38] Removed unused import

---
 src/features/conversion.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/conversion.ts b/src/features/conversion.ts
index 397eb4a..1918f51 100644
--- a/src/features/conversion.ts
+++ b/src/features/conversion.ts
@@ -10,7 +10,7 @@ import {
     ProcessedComputable
 } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import { computed, isRef, Ref, unref } from "vue";
+import { computed, Ref, unref } from "vue";
 import { OptionsFunc, Replace, setDefault } from "./feature";
 import { Resource } from "./resources/resource";
 

From 2c14b2193d21088ce9362c71eb64b517a6b226bb Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 2 May 2022 21:01:20 -0500
Subject: [PATCH 24/38] Fix links sometimes using nodes that were removed

---
 src/features/links/Links.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/links/Links.vue b/src/features/links/Links.vue
index eccd7be..b5d7c1f 100644
--- a/src/features/links/Links.vue
+++ b/src/features/links/Links.vue
@@ -43,9 +43,9 @@ function updateNodes() {
         isDirty = false;
         nextTick(() => {
             boundingRect.value = resizeListener.value?.getBoundingClientRect();
-            (Object.values(nodes.value) as FeatureNode[]).forEach(
-                node => (node.rect = node.element.getBoundingClientRect())
-            );
+            (Object.values(nodes.value) as FeatureNode[])
+                .filter(n => n) // Sometimes the values become undefined
+                .forEach(node => (node.rect = node.element.getBoundingClientRect()));
             isDirty = true;
         });
     }

From b82bf8eee326035834538847e32cb1e2cba7ed09 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 2 May 2022 21:10:18 -0500
Subject: [PATCH 25/38] Made most touch events passive

---
 src/features/boards/Board.vue         | 2 +-
 src/features/boards/BoardNode.vue     | 4 ++--
 src/features/clickables/Clickable.vue | 6 +++---
 src/features/grids/GridCell.vue       | 6 +++---
 src/features/trees/TreeNode.vue       | 6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/features/boards/Board.vue b/src/features/boards/Board.vue
index 532a721..51d7f8b 100644
--- a/src/features/boards/Board.vue
+++ b/src/features/boards/Board.vue
@@ -19,7 +19,7 @@
         @mousedown="(e: MouseEvent) => mouseDown(e)"
         @touchstart="(e: TouchEvent) => mouseDown(e)"
         @mouseup="() => endDragging(dragging)"
-        @touchend="() => endDragging(dragging)"
+        @touchend.passive="() => endDragging(dragging)"
         @mouseleave="() => endDragging(dragging)"
     >
         <svg class="stage" width="100%" height="100%">
diff --git a/src/features/boards/BoardNode.vue b/src/features/boards/BoardNode.vue
index c2f61b8..f571ded 100644
--- a/src/features/boards/BoardNode.vue
+++ b/src/features/boards/BoardNode.vue
@@ -46,9 +46,9 @@
             @mouseenter="isHovering = true"
             @mouseleave="isHovering = false"
             @mousedown="mouseDown"
-            @touchstart="mouseDown"
+            @touchstart.passive="mouseDown"
             @mouseup="mouseUp"
-            @touchend="mouseUp"
+            @touchend.passive="mouseUp"
         >
             <g v-if="shape === Shape.Circle">
                 <circle
diff --git a/src/features/clickables/Clickable.vue b/src/features/clickables/Clickable.vue
index eba1f76..02e4e57 100644
--- a/src/features/clickables/Clickable.vue
+++ b/src/features/clickables/Clickable.vue
@@ -9,9 +9,9 @@
         @mousedown="start"
         @mouseleave="stop"
         @mouseup="stop"
-        @touchstart="start"
-        @touchend="stop"
-        @touchcancel="stop"
+        @touchstart.passive="start"
+        @touchend.passive="stop"
+        @touchcancel.passive="stop"
         :class="{
             feature: true,
             clickable: true,
diff --git a/src/features/grids/GridCell.vue b/src/features/grids/GridCell.vue
index 0648017..b1a780c 100644
--- a/src/features/grids/GridCell.vue
+++ b/src/features/grids/GridCell.vue
@@ -12,9 +12,9 @@
         @mousedown="start"
         @mouseleave="stop"
         @mouseup="stop"
-        @touchstart="start"
-        @touchend="stop"
-        @touchcancel="stop"
+        @touchstart.passive="start"
+        @touchend.passive="stop"
+        @touchcancel.passive="stop"
     >
         <div v-if="title"><component :is="titleComponent" /></div>
         <component :is="component" style="white-space: pre-line" />
diff --git a/src/features/trees/TreeNode.vue b/src/features/trees/TreeNode.vue
index a26f5a4..68200d8 100644
--- a/src/features/trees/TreeNode.vue
+++ b/src/features/trees/TreeNode.vue
@@ -11,9 +11,9 @@
         @mousedown="start"
         @mouseleave="stop"
         @mouseup="stop"
-        @touchstart="start"
-        @touchend="stop"
-        @touchcancel="stop"
+        @touchstart.passive="start"
+        @touchend.passive="stop"
+        @touchcancel.passive="stop"
     >
         <div
             :style="[

From 223b1cfcd48ce635c00144bb8422e83c2a55e906 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 3 May 2022 18:42:39 -0500
Subject: [PATCH 26/38] Fix createModifierSection requiring revert and enabled
 properties

---
 src/game/modifiers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx
index 9a3407b..87db764 100644
--- a/src/game/modifiers.tsx
+++ b/src/game/modifiers.tsx
@@ -202,7 +202,7 @@ export function createSequentialModifier<
 export function createModifierSection(
     title: string,
     subtitle: string,
-    modifier: Required<Modifier>,
+    modifier: WithRequired<Modifier, "description">,
     base: DecimalSource = 1,
     unit = "",
     baseText: CoercableComponent = "Base"

From eec494370c1acb11f57c3104b8638aaa5cb537c7 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 3 May 2022 21:10:24 -0500
Subject: [PATCH 27/38] Made layer style and classes

---
 src/components/Game.vue  | 15 +++++++++++----
 src/components/Layer.vue | 11 ++---------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Game.vue b/src/components/Game.vue
index 570706f..5a6521b 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -1,6 +1,13 @@
 <template>
     <div class="tabs-container" :class="{ useHeader }">
-        <div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
+        <div
+            v-for="(tab, index) in tabs"
+            :key="index"
+            class="tab"
+            :ref="`tab-${index}`"
+            :style="unref(layers[tab]?.style)"
+            :class="unref(layers[tab]?.classes)"
+        >
             <Nav v-if="index === 0 && !useHeader" />
             <div class="inner-tab">
                 <Layer
@@ -19,7 +26,7 @@
 import projInfo from "data/projInfo.json";
 import { GenericLayer, layers } from "game/layers";
 import player from "game/player";
-import { computed, toRef } from "vue";
+import { computed, toRef, unref } from "vue";
 import Layer from "./Layer.vue";
 import Nav from "./Nav.vue";
 
@@ -28,8 +35,8 @@ const layerKeys = computed(() => Object.keys(layers));
 const useHeader = projInfo.useHeader;
 
 function gatherLayerProps(layer: GenericLayer) {
-    const { display, minimized, minWidth, name, color, style, classes, minimizable, nodes } = layer;
-    return { display, minimized, minWidth, name, color, style, classes, minimizable, nodes };
+    const { display, minimized, minWidth, name, color, minimizable, nodes } = layer;
+    return { display, minimized, minWidth, name, color, minimizable, nodes };
 }
 </script>
 
diff --git a/src/components/Layer.vue b/src/components/Layer.vue
index 311b4c4..df18336 100644
--- a/src/components/Layer.vue
+++ b/src/components/Layer.vue
@@ -4,12 +4,7 @@
         <button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false">
             <div>{{ unref(name) }}</div>
         </button>
-        <div
-            class="layer-tab"
-            :style="unref(style)"
-            :class="[{ showGoBack }, unref(classes)]"
-            v-else
-        >
+        <div class="layer-tab" :class="{ showGoBack }" v-else>
             <Context ref="contextRef">
                 <component :is="component" />
             </Context>
@@ -22,7 +17,7 @@
 
 <script lang="ts">
 import projInfo from "data/projInfo.json";
-import { CoercableComponent, StyleValue } from "features/feature";
+import { CoercableComponent } from "features/feature";
 import { FeatureNode } from "game/layers";
 import { Persistent } from "game/persistence";
 import player from "game/player";
@@ -58,8 +53,6 @@ export default defineComponent({
             required: true
         },
         color: processedPropType<string>(String),
-        style: processedPropType<StyleValue>(String, Object, Array),
-        classes: processedPropType<Record<string, boolean>>(Object),
         minimizable: processedPropType<boolean>(Boolean),
         nodes: {
             type: Object as PropType<Ref<Record<string, FeatureNode | undefined>>>,

From 86688b5bb1fc61df713eb6be2bd711788f669805 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Fri, 6 May 2022 13:32:06 -0500
Subject: [PATCH 28/38] Fix tab buttons not getting style refs

---
 src/features/tabs/TabFamily.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/tabs/TabFamily.vue b/src/features/tabs/TabFamily.vue
index 4d52ab8..31f6802 100644
--- a/src/features/tabs/TabFamily.vue
+++ b/src/features/tabs/TabFamily.vue
@@ -115,7 +115,7 @@ export default defineComponent({
 
         function gatherButtonProps(button: GenericTabButton) {
             const { display, style, classes, glowColor, visibility } = button;
-            return { display, style, classes, glowColor, visibility };
+            return { display, style: unref(style), classes, glowColor, visibility };
         }
 
         return {

From 05eb2a2bedee54eba96e62072fb0dde37b1ced87 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 19:08:16 -0500
Subject: [PATCH 29/38] Made findFeatures take multiple types, and added
 excludeFeatures

---
 src/features/feature.ts | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/features/feature.ts b/src/features/feature.ts
index 2946726..65c03bb 100644
--- a/src/features/feature.ts
+++ b/src/features/feature.ts
@@ -60,13 +60,37 @@ export function setDefault<T, K extends keyof T>(
     }
 }
 
-export function findFeatures(obj: Record<string, unknown>, type: symbol): unknown[] {
+export function findFeatures(obj: Record<string, unknown>, ...types: symbol[]): unknown[] {
     const objects: unknown[] = [];
     const handleObject = (obj: Record<string, unknown>) => {
         Object.keys(obj).forEach(key => {
             const value = obj[key];
             if (value && typeof value === "object") {
-                if ((value as Record<string, unknown>).type === type) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (types.includes((value as Record<string, any>).type)) {
+                    objects.push(value);
+                } else if (!(value instanceof Decimal) && !isRef(value)) {
+                    handleObject(value as Record<string, unknown>);
+                }
+            }
+        });
+    };
+    handleObject(obj);
+    return objects;
+}
+
+export function excludeFeatures(obj: Record<string, unknown>, ...types: symbol[]): unknown[] {
+    const objects: unknown[] = [];
+    const handleObject = (obj: Record<string, unknown>) => {
+        Object.keys(obj).forEach(key => {
+            const value = obj[key];
+            if (value && typeof value === "object") {
+                if (
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    typeof (value as Record<string, any>).type == "symbol" &&
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    !types.includes((value as Record<string, any>).type)
+                ) {
                     objects.push(value);
                 } else if (!(value instanceof Decimal) && !isRef(value)) {
                     handleObject(value as Record<string, unknown>);

From 2ec1a03d8ff55d8d5f508f46a792bd5c0c20b4a8 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 19:39:39 -0500
Subject: [PATCH 30/38] Fixed some typings on Board component also removed
 FeatureComponent type since it's no longer used

---
 src/features/boards/Board.vue | 34 +++++++++++++++++++++++++++-------
 src/features/feature.ts       | 10 +---------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/features/boards/Board.vue b/src/features/boards/Board.vue
index 51d7f8b..a0cb8ae 100644
--- a/src/features/boards/Board.vue
+++ b/src/features/boards/Board.vue
@@ -25,7 +25,7 @@
         <svg class="stage" width="100%" height="100%">
             <g class="g1">
                 <transition-group name="link" appear>
-                    <g v-for="(link, i) in links || []" :key="i">
+                    <g v-for="(link, i) in unref(links) || []" :key="i">
                         <BoardLinkVue :link="link" />
                     </g>
                 </transition-group>
@@ -38,8 +38,8 @@
                             :dragged="dragged"
                             :hasDragged="hasDragged"
                             :receivingNode="receivingNode?.id === node.id"
-                            :selectedNode="selectedNode"
-                            :selectedAction="selectedAction"
+                            :selectedNode="unref(selectedNode)"
+                            :selectedAction="unref(selectedAction)"
                             @mouseDown="mouseDown"
                             @endDragging="endDragging"
                         />
@@ -51,15 +51,35 @@
 </template>
 
 <script setup lang="ts">
-import { BoardNode, GenericBoard, getNodeProperty } from "features/boards/board";
-import { FeatureComponent, Visibility } from "features/feature";
+import {
+    BoardData,
+    BoardNode,
+    BoardNodeLink,
+    GenericBoardNodeAction,
+    GenericNodeType,
+    getNodeProperty
+} from "features/boards/board";
+import { StyleValue, Visibility } from "features/feature";
 import { PersistentState } from "game/persistence";
-import { computed, ref, toRefs } from "vue";
+import { ProcessedComputable } from "util/computed";
+import { computed, Ref, ref, toRefs, unref } from "vue";
 import panZoom from "vue-panzoom";
 import BoardLinkVue from "./BoardLink.vue";
 import BoardNodeVue from "./BoardNode.vue";
 
-const _props = defineProps<FeatureComponent<GenericBoard>>();
+const _props = defineProps<{
+    nodes: Ref<BoardNode[]>;
+    types: Record<string, GenericNodeType>;
+    [PersistentState]: Ref<BoardData>;
+    visibility: ProcessedComputable<Visibility>;
+    width?: ProcessedComputable<string>;
+    height?: ProcessedComputable<string>;
+    style?: ProcessedComputable<StyleValue>;
+    classes?: ProcessedComputable<Record<string, boolean>>;
+    links: Ref<BoardNodeLink[] | null>;
+    selectedAction: Ref<GenericBoardNodeAction | null>;
+    selectedNode: Ref<BoardNode | null>;
+}>();
 const props = toRefs(_props);
 
 const lastMousePosition = ref({ x: 0, y: 0 });
diff --git a/src/features/feature.ts b/src/features/feature.ts
index 65c03bb..60631dd 100644
--- a/src/features/feature.ts
+++ b/src/features/feature.ts
@@ -1,6 +1,5 @@
-import { DefaultValue } from "game/persistence";
 import Decimal from "util/bignum";
-import { DoNotCache, ProcessedComputable } from "util/computed";
+import { DoNotCache } from "util/computed";
 import { CSSProperties, DefineComponent, isRef } from "vue";
 
 export const Component = Symbol("Component");
@@ -15,13 +14,6 @@ export type StyleValue = string | CSSProperties | Array<string | CSSProperties>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type GenericComponent = DefineComponent<any, any, any>;
 
-export type FeatureComponent<T> = Omit<
-    {
-        [K in keyof T]: T[K] extends ProcessedComputable<infer S> ? S : T[K];
-    },
-    typeof Component | typeof DefaultValue
->;
-
 export type Replace<T, S> = S & Omit<T, keyof S>;
 
 export type OptionsFunc<T, S = T, R = Record<string, unknown>> = () => T & ThisType<S> & Partial<R>;

From 521c0d1ea4c58b58b536cad640c295874ab796ad Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 20:04:08 -0500
Subject: [PATCH 31/38] Wrote documentation for feature.ts Also slightly
 cleaned up modifiers.tsx due to slightly new comment style

---
 src/features/feature.ts | 60 ++++++++++++++++++++++++++++++++++++-----
 src/game/modifiers.tsx  |  8 ++----
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/features/feature.ts b/src/features/feature.ts
index 60631dd..2a99351 100644
--- a/src/features/feature.ts
+++ b/src/features/feature.ts
@@ -2,46 +2,83 @@ import Decimal from "util/bignum";
 import { DoNotCache } from "util/computed";
 import { CSSProperties, DefineComponent, isRef } from "vue";
 
+/**
+ * A symbol to use as a key for a vue component a feature can be rendered with
+ * @see {@link VueFeature}
+ */
 export const Component = Symbol("Component");
+/**
+ * A symbol to use as a key for a prop gathering function that a feature can use to send to its component
+ * @see {@link VueFeature}
+ */
 export const GatherProps = Symbol("GatherProps");
 
+/**
+ * A type referring to a function that returns JSX and is marked that it shouldn't be wrapped in a ComputedRef
+ * @see {@link jsx}
+ */
 export type JSXFunction = (() => JSX.Element) & { [DoNotCache]: true };
+/**
+ * Any value that can be coerced into (or is) a vue component
+ */
 export type CoercableComponent = string | DefineComponent | JSXFunction;
+/**
+ * Any value that can be passed into an HTML element's style attribute.
+ * Note that Profectus uses its own StyleValue and CSSProperties that are extended,
+ * in order to have additional properties added to them, such as variable CSS variables.
+ */
 export type StyleValue = string | CSSProperties | Array<string | CSSProperties>;
 
-// TODO if importing .vue components in .tsx can become type safe,
-// this type can probably be safely removed
+/** A type that refers to any vue component */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type GenericComponent = DefineComponent<any, any, any>;
 
+/** Utility type that is S, with any properties from T that aren't already present in S */
 export type Replace<T, S> = S & Omit<T, keyof S>;
 
+/**
+ * Utility function for a function that returns an object of a given type,
+ * with "this" bound to what the type will eventually be processed into.
+ * Intended for making lazily evaluated objects.
+ */
 export type OptionsFunc<T, S = T, R = Record<string, unknown>> = () => T & ThisType<S> & Partial<R>;
 
 let id = 0;
-// Get a unique ID to allow a feature to be found for creating branches
-// and any other uses requiring unique identifiers for each feature
-// IDs are gauranteed unique, but should not be saved as they are not
-// guaranteed to be persistent through updates and such
+/**
+ * Gets a unique ID to give to each feature, used for any sort of system that needs to identify
+ * elements in the DOM rather than references to the feature itself. (For example, branches)
+ * IDs are guaranteed unique, but _NOT_ persistent - they likely will change between updates.
+ * @param prefix A string to prepend to the id to make it more readable in the inspector tools
+ */
 export function getUniqueID(prefix = "feature-"): string {
     return prefix + id++;
 }
 
+/** Enum for what the visibility of a feature or component should be */
 export enum Visibility {
+    /** The feature or component should be visible */
     Visible,
+    /** The feature or component should not appear but still take up space */
     Hidden,
+    /** The feature or component should not appear not take up space */
     None
 }
 
+/**
+ * Takes a function and marks it as JSX so it won't get auto-wrapped into a ComputedRef.
+ * The function may also return empty string as empty JSX tags cause issues.
+ */
 export function jsx(func: () => JSX.Element | ""): JSXFunction {
     (func as Partial<JSXFunction>)[DoNotCache] = true;
     return func as JSXFunction;
 }
 
+/** Utility function to convert a boolean value into a Visbility value */
 export function showIf(condition: boolean, otherwise = Visibility.None): Visibility {
     return condition ? Visibility.Visible : otherwise;
 }
 
+/** Utility function to set a property on an object if and only if it doesn't already exist */
 export function setDefault<T, K extends keyof T>(
     object: T,
     key: K,
@@ -52,6 +89,11 @@ export function setDefault<T, K extends keyof T>(
     }
 }
 
+/**
+ * Traverses an object and returns all features of the given type(s)
+ * @param obj The object to traverse
+ * @param types The feature types that will be searched for
+ */
 export function findFeatures(obj: Record<string, unknown>, ...types: symbol[]): unknown[] {
     const objects: unknown[] = [];
     const handleObject = (obj: Record<string, unknown>) => {
@@ -71,6 +113,12 @@ export function findFeatures(obj: Record<string, unknown>, ...types: symbol[]):
     return objects;
 }
 
+/**
+ * Traverses an object and returns all features that are _not_ any of the given types.
+ * Features are any object with a "type" property that has a symbol value.
+ * @param obj The object to traverse
+ * @param types The feature types that will be skipped over
+ */
 export function excludeFeatures(obj: Record<string, unknown>, ...types: symbol[]): unknown[] {
     const objects: unknown[] = [];
     const handleObject = (obj: Record<string, unknown>) => {
diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx
index 87db764..b4ea335 100644
--- a/src/game/modifiers.tsx
+++ b/src/game/modifiers.tsx
@@ -14,13 +14,9 @@ import { computed, unref } from "vue";
  * {@link createModifierSection}.
  */
 export interface Modifier {
-    /**
-     * Applies some operation on the input and returns the result.
-     */
+    /** Applies some operation on the input and returns the result. */
     apply: (gain: DecimalSource) => DecimalSource;
-    /**
-     * Reverses the operation applied by the apply property. Required by some features.
-     */
+    /** Reverses the operation applied by the apply property. Required by some features. */
     revert?: (gain: DecimalSource) => DecimalSource;
     /**
      * Whether or not this modifier should be considered enabled.

From 868a77af29f7a03b441adae70802a678055073f7 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 20:58:13 -0500
Subject: [PATCH 32/38] Saving is now always lz-string. saveEncoding renamed to
 exportEncoding. exportEncoding only affects exports, and defaults to base64
 so it's obfuscated but doesn't have issues with being pasted in discord

---
 src/components/SavesManager.vue |  4 ++--
 src/data/projInfo.json          |  2 +-
 src/game/settings.ts            | 14 +-------------
 src/util/save.ts                | 16 +++-------------
 4 files changed, 7 insertions(+), 29 deletions(-)

diff --git a/src/components/SavesManager.vue b/src/components/SavesManager.vue
index 940bfc2..bf4d956 100644
--- a/src/components/SavesManager.vue
+++ b/src/components/SavesManager.vue
@@ -192,9 +192,9 @@ function exportSave(id: string) {
         saveToExport = save();
     } else {
         saveToExport = JSON.stringify(saves.value[id]);
-        switch (projInfo.saveEncoding) {
+        switch (projInfo.exportEncoding) {
             default:
-                console.warn(`Unknown save encoding: ${projInfo.saveEncoding}. Defaulting to lz`);
+                console.warn(`Unknown save encoding: ${projInfo.exportEncoding}. Defaulting to lz`);
             case "lz":
                 saveToExport = LZString.compressToUTF16(saveToExport);
                 break;
diff --git a/src/data/projInfo.json b/src/data/projInfo.json
index ad6543d..0356f2a 100644
--- a/src/data/projInfo.json
+++ b/src/data/projInfo.json
@@ -19,5 +19,5 @@
 	"maxTickLength": 3600,
 	"offlineLimit": 1,
 	"enablePausing": true,
-	"saveEncoding": "lz"
+	"exportEncoding": "base64"
 }
diff --git a/src/game/settings.ts b/src/game/settings.ts
index 927c704..9649847 100644
--- a/src/game/settings.ts
+++ b/src/game/settings.ts
@@ -25,19 +25,7 @@ const state = reactive<Partial<Settings>>({
 watch(
     state,
     state => {
-        let stringifiedSettings = JSON.stringify(state);
-        switch (projInfo.saveEncoding) {
-            default:
-                console.warn(`Unknown save encoding: ${projInfo.saveEncoding}. Defaulting to lz`);
-            case "lz":
-                stringifiedSettings = LZString.compressToUTF16(stringifiedSettings);
-                break;
-            case "base64":
-                stringifiedSettings = btoa(unescape(encodeURIComponent(stringifiedSettings)));
-                break;
-            case "plain":
-                break;
-        }
+        const stringifiedSettings = LZString.compressToUTF16(JSON.stringify(state));
         localStorage.setItem(projInfo.id, stringifiedSettings);
     },
     { deep: true }
diff --git a/src/util/save.ts b/src/util/save.ts
index 6e602e4..58f0c2a 100644
--- a/src/util/save.ts
+++ b/src/util/save.ts
@@ -25,19 +25,9 @@ export function setupInitialStore(player: Partial<PlayerData> = {}): Player {
 }
 
 export function save(playerData?: PlayerData): string {
-    let stringifiedSave = stringifySave(playerData ?? player[ProxyState]);
-    switch (projInfo.saveEncoding) {
-        default:
-            console.warn(`Unknown save encoding: ${projInfo.saveEncoding}. Defaulting to lz`);
-        case "lz":
-            stringifiedSave = LZString.compressToUTF16(stringifiedSave);
-            break;
-        case "base64":
-            stringifiedSave = btoa(unescape(encodeURIComponent(stringifiedSave)));
-            break;
-        case "plain":
-            break;
-    }
+    const stringifiedSave = LZString.compressToUTF16(
+        stringifySave(playerData ?? player[ProxyState])
+    );
     localStorage.setItem((playerData ?? player[ProxyState]).id, stringifiedSave);
     return stringifiedSave;
 }

From 3118db1402f7d1ae5d52cd95685b5b1aaab68059 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 21:01:57 -0500
Subject: [PATCH 33/38] Fixed offline time amount always showing when offline
 limit is 0

---
 src/data/projEntry.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx
index 21f96c5..0abb5cb 100644
--- a/src/data/projEntry.tsx
+++ b/src/data/projEntry.tsx
@@ -46,10 +46,10 @@ export const main = createLayer("main", () => {
             <>
                 {player.devSpeed === 0 ? <div>Game Paused</div> : null}
                 {player.devSpeed && player.devSpeed !== 1 ? (
-                    <div>Dev Speed: {format(player.devSpeed || 0)}x</div>
+                    <div>Dev Speed: {format(player.devSpeed)}x</div>
                 ) : null}
-                {player.offlineTime != undefined ? (
-                    <div>Offline Time: {formatTime(player.offlineTime || 0)}</div>
+                {player.offlineTime ? (
+                    <div>Offline Time: {formatTime(player.offlineTime)}</div>
                 ) : null}
                 <div>
                     {Decimal.lt(points.value, "1e1000") ? <span>You have </span> : null}

From ce2f9f8ee00d04c40e9ca5fea1f95c0dc268e137 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 21:23:05 -0500
Subject: [PATCH 34/38] Make buyables' onClick/purchase function support custom
 canPurchases They can also now be overidden from the options function

---
 src/features/buyable.tsx | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/features/buyable.tsx b/src/features/buyable.tsx
index 21c5803..7f94ad4 100644
--- a/src/features/buyable.tsx
+++ b/src/features/buyable.tsx
@@ -46,7 +46,7 @@ export interface BuyableOptions {
     mark?: Computable<boolean | string>;
     small?: Computable<boolean>;
     display?: Computable<BuyableDisplay>;
-    onPurchase?: (cost: DecimalSource) => void;
+    onPurchase?: (cost: DecimalSource | undefined) => void;
 }
 
 export interface BaseBuyable {
@@ -144,20 +144,25 @@ export function createBuyable<T extends BuyableOptions>(
         });
         processComputable(buyable as T, "canPurchase");
         buyable.canClick = buyable.canPurchase as ProcessedComputable<boolean>;
-        buyable.onClick = buyable.purchase = function () {
-            const genericBuyable = buyable as GenericBuyable;
-            if (
-                !unref(genericBuyable.canPurchase) ||
-                genericBuyable.cost == null ||
-                genericBuyable.resource == null
-            ) {
-                return;
-            }
-            const cost = unref(genericBuyable.cost);
-            genericBuyable.resource.value = Decimal.sub(genericBuyable.resource.value, cost);
-            genericBuyable.amount.value = Decimal.add(genericBuyable.amount.value, 1);
-            this.onPurchase?.(cost);
-        };
+        buyable.onClick = buyable.purchase =
+            buyable.onClick ??
+            buyable.purchase ??
+            function (this: GenericBuyable) {
+                const genericBuyable = buyable as GenericBuyable;
+                if (!unref(genericBuyable.canPurchase)) {
+                    return;
+                }
+                const cost = unref(genericBuyable.cost);
+                if (genericBuyable.cost != null && genericBuyable.resource != null) {
+                    genericBuyable.resource.value = Decimal.sub(
+                        genericBuyable.resource.value,
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        cost!
+                    );
+                    genericBuyable.amount.value = Decimal.add(genericBuyable.amount.value, 1);
+                }
+                this.onPurchase?.(cost);
+            };
         processComputable(buyable as T, "display");
         const display = buyable.display;
         buyable.display = jsx(() => {

From 01ade0984c50106b3826667944482f8acb477ecd Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 21:42:45 -0500
Subject: [PATCH 35/38] Add tooltips to icons in saves manager

---
 src/components/Save.vue           | 26 ++++++++++++++++++++------
 src/features/tooltips/Tooltip.vue |  1 +
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/Save.vue b/src/components/Save.vue
index 9e7db1c..06ec591 100644
--- a/src/components/Save.vue
+++ b/src/components/Save.vue
@@ -8,36 +8,48 @@
                 left
                 v-if="save.error == undefined && !isConfirming"
             >
-                <span class="material-icons">content_paste</span>
+                <Tooltip display="Export" :direction="Direction.Left" class="info">
+                    <span class="material-icons">content_paste</span>
+                </Tooltip>
             </FeedbackButton>
             <button
                 @click="emit('duplicate')"
                 class="button"
                 v-if="save.error == undefined && !isConfirming"
             >
-                <span class="material-icons">content_copy</span>
+                <Tooltip display="Duplicate" :direction="Direction.Left" class="info">
+                    <span class="material-icons">content_copy</span>
+                </Tooltip>
             </button>
             <button
                 @click="isEditing = !isEditing"
                 class="button"
                 v-if="save.error == undefined && !isConfirming"
             >
-                <span class="material-icons">edit</span>
+                <Tooltip display="Edit Name" :direction="Direction.Left" class="info">
+                    <span class="material-icons">edit</span>
+                </Tooltip>
             </button>
             <DangerButton
                 :disabled="isActive"
                 @click="emit('delete')"
                 @confirmingChanged="value => (isConfirming = value)"
             >
-                <span class="material-icons" style="margin: -2px">delete</span>
+                <Tooltip display="Delete" :direction="Direction.Left" class="info">
+                    <span class="material-icons" style="margin: -2px">delete</span>
+                </Tooltip>
             </DangerButton>
         </div>
         <div class="actions" v-else>
             <button @click="changeName" class="button">
-                <span class="material-icons">check</span>
+                <Tooltip display="Save" :direction="Direction.Left" class="info">
+                    <span class="material-icons">check</span>
+                </Tooltip>
             </button>
             <button @click="isEditing = !isEditing" class="button">
-                <span class="material-icons">close</span>
+                <Tooltip display="Cancel" :direction="Direction.Left" class="info">
+                    <span class="material-icons">close</span>
+                </Tooltip>
             </button>
         </div>
         <div class="details" v-if="save.error == undefined && !isEditing">
@@ -58,7 +70,9 @@
 </template>
 
 <script setup lang="ts">
+import Tooltip from "features/tooltips/Tooltip.vue";
 import player from "game/player";
+import { Direction } from "util/common";
 import { computed, ref, toRefs, watch } from "vue";
 import DangerButton from "./fields/DangerButton.vue";
 import FeedbackButton from "./fields/FeedbackButton.vue";
diff --git a/src/features/tooltips/Tooltip.vue b/src/features/tooltips/Tooltip.vue
index 3274b0d..1b7d5c1 100644
--- a/src/features/tooltips/Tooltip.vue
+++ b/src/features/tooltips/Tooltip.vue
@@ -120,6 +120,7 @@ export default defineComponent({
     position: relative;
     --xoffset: 0px;
     --yoffset: 0px;
+    text-shadow: none !important;
 }
 
 .tooltip,

From 55c4476edf9d9046483c9c836c2e4f6d8d10985b Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 21:49:35 -0500
Subject: [PATCH 36/38] Fixed exporting the currently active save not using
 exportEncoding

---
 src/components/SavesManager.vue | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/SavesManager.vue b/src/components/SavesManager.vue
index bf4d956..f338f00 100644
--- a/src/components/SavesManager.vue
+++ b/src/components/SavesManager.vue
@@ -59,7 +59,7 @@
 <script setup lang="ts">
 import projInfo from "data/projInfo.json";
 import Modal from "components/Modal.vue";
-import player, { PlayerData } from "game/player";
+import player, { PlayerData, stringifySave } from "game/player";
 import settings from "game/settings";
 import { getUniqueID, loadSave, save, newSave } from "util/save";
 import { ComponentPublicInstance, computed, nextTick, ref, shallowReactive, watch } from "vue";
@@ -68,6 +68,7 @@ import Text from "./fields/Text.vue";
 import Save from "./Save.vue";
 import Draggable from "vuedraggable";
 import LZString from "lz-string";
+import { ProxyState } from "util/proxies";
 
 export type LoadablePlayerData = Omit<Partial<PlayerData>, "id"> & { id: string; error?: unknown };
 
@@ -189,21 +190,21 @@ const saves = computed(() =>
 function exportSave(id: string) {
     let saveToExport;
     if (player.id === id) {
-        saveToExport = save();
+        saveToExport = stringifySave(player[ProxyState]);
     } else {
         saveToExport = JSON.stringify(saves.value[id]);
-        switch (projInfo.exportEncoding) {
-            default:
-                console.warn(`Unknown save encoding: ${projInfo.exportEncoding}. Defaulting to lz`);
-            case "lz":
-                saveToExport = LZString.compressToUTF16(saveToExport);
-                break;
-            case "base64":
-                saveToExport = btoa(unescape(encodeURIComponent(saveToExport)));
-                break;
-            case "plain":
-                break;
-        }
+    }
+    switch (projInfo.exportEncoding) {
+        default:
+            console.warn(`Unknown save encoding: ${projInfo.exportEncoding}. Defaulting to lz`);
+        case "lz":
+            saveToExport = LZString.compressToUTF16(saveToExport);
+            break;
+        case "base64":
+            saveToExport = btoa(unescape(encodeURIComponent(saveToExport)));
+            break;
+        case "plain":
+            break;
     }
 
     // Put on clipboard. Using the clipboard API asks for permissions and stuff

From 2e3f1de1587c2b60c9bf2a4fce51cdf6bd542b0a Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 23:37:43 -0500
Subject: [PATCH 37/38] Fix presets dropdown not deselecting after creating a
 save

---
 src/components/SavesManager.vue  |  9 ++++++++-
 src/components/fields/Select.vue | 10 +++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/SavesManager.vue b/src/components/SavesManager.vue
index f338f00..04dfd56 100644
--- a/src/components/SavesManager.vue
+++ b/src/components/SavesManager.vue
@@ -37,7 +37,7 @@
                         <Select
                             v-if="Object.keys(bank).length > 0"
                             :options="bank"
-                            :modelValue="undefined"
+                            :modelValue="selectedPreset"
                             @update:modelValue="preset => newFromPreset(preset as string)"
                             closeOnSelect
                             placeholder="Select preset"
@@ -83,6 +83,7 @@ defineExpose({
 
 const importingFailed = ref(false);
 const saveToImport = ref("");
+const selectedPreset = ref<string | null>(null);
 
 watch(saveToImport, importedSave => {
     if (importedSave) {
@@ -246,6 +247,12 @@ function openSave(id: string) {
 }
 
 function newFromPreset(preset: string) {
+    // Reset preset dropdown
+    selectedPreset.value = preset;
+    nextTick(() => {
+        selectedPreset.value = null;
+    });
+
     if (preset[0] === "{") {
         // plaintext. No processing needed
     } else if (preset[0] === "e") {
diff --git a/src/components/fields/Select.vue b/src/components/fields/Select.vue
index 417d122..1be9328 100644
--- a/src/components/fields/Select.vue
+++ b/src/components/fields/Select.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import "components/common/fields.css";
 import { CoercableComponent } from "features/feature";
-import { computeOptionalComponent } from "util/vue";
+import { computeOptionalComponent, unwrapRef } from "util/vue";
 import { ref, toRef, watch } from "vue";
 import VueNextSelect from "vue-next-select";
 import "vue-next-select/dist/index.css";
@@ -36,12 +36,12 @@ const emit = defineEmits<{
 
 const titleComponent = computeOptionalComponent(toRef(props, "title"), "span");
 
-const value = ref<SelectOption | undefined>(
-    props.options.find(option => option.value === props.modelValue)
+const value = ref<SelectOption | null>(
+    props.options.find(option => option.value === props.modelValue) ?? null
 );
 watch(toRef(props, "modelValue"), modelValue => {
-    if (value.value?.value !== modelValue) {
-        value.value = props.options.find(option => option.value === modelValue);
+    if (unwrapRef(value) !== modelValue) {
+        value.value = props.options.find(option => option.value === modelValue) ?? null;
     }
 });
 

From f23541f3a689dda0004b089842b56207437ac698 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 10 May 2022 23:54:16 -0500
Subject: [PATCH 38/38] Version Bump

---
 CHANGELOG.md      | 26 +++++++++++++++++++++++++-
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07279d7..eaa6d83 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [0.4] - 2022-05-01
+## [0.4.1] - 2022-05-10
+### Added
+- findFeatures can now accept multiple feature types
+- excludeFeatures can now be used to find features with a feature type _blacklist_
+- All the icons in the saves manager now have tooltips
+### Changed
+- All touch events that can be passive now are
+- Layers' style and classes attributes are now applied to the tab element rather than the layer-tab
+- Saving now always uses lz-string, and saveEncoding has been renamed to exportEncoding
+    - The property will now only affect exports, and defaults to base64 so exports can be shared in more places without issues
+- Buyables can now have their onClick/purchase function overwritten
+### Fixed
+- Arrays in player were not being wrapped in proxies for things like NaN detection
+- Error when switching between saves with different layers
+- Links would sometimes error from trying to use nodes that were removed earlier that frame
+- createModifierSection would require modifiers to have revert and enabled properties despite not using them
+- Tab buttons would not use the style property if it was a ref
+- Typings on the Board vue component were incorrect
+- Offline time would always show, if offlineLimit is set to 0
+- Buyables will now call onPurchase() when cost and/or resource were not set
+- Presets dropdown wouldn't deselect the option after creating the save
+### Documented
+- feature.ts
+
+## [0.4.0] - 2022-05-01
 ### Added
 - Saves can now be encoded in two new options: plaintext and lz compressed, determined by a new "saveEncoding" property in projInfo
     - Saves will be loaded in whatever format is detected. The setting only applies when writing saves
diff --git a/package-lock.json b/package-lock.json
index 8217435..ba0884c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "profectus",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "profectus",
-      "version": "0.4.0",
+      "version": "0.4.1",
       "dependencies": {
         "@pixi/particle-emitter": "^5.0.4",
         "core-js": "^3.6.5",
diff --git a/package.json b/package.json
index 0560760..dfd01c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "profectus",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "scripts": {
     "start": "vue-cli-service serve",