diff --git a/src/components/Game.vue b/src/components/Game.vue index 7d7e531..238a17a 100644 --- a/src/components/Game.vue +++ b/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> diff --git a/src/components/Layer.vue b/src/components/Layer.vue index 8a6e7b1..62cca55 100644 --- a/src/components/Layer.vue +++ b/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; diff --git a/src/game/layers.tsx b/src/game/layers.tsx index 404d72c..5435a2d 100644 --- a/src/game/layers.tsx +++ b/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>; });