Add minimizedDisplay

src/components/Game.vue

@@ -66,8 +66,9 @@ const useHeader = projInfo.useHeader;
 const loreBody = computeOptionalComponent(main.loreBody);
 
 function gatherLayerProps(layer: GenericLayer) {
-    const { display, minimized, minWidth, name, color, minimizable, nodes } = layer;
-    return { display, minimized, minWidth, name, color, minimizable, nodes };
+    const { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay } =
+        layer;
+    return { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay };
 }
 </script>
 

src/components/Layer.vue

@@ -2,7 +2,8 @@
     <div class="layer-container" :style="{ '--layer-color': unref(color) }">
         <button v-if="showGoBack" class="goBack" @click="goBack">❌</button>
         <button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false">
-            <div>{{ unref(name) }}</div>
+            <component v-if="minimizedComponent" :is="minimizedComponent" />
+            <div v-else>{{ unref(name) }}</div>
         </button>
         <div class="layer-tab" :class="{ showGoBack }" v-else>
             <Context @update-nodes="updateNodes">
@@ -21,7 +22,7 @@ import type { CoercableComponent } from "features/feature";
 import type { FeatureNode } from "game/layers";
 import type { Persistent } from "game/persistence";
 import player from "game/player";
-import { computeComponent, processedPropType, wrapRef } from "util/vue";
+import { computeComponent, computeOptionalComponent, processedPropType, wrapRef } from "util/vue";
 import type { PropType, Ref } from "vue";
 import { computed, defineComponent, nextTick, toRefs, unref, watch } from "vue";
 import Context from "./Context.vue";
@@ -41,6 +42,7 @@ export default defineComponent({
             type: processedPropType<CoercableComponent>(Object, String, Function),
             required: true
         },
+        minimizedDisplay: processedPropType<CoercableComponent>(Object, String, Function),
         minimized: {
             type: Object as PropType<Persistent<boolean>>,
             required: true
@@ -61,9 +63,10 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { display, index, minimized, minWidth, tab } = toRefs(props);
+        const { display, index, minimized, minWidth, tab, minimizedDisplay } = toRefs(props);
 
         const component = computeComponent(display);
+        const minimizedComponent = computeOptionalComponent(minimizedDisplay);
         const showGoBack = computed(
             () => projInfo.allowGoBack && index.value > 0 && !minimized.value
         );
@@ -106,6 +109,7 @@ export default defineComponent({
 
         return {
             component,
+            minimizedComponent,
             showGoBack,
             updateNodes,
             unref,
@@ -155,7 +159,7 @@ export default defineComponent({
     background-color: transparent;
 }
 
-.layer-tab.minimized div {
+.layer-tab.minimized > * {
     margin: 0;
     writing-mode: vertical-rl;
     padding-left: 10px;

src/game/layers.tsx

@@ -109,7 +109,7 @@ export interface LayerOptions {
     color?: Computable<string>;
     /**
      * The layout of this layer's features.
-     * When the layer is open in {@link game/player.PlayerData.tabs}, this is the content that is display.
+     * When the layer is open in {@link game/player.PlayerData.tabs}, this is the content that is displayed.
      */
     display: Computable<CoercableComponent>;
     /** An object of classes that should be applied to the display. */
@@ -126,6 +126,11 @@ export interface LayerOptions {
      * Defaults to true.
      */
     minimizable?: Computable<boolean>;
+    /**
+     * The layout of this layer's features.
+     * When the layer is open in {@link game/player.PlayerData.tabs}, but the tab is {@link Layer.minimized} this is the content that is displayed.
+     */
+    minimizedDisplay?: Computable<CoercableComponent>;
     /**
      * Whether or not to force the go back button to be hidden.
      * If true, go back will be hidden regardless of {@link data/projInfo.allowGoBack}.
@@ -170,6 +175,7 @@ export type Layer<T extends LayerOptions> = Replace<
         name: GetComputableTypeWithDefault<T["name"], string>;
         minWidth: GetComputableTypeWithDefault<T["minWidth"], 600>;
         minimizable: GetComputableTypeWithDefault<T["minimizable"], true>;
+        minimizedDisplay: GetComputableType<T["minimizedDisplay"]>;
         forceHideGoBack: GetComputableType<T["forceHideGoBack"]>;
     }
 >;
@@ -231,6 +237,7 @@ export function createLayer<T extends LayerOptions>(
         setDefault(layer, "minWidth", 600);
         processComputable(layer as T, "minimizable");
         setDefault(layer, "minimizable", true);
+        processComputable(layer as T, "minimizedDisplay");
 
         return layer as unknown as Layer<T>;
     });