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

src/components/Game.vue

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

src/data/Day.vue

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

src/data/advent.css

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

src/data/credits.tsx

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

src/data/layers/credits.tsx

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

src/data/projEntry.tsx

@@ -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 { render, renderRow, VueFeature } from "util/vue";
-import type { Ref } from "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)}
             </>
         ))
     };

src/data/symbols/snowflake.svg

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