Add docs and otherwise improve how docs will generate

src/components/Layer.vue

@@ -25,22 +25,23 @@
 
 <script setup lang="ts">
 import projInfo from "data/projInfo.json";
-import { Layer, type FeatureNode } from "game/layers";
+import { type FeatureNode } from "game/layers";
 import player from "game/player";
-import { render } from "util/vue";
-import { computed, onErrorCaptured, ref, unref } from "vue";
+import { MaybeGetter } from "util/computed";
+import { render, Renderable } from "util/vue";
+import { computed, MaybeRef, onErrorCaptured, Ref, ref, unref } from "vue";
 import Context from "./Context.vue";
 import ErrorVue from "./Error.vue";
 
 const props = defineProps<{
-    display: Layer["display"];
-    minimizedDisplay: Layer["minimizedDisplay"];
-    minimized: Layer["minimized"];
-    name: Layer["name"];
-    color: Layer["color"];
-    minimizable: Layer["minimizable"];
-    nodes: Layer["nodes"];
-    forceHideGoBack: Layer["forceHideGoBack"];
+    display: MaybeGetter<Renderable>;
+    minimizedDisplay?: MaybeGetter<Renderable>;
+    minimized: Ref<boolean>;
+    name?: MaybeRef<string>;
+    color?: MaybeRef<string>;
+    minimizable?: MaybeRef<boolean>;
+    nodes: Ref<Record<string, FeatureNode | undefined>>;
+    forceHideGoBack?: MaybeRef<boolean>;
     index: number;
 }>();
 

src/components/Nav.vue

@@ -88,7 +88,7 @@
             </ul>
         </div>
     </div>
-    <Info ref="info" :changelog="changelog" />
+    <Info ref="info" @open-changelog="changelog?.open()" />
     <SavesManager ref="savesManager" />
     <Options ref="options" />
     <Changelog ref="changelog" />
@@ -97,22 +97,19 @@
 <script setup lang="ts">
 import Changelog from "data/Changelog.vue";
 import projInfo from "data/projInfo.json";
-import Tooltip from "wrappers/tooltips/Tooltip.vue";
 import settings from "game/settings";
 import { Direction } from "util/common";
 import { galaxy, syncedSaves } from "util/galaxy";
-import type { ComponentPublicInstance } from "vue";
 import { computed, ref } from "vue";
+import Tooltip from "wrappers/tooltips/Tooltip.vue";
 import Info from "./modals/Info.vue";
 import Options from "./modals/Options.vue";
 import SavesManager from "./modals/SavesManager.vue";
 
-const info = ref<ComponentPublicInstance<typeof Info> | null>(null);
-const savesManager = ref<ComponentPublicInstance<typeof SavesManager> | null>(null);
-const options = ref<ComponentPublicInstance<typeof Options> | null>(null);
-// For some reason Info won't accept the changelog unless I do this:
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const changelog = ref<ComponentPublicInstance<any> | null>(null);
+const info = ref<typeof Info | null>(null);
+const savesManager = ref<typeof SavesManager | null>(null);
+const options = ref<typeof Options | null>(null);
+const changelog = ref<typeof Changelog | null>(null);
 
 const { useHeader, banner, title, discordName, discordLink, versionNumber } = projInfo;
 

src/components/modals/Info.vue

@@ -18,7 +18,7 @@
                     Made in Profectus, by thepaperpilot with inspiration from Acameada and Jacorb
                 </div>
                 <br />
-                <div class="link" @click="openChangelog">Changelog</div>
+                <div class="link" @click="emits('openChangelog')">Changelog</div>
                 <br />
                 <div>
                     <a
@@ -60,7 +60,6 @@
 </template>
 
 <script setup lang="tsx">
-import type Changelog from "data/Changelog.vue";
 import projInfo from "data/projInfo.json";
 import player from "game/player";
 import { infoComponents } from "game/settings";
@@ -71,7 +70,9 @@ import Modal from "./Modal.vue";
 
 const { title, logo, author, discordName, discordLink, versionNumber, versionTitle } = projInfo;
 
-const props = defineProps<{ changelog: typeof Changelog | null }>();
+const emits = defineEmits<{
+    (e: "openChangelog"): void;
+}>();
 
 const isOpen = ref(false);
 
@@ -84,10 +85,6 @@ defineExpose({
         isOpen.value = true;
     }
 });
-
-function openChangelog() {
-    props.changelog?.open();
-}
 </script>
 
 <style scoped>

src/components/modals/Modal.vue

@@ -15,14 +15,26 @@
                 <div class="modal-wrapper">
                     <div class="modal-container" :width="width">
                         <div class="modal-header">
-                            <slot name="header" :shown="isOpen"> default header </slot>
+                            <!--
+                                @slot Modal Header
+                                  @binding {boolean} shown Whether the modal is currently open or animating
+                              -->
+                            <slot name="header" :shown="isOpen" />
                         </div>
                         <div class="modal-body">
                             <Context ref="contextRef">
-                                <slot name="body" :shown="isOpen"> default body </slot>
+                                <!--
+                                    @slot Modal Body
+                                      @binding {boolean} shown Whether the modal is currently open or animating
+                                  -->
+                                <slot name="body" :shown="isOpen" />
                             </Context>
                         </div>
                         <div class="modal-footer">
+                            <!--
+                                @slot Modal Footer
+                                  @binding {boolean} shown Whether the modal is currently open or animating
+                              -->
                             <slot name="footer" :shown="isOpen">
                                 <div class="modal-default-footer">
                                     <div class="modal-default-flex-grow"></div>

src/components/modals/Save.vue

@@ -75,15 +75,15 @@
 </template>
 
 <script setup lang="ts">
-import Tooltip from "wrappers/tooltips/Tooltip.vue";
 import player from "game/player";
 import { Direction } from "util/common";
 import { galaxy, syncedSaves } from "util/galaxy";
+import { LoadablePlayerData } from "util/save";
 import { computed, ref, watch } from "vue";
+import Tooltip from "wrappers/tooltips/Tooltip.vue";
 import DangerButton from "../fields/DangerButton.vue";
 import FeedbackButton from "../fields/FeedbackButton.vue";
 import Text from "../fields/Text.vue";
-import type { LoadablePlayerData } from "./SavesManager.vue";
 
 const props = defineProps<{
     save: LoadablePlayerData;

src/components/modals/SavesManager.vue

@@ -72,6 +72,7 @@ import {
     decodeSave,
     getCachedSave,
     getUniqueID,
+    LoadablePlayerData,
     loadSave,
     newSave,
     save
@@ -84,8 +85,6 @@ import Text from "../fields/Text.vue";
 import Modal from "./Modal.vue";
 import Save from "./Save.vue";
 
-export type LoadablePlayerData = Omit<Partial<Player>, "id"> & { id: string; error?: unknown };
-
 const isOpen = ref(false);
 const modal = ref<ComponentPublicInstance<typeof Modal> | null>(null);
 

src/features/VueFeature.vue

@@ -19,13 +19,13 @@ import Node from "components/Node.vue";
 import type { Visibility } from "features/feature";
 import { isHidden, isVisible } from "features/feature";
 import { MaybeGetter } from "util/computed";
-import { render, Renderable } from "util/vue";
+import { render, Renderable, Wrapper } from "util/vue";
 import { MaybeRef, unref, type CSSProperties } from "vue";
 
 const props = withDefaults(defineProps<{
     id: string;
     components: MaybeGetter<Renderable>[];
-    wrappers: ((el: () => Renderable) => Renderable)[];
+    wrappers: Wrapper[];
     visibility?: MaybeRef<Visibility | boolean>;
     style?: MaybeRef<CSSProperties>;
     classes?: MaybeRef<Record<string, boolean>>;

src/features/achievements/Achievement.vue

@@ -16,16 +16,17 @@
 
 <script setup lang="tsx">
 import "components/common/features.css";
-import { render } from "util/vue";
-import { Component, unref } from "vue";
-import { Achievement } from "./achievement";
+import { Requirements } from "game/requirements";
+import { MaybeGetter } from "util/computed";
+import { render, Renderable } from "util/vue";
+import { Component, MaybeRef, Ref, unref } from "vue";
 
 const props = defineProps<{
-    display: Achievement["display"];
-    earned: Achievement["earned"];
-    requirements: Achievement["requirements"];
-    image: Achievement["image"];
-    small: Achievement["small"];
+    display?: MaybeGetter<Renderable>;
+    earned: Ref<boolean>;
+    requirements?: Requirements;
+    image?: MaybeRef<string>;
+    small?: MaybeRef<boolean>;
 }>();
 
 const Component = () => props.display == null ? <></> : render(props.display);

src/features/bars/Bar.vue

@@ -31,23 +31,23 @@
 </template>
 
 <script setup lang="ts">
-import Decimal from "util/bignum";
+import Decimal, { DecimalSource } from "util/bignum";
 import { Direction } from "util/common";
-import { render } from "util/vue";
-import type { CSSProperties } from "vue";
+import { MaybeGetter } from "util/computed";
+import { render, Renderable } from "util/vue";
+import type { CSSProperties, MaybeRef } from "vue";
 import { computed, unref } from "vue";
-import { Bar } from "./bar";
 
 const props = defineProps<{
-    width: Bar["width"];
-    height: Bar["height"];
-    direction: Bar["direction"];
-    borderStyle: Bar["borderStyle"];
-    baseStyle: Bar["baseStyle"];
-    textStyle: Bar["textStyle"];
-    fillStyle: Bar["fillStyle"];
-    progress: Bar["progress"];
-    display: Bar["display"];
+    width: MaybeRef<number>;
+    height: MaybeRef<number>;
+    direction: MaybeRef<Direction>;
+    borderStyle?: MaybeRef<CSSProperties>;
+    baseStyle?: MaybeRef<CSSProperties>;
+    textStyle?: MaybeRef<CSSProperties>;
+    fillStyle?: MaybeRef<CSSProperties>;
+    progress: MaybeRef<DecimalSource>;
+    display?: MaybeGetter<Renderable>;
 }>();
 
 const normalizedProgress = computed(() => {

src/features/challenges/Challenge.vue

@@ -10,7 +10,7 @@
     >
         <button
             class="toggleChallenge"
-            @click="toggle"
+            @click="emits('toggle')"
             :disabled="!unref(canStart) || unref(maxed)"
         >
             {{ buttonText }}
@@ -22,20 +22,25 @@
 <script setup lang="tsx">
 import "components/common/features.css";
 import { getHighNotifyStyle, getNotifyStyle } from "game/notifications";
-import { render } from "util/vue";
-import type { Component } from "vue";
+import { Requirements } from "game/requirements";
+import { DecimalSource } from "util/bignum";
+import { MaybeGetter } from "util/computed";
+import { render, Renderable } from "util/vue";
+import type { Component, MaybeRef, Ref } from "vue";
 import { computed, unref } from "vue";
-import { Challenge } from "./challenge";
 
 const props = defineProps<{
-    active: Challenge["active"];
-    maxed: Challenge["maxed"];
-    canComplete: Challenge["canComplete"];
-    display: Challenge["display"];
-    requirements: Challenge["requirements"];
-    completed: Challenge["completed"];
-    canStart: Challenge["canStart"];
-    toggle: Challenge["toggle"];
+    active: Ref<boolean>;
+    maxed: Ref<boolean>;
+    canComplete: Ref<DecimalSource>;
+    display?: MaybeGetter<Renderable>;
+    requirements: Requirements;
+    completed: Ref<boolean>;
+    canStart?: MaybeRef<boolean>;
+}>();
+
+const emits = defineEmits<{
+    (e: "toggle"): void;
 }>();
 
 const buttonText = computed(() => {

src/features/challenges/challenge.tsx

@@ -129,7 +129,7 @@ export function createChallenge<T extends ChallengeOptions>(optionsFunc: () => T
                 requirements={challenge.requirements}
                 completed={challenge.completed}
                 canStart={challenge.canStart}
-                toggle={challenge.toggle}
+                onToggle={challenge.toggle}
             />
         ));
 

src/features/clickables/Clickable.vue

@@ -1,6 +1,6 @@
 <template>
     <button
-        @click="onClick"
+        @click="e => emits('click', e)"
         @mousedown="start"
         @mouseleave="stop"
         @mouseup="stop"
@@ -20,24 +20,28 @@
 
 <script setup lang="tsx">
 import "components/common/features.css";
-import type { Clickable } from "features/clickables/clickable";
+import { MaybeGetter } from "util/computed";
 import {
     render,
+    Renderable,
     setupHoldToClick
 } from "util/vue";
-import type { Component } from "vue";
-import { toRef, unref } from "vue";
+import type { Component, MaybeRef } from "vue";
+import { unref } from "vue";
 
 const props = defineProps<{
-    canClick: Clickable["canClick"];
-    onClick: Clickable["onClick"];
-    onHold?: Clickable["onHold"];
-    display: Clickable["display"];
+    canClick: MaybeRef<boolean>;
+    display?: MaybeGetter<Renderable>;
+}>();
+
+const emits = defineEmits<{
+    (e: "click", event?: MouseEvent | TouchEvent): void;
+    (e: "hold"): void;
 }>();
 
 const Component = () => props.display == null ? <></> : render(props.display);
 
-const { start, stop } = setupHoldToClick(toRef(props, "onClick"), toRef(props, "onHold"));
+const { start, stop } = setupHoldToClick(() => emits("hold"));
 </script>
 
 <style scoped>

src/features/clickables/action.tsx

@@ -2,8 +2,8 @@ import ClickableVue from "features/clickables/Clickable.vue";
 import { findFeatures } from "features/feature";
 import { globalBus } from "game/events";
 import { persistent } from "game/persistence";
-import Decimal, { DecimalSource } from "lib/break_eternity";
 import { Unsubscribe } from "nanoevents";
+import Decimal, { DecimalSource } from "util/bignum";
 import { Direction } from "util/common";
 import { MaybeGetter, processGetter } from "util/computed";
 import { createLazyProxy } from "util/proxies";
@@ -125,6 +125,7 @@ export function createAction<T extends ActionOptions>(optionsFunc?: () => T) {
                     <ClickableVue
                         canClick={action.canClick}
                         onClick={action.onClick}
+                        onHold={action.onClick}
                         display={action.display}
                     />
                 )

src/features/clickables/clickable.tsx

@@ -87,6 +87,7 @@ export function createClickable<T extends ClickableOptions>(optionsFunc?: () =>
                 <Clickable
                     canClick={clickable.canClick}
                     onClick={clickable.onClick}
+                    onHold={clickable.onClick}
                     display={clickable.display}
                 />
             )),
@@ -95,7 +96,7 @@ export function createClickable<T extends ClickableOptions>(optionsFunc?: () =>
             onClick:
                 onClick == null
                     ? undefined
-                    : function (e) {
+                    : function (e?: MouseEvent | TouchEvent) {
                           if (unref(clickable.canClick) !== false) {
                               onClick.call(clickable, e);
                           }

src/features/clickables/repeatable.tsx

@@ -98,6 +98,7 @@ export function createRepeatable<T extends RepeatableOptions>(optionsFunc: () =>
             <Clickable
                 canClick={repeatable.canClick}
                 onClick={repeatable.onClick}
+                onHold={repeatable.onClick}
                 display={repeatable.display}
             />
         ));