Add help at start

src/data/help.tsx

@@ -0,0 +1,48 @@
+import Modal from "components/Modal.vue";
+import { JSXFunction, jsx } from "features/feature";
+import { persistent } from "game/persistence";
+
+function createModal(title: string, body: JSXFunction) {
+    const showModal = persistent<boolean>(false);
+    const modal = jsx(() => (
+        <Modal
+            modelValue={showModal.value}
+            onUpdate:modelValue={(value: boolean) => (showModal.value = value)}
+            v-slots={{
+                header: () => <h2>{title}</h2>,
+                body
+            }}
+        />
+    ));
+    return { modal, showModal };
+}
+
+export function getMineHelp() {
+    return createModal(
+        "Getting Started",
+        jsx(() => (
+            <div>
+                <p>
+                    Welcome to Planar Pioneers! Your job is to gather resources and eventually
+                    explore and conquer increasingly difficult "planes", which are like alien
+                    worlds. To start you'll use the mine (🪨) machine to gather resources.
+                </p>
+                <br />
+                <p>
+                    You'll gain energy every second based on how much of each resource you have. You
+                    can check the exact calculation and various other information by clicking the
+                    "modifiers" button near the top of the screen.
+                </p>
+                <br />
+                <p>
+                    Select the machine by clicking it to make the mine active. You can also drag
+                    them around to organize your various machines and other objects. While selected
+                    machines will have various actions you can take, such as viewing the help for
+                    that machine. There's also an action to power the machine, allowing it to be
+                    active even while not selected, at the cost of energy per second (cost increases
+                    based on the total number of machines being powered).
+                </p>
+            </div>
+        ))
+    );
+}

src/data/projEntry.tsx

@@ -19,7 +19,7 @@ import {
     createMultiplicativeModifier,
     createSequentialModifier
 } from "game/modifiers";
-import { State } from "game/persistence";
+import { DefaultValue, State } from "game/persistence";
 import type { LayerData, Player } from "game/player";
 import player from "game/player";
 import settings from "game/settings";
@@ -78,6 +78,7 @@ import {
     upgrader
 } from "./nodeTypes";
 import { GenericPlane, createPlane } from "./planes";
+import { getMineHelp } from "./help";
 
 const toast = useToast();
 
@@ -772,6 +773,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
         />
     ));
 
+    const helpModals = {
+        mine: getMineHelp()
+    };
+    helpModals.mine.showModal[DefaultValue] = true;
+    helpModals.mine.showModal.value = true;
+
     this.on("preUpdate", diff => {
         Object.keys(resourceMinedCooldown).forEach(resource => {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -1011,6 +1018,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                 </StickyVue>
                 {render(board)}
                 {render(modifiersModal)}
+                {Object.values(helpModals).map(({ modal }) => modal())}
             </>
         ))
     };