Add modal to tell user to change the ignore date warning

This commit is contained in:
thepaperpilot 2023-01-01 09:29:24 -06:00
parent cfa74e10af
commit af53a1d012
2 changed files with 34 additions and 3 deletions

View file

@ -42,6 +42,26 @@
</div>
</template>
</Modal>
<Modal
:modelValue="
player.ignoreDate === IgnoreDateSettings.AsIntended &&
new Date().getMonth() !== 11 &&
!main.dismissedIgnoreDateWarning.value
"
@update:model-value="value => (main.dismissedIgnoreDateWarning.value = !value)"
>
<template v-slot:header><h2>It's not December</h2></template>
<template v-slot:body>
<div>
This game is intended to be played as an advent calendar, but it is currently
not December. In order to allow players to still enjoy this game, there is a
field in the options menu to ignore the month and/or day. You can also change
that setting here:
</div>
<Spacer />
<Select title="Ignore Date" :options="ignoreDateOptions" v-model="ignoreDate" />
</template>
</Modal>
<Modal
:modelValue="main.creditsOpen.value"
@update:model-value="value => (main.creditsOpen.value = value)"
@ -51,10 +71,9 @@
</template>
<template v-slot:body>
<div>
<component :is=convertComputable(main.credits) />
<component :is="convertComputable(main.credits)" />
</div>
<!--<div v-if="main.loreScene.value !== -1">
<Scene :day="main.loreScene.value" />
<br />
@ -78,17 +97,20 @@
import { main } from "data/projEntry";
import projInfo from "data/projInfo.json";
import Scene from "data/Scene.vue";
import Select from "./fields/Select.vue";
import type { GenericLayer } from "game/layers";
import { layers } from "game/layers";
import player from "game/player";
import player, { IgnoreDateSettings } from "game/player";
import { convertComputable } from "util/computed";
import { computeOptionalComponent } from "util/vue";
import { computed, toRef, unref } from "vue";
import Layer from "./Layer.vue";
import Modal from "./Modal.vue";
import Nav from "./Nav.vue";
import Spacer from "./layout/Spacer.vue";
const tabs = toRef(player, "tabs");
const ignoreDate = toRef(player, "ignoreDate");
const layerKeys = computed(() => Object.keys(layers));
const useHeader = projInfo.useHeader;
@ -98,6 +120,12 @@ function gatherLayerProps(layer: GenericLayer) {
const { display, minimized, name, color, minimizable, nodes, minimizedDisplay } = layer;
return { display, minimized, name, color, minimizable, nodes, minimizedDisplay };
}
const ignoreDateOptions = [
{ label: "Don't Ignore", value: IgnoreDateSettings.AsIntended },
{ label: "Ignore Month", value: IgnoreDateSettings.IgnoreMonth },
{ label: "Ignore Month and Day", value: IgnoreDateSettings.IgnoreDay }
];
</script>
<style scoped>

View file

@ -101,6 +101,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
const loreTitle = ref<string>("");
const loreBody = ref<CoercableComponent | undefined>();
const dismissedIgnoreDateWarning = ref(false);
const creditsOpen = ref<boolean>(false);
// I don't understand how this works
@ -688,6 +690,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
loreScene,
loreTitle,
loreBody,
dismissedIgnoreDateWarning,
particles,
showLoreModal,
completeDay,