Merge remote-tracking branch 'origin/day-25-credits' into day-24-packing

This commit is contained in:
Chunkybanana 2022-12-24 11:34:57 +00:00
commit f3c216bd98
7 changed files with 420 additions and 10 deletions

View file

@ -4,7 +4,6 @@
v-for="(tab, index) in tabs"
:key="index"
class="tab"
:ref="`tab-${index}`"
:style="unref(layers[tab]?.style)"
:class="unref(layers[tab]?.classes)"
>
@ -14,7 +13,6 @@
v-if="layerKeys.includes(tab)"
v-bind="gatherLayerProps(layers[tab]!)"
:index="index"
:tab="() => (($refs[`tab-${index}`] as HTMLElement[] | undefined)?.[0])"
/>
<component :is="tab" :index="index" v-else />
</div>
@ -43,6 +41,35 @@
</div>
</template>
</Modal>
<Modal
:modelValue="main.creditsOpen.value"
@update:model-value="value => (main.creditsOpen.value = value)"
>
<template v-slot:header>
<h2>Credits</h2>
</template>
<template v-slot:body>
<div>
<component :is=convertComputable(main.credits) />
</div>
<!--<div v-if="main.loreScene.value !== -1">
<Scene :day="main.loreScene.value" />
<br />
You can help continue the <i>advent</i>ure at:
<a
href="https://discord.gg/WzejVAx"
class="info-modal-discord-link"
target="_blank"
>
<span class="material-icons info-modal-discord">discord</span>
The Paper Pilot Community
</a>
</div>-->
</template>
</Modal>
<!--<component :is="main.particles" />-->
</div>
</template>
@ -53,6 +80,7 @@ import Scene from "data/Scene.vue";
import type { GenericLayer } from "game/layers";
import { layers } from "game/layers";
import player from "game/player";
import { convertComputable } from "util/computed";
import { computeOptionalComponent } from "util/vue";
import { computed, toRef, unref } from "vue";
import Layer from "./Layer.vue";

View file

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

View file

@ -29,3 +29,13 @@
justify-content: space-around;
margin-bottom: -5%;
}
.present-clickable {
cursor: pointer;
width: 30%;
text-align: center;
transition: all .2s ease-in-out;
}
.present-clickable:hover {
transform: scale(1.2);
}

169
src/data/credits.tsx Normal file
View file

@ -0,0 +1,169 @@
import { jsx } from "features/feature"
import { layers } from "game/layers"
import { render } from "util/vue"
import { unref } from "vue"
type Credits = { name: string, creator: string, help?: string, other?: string[], symbol?: string, fs?: string }
import { main } from "./projEntry"
const dayCredits: Credits[] = [
{
name: "Trees",
creator: "thepaperpilot",
help: "Jacorb, Escapee",
},
{
name: "The Workshop",
creator: "thepaperpilot",
help: "Jacorb, emanresu",
},
{
name: "Coal",
creator: "Escapee",
help: "Jacorb, thepaperpilot",
},
{
name: "Elf Training",
creator: "thepaperpilot",
help: "incremental_gamer, emanresu",
},
{
name: "Paper",
creator: "thepaperpilot",
help: "Adsaf"
},
{
name: "Boxes",
creator: "thepaperpilot",
help: "ducdat0507",
},
{
name: "Metal",
creator: "Escapee",
help: "ducdat0507, thepaperpilot, yhvr",
},
{
name: "Cloth",
creator: "thepaperpilot",
help: "emanresu, Jacorb"
},
{
name: "Oil",
creator: "ducdat0507",
help: "thepaperpilot, Jacorb, incremental_gamer",
},
{
name: "Plastic",
creator: "thepaperpilot",
help: "Jacorb"
},
{
name: "Dyes",
creator: "Jacorb",
help: "thepaperpilot, ducdat0507"
},
{
name: "Management",
creator: "incremental_gamer, downvoid, thepaperpilot, Escapee",
},
{
name: "Management II",
creator: "incremental_gamer, downvoid, thepaperpilot, Escapee",
},
{
name: "Letters",
creator: "thepaperpilot",
},
{
name: "Wrapping Paper",
creator: "emanresu, thepaperpilot, Escapee",
fs: '28px'
},
{
name: "Ribbons",
creator: "thepaperpilot, Escapee",
},
{
name: "Toys",
creator: "downvoid",
help: "thepaperpilot"
},
{
name: "Factory",
creator: "incremental_gamer",
help: "thepaperpilot, ducdat, downvoid, emanresu, yhvr",
other: [
"Art by emanresu"
],
},
{
name: "Factory II",
creator: "downvoid",
help: "thepaperpilot",
other: [
"Art by emanresu"
],
},
{
name: "Presents",
creator: "incremental_gamer",
help: "ducdat0507",
other: [
"Art by emanresu"
],
},
{
name: "Reindeer",
creator: "thepaperpilot"
},
{
name: "Sleigh Repair",
creator: "downvoid"
},
{
name: "Routing",
creator: "thepaperpilot"
},
{
name: "Present Packing",
creator: "Escapee",
fs: '26px'
}
]
const display = jsx(() => (
<div style="text-align: center; line-spacing: 5px">
<h1>Advent Incremental</h1>
<br />
<h2>Created by thepaperpilot and friends</h2>
<br /><br /><br /><br /><br />
{
dayCredits.map(({name, help, other, creator, fs}, day) => (
render(jsx(() => <div style="position: relative">
<span style="width: calc(100% - 260px); display: inline-block;">
<h1 style={{ color: unref(layers[main.days[day].layer ?? ""]?.color ?? "white"), fontSize: fs || '30px'}}>Day {day+1} - {name}</h1>
<br /><br />
Created by {creator} <br />
{help ? <>With help from {help}<br /></> : undefined}
{other ? other?.map((other) => <>{other}<br /></>) : undefined}
<br /><br />
</span>
<img style={`position: absolute; top: 5px; ${day % 2 ? 'left' : 'right'}: 20px; width: 100px;`} src={main.days[day].symbol}/>
</div>))
))
}
<p>Credits created by emanresu</p>
<br /> <br /> <br />
<h1>Special Thanks</h1>
<p>Nekosity</p>
<p>Yhvr</p>
<p>Ducdat0507</p>
<p>Haley</p>
<br />
<p>And last but not least, a massive thanks to everyone who played and provided feedback on the game.</p>
<h1>Thanks for playing!</h1>
</div>
))
export { display as credits }

View file

@ -0,0 +1,17 @@
import { jsx } from "features/feature";
import { createLayer } from "game/layers"
const id = "credits"
const day = 25;
const name = "Credits"
const credits = createLayer(id, () => {
return {
display: jsx(() =>
<div>
TODO: layer
</div>),
name,
day
}
})

View file

@ -4,7 +4,8 @@ import {
Component,
GatherProps,
GenericComponent,
jsx
jsx,
Visibility
} from "features/feature";
import { BaseLayer, createLayer, GenericLayer, layers } from "game/layers";
import { isPersistent, Persistent, persistent } from "game/persistence";
@ -14,8 +15,8 @@ import { format, formatTime } from "util/bignum";
import { Computable, convertComputable, ProcessedComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { save } from "util/save";
import { renderRow, VueFeature } from "util/vue";
import type { Ref } from "vue";
import { render, renderRow, VueFeature } from "util/vue";
import { Ref, watch, watchEffect } from "vue";
import { computed, ref, unref } from "vue";
import "./advent.css";
import Day from "./Day.vue";
@ -61,6 +62,10 @@ import toysSymbol from "./symbols/truck.png";
import advManagementSymbol from "./symbols/workshopMansion.png";
import wrappingPaperSymbol from "./symbols/wrappingPaper.png";
import packing from "./layers/packing";
import snowflakeSymbol from "./symbols/snowflake.svg";
import presentSymbol from "./layers/factory-components/present.svg";
import { createParticles } from "features/particles/particles";
import { credits } from "./credits";
import sleighSymbol from "./symbols/sleigh.png";
import routingSymbol from "./symbols/gps.png";
@ -74,10 +79,13 @@ export interface Day extends VueFeature {
opened: Persistent<boolean>;
recentlyUpdated: Ref<boolean>; // Has the tab recieved an update since the player last opened it?
shouldNotify: ProcessedComputable<boolean>;
visibility?: Visibility;
}
export const main = createLayer("main", function (this: BaseLayer) {
const day = persistent<number>(1);
const hasWon = persistent<boolean>(false);
const timeUntilNewDay = computed(
() => (+new Date(new Date().getFullYear(), 11, day.value) - player.time) / 1000
);
@ -87,6 +95,90 @@ export const main = createLayer("main", function (this: BaseLayer) {
const loreTitle = ref<string>("");
const loreBody = ref<CoercableComponent | undefined>();
const creditsOpen = ref<boolean>(false);
// I don't understand how this works
const particles = createParticles(() => ({
boundingRect: ref<null | DOMRect>(null),
onContainerResized(boundingRect) {
this.boundingRect.value = boundingRect;
},
style: "z-index: -1"
}));
const emitter = particles.addEmitter({
emit: false,
autoUpdate: true,
lifetime: { min: 10, max: 10 },
emitterLifetime: -1,
pos: { x: 0, y: 0 },
frequency: 0.05,
maxParticles: 1000,
behaviors: [
{
type: "alphaStatic",
config: {
alpha: 1
}
},
{
type: "scaleStatic",
config: {
min: 1,
max: 1
}
},
{
type: "moveSpeed",
config: {
speed: {
list: [
{
value: 200,
time: 0
},
{
value: 100,
time: 1
}
],
isStepped: false
}
}
},
{
type: "rotationStatic",
config: {
min: 70,
max: 110
}
},
{
type: "spawnShape",
config: {
type: "rect",
data: {
x: 0,
y: 0,
w: 1600,
h: 1
}
}
},
{
type: "textureSingle",
config: {
texture: snowflakeSymbol
}
}
]
});
watchEffect(() => {
const shouldEmit = day.value === 25;
emitter.then(e => (e.emit = shouldEmit));
});
const currentlyMastering = computed(() =>
isMastery.value
? Object.values(layers).find(
@ -169,6 +261,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
story: string;
completedStory: string;
masteredStory: string;
visibility?: Visibility;
}
): Day {
const opened = persistent<boolean>(false);
@ -198,7 +291,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
story,
completedStory,
masteredStory,
recentlyUpdated
recentlyUpdated,
visibility
} = this;
const mastered: Ref<boolean> =
@ -211,6 +305,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
recentlyUpdated,
shouldNotify,
mastered,
visibility,
onOpenLore() {
const completed = main.day.value > day;
loreScene.value = completed ? day - 1 : -1;
@ -231,6 +326,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
showLoreModal.value = true;
},
onOpenLayer() {
if (day == 25) return;
recentlyUpdated.value = false;
// 1468 is because two tabs with minWidth of 700px plus the minimized calendar of 60px plus 2 dividers of 4px each
if (window.matchMedia("(min-width: 1468px)").matches) {
@ -249,11 +345,14 @@ export const main = createLayer("main", function (this: BaseLayer) {
layers[layer ?? "trees"]!.minimized.value = false;
},
onUnlockLayer() {
if (layer != null) {
if (layer != null || day == 25) {
opened.value = true;
setTimeout(() => {
loreScene.value = -1;
loreTitle.value = unref(layers[layer ?? "trees"]?.name ?? "");
loreTitle.value =
day == 25
? "The End!"
: unref(layers[layer ?? "trees"]?.name ?? "");
loreBody.value = story;
if (player.autoPause) player.devSpeed = null;
showLoreModal.value = true;
@ -517,6 +616,25 @@ export const main = createLayer("main", function (this: BaseLayer) {
story: "You're almost done! The last step is to load up the sleigh with all the presents and get ready to go! You're going to need to pack a lot of presents, so you'll need to make sure you pack them tightly enough. Good Luck!",
completedStory: "At last, you've crammed in all the presents Santa needs. Santa can take it from here. Good Job!",
masteredStory: ""
})),
createDay(() => ({
day: 25,
shouldNotify: false,
layer: null, // credits
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><br/>`,
completedStory: "",
masteredStory: ""
})),
createDay(() => ({
day: 25,
shouldNotify: false,
layer: null, // credits
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><br/>`,
completedStory: "",
masteredStory: "",
visibility: Visibility.None
}))
];
@ -549,6 +667,16 @@ export const main = createLayer("main", function (this: BaseLayer) {
}
}
watchEffect(() => {
if (day.value === 25 && showLoreModal.value === false && !hasWon.value) {
loreScene.value = -1;
loreTitle.value = "Merry Christmas!";
loreBody.value = days[day.value - 1].story;
showLoreModal.value = true;
hasWon.value = true;
}
});
return {
name: "Calendar",
days,
@ -558,6 +686,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
loreScene,
loreTitle,
loreBody,
particles,
showLoreModal,
completeDay,
completeMastery,
@ -567,6 +696,9 @@ export const main = createLayer("main", function (this: BaseLayer) {
swappingMastery,
currentlyMastering,
masteredDays,
creditsOpen,
credits,
hasWon,
display: jsx(() => (
<>
{player.devSpeed === 0 ? <div>Game Paused</div> : null}
@ -597,6 +729,19 @@ export const main = createLayer("main", function (this: BaseLayer) {
)
.map((days: Day[]) => renderRow(...days))}
</div>
{hasWon.value ? (
<>
<Spacer />
<button
class="button"
style="font-size: xx-large"
onClick={() => (creditsOpen.value = true)}
>
Open Credits
</button>
</>
) : null}
{render(particles)}
</>
))
};

View file

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="50"
height="50"
viewBox="0 0 13.229166 13.229167"
version="1.1"
id="svg5"
inkscape:export-filename=".png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
id="rect234"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.356532;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:6;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
d="M 6.2022054,1.0314616 V 2.4411947 L 5.0069295,1.7507975 4.5883504,2.4758179 6.2022054,3.4070272 V 5.7913778 L 4.1351481,4.5976522 4.1356649,2.7342 H 3.2985067 L 3.2990234,4.1149943 2.0779093,3.4101278 1.712557,4.0431641 2.9217855,4.7413127 1.7156576,5.4384277 2.1337199,6.1629313 3.7589437,5.2244873 5.7464193,6.3722209 3.7558431,7.5215047 2.1301025,6.5830607 1.7120402,7.3080811 2.9186849,8.0046794 1.7089396,8.702828 2.0748088,9.336381 3.2954061,8.6315145 V 10.011792 H 4.1325643 L 4.1320475,8.1483398 6.2280436,6.9380778 v 2.4463623 l -1.6252238,0.9384439 0.4185791,0.724504 1.2066447,-0.696599 v 1.396814 H 6.9592651 V 10.33787 L 8.154541,11.028267 8.5731201,10.303247 6.9592651,9.3720378 V 6.9876872 L 9.0263224,8.1814128 9.0258057,10.044865 H 9.8629639 L 9.8624471,8.6640706 11.083561,9.3689372 11.448914,8.7359009 10.239685,8.0377523 11.445813,7.3406372 11.027751,6.6161336 9.4025269,7.5545776 7.4150513,6.4068441 9.4056274,5.2575602 11.031368,6.1960042 11.44943,5.4709839 10.242786,4.7743856 11.452531,4.076237 11.086662,3.4426839 9.8660645,4.1475505 V 2.7672729 H 9.0289062 L 9.029423,4.6307251 6.9334269,5.8409871 V 3.3946248 L 8.5586507,2.4561808 8.1400716,1.7316772 6.9334269,2.4282756 v -1.396814 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB