Calendar WIP

.replit

@@ -11,3 +11,9 @@ pattern = "**/{*.js,*.jsx,*.ts,*.tsx}"
 
   [languages.javascript.languageServer]
   start = [ "typescript-language-server", "--stdio" ]
+
+[env]
+XDG_CONFIG_HOME = "/home/runner/.config"
+
+[nix]
+channel = "stable-21_11"

package-lock.json

@@ -11,8 +11,12 @@
         "@fontsource/material-icons": "^4.5.4",
         "@fontsource/roboto-mono": "^4.5.8",
         "@pixi/app": "~6.3.2",
+        "@pixi/constants": "~6.3.2",
         "@pixi/core": "~6.3.2",
-        "@pixi/particle-emitter": "^5.0.4",
+        "@pixi/display": "~6.3.2",
+        "@pixi/math": "~6.3.2",
+        "@pixi/particle-emitter": "^5.0.7",
+        "@pixi/sprite": "~6.3.2",
         "@pixi/ticker": "~6.3.2",
         "@vitejs/plugin-vue": "^2.3.3",
         "@vitejs/plugin-vue-jsx": "^1.3.10",
@@ -24,7 +28,7 @@
         "vite-tsconfig-paths": "^3.5.0",
         "vue": "^3.2.26",
         "vue-next-select": "^2.10.2",
-        "vue-panzoom": "^1.1.6",
+        "vue-panzoom": "https://github.com/thepaperpilot/vue-panzoom.git",
         "vue-textarea-autosize": "^1.1.1",
         "vue-toastification": "^2.0.0-rc.1",
         "vue-transition-expand": "^0.1.0",
@@ -1818,8 +1822,7 @@
     "node_modules/@pixi/constants": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-6.3.2.tgz",
-      "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg==",
+      "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg=="
-      "peer": true
     },
     "node_modules/@pixi/core": {
       "version": "6.3.2",
@@ -1845,7 +1848,6 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/display/-/display-6.3.2.tgz",
       "integrity": "sha512-D+WiM0BcyPK91RYxl7TXXVNz/5lOGs8Q6jtCMcWgTHwCXxWPOHFnNZ4KPJZpUQ7me8Tl2u+c9hfB5Oh1+17r/Q==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/math": "6.3.2",
         "@pixi/settings": "6.3.2",
@@ -1855,8 +1857,7 @@
     "node_modules/@pixi/math": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/math/-/math-6.3.2.tgz",
-      "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw==",
+      "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw=="
-      "peer": true
     },
     "node_modules/@pixi/particle-emitter": {
       "version": "5.0.7",
@@ -1890,7 +1891,6 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-6.3.2.tgz",
       "integrity": "sha512-T1KJ8l2f8Otn6Se6h4b2pz2nrUSe59Pnmj2WIzgBisM245h7dGATs05MisMaLV6Lg/3gTBTxsLBmKsbDSQqbNw==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/constants": "6.3.2",
         "@pixi/core": "6.3.2",
@@ -6726,8 +6726,8 @@
     },
     "node_modules/vue-panzoom": {
       "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/vue-panzoom/-/vue-panzoom-1.1.6.tgz",
+      "resolved": "git+ssh://git@github.com/thepaperpilot/vue-panzoom.git#fa3cc91f6842cdfbd1bfb433c75cac01f177fe2d",
-      "integrity": "sha512-yEE60C/gnc5NGL6YBD++CErD820va7fkBJE5dCWZZzXX2aMGklj/UKmtqu1u5xDkuOIjnGUr412LNHwOOE711w==",
+      "license": "MIT",
       "dependencies": {
         "panzoom": "^9.4.1"
       }
@@ -8442,8 +8442,7 @@
     "@pixi/constants": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-6.3.2.tgz",
-      "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg==",
+      "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg=="
-      "peer": true
     },
     "@pixi/core": {
       "version": "6.3.2",
@@ -8457,14 +8456,12 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/display/-/display-6.3.2.tgz",
       "integrity": "sha512-D+WiM0BcyPK91RYxl7TXXVNz/5lOGs8Q6jtCMcWgTHwCXxWPOHFnNZ4KPJZpUQ7me8Tl2u+c9hfB5Oh1+17r/Q==",
-      "peer": true,
       "requires": {}
     },
     "@pixi/math": {
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/math/-/math-6.3.2.tgz",
-      "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw==",
+      "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw=="
-      "peer": true
     },
     "@pixi/particle-emitter": {
       "version": "5.0.7",
@@ -8491,7 +8488,6 @@
       "version": "6.3.2",
       "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-6.3.2.tgz",
       "integrity": "sha512-T1KJ8l2f8Otn6Se6h4b2pz2nrUSe59Pnmj2WIzgBisM245h7dGATs05MisMaLV6Lg/3gTBTxsLBmKsbDSQqbNw==",
-      "peer": true,
       "requires": {}
     },
     "@pixi/ticker": {
@@ -11866,9 +11862,8 @@
       "requires": {}
     },
     "vue-panzoom": {
-      "version": "1.1.6",
+      "version": "git+ssh://git@github.com/thepaperpilot/vue-panzoom.git#fa3cc91f6842cdfbd1bfb433c75cac01f177fe2d",
-      "resolved": "https://registry.npmjs.org/vue-panzoom/-/vue-panzoom-1.1.6.tgz",
+      "from": "vue-panzoom@https://github.com/thepaperpilot/vue-panzoom.git",
-      "integrity": "sha512-yEE60C/gnc5NGL6YBD++CErD820va7fkBJE5dCWZZzXX2aMGklj/UKmtqu1u5xDkuOIjnGUr412LNHwOOE711w==",
       "requires": {
         "panzoom": "^9.4.1"
       }

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "vite",
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "test": "vitest run",

src/data/Day.vue

@@ -0,0 +1,68 @@
+<template>
+    <Tooltip :display="tooltipText">
+        <div class="day feature dontMerge" :class="{ opened: unref(opened) }" @click="openLayer">
+            <div class="doors"></div>
+            <div class="icon" v-if="symbolComp"><component :is="symbolComp" /></div>
+            <div class="lore" @click="emit('openLore')">?</div>
+            <Notif v-if="unref(shouldNotify)" />
+        </div>
+    </Tooltip>
+</template>
+
+<script setup lang="ts">
+import { CoercableComponent } from "features/feature";
+import { unref, ref, toRef } from "vue";
+import type { Ref } from "vue";
+import Notif from "components/Notif.vue";
+import Tooltip from "features/tooltips/Tooltip.vue";
+import { computeComponent } from "util/vue";
+
+const props = defineProps<{
+    day: number;
+    symbol: CoercableComponent;
+    opened: Ref<boolean>;
+    tooltipText: CoercableComponent;
+    shouldNotify: Ref<boolean>;
+}>();
+
+const emit = defineEmits<{
+    (e: "openLore"): void;
+    (e: "openLayer"): void;
+}>();
+
+const symbolComp = computeComponent(toRef(props, "symbol"));
+</script>
+
+<style scoped>
+.day {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    display: flex;
+    background-color: var(--raised-background);
+}
+
+.doors {
+    position: absolute;
+}
+
+.doors::before,
+.doors::after {
+    
+}
+
+.icon,
+.icon .material-icons {
+    font-size: xxx-large;
+    pointer-events: none;
+    display: flex;
+}
+
+.lore {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    border-radius: 50%;
+    
+}
+</style>

src/data/projEntry.tsx

@@ -1,51 +1,84 @@
+import "@fontsource/material-icons";
 import Spacer from "components/layout/Spacer.vue";
-import { jsx } from "features/feature";
+import Row from "components/layout/Row.vue";
-import { createResource, trackBest, trackOOMPS, trackTotal } from "features/resources/resource";
+import Day from "./Day.vue";
+import { CoercableComponent, Component, GatherProps, jsx } from "features/feature";
 import type { GenericTree } from "features/trees/tree";
-import { branchedResetPropagation, createTree } from "features/trees/tree";
+import { createTree } from "features/trees/tree";
-import { globalBus } from "game/events";
 import type { BaseLayer, GenericLayer } from "game/layers";
 import { createLayer } from "game/layers";
+import { persistent } from "game/persistence";
 import type { PlayerData } from "game/player";
 import player from "game/player";
-import type { DecimalSource } from "util/bignum";
+import { format, formatTime } from "util/bignum";
-import Decimal, { format, formatTime } from "util/bignum";
+import { render, renderRow, VueFeature } from "util/vue";
-import { render } from "util/vue";
+import { computed, ref } from "vue";
-import { computed, toRaw } from "vue";
+import type { Ref } from "vue";
 import prestige from "./layers/prestige";
+import { createLazyProxy } from "util/proxies";
+
+export interface Day extends VueFeature {
+    day: number;
+    layer: string | null;
+    symbol: CoercableComponent;
+    story: string;
+    tooltipText: CoercableComponent;
+    opened: Ref<boolean>;
+    shouldNotify: Ref<boolean>;
+}
 
-/**
- * @hidden
- */
 export const main = createLayer("main", function(this: BaseLayer) {
-    const points = createResource<DecimalSource>(10);
+    const day = persistent<number>(1);
-    const best = trackBest(points);
-    const total = trackTotal(points);
 
-    const pointGain = computed(() => {
+    function createDay(optionsFunc: () => {
-        // eslint-disable-next-line prefer-const
+        day: number;
-        let gain = new Decimal(1);
+        layer: string | null;
-        return gain;
+        symbol: CoercableComponent;
-    });
+        story: string;
-    globalBus.on("update", diff => {
+    }): Day {
-        points.value = Decimal.add(points.value, Decimal.times(pointGain.value, diff));
+        const opened = persistent<boolean>(false);
-    });
+        return createLazyProxy(() => {
-    const oomps = trackOOMPS(points, pointGain);
+            const day = optionsFunc();
-
-    const tree = createTree(() => ({
-        nodes: [[prestige.treeNode]],
-        branches: [],
-        onReset() {
-            points.value = toRaw(this.resettingNode.value) === toRaw(prestige.treeNode) ? 0 : 10;
-            best.value = points.value;
-            total.value = points.value;
-        },
-        resetPropagation: branchedResetPropagation
-    })) as GenericTree;
 
             return {
-        name: "Tree",
+                ...day,
-        links: tree.links,
+                opened,
+                tooltipText: day.layer ?? day.symbol,
+                shouldNotify: ref(false),
+                [Component]: Day,
+                [GatherProps]: function(this: Day) {
+                    const { day, symbol, opened, tooltipText, shouldNotify } = this;
+                    return { day, symbol, opened, tooltipText, shouldNotify };
+                }
+            };
+        })
+    }
+
+    const days = [
+        createDay(() => ({
+            day: 1,
+            layer: null,
+            symbol: "🎄",
+            story: "Oh no! Santa forgot about Christmas and it's only 25 days away! He's asked for your help due to your history getting large quantities of things in short amounts of time. Unfortunately you're really starting from scratch here - let's start with getting wood, which you'll need for everything from building workshops to wrapping paper to many of the toys themselves"
+        })),
+        createDay(() => ({
+            day: 2,
+            layer: null,
+            symbol: "<span class='material-icons'>cabin</span>",
+            story: "Santa looked over your tree farm and was impressed with how much you could accomplish in just one day. Today's goal is to get a workshop built up for the elves to work in - and apparently, they need quite a lot of space to work!"
+        })),
+        createDay(() => ({
+            day: 3,
+            layer: null,
+            symbol: "🧝",
+            story: "With this unbelievably large workshop complete, it's time to get the elves to work! But it appears they've forgotten how to make toys over the last 11 months - guess it's time to setup training sessions!"
+        }))
+    ];
+
+    return {
+        name: "Calendar",
+        days,
+        day,
         display: jsx(() => (
             <>
                 {player.devSpeed === 0 ? <div>Game Paused</div> : null}
@@ -55,21 +88,18 @@ export const main = createLayer("main", function (this: BaseLayer) {
                 {player.offlineTime ? (
                     <div>Offline Time: {formatTime(player.offlineTime)}</div>
                 ) : null}
-                <div>
-                    {Decimal.lt(points.value, "1e1000") ? <span>You have </span> : null}
-                    <h2>{format(points.value)}</h2>
-                    {Decimal.lt(points.value, "1e1e6") ? <span> points</span> : null}
-                </div>
-                {Decimal.gt(pointGain.value, 0) ? <div>({oomps.value})</div> : null}
                 <Spacer />
-                {render(tree)}
+                <div style="width: 600px">
+                    {days.reduce((acc, curr) => {
+                        if (acc[acc.length - 1].length === 5) {
+                            acc.push([]);
+                        }
+                        acc[acc.length - 1].push(curr);
+                        return acc;
+                    }, [[]] as Day[][]).map(days => renderRow(...days))}
+                </div>
             </>
-        )),
+        ))
-        points,
-        best,
-        total,
-        oomps,
-        tree
     };
 });
 

src/data/projInfo.json

@@ -1,10 +1,10 @@
 {
 	"$schema": "./projInfo-schema.json",
 
-	"title": "Profectus",
+	"title": "Advent Incremental",
-	"description": "A project made in Profectus",
+	"description": "An incremental game you play a day at a time, leading up to Christmas!",
-	"id": "",
+	"id": "advent-incremental",
-	"author": "",
+	"author": "thepaperpilot",
 	"discordName": "",
 	"discordLink": "",