thepaperpilot/Advent-Incremental
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Advent-Incremental.git synced 2024-11-21 16:13:57 +00:00
Code Issues Releases Activity Actions

Add minimizedDisplay

Browse source
This commit is contained in:
thepaperpilot 2022-12-12 23:50:35 -06:00
parent 40ff736e65
commit 8f9297e162
3 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Game.vue
View file

@ -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>

12
src/components/Layer.vue
View file

@ -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;

9
src/game/layers.tsx
View file

@ -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>;
});