Created utility function for opening layers as a modal

src/data/layers/aca/a.tsx

@@ -27,7 +27,7 @@ const layer = createLayer(() => {
             right: true
         },
         onClick() {
-            main.showAchievements.value = true;
+            main.showAchievements();
         }
     }));
 

src/data/mod.tsx

@@ -1,16 +1,15 @@
-import Modal from "@/components/Modal.vue";
 import Profectus from "@/components/Profectus.vue";
 import Spacer from "@/components/layout/Spacer.vue";
 import { jsx } from "@/features/feature";
 import { createResource, trackBest, trackOOMPS, trackTotal } from "@/features/resources/resource";
 import { branchedResetPropagation, createTree, GenericTree } from "@/features/trees/tree";
 import { globalBus } from "@/game/events";
-import { createLayer, GenericLayer } from "@/game/layers";
+import { createLayer, GenericLayer, setupLayerModal } from "@/game/layers";
 import player, { PlayerData } from "@/game/player";
 import { DecimalSource } from "@/lib/break_eternity";
 import Decimal, { format, formatTime } from "@/util/bignum";
 import { render } from "@/util/vue";
-import { computed, ref, toRaw } from "vue";
+import { computed, toRaw } from "vue";
 import a from "./layers/aca/a";
 import c from "./layers/aca/c";
 import f from "./layers/aca/f";
@@ -19,7 +18,6 @@ export const main = createLayer(() => {
     const points = createResource<DecimalSource>(10);
     const best = trackBest(points);
     const total = trackTotal(points);
-    const showAchievements = ref(false);
 
     const pointGain = computed(() => {
         if (!c.generatorUpgrade.bought.value) return new Decimal(0);
@@ -33,6 +31,8 @@ export const main = createLayer(() => {
     });
     const oomps = trackOOMPS(points, pointGain);
 
+    const { openModal, modal } = setupLayerModal(a);
+
     // Note: Casting as generic tree to avoid recursive type definitions
     const tree = createTree(() => ({
         nodes: [[c.treeNode], [f.treeNode, c.spook]],
@@ -80,15 +80,8 @@ export const main = createLayer(() => {
                 </div>
                 <div v-show={Decimal.gt(pointGain.value, 0)}>({oomps.value})</div>
                 <Spacer />
-                <button onClick={() => (showAchievements.value = true)}>open achievements</button>
-                <Modal
-                    modelValue={showAchievements.value}
-                    onUpdate:modelValue={value => (showAchievements.value = value)}
-                    v-slots={{
-                        header: () => <h2>Achievements</h2>,
-                        body: a.display
-                    }}
-                />
+                <button onClick={openModal}>open achievements</button>
+                {render(modal)}
                 {render(tree)}
                 <Profectus height="200px" style="margin: 10px auto; display: block" />
             </>
@@ -98,7 +91,7 @@ export const main = createLayer(() => {
         total,
         oomps,
         tree,
-        showAchievements
+        showAchievements: openModal
     };
 });
 

src/game/layers.tsx

@@ -1,4 +1,12 @@
-import { CoercableComponent, Replace, setDefault, StyleValue } from "@/features/feature";
+import Modal from "@/components/Modal.vue";
+import {
+    CoercableComponent,
+    jsx,
+    JSXFunction,
+    Replace,
+    setDefault,
+    StyleValue
+} from "@/features/feature";
 import { Link } from "@/features/links";
 import Decimal from "@/util/bignum";
 import {
@@ -10,6 +18,7 @@ import {
 } from "@/util/computed";
 import { createLazyProxy } from "@/util/proxies";
 import { createNanoEvents, Emitter } from "nanoevents";
+import { ref, unref } from "vue";
 import { globalBus } from "./events";
 import { persistent, PersistentRef } from "./persistence";
 import player from "./player";
@@ -145,6 +154,26 @@ export function reloadLayer(layer: GenericLayer): void {
     addLayer(layer, player);
 }
 
+export function setupLayerModal(layer: GenericLayer): {
+    openModal: VoidFunction;
+    modal: JSXFunction;
+} {
+    const showModal = ref(false);
+    return {
+        openModal: () => (showModal.value = true),
+        modal: jsx(() => (
+            <Modal
+                modelValue={showModal.value}
+                onUpdate:modelValue={value => (showModal.value = value)}
+                v-slots={{
+                    header: () => <h2>{unref(layer.name)}</h2>,
+                    body: unref(layer.display)
+                }}
+            />
+        ))
+    };
+}
+
 globalBus.on("update", function updateLayers(diff) {
     Object.values(layers).forEach(layer => {
         layer?.emit("preUpdate", diff);