Make Christmas open automatically

This commit is contained in:
thepaperpilot 2022-12-24 00:18:58 -06:00
parent 944a7d717f
commit a72d8c720b
2 changed files with 138 additions and 113 deletions

View file

@ -6,7 +6,7 @@
masteryLock, masteryLock,
wallpaper: day < 8 wallpaper: day < 8
}" }"
v-if="opened.value" v-if="opened.value && visibility !== Visibility.None"
> >
<div class="ribbon" v-if="day >= 8" /> <div class="ribbon" v-if="day >= 8" />
<Tooltip :display="layers[layer ?? '']?.name ?? ''" :direction="Direction.Up" yoffset="5px"> <Tooltip :display="layers[layer ?? '']?.name ?? ''" :direction="Direction.Up" yoffset="5px">
@ -26,7 +26,7 @@
</Tooltip> </Tooltip>
</div> </div>
<div <div
v-else v-else-if="visibility !== Visibility.None"
class="day feature dontMerge" class="day feature dontMerge"
:class="{ can: canOpen, locked: !canOpen, canOpen, mastered: unref(mastered) }" :class="{ can: canOpen, locked: !canOpen, canOpen, mastered: unref(mastered) }"
@click="tryUnlock" @click="tryUnlock"
@ -47,6 +47,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Notif from "components/Notif.vue"; import Notif from "components/Notif.vue";
import { Visibility } from "features/feature";
import Tooltip from "features/tooltips/Tooltip.vue"; import Tooltip from "features/tooltips/Tooltip.vue";
import { layers } from "game/layers"; import { layers } from "game/layers";
import Decimal from "util/bignum"; import Decimal from "util/bignum";
@ -66,6 +67,7 @@ const props = defineProps<{
recentlyUpdated: Ref<boolean>; recentlyUpdated: Ref<boolean>;
shouldNotify: ProcessedComputable<boolean>; shouldNotify: ProcessedComputable<boolean>;
mastered: Ref<boolean>; mastered: Ref<boolean>;
visibility?: Visibility;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{

View file

@ -4,7 +4,8 @@ import {
Component, Component,
GatherProps, GatherProps,
GenericComponent, GenericComponent,
jsx jsx,
Visibility
} from "features/feature"; } from "features/feature";
import { BaseLayer, createLayer, GenericLayer, layers } from "game/layers"; import { BaseLayer, createLayer, GenericLayer, layers } from "game/layers";
import { isPersistent, Persistent, persistent } from "game/persistence"; import { isPersistent, Persistent, persistent } from "game/persistence";
@ -15,7 +16,7 @@ import { Computable, convertComputable, ProcessedComputable } from "util/compute
import { createLazyProxy } from "util/proxies"; import { createLazyProxy } from "util/proxies";
import { save } from "util/save"; import { save } from "util/save";
import { render, renderRow, VueFeature } from "util/vue"; import { render, renderRow, VueFeature } from "util/vue";
import type { Ref } from "vue"; import { Ref, watchEffect } from "vue";
import { computed, ref, unref } from "vue"; import { computed, ref, unref } from "vue";
import "./advent.css"; import "./advent.css";
import Day from "./Day.vue"; import Day from "./Day.vue";
@ -60,7 +61,7 @@ import toysSymbol from "./symbols/truck.png";
import advManagementSymbol from "./symbols/workshopMansion.png"; import advManagementSymbol from "./symbols/workshopMansion.png";
import wrappingPaperSymbol from "./symbols/wrappingPaper.png"; import wrappingPaperSymbol from "./symbols/wrappingPaper.png";
import snowflakeSymbol from "./symbols/snowflake.svg"; import snowflakeSymbol from "./symbols/snowflake.svg";
import presentSymbol from "./layers/factory-components/present.svg" import presentSymbol from "./layers/factory-components/present.svg";
import { createParticles } from "features/particles/particles"; import { createParticles } from "features/particles/particles";
import { credits } from "./credits"; import { credits } from "./credits";
@ -74,6 +75,7 @@ export interface Day extends VueFeature {
opened: Persistent<boolean>; opened: Persistent<boolean>;
recentlyUpdated: Ref<boolean>; // Has the tab recieved an update since the player last opened it? recentlyUpdated: Ref<boolean>; // Has the tab recieved an update since the player last opened it?
shouldNotify: ProcessedComputable<boolean>; shouldNotify: ProcessedComputable<boolean>;
visibility?: Visibility;
} }
export const main = createLayer("main", function (this: BaseLayer) { export const main = createLayer("main", function (this: BaseLayer) {
@ -96,15 +98,16 @@ export const main = createLayer("main", function (this: BaseLayer) {
this.boundingRect.value = boundingRect; this.boundingRect.value = boundingRect;
}, },
style: "z-index: -1" style: "z-index: -1"
})) }));
particles.addEmitter({ particles
.addEmitter({
lifetime: { min: 5, max: 5 }, lifetime: { min: 5, max: 5 },
pos: { x: 0, y: 0 }, pos: { x: 0, y: 0 },
frequency: 0.05, frequency: 0.05,
behaviors: [ behaviors: [
{ {
type: 'alpha', type: "alpha",
config: { config: {
alpha: { alpha: {
list: [ list: [
@ -116,12 +119,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
value: 1, value: 1,
time: 1 time: 1
} }
], ]
}, }
} }
}, },
{ {
type: 'scale', type: "scale",
config: { config: {
scale: { scale: {
list: [ list: [
@ -133,12 +136,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
value: 1, value: 1,
time: 1 time: 1
} }
], ]
}, }
} }
}, },
{ {
type: 'color', type: "color",
config: { config: {
color: { color: {
list: [ list: [
@ -150,12 +153,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
value: "f5b830", value: "f5b830",
time: 1 time: 1
} }
], ]
}, }
} }
}, },
{ {
type: 'moveSpeed', type: "moveSpeed",
config: { config: {
speed: { speed: {
list: [ list: [
@ -169,20 +172,20 @@ export const main = createLayer("main", function (this: BaseLayer) {
} }
], ],
isStepped: false isStepped: false
}, }
} }
}, },
{ {
type: 'rotationStatic', type: "rotationStatic",
config: { config: {
min: 70, min: 70,
max: 110 max: 110
} }
}, },
{ {
type: 'spawnShape', type: "spawnShape",
config: { config: {
type: 'rect', type: "rect",
data: { data: {
x: 0, x: 0,
y: 0, y: 0,
@ -192,16 +195,16 @@ export const main = createLayer("main", function (this: BaseLayer) {
} }
}, },
{ {
type: 'textureSingle', type: "textureSingle",
config: { config: {
texture: snowflakeSymbol texture: snowflakeSymbol
} }
} }
] ]
}).then(e => {
e.autoUpdate = true;
}) })
.then(e => {
e.autoUpdate = true;
});
const currentlyMastering = computed(() => const currentlyMastering = computed(() =>
isMastery.value isMastery.value
@ -285,6 +288,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
story: string; story: string;
completedStory: string; completedStory: string;
masteredStory: string; masteredStory: string;
visibility?: Visibility;
} }
): Day { ): Day {
const opened = persistent<boolean>(false); const opened = persistent<boolean>(false);
@ -314,7 +318,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
story, story,
completedStory, completedStory,
masteredStory, masteredStory,
recentlyUpdated recentlyUpdated,
visibility
} = this; } = this;
const mastered: Ref<boolean> = const mastered: Ref<boolean> =
@ -327,6 +332,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
recentlyUpdated, recentlyUpdated,
shouldNotify, shouldNotify,
mastered, mastered,
visibility,
onOpenLore() { onOpenLore() {
const completed = main.day.value > day; const completed = main.day.value > day;
loreScene.value = completed ? day - 1 : -1; loreScene.value = completed ? day - 1 : -1;
@ -370,7 +376,10 @@ export const main = createLayer("main", function (this: BaseLayer) {
opened.value = true; opened.value = true;
setTimeout(() => { setTimeout(() => {
loreScene.value = -1; loreScene.value = -1;
loreTitle.value = day == 25 ? "The End!" : unref(layers[layer ?? "trees"]?.name ?? ""); loreTitle.value =
day == 25
? "The End!"
: unref(layers[layer ?? "trees"]?.name ?? "");
loreBody.value = story; loreBody.value = story;
if (player.autoPause) player.devSpeed = null; if (player.autoPause) player.devSpeed = null;
showLoreModal.value = true; showLoreModal.value = true;
@ -638,9 +647,10 @@ export const main = createLayer("main", function (this: BaseLayer) {
shouldNotify: false, shouldNotify: false,
layer: null, // credits layer: null, // credits
symbol: snowflakeSymbol, symbol: snowflakeSymbol,
story: `It's Christmas. Thanks to your efforts, Santa has delivered all the presents to people all over the world. That is, all but one... <br><br> <div style='text-align: center'><img class='present-clickable' onclick ='layers.main.showLoreModal.value = false; layers.main.creditsOpen.value = true' src='${presentSymbol}' /><br>Open your present</div>`, story: `It's Christmas. Thanks to your efforts, Santa has delivered all the presents to people all over the world. That is, all but one... <br><br> <div style='text-align: center'><img class='present-clickable' onclick ='layers.main.showLoreModal.value = false; layers.main.creditsOpen.value = true' src='${presentSymbol}' /><br>Open your present</div><br/>`,
completedStory: "", completedStory: "",
masteredStory: "" masteredStory: "",
visibility: Visibility.None
})) }))
]; ];
@ -673,6 +683,15 @@ export const main = createLayer("main", function (this: BaseLayer) {
} }
} }
watchEffect(() => {
if (day.value === 25 && showLoreModal.value === false) {
loreScene.value = -1;
loreTitle.value = "Merry Christmas!";
loreBody.value = days[day.value - 1].story;
showLoreModal.value = true;
}
});
return { return {
name: "Calendar", name: "Calendar",
days, days,
@ -724,7 +743,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
) )
.map((days: Day[]) => renderRow(...days))} .map((days: Day[]) => renderRow(...days))}
</div> </div>
{render(particles) /*creditsOpen.value || day.value == 25 ? render(particles) : null*/} {
render(
particles
) /*creditsOpen.value || day.value == 25 ? render(particles) : null*/
}
</> </>
)) ))
}; };