Credits mostly done

src/components/Game.vue

@@ -47,13 +47,16 @@
             :modelValue="main.creditsOpen.value"
             @update:model-value="value => (main.creditsOpen.value = value)"
         >
-            credits go here
+            <template v-slot:header>
-            <!--<template v-slot:header
+                <h2>Credits</h2>
-                ><h2>{{ main.loreTitle.value }}</h2></template
+            </template>
-            >
             <template v-slot:body>
-                <component v-if="loreBody" :is="loreBody" />
+                <div>
-                <div v-if="main.loreScene.value !== -1">
+                    <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:
@@ -65,9 +68,10 @@
                         <span class="material-icons info-modal-discord">discord</span>
                         The Paper Pilot Community
                     </a>
-                </div>
+                </div>-->
-            </template>-->
+            </template>
         </Modal>
+        <!--<component :is="main.particles" />-->
     </div>
 </template>
 
@@ -78,6 +82,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";
@@ -94,7 +99,7 @@ function gatherLayerProps(layer: GenericLayer) {
     const { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay } =
         layer;
     return { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay };
-}
+};
 </script>
 
 <style scoped>

src/data/credits.tsx

@@ -0,0 +1,160 @@
+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",
+    },
+    {
+        name: "Boxes",
+        creator: "thepaperpilot",
+    },
+    {
+        name: "Metal",
+        creator: "Escapee",
+    },
+    {
+        name: "Cloth",
+        creator: "thepaperpilot",
+    },
+    {
+        name: "Oil",
+        creator: "ducdat0507",
+    },
+    {
+        name: "Plastic",
+        creator: "thepaperpilot",
+    },
+    {
+        name: "Dyes",
+        creator: "Jacorb",
+    },
+    {
+        name: "Management",
+        creator: "incremental_gamer, downvoid, thepaperpilot",
+    },
+    {
+        name: "Management II",
+        creator: "incremental_gamer, downvoid, thepaperpilot",
+    },
+    {
+        name: "Letters",
+        creator: "thepaperpilot",
+    },
+    {
+        name: "Wrapping Paper",
+        creator: "emanresu, thepaperpilot, Escapee",
+        fs: '28px'
+    },
+    {
+        name: "Ribbons",
+        creator: "thepaperpilot, Escapee",
+    },
+    {
+        name: "Toys",
+        creator: "downvoid",
+    },
+    {
+        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",
+        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}</> : undefined}<br />
+                        {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 /> <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/projEntry.tsx

@@ -14,7 +14,7 @@ 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 { computed, ref, unref } from "vue";
 import "./advent.css";
@@ -57,6 +57,8 @@ import advManagementSymbol from "./symbols/workshopMansion.png";
 import wrappingPaperSymbol from "./symbols/wrappingPaper.png";
 import snowflakeSymbol from "./symbols/snowflake.svg";
 import presentSymbol from "./layers/factory-components/present.svg"
+import { createParticles } from "features/particles/particles";
+import { credits } from "./credits";
 
 export interface Day extends VueFeature {
     day: number;
@@ -83,6 +85,120 @@ export const main = createLayer("main", function (this: BaseLayer) {
 
     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"
+    }))
+
+    particles.addEmitter({
+        lifetime: {min: 5, max: 5},
+        pos: {x: 0, y: 0},
+        frequency: 0.05,
+        behaviors: [
+            {
+                type: 'alpha',
+                config: {
+                    alpha: {
+                        list: [
+                            {
+                                value: 1,
+                                time: 0
+                            },
+                            {
+                                value: 1,
+                                time: 1
+                            }
+                        ],
+                    },
+                }
+            },
+            {
+                type: 'scale',
+                config: {
+                    scale: {
+                        list: [
+                            {
+                                value: 1,
+                                time: 0
+                            },
+                            {
+                                value: 1,
+                                time: 1
+                            }
+                        ],
+                    },
+                }
+            },
+            {
+                type: 'color',
+                config: {
+                    color: {
+                        list: [
+                            {
+                                value: "fb1010",
+                                time: 0
+                            },
+                            {
+                                value: "f5b830",
+                                time: 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,
+                        width: 800,
+                        height: 10
+                    }
+                }
+            },
+            {
+                type: 'textureSingle',
+                config: {
+                    texture: snowflakeSymbol
+                }
+            }
+        ]
+    }).then(e => {
+        e.autoUpdate = true;
+    })
+
+
     const currentlyMastering = computed(() =>
         isMastery.value
             ? Object.values(layers).find(
@@ -560,6 +676,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
         loreScene,
         loreTitle,
         loreBody,
+        particles,
         showLoreModal,
         completeDay,
         completeMastery,
@@ -570,6 +687,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
         currentlyMastering,
         masteredDays,
         creditsOpen,
+        credits,
         display: jsx(() => (
             <>
                 {player.devSpeed === 0 ? <div>Game Paused</div> : null}
@@ -600,6 +718,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                         )
                         .map((days: Day[]) => renderRow(...days))}
                 </div>
+                {render(particles) /*creditsOpen.value || day.value == 25 ? render(particles) : null*/}
             </>
         ))
     };