Merge pull request #5 from thepaperpilot/day-20-factory

move factory stuff

package.json

@@ -17,16 +17,30 @@
     "@fontsource/great-vibes": "^4.5.10",
     "@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/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",
+    "@pixi/app": "^6.5.8",
+    "@pixi/assets": "^6.5.8",
+    "@pixi/basis": "^6.5.8",
+    "@pixi/compressed-textures": "^6.5.8",
+    "@pixi/constants": "^6.5.8",
+    "@pixi/core": "^6.5.8",
+    "@pixi/display": "^6.5.8",
+    "@pixi/extensions": "^6.5.8",
+    "@pixi/graphics": "^6.5.8",
+    "@pixi/loaders": "^6.5.8",
+    "@pixi/math": "^6.5.8",
+    "@pixi/mesh": "^6.5.8",
+    "@pixi/particle-emitter": "^5.0.8",
+    "@pixi/runner": "^6.5.8",
+    "@pixi/settings": "^6.5.8",
+    "@pixi/sprite": "^6.5.8",
+    "@pixi/spritesheet": "^6.5.8",
+    "@pixi/text": "^6.5.8",
+    "@pixi/text-bitmap": "^6.5.8",
+    "@pixi/ticker": "^6.5.8",
+    "@pixi/utils": "^6.5.8",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "eslint-plugin-vue": "^8.0.1",
     "is-plain-object": "^5.0.0",
     "lz-string": "^1.4.4",
     "nanoevents": "^6.0.2",

src/components/Layer.vue

@@ -128,14 +128,6 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.layer-container {
-    min-width: 100%;
-    min-height: 100%;
-    margin: 0;
-    flex-grow: 1;
-    display: flex;
-    isolation: isolate;
-}
 
 .layer-tab:not(.minimized) {
     padding-top: 20px;
@@ -211,28 +203,6 @@ export default defineComponent({
     right: 18px;
     pointer-events: none;
 }
-
-.goBack {
-    position: sticky;
-    top: 10px;
-    left: 10px;
-    line-height: 30px;
-    margin-top: -50px;
-    margin-left: -35px;
-    border: none;
-    background: var(--background);
-    box-shadow: var(--background) 0 2px 3px 5px;
-    border-radius: 50%;
-    color: var(--foreground);
-    font-size: 30px;
-    cursor: pointer;
-    z-index: 7;
-}
-
-.goBack:hover {
-    transform: scale(1.1, 1.1);
-    text-shadow: 0 0 7px var(--foreground);
-}
 </style>
 <style>
 .layer-tab.minimized > * > .desc {

src/components/Modal.vue

@@ -86,7 +86,7 @@ defineExpose({ isOpen, nodes });
 }
 
 .modal-container {
-    width: 640px;
+    min-width: 640px;
     max-width: 95vw;
     max-height: calc(95vh - 20px);
     background-color: var(--background);

src/data/layers/Factory.vue

@@ -0,0 +1,32 @@
+<template>
+    <div ref="element" class="factoryDisp" />
+</template>
+<script setup lang="ts">
+import type { Application } from "@pixi/app";
+import { onMounted, shallowRef } from "vue";
+import "lib/pixi";
+
+const element = shallowRef<HTMLElement | null>(null);
+const props = defineProps<{
+    application: Application;
+}>();
+console.log(props.application);
+onMounted(() => {
+    if (element.value !== null) {
+        element.value?.append(props.application.view);
+        props.application.resizeTo = element.value;
+        props.application.resize();
+    } else {
+        throw new TypeError("This should not occur");
+    }
+});
+</script>
+<style scoped>
+.factoryDisp {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+</style>

src/data/layers/factory.tsx

@@ -0,0 +1,753 @@
+import { Application } from "@pixi/app";
+import { Assets } from "@pixi/assets";
+import { Container } from "@pixi/display";
+import { Graphics } from "@pixi/graphics";
+import { Sprite } from "@pixi/sprite";
+import { jsx } from "features/feature";
+import { globalBus } from "game/events";
+import { createLayer } from "game/layers";
+import { Persistent, persistent, State } from "game/persistence";
+import player from "game/player";
+import { Direction } from "util/common";
+import { computed, ComputedRef, reactive, ref, watchEffect } from "vue";
+import conveyor from "./factory-components/conveyor.png";
+import cursor from "./factory-components/cursor.jpg";
+import rotate from "./factory-components/rotate_rectangle.png";
+import square from "./factory-components/square.jpg";
+import Factory from "./Factory.vue";
+import "./styles/factory.css";
+
+const id = "factory";
+
+// what is the actual day?
+const day = 20;
+
+// 20x20 block size
+// TODO: unhardcode stuff
+
+enum FactoryDirections {
+    Any = "ANY",
+    None = "NONE"
+}
+type FactoryDirection = FactoryDirections | Direction;
+
+function roundDownTo(num: number, multiple: number) {
+    return Math.floor((num + multiple / 2) / multiple) * multiple;
+}
+function getRelativeCoords(e: MouseEvent) {
+    const rect = (e.target as HTMLElement).getBoundingClientRect();
+    return {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+    };
+}
+function iterateDirection(dir: FactoryDirection, func: (dir: FactoryDirection) => void) {
+    switch (dir) {
+        case FactoryDirections.None:
+            return;
+        case FactoryDirections.Any:
+            func(Direction.Up);
+            func(Direction.Right);
+            func(Direction.Down);
+            func(Direction.Left);
+            break;
+        default:
+            func(dir);
+    }
+}
+function rotateDir(dir: Direction, relative = Direction.Right) {
+    const directions = [Direction.Up, Direction.Right, Direction.Down, Direction.Left];
+    let index = directions.indexOf(dir);
+    index += directions.indexOf(relative);
+    index = index % directions.length;
+    return directions[index];
+}
+function directionToNum(dir: Direction) {
+    switch (dir) {
+        case Direction.Left:
+        case Direction.Up:
+            return -1;
+        case Direction.Right:
+        case Direction.Down:
+            return 1;
+    }
+}
+function getDirection(dir: Direction) {
+    switch (dir) {
+        case Direction.Left:
+        case Direction.Right:
+            return "h";
+        case Direction.Up:
+        case Direction.Down:
+            return "v";
+    }
+}
+
+const factorySize = {
+    width: 6,
+    height: 6
+};
+const blockSize = 50;
+
+const factory = createLayer(id, () => {
+    // layer display
+    const name = "The Factory";
+    const color = "grey";
+
+    const FACTORY_COMPONENTS = {
+        cursor: {
+            imageSrc: cursor,
+            name: "Cursor",
+            description: "Use this to move.",
+            tick: 0,
+            consumption: {},
+            consumptionStock: {},
+            production: {},
+            productionStock: {}
+        },
+        rotate: {
+            imageSrc: rotate,
+            name: "Rotate",
+            description: "Use this to rotate components.",
+            tick: 0,
+            consumption: {},
+            consumptionStock: {},
+            production: {},
+            productionStock: {}
+        },
+        conveyor: {
+            imageSrc: conveyor,
+            name: "Conveyor",
+            description: "Moves 1 item per tick.",
+            tick: 1,
+            consumption: {},
+            consumptionStock: {},
+            production: {},
+            productionStock: {},
+            ports: {
+                [Direction.Left]: {
+                    type: "input"
+                },
+                [Direction.Right]: {
+                    type: "output"
+                }
+            }
+        },
+        square: {
+            imageSrc: square,
+            name: "???",
+            description: "Produces 1 square every 1 tick.",
+            tick: 1,
+            production: {
+                square: 1
+            },
+            productionStock: {
+                square: Infinity
+            },
+            consumption: {},
+            consumptionStock: {}
+        }
+    } as const;
+    const RESOURCES = {
+        square: square
+    } as Record<string, string>;
+
+    type FactoryCompNames = keyof typeof FACTORY_COMPONENTS;
+    type BuildableCompName = Exclude<FactoryCompNames, "cursor">;
+    interface FactoryComponentBase extends Record<string, State> {
+        direction: Direction;
+    }
+    interface FactoryComponentProducers extends FactoryComponentBase {
+        type: Exclude<BuildableCompName, "conveyor">;
+        consumptionStock: Record<string, number>;
+
+        // current production stock
+        productionStock: Record<string, number>;
+        ticksDone: number;
+    }
+    interface FactoryComponentConveyor extends FactoryComponentBase {
+        type: "conveyor";
+    }
+    type FactoryComponent = FactoryComponentBase &
+        (FactoryComponentConveyor | FactoryComponentProducers);
+    interface FactoryComponentDeclaration {
+        tick: number;
+        imageSrc: string;
+        name: string;
+        description: string;
+
+        /** amount it consumes */
+        consumption: Record<string, number>;
+        /** maximum stock of consumption */
+        consumptionStock: Record<string, number>;
+        /** amount it produces */
+        production: Record<string, number>;
+        /** maximum stock of production */
+        productionStock: Record<string, number>;
+
+        /** on produce, do something */
+        onProduce?: (times: number) => void;
+        /** can it produce? (in addtion to the stock check) */
+        canProduce?: ComputedRef<boolean>;
+    }
+
+    interface FactoryInternalBase {
+        sprite: Sprite;
+        canProduce: ComputedRef<boolean>;
+    }
+    interface FactoryInternalConveyor extends FactoryInternalBase {
+        type: "conveyor";
+
+        // packages are sorted by last first, first last
+        // [componentMade5SecondsAgo, componentMade4SecondsAgo...]
+        packages: Block[];
+        nextPackages: Block[];
+    }
+    interface FactoryInternalProducer extends FactoryInternalBase {
+        type: Exclude<BuildableCompName, "conveyor">;
+    }
+    type FactoryInternal = FactoryInternalConveyor | FactoryInternalProducer;
+
+    interface Block {
+        sprite: Sprite;
+        type: string;
+        // in block amts, not screen
+        x: number;
+        y: number;
+        lastX: number;
+        lastY: number;
+    }
+
+    // mouse positions
+    const mouseCoords = reactive({
+        x: 0,
+        y: 0
+    });
+    const mapOffset = reactive({
+        x: 0,
+        y: 0
+    });
+    const isMouseHoverShown = ref(false);
+    const whatIsHovered = ref<FactoryCompNames | "">("");
+    const compSelected = ref<FactoryCompNames>("cursor");
+    const components: Persistent<{ [key: string]: FactoryComponent }> = persistent({});
+    const compInternalData: Record<string, FactoryInternal> = {};
+
+    // pixi
+    const app = new Application({
+        backgroundAlpha: 0
+    });
+    const graphicContainer = new Graphics();
+    let spriteContainer = new Container();
+    const movingBlocks = new Container();
+
+    spriteContainer.zIndex = 0;
+    movingBlocks.zIndex = 1;
+    graphicContainer.zIndex = 2;
+    app.stage.addChild(graphicContainer, spriteContainer, movingBlocks);
+    app.stage.sortableChildren = true;
+    let loaded = false;
+
+    globalBus.on("onLoad", async () => {
+        loaded = false;
+
+        spriteContainer.destroy({
+            children: true
+        });
+        spriteContainer = new Container();
+        app.stage.addChild(spriteContainer);
+
+        const floorGraphics = new Graphics();
+        floorGraphics.beginFill(0x70645d);
+        floorGraphics.drawRect(
+            -factorySize.width * blockSize,
+            -factorySize.height * blockSize,
+            factorySize.width * 2 * blockSize,
+            factorySize.height * 2 * blockSize
+        );
+        floorGraphics.endFill();
+        spriteContainer.addChild(floorGraphics);
+
+        // load every sprite here so pixi doesn't complain about loading multiple times
+        await Assets.load(Object.values(FACTORY_COMPONENTS).map(x => x.imageSrc));
+
+        if (Array.isArray(components.value)) {
+            components.value = {};
+        } else {
+            for (const id in components.value) {
+                const data = components.value[id];
+                console.log(id, data);
+                if (data?.type === undefined) {
+                    delete components.value[id];
+                    continue;
+                }
+                const [x, y] = id.split("x").map(p => +p);
+                addFactoryComp(x, y, data);
+            }
+        }
+
+        loaded = true;
+    });
+    (window as any).internal = compInternalData;
+    (window as any).comp = components;
+    (window as any).blocks = movingBlocks;
+    let taskIsRunning = false;
+
+    globalBus.on("update", async diff => {
+        if (taskIsRunning || !loaded) return;
+        taskIsRunning = true;
+        //debugger
+        // will change soon:tm:
+        const tick = diff;
+        // make them produce
+        for (const id in components.value) {
+            const [x, y] = id.split("x").map(p => +p);
+            const data = components.value[id];
+            const compData = compInternalData[id];
+            //console.log(compData, data)
+            if (data === undefined || compData === undefined) continue;
+            const factoryData = FACTORY_COMPONENTS[data.type];
+            //debugger;
+            if (data.type === "conveyor") {
+                if (compData.type !== "conveyor") throw new TypeError("this should not happen");
+                // conveyor part
+                // use a copy
+                //console.log(compData);
+                compData.packages = compData.packages.concat(compData.nextPackages);
+                compData.nextPackages = [];
+                for (const [key, block] of [...compData.packages].entries()) {
+                    const inputDirection = rotateDir(data.direction, Direction.Left);
+                    const dirType = getDirection(inputDirection);
+                    const dirAmt = directionToNum(inputDirection);
+                    if (dirType === "h") {
+                        if (block.x <= block.lastX + dirAmt) {
+                            const compBehind = compInternalData[x + dirAmt + "x" + y];
+                            const storedComp = components.value[x + dirAmt + "x" + y];
+
+                            // empty spot
+                            if (compBehind === undefined) {
+                                // just delete it
+                                movingBlocks.removeChild(block.sprite);
+                                compData.packages.splice(key, 1);
+                            } else if (compBehind.type === "conveyor") {
+                                // push it to the next conveyor, kill it from the
+                                // curent conveyor
+                                block.lastX += dirAmt;
+                                compBehind.nextPackages.push(block);
+                                compData.packages.splice(key, 1);
+                            } else {
+                                // send it to the factory
+                                // destory its sprite and data
+                                (storedComp as FactoryComponentProducers).consumptionStock[
+                                    block.type
+                                ]++;
+                                movingBlocks.removeChild(block.sprite);
+                                compData.packages.splice(key, 1);
+                            }
+                        } else {
+                            const change =
+                                dirAmt * Math.min(Math.abs(block.x + 1 - block.lastX), tick);
+                            block.x += change;
+                            block.sprite.x += change * blockSize;
+                        }
+                    } else {
+                        if (block.y <= block.lastY + dirAmt) {
+                            const compBehind = compInternalData[x + "x" + (y + dirAmt)];
+                            const storedComp = components.value[x + "x" + (y + dirAmt)];
+
+                            // empty spot
+                            if (compBehind === undefined) {
+                                // just delete it
+                                movingBlocks.removeChild(block.sprite);
+                                compData.packages.splice(key, 1);
+                            } else if (compBehind.type === "conveyor") {
+                                // push it to the next conveyor, kill it from the
+                                // curent conveyor
+                                block.lastY += dirAmt;
+                                compBehind.nextPackages.push(block);
+                                compData.packages.splice(key, 1);
+                            } else {
+                                // send it to the factory
+                                // destory its sprite and data
+                                const factoryData = storedComp as FactoryComponentProducers;
+                                factoryData.consumptionStock[block.type]++;
+                                movingBlocks.removeChild(block.sprite);
+                                compData.packages.splice(key, 1);
+                            }
+                        } else {
+                            const change = dirAmt * Math.min(Math.abs(block.y - block.lastY), tick);
+                            block.y += change;
+                            block.sprite.y += change * blockSize;
+                        }
+                    }
+                }
+            } else {
+                // factory part
+                // PRODUCTION
+                if (data.ticksDone >= factoryData.tick) {
+                    if (!compData.canProduce.value) continue;
+                    const cyclesDone = Math.floor(data.ticksDone / factoryData.tick);
+                    factoryData.onProduce?.(cyclesDone);
+                    for (const [key, val] of Object.entries(factoryData.consumption)) {
+                        data.consumptionStock[key] -= val;
+                    }
+                    for (const [key, val] of Object.entries(factoryData.production)) {
+                        data.productionStock[key] += val;
+                    }
+                    data.ticksDone -= cyclesDone * factoryData.tick;
+                } else {
+                    data.ticksDone += tick;
+                }
+                // now look at each component direction and see if it accepts items coming in
+                // components are 1x1 so simple math for now
+
+                let yInc = 0;
+                let xInc = 0;
+                //debugger;
+                if (
+                    components.value[x + "x" + (y + 1)]?.type === "conveyor" &&
+                    components.value[x + "x" + (y + 1)].direction === Direction.Up
+                ) {
+                    yInc = 1;
+                } else if (
+                    components.value[x + "x" + (y - 1)]?.type === "conveyor" &&
+                    components.value[x + "x" + (y + 1)].direction === Direction.Down
+                ) {
+                    yInc = -1;
+                } else if (
+                    components.value[x + 1 + "x" + y]?.type === "conveyor" &&
+                    components.value[x + "x" + (y + 1)].direction === Direction.Right
+                ) {
+                    xInc = 1;
+                } else if (
+                    components.value[x - 1 + "x" + y]?.type === "conveyor" &&
+                    components.value[x + "x" + (y + 1)].direction === Direction.Left
+                ) {
+                    xInc = -1;
+                }
+                // no suitable location to dump stuff in
+                //console.log(x, y)
+                //debugger;
+                if (xInc === 0 && yInc === 0) continue;
+                let itemToMove: [string, number] | undefined = undefined;
+                for (const [name, amt] of Object.entries(data.productionStock)) {
+                    if (amt >= 1) {
+                        itemToMove = [name, amt];
+                        data.productionStock[name]--;
+                        break;
+                    }
+                }
+                // there is nothing to move
+                if (itemToMove === undefined) continue;
+                const texture = Assets.get(RESOURCES[itemToMove[0]]);
+                const sprite = new Sprite(texture);
+
+                /*
+                    go left     go right
+                              go top
+                                x
+                    default -> CCC
+                             x CCC x
+                               CCC
+                                x
+                              go bottom
+                    */
+                // if X is being moved, then we don't need to adjust x
+                // however it needs to be aligned if Y is being moved
+                // vice-versa
+                const spriteDiffX = xInc !== 0 ? 0 : 0.5;
+                const spriteDiffY = yInc !== 0 ? 0 : 0.5;
+                sprite.x = (x + spriteDiffX) * blockSize;
+                sprite.y = (y + spriteDiffY) * blockSize;
+                sprite.anchor.set(0.5);
+                sprite.width = blockSize / 2.5;
+                sprite.height = blockSize / 5;
+                //console.log(sprite);
+                const block: Block = {
+                    sprite,
+                    x: x,
+                    y: y,
+                    lastX: x,
+                    lastY: y,
+                    type: itemToMove[0]
+                };
+
+                (
+                    compInternalData[x + xInc + "x" + (y + yInc)] as FactoryInternalConveyor
+                ).nextPackages.push(block);
+                movingBlocks.addChild(sprite);
+            }
+        }
+        taskIsRunning = false;
+    });
+
+    function addFactoryComp(
+        x: number,
+        y: number,
+        data: Partial<FactoryComponent> & { type: BuildableCompName }
+    ) {
+        if (x < -factorySize.width || x >= factorySize.width) return;
+        if (y < -factorySize.height || y >= factorySize.height) return;
+
+        const factoryBaseData = FACTORY_COMPONENTS[data.type];
+        const sheet = Assets.get(factoryBaseData.imageSrc);
+        const sprite = new Sprite(sheet);
+
+        sprite.x = x * blockSize;
+        sprite.y = y * blockSize;
+        sprite.width = blockSize;
+        sprite.height = blockSize;
+        sprite.anchor.x = 0.5;
+        sprite.anchor.y = 0.5;
+        sprite.rotation =
+            ([Direction.Right, Direction.Down, Direction.Left, Direction.Up].indexOf(
+                data.direction ?? Direction.Right
+            ) *
+                Math.PI) /
+            2;
+        console.log("!!", data, sprite);
+        components.value[x + "x" + y] = {
+            ticksDone: 0,
+            direction: Direction.Right,
+            consumptionStock:
+                data.type === "conveyor"
+                    ? undefined
+                    : Object.fromEntries(
+                          Object.keys(factoryBaseData.consumptionStock).map(i => [i, 0])
+                      ),
+            productionStock:
+                data.type === "conveyor"
+                    ? undefined
+                    : Object.fromEntries(
+                          Object.keys(factoryBaseData.productionStock).map(i => [i, 0])
+                      ),
+            ...data
+        } as FactoryComponent;
+        const isConveyor = data.type === "conveyor";
+        compInternalData[x + "x" + y] = {
+            type: data.type,
+            packages: isConveyor ? [] : undefined,
+            nextPackages: isConveyor ? [] : undefined,
+            canProduce: computed(() => {
+                if (data.type === "conveyor") return true;
+                if (!(factoryBaseData.canProduce?.value ?? true)) return false;
+                // this should NEVER be null
+                const compData = components.value[x + "x" + y] as FactoryComponentProducers;
+                for (const [key, res] of Object.entries(compData.productionStock)) {
+                    // if the current stock + production is more than you can handle
+                    if (
+                        res + factoryBaseData.production[key] >
+                        factoryBaseData.productionStock[key]
+                    )
+                        return false;
+                }
+                for (const [key, res] of Object.entries(compData.consumptionStock)) {
+                    // make sure you have enough to produce
+                    if (res < factoryBaseData.consumptionStock[key]) return false;
+                }
+                return true;
+            }),
+            sprite
+        } as FactoryInternal;
+        spriteContainer.addChild(sprite);
+    }
+
+    // draw graphics
+    function updateGraphics() {
+        app.resize();
+        graphicContainer.clear();
+        // make (0, 0) the center of the screen
+        const calculatedX = mapOffset.x * blockSize + app.view.width / 2;
+        const calculatedY = mapOffset.y * blockSize + app.view.height / 2;
+
+        spriteContainer.x = movingBlocks.x = calculatedX;
+        spriteContainer.y = movingBlocks.y = calculatedY;
+
+        if (
+            isMouseHoverShown.value &&
+            compSelected.value !== "cursor" &&
+            compSelected.value !== "rotate"
+        ) {
+            const { tx, ty } = spriteContainer.localTransform;
+            graphicContainer.beginFill(0x808080);
+            graphicContainer.drawRect(
+                roundDownTo(mouseCoords.x - tx, blockSize) + tx - blockSize / 2,
+                roundDownTo(mouseCoords.y - ty, blockSize) + ty - blockSize / 2,
+                blockSize,
+                blockSize
+            );
+        }
+    }
+    watchEffect(updateGraphics);
+
+    const pointerDown = ref(false),
+        pointerDrag = ref(false),
+        compHovered = ref<FactoryComponent | undefined>(undefined);
+
+    function onFactoryPointerMove(e: PointerEvent) {
+        const { x, y } = getRelativeCoords(e);
+        mouseCoords.x = x;
+        mouseCoords.y = y;
+
+        if (
+            pointerDown.value &&
+            (pointerDrag.value ||
+                (compSelected.value === "cursor" &&
+                    (Math.abs(e.movementX) > 2 || Math.abs(e.movementY) > 2)))
+        ) {
+            pointerDrag.value = true;
+            mapOffset.x += e.movementX / blockSize;
+            mapOffset.y += e.movementY / blockSize;
+            // the maximum you can see currently
+            // total size of blocks - current size = amount you should move
+            mapOffset.x = Math.min(Math.max(mapOffset.x, -factorySize.width), factorySize.width);
+            mapOffset.y = Math.min(Math.max(mapOffset.y, -factorySize.height), factorySize.height);
+        }
+        if (!pointerDown.value && !pointerDrag.value) {
+            const { tx, ty } = spriteContainer.localTransform;
+            compHovered.value =
+                components.value[
+                    Math.round(roundDownTo(x - tx, blockSize) / blockSize) +
+                        "x" +
+                        Math.round(roundDownTo(y - ty, blockSize) / blockSize)
+                ];
+        }
+    }
+    function onFactoryPointerDown(e: PointerEvent) {
+        window.addEventListener("pointerup", onFactoryPointerUp);
+        pointerDown.value = true;
+        if (e.button === 1) {
+            pointerDrag.value = true;
+        }
+    }
+    function onFactoryPointerUp(e: PointerEvent) {
+        // make sure they're not dragging and that
+        // they aren't trying to put down a cursor
+        if (!pointerDrag.value) {
+            const { tx, ty } = spriteContainer.localTransform;
+            let { x, y } = getRelativeCoords(e);
+            x = roundDownTo(x - tx, blockSize) / blockSize;
+            y = roundDownTo(y - ty, blockSize) / blockSize;
+            if (e.button === 0) {
+                if (compSelected.value === "rotate") {
+                    if (
+                        components.value[x + "x" + y] != null &&
+                        components.value[x + "x" + y].direction != null
+                    ) {
+                        components.value[x + "x" + y] = {
+                            ...components.value[x + "x" + y],
+                            direction: rotateDir(
+                                (components.value[x + "x" + y] as FactoryComponentConveyor)
+                                    .direction
+                            )
+                        };
+                        compInternalData[x + "x" + y].sprite.rotation += Math.PI / 2;
+                    }
+                } else if (compSelected.value !== "cursor") {
+                    if (components.value[x + "x" + y] == null) {
+                        addFactoryComp(x, y, { type: compSelected.value });
+                    }
+                }
+            } else if (e.button === 2) {
+                const data = compInternalData[x + "x" + y];
+                if (data === undefined) return;
+                delete components.value[x + "x" + y];
+                spriteContainer.removeChild(data.sprite);
+            }
+        }
+
+        window.removeEventListener("pointerup", onFactoryPointerUp);
+        pointerDown.value = pointerDrag.value = false;
+    }
+    function onFactoryMouseEnter() {
+        isMouseHoverShown.value = true;
+    }
+    function onFactoryMouseLeave() {
+        isMouseHoverShown.value = false;
+    }
+
+    function goBack() {
+        player.tabs.splice(0, Infinity, "main");
+    }
+    function onComponentHover(name: FactoryCompNames | "") {
+        whatIsHovered.value = name;
+    }
+    function onCompClick(name: FactoryCompNames) {
+        compSelected.value = name;
+    }
+    return {
+        name,
+        day,
+        color,
+        minWidth: 700,
+        minimizable: false,
+        style: { overflow: "hidden" },
+        components,
+        display: jsx(() => (
+            <div class="layer-container">
+                <button class="goBack" onClick={goBack}>
+                    ❌
+                </button>
+                <Factory
+                    application={app}
+                    onPointermove={onFactoryPointerMove}
+                    onPointerdown={onFactoryPointerDown}
+                    onPointerenter={onFactoryMouseEnter}
+                    onPointerleave={onFactoryMouseLeave}
+                    onContextmenu={(e: MouseEvent) => e.preventDefault()}
+                />
+                <div class="info-container">
+                    {compHovered.value !== undefined ? (
+                        <>
+                            <b>{FACTORY_COMPONENTS[compHovered.value.type].name}</b>
+                            <br />
+                            {FACTORY_COMPONENTS[compHovered.value.type].description}
+                            <br />
+                            {compHovered.value.type !== "conveyor" ? (
+                                <>
+                                    Stock:{" "}
+                                    {Object.entries({
+                                        ...compHovered.value.productionStock,
+                                        ...compHovered.value.consumptionStock
+                                    }).map(i => {
+                                        return `${i[0]}: ${i[1]}/${
+                                            FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
+                                                .consumptionStock[i[0]] ??
+                                            FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
+                                                .productionStock[i[0]]
+                                        }`;
+                                    })}
+                                </>
+                            ) : undefined}
+                        </>
+                    ) : undefined}
+                </div>
+                <div class="factory-container">
+                    <div style="line-height: 2.5em; min-height: 2.5em">
+                        {whatIsHovered.value === ""
+                            ? undefined
+                            : FACTORY_COMPONENTS[whatIsHovered.value].description}
+                    </div>
+                    <div class="comps">
+                        <div>
+                            {Object.entries(FACTORY_COMPONENTS).map(value => {
+                                const key = value[0] as FactoryCompNames;
+                                const item = value[1];
+                                return (
+                                    <img
+                                        src={item.imageSrc}
+                                        class={{ selected: compSelected.value === key }}
+                                        onMouseenter={() => onComponentHover(key)}
+                                        onMouseleave={() => onComponentHover("")}
+                                        onClick={() => onCompClick(key)}
+                                    ></img>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        ))
+    };
+});
+export default factory;

src/data/layers/styles/factory.css

@@ -0,0 +1,54 @@
+
+.factoryDisp {
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    
+    background: snow;
+    touch-action: none;
+}
+
+.factoryDisp canvas {
+    filter: drop-shadow(1px 1px 2px #0007);
+}
+
+.info-container {
+    position: absolute;
+    height: 100px;
+    top: 0;
+    left: 10%;
+    right: 10%;
+    transition: height ease 1s;
+    background: var(--raised-background);
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+    box-shadow: 0 2px 10px black;
+    margin: 0;
+    padding: 0;
+}
+.factory-container {
+    position: absolute;
+
+    bottom: -5px;
+    height: 100px;
+    left: 10%;
+    right: 10%;
+
+    background: var(--raised-background);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    box-shadow: 0 2px 10px black;
+
+    margin: 0;
+    padding: 0;
+}
+
+.comps > div > img {
+    width: 50px;
+    height: 50px;
+}
+.comps > div > img.selected {
+    transform: translateY(-5px);
+    filter: drop-shadow(0 5px 5px #0007);
+}

src/data/projEntry.tsx

@@ -34,6 +34,7 @@ import ribbon from "./layers/ribbon";
 import toys from "./layers/toys";
 import trees from "./layers/trees";
 import workshop from "./layers/workshop";
+import factory from "./layers/factory";
 import wrappingPaper from "./layers/wrapping-paper";
 import boxesSymbol from "./symbols/cardboardBox.png";
 import clothSymbol from "./symbols/cloth.png";
@@ -221,7 +222,27 @@ export const main = createLayer("main", function (this: BaseLayer) {
                         },
                         onOpenLayer() {
                             recentlyUpdated.value = false;
-                            openDay(layer ?? "trees");
+
+                            // should not be full screen
+                            if (layer !== "factory") {
+                                // 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) {
+                                    // Desktop, allow multiple tabs to be open
+                                    if (player.tabs.includes(layer ?? "trees")) {
+                                        const index = player.tabs.lastIndexOf(layer ?? "trees");
+                                        player.tabs.splice(index, 1);
+                                    } else {
+                                        player.tabs.push(layer ?? "trees");
+                                        main.minimized.value = true;
+                                    }
+                                } else {
+                                    // Mobile, use single tab mode
+                                    player.tabs.splice(1, Infinity, layer ?? "trees");
+                                }
+                                layers[layer ?? "trees"]!.minimized.value = false;
+                            } else {
+                                player.tabs.splice(0, Infinity, layer);
+                            }
                         },
                         onUnlockLayer() {
                             if (layer != null) {
@@ -427,7 +448,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
         createDay(() => ({
             day: 18,
             shouldNotify: false,
-            layer: null, // "toys2"
+            layer: "factory",
             symbol: "",
             story: "",
             completedStory: "",
@@ -445,8 +466,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
         createDay(() => ({
             day: 20,
             shouldNotify: false,
-            layer: null, // "presents"
-            symbol: "",
+            layer: "factory", // "presents"
+            symbol: wrappingPaperSymbol,
             story: "",
             completedStory: "",
             masteredStory: ""
@@ -595,7 +616,8 @@ export const getInitialLayers = (
     letters,
     wrappingPaper,
     ribbon,
-    toys
+    toys,
+    factory
 ];
 
 /**

src/lib/pixi.ts

@@ -1,7 +1,4 @@
-import { Application } from "@pixi/app";
-import { BatchRenderer, Renderer } from "@pixi/core";
+import { BatchRenderer, extensions } from "@pixi/core";
 import { TickerPlugin } from "@pixi/ticker";
 
-Application.registerPlugin(TickerPlugin);
-
-Renderer.registerPlugin("batch", BatchRenderer);
+extensions.add(TickerPlugin, BatchRenderer);

src/main.css

@@ -163,3 +163,34 @@ ul {
     transform: rotateZ(-45deg);
     z-index: 1;
 }
+
+.layer-container {
+    min-width: 100%;
+    min-height: 100%;
+    margin: 0;
+    flex-grow: 1;
+    display: flex;
+    isolation: isolate;
+}
+
+.goBack {
+    position: sticky;
+    top: 10px;
+    left: 10px;
+    line-height: 30px;
+    margin-top: -50px;
+    margin-left: -35px;
+    border: none;
+    background: var(--background);
+    box-shadow: var(--background) 0 2px 3px 5px;
+    border-radius: 50%;
+    color: var(--foreground);
+    font-size: 30px;
+    cursor: pointer;
+    z-index: 7;
+}
+
+.goBack:hover {
+    transform: scale(1.1, 1.1);
+    text-shadow: 0 0 7px var(--foreground);
+}

src/util/common.ts

@@ -19,9 +19,9 @@ export function isFunction<T, S extends ReadonlyArray<unknown>, R>(
 }
 
 export enum Direction {
-    Up = "Up",
-    Down = "Down",
-    Left = "Left",
-    Right = "Right",
-    Default = "Up"
+    Up = "UP",
+    Down = "DOWN",
+    Left = "LEFT",
+    Right = "RIGHT",
+    Default = "UP"
 }

src/util/save.ts

@@ -142,7 +142,8 @@ setInterval(() => {
 window.onbeforeunload = () => {
     if (
         player.autosave &&
-        (layers as any).main.days[(layers as any).main.day.value - 1].opened.value
+        ((layers as any).main.days[(layers as any).main.day.value - 1].opened.value ||
+            import.meta.env.DEV)
     ) {
         save();
     }