the start of adding components

package.json

@@ -17,15 +17,11 @@
     "@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/graphics": "^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/graphics": "^6.5.8",
+    "@pixi/particle-emitter": "^5.0.8",
+    "@pixi/sprite": "^6.5.8",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "is-plain-object": "^5.0.0",

src/data/layers/Factory.vue

@@ -1,53 +1,30 @@
 <template>
-    <table>
-        <tr>
-            <td>Info</td>
-        </tr>
-        <tr>
-            <td class="components">Components! go brrrrrrr</td>
-            <td>
-                <div
-                    ref="element"
-                    class="factoryDisp"
-                    @click="e => $emit('click', e)"
-                    @mousemove="e => $emit('mouseMove', e)"
-                    @mouseenter="e => $emit('mouseEnter', e)"
-                    @mouseleave="e => $emit('mouseLeave', e)"
-                />
-            </td>
-        </tr>
-    </table>
+    <div ref="element" class="factoryDisp" />
 </template>
 <script setup lang="ts">
 import type { Application } from "@pixi/app";
 import { onMounted, shallowRef } from "vue";
+import { blockAmts } from "./factory";
 import "lib/pixi";
 
 const element = shallowRef<HTMLElement | null>(null);
 const props = defineProps<{
     application: Application;
 }>();
-
-defineEmits<{
-    (e: "mouseMove", i: MouseEvent): void;
-    (e: "mouseEnter", i: MouseEvent): void;
-    (e: "mouseLeave", i: MouseEvent): void;
-    (e: "click", i: MouseEvent): void;
-}>();
+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 {
-    border: 2px solid green;
-}
-.components {
-    width: 20%
+    width: 100%;
+    height: 100%;
 }
 </style>

src/data/layers/factory.tsx

@@ -3,43 +3,34 @@ import { createLayer } from "game/layers";
 import { Application } from "@pixi/app";
 import { Sprite } from "@pixi/sprite";
 import { Graphics } from "@pixi/graphics";
+import { Assets } from "@pixi/assets";
 import Factory from "./Factory.vue";
 import Modal from "components/Modal.vue";
 import conveyor from "./factory-components/conveyor.png";
-import { reactive, Ref, ref, watchEffect } from "vue";
+import cursor from "./factory-components/cursor.jpg";
+import { computed, reactive, Ref, ref, watchEffect } from "vue";
 import { Direction } from "util/common";
 import { persistent } from "game/persistence";
 import player from "game/player";
+import "./styles/factory.css";
+import { globalBus } from "game/events";
+import { Container } from "@pixi/display";
 
 const id = "factory";
 
 // what is the actual day?
-
-enum FactoryTypes {
-    conveyor,
-    conveyor1
-}
-
-interface FactoryComponent {
-    type: FactoryTypes | undefined;
-    directionIn: Direction | undefined;
-    directionOut: Direction | undefined;
-}
 const day = 20;
-const size = {
-    width: 1000,
-    height: 400
-};
 
 // 20x20 block size
 // TODO: unhardcode stuff
-const blockAmts = {
-    w: 50,
-    h: 20
+const size = {
+    width: 1000,
+    height: 340
+};
+export const blockAmts = {
+    w: 50,
+    h: 17
 };
-
-const blockWidth = Math.floor(size.width / blockAmts.w);
-const blockHeight = Math.floor(size.height / blockAmts.h);
 
 function roundDownTo(num: number, multiple: number) {
     return Math.floor(num / multiple) * multiple;
@@ -51,6 +42,40 @@ function getRelativeCoords(e: MouseEvent) {
         y: e.clientY - rect.top
     };
 }
+
+interface FactoryComponent {
+    directionIn: Direction | undefined;
+    directionOut: Direction | undefined;
+    imageSrc: string;
+    name: string;
+    description: string;
+    type: string;
+    sprite: Sprite;
+}
+const FACTORY_COMPONENTS = {
+    cursor: {
+        directionIn: undefined,
+        directionOut: undefined,
+        imageSrc: cursor,
+        name: "Cursor",
+        description: "Use this to move."
+    },
+    conveyor: {
+        directionIn: Direction,
+        directionOut: Direction,
+        imageSrc: conveyor,
+        name: "Conveyor",
+        description: "Moves 1 item per tick."
+    },
+    someOtherComponent: {
+        directionIn: Direction.Down,
+        directionOut: undefined,
+        imageSrc: conveyor,
+        description: "Accepts anything and produces nothing."
+    }
+};
+
+type FactoryCompNames = keyof typeof FACTORY_COMPONENTS;
 const factory = createLayer(id, () => {
     // layer display
     const name = "The Factory";
@@ -62,31 +87,29 @@ const factory = createLayer(id, () => {
         y: 0
     });
     const isMouseHoverShown = ref(false);
-    const isFactoryShown = ref(false);
-    // create a Array filled with th
-    const components: Ref<FactoryComponent[][]> = persistent(
-        Array(blockHeight)
+    const whatIsHovered = ref<FactoryCompNames | "">("");
+    const compSelected = ref<FactoryCompNames | "">("");
+    const components: Ref<unknown[][]> = persistent(
+        Array(blockAmts.h)
             .fill(undefined)
-            .map(() =>
-                Array(blockWidth)
-                    .fill(undefined)
-                    .map(() => ({
-                        type: undefined,
-                        directionIn: undefined,
-                        directionOut: undefined
-                    }))
-            )
+            .map(() => Array(blockAmts.w).fill(undefined))
     );
 
     // pixi
     const app = new Application(size);
     const graphicContainer = new Graphics();
-    app.stage.addChild(graphicContainer);
+    const spriteContainer = new Container();
+    let blockWidth = 0;
+    let blockHeight = 0;
+    app.stage.addChild(graphicContainer, spriteContainer);
+
+    globalBus.on("update", () => {
+        blockWidth = app.screen.width / blockAmts.w;
+        blockHeight = app.screen.height / blockAmts.h;
+    });
 
     // draw graphics
     function updateGraphics() {
-        // factory not shown, no point in rerendering stuff
-        if (isFactoryShown.value) {
         graphicContainer.clear();
         if (isMouseHoverShown.value) {
             graphicContainer.beginFill(0x808080);
@@ -98,7 +121,6 @@ const factory = createLayer(id, () => {
             );
         }
     }
-    }
     watchEffect(updateGraphics);
 
     function onMouseMove(e: MouseEvent) {
@@ -108,8 +130,25 @@ const factory = createLayer(id, () => {
         mouseCoords.x = x;
         mouseCoords.y = y;
     }
-    function onClick(e: MouseEvent) {
-        // placeholder
+    async function onClick(e: MouseEvent) {
+        if (compSelected.value === "") {
+            console.warn("You haven't hovered over anything, trickster!");
+            return;
+        }
+        let { x, y } = getRelativeCoords(e);
+        x = roundDownTo(x, blockWidth) / blockWidth;
+        y = roundDownTo(y, blockHeight) / blockHeight;
+        const basicData = structuredClone(
+            FACTORY_COMPONENTS[compSelected.value]
+        ) as FactoryComponent;
+        basicData.type = compSelected.value;
+        const sheet = await Assets.load(basicData.imageSrc);
+        basicData.sprite = new Sprite(sheet);
+        basicData.sprite.x = x;
+        basicData.sprite.y = y;
+        basicData.sprite.width = blockWidth;
+        basicData.sprite.height = blockHeight;
+        spriteContainer.addChild(basicData.sprite);
     }
     function onMouseEnter() {
         isMouseHoverShown.value = true;
@@ -118,7 +157,13 @@ const factory = createLayer(id, () => {
         isMouseHoverShown.value = false;
     }
     function goBack() {
-        player.tabs.splice(0, Infinity, "main")
+        player.tabs.splice(0, Infinity, "main");
+    }
+    function onComponentHover(name: FactoryCompNames | "") {
+        whatIsHovered.value = name;
+    }
+    function onCompClick(name: FactoryCompNames) {
+        compSelected.value = name;
     }
     return {
         name,
@@ -128,14 +173,56 @@ const factory = createLayer(id, () => {
         minimizable: false,
         display: jsx(() => (
             <div class="layer-container">
-                <button class="goBack" onClick={goBack}>❌</button>
+                <button class="goBack" onClick={goBack}>
+                    ❌
+                </button>
+                <table cellspacing="0" cellpadding="0" border="0" class="container">
+                    <tr>
+                        <td class="info" colspan="2">
+                            <div style="min-height: 3em">
+                                {whatIsHovered.value === ""
+                                    ? undefined
+                                    : FACTORY_COMPONENTS[whatIsHovered.value].description}
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td style="vertical-align: top" class="comps">
+                            <h3>Components</h3>
+                            <div>
+                                {Object.entries(FACTORY_COMPONENTS).map(value => {
+                                    const key = value[0] as FactoryCompNames;
+                                    const item = value[1];
+                                    return (
+                                        <img
+                                            src={item.imageSrc}
+                                            style={{
+                                                width: "20%",
+                                                "aspect-ratio": "1",
+                                                border:
+                                                    compSelected.value === key
+                                                        ? "1px solid white"
+                                                        : ""
+                                            }}
+                                            onMouseenter={() => onComponentHover(key)}
+                                            onMouseleave={() => onComponentHover("")}
+                                            onClick={() => onCompClick(key)}
+                                        ></img>
+                                    );
+                                })}
+                            </div>
+                        </td>
+                        <td>
                             <Factory
                                 application={app}
-                    onMouseMove={onMouseMove}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
+                                onMousemove={onMouseMove}
                                 onClick={onClick}
+                                onMouseenter={onMouseEnter}
+                                onMouseleave={onMouseLeave}
                             />
+                        </td>
+                    </tr>
+                </table>
             </div>
         )),
         components

src/data/layers/styles/factory.css

@@ -0,0 +1,16 @@
+.container {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+.factoryDisp {
+    border-left: 1px solid white;
+    border-bottom: 1px solid white;
+}
+.info {
+    border-bottom: 1px solid white;
+}
+.comps {
+    border-bottom: 1px solid white;
+}

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

@@ -137,6 +137,15 @@ ul {
     background: #070710;
 }
 
+.layer-container {
+    min-width: 100%;
+    min-height: 100%;
+    margin: 0;
+    flex-grow: 1;
+    display: flex;
+    isolation: isolate;
+}
+
 .goBack {
     position: sticky;
     top: 10px;
@@ -158,11 +167,3 @@ ul {
     transform: scale(1.1, 1.1);
     text-shadow: 0 0 7px var(--foreground);
 }
-.layer-container {
-    min-width: 100%;
-    min-height: 100%;
-    margin: 0;
-    flex-grow: 1;
-    display: flex;
-    isolation: isolate;
-}