From 35fad1f5b55520160bbc8ba58bddc2df52a961df Mon Sep 17 00:00:00 2001 From: circle-gon <97845741+circle-gon@users.noreply.github.com> Date: Tue, 20 Dec 2022 21:26:48 +0000 Subject: [PATCH 01/10] checkout --- src/data/layers/factory.tsx | 35 +++++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 3438452..43d5196 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -217,21 +217,29 @@ const factory = createLayer(id, () => { }); const graphicContainer = new Graphics(); let spriteContainer = new Container(); - const movingBlocks = new Container(); - - graphicContainer.zIndex = 1; - movingBlocks.zIndex = 2; - app.stage.addChild(graphicContainer, spriteContainer, movingBlocks); + let movingBlocks = new Container(); + resetContainers(); + app.stage.addChild(graphicContainer); app.stage.sortableChildren = true; let loaded = false; + function resetContainers() { + spriteContainer.destroy({ children: true }); + movingBlocks.destroy({ children: true }); + spriteContainer = new Container(); + movingBlocks = new Container(); + graphicContainer.zIndex = 1; + /*graphicContainer.position.x = 0.5 + graphicContainer.position.y = 0.5 + movingBlocks.position.x = 0.5 + movingBlocks.position.y = 0.5*/ + movingBlocks.zIndex = 2; + app.stage.addChild(spriteContainer, movingBlocks); + } + globalBus.on("onLoad", async () => { loaded = false; - spriteContainer.destroy({ - children: true - }); - spriteContainer = new Container(); - app.stage.addChild(spriteContainer); + resetContainers(); for (const y of components.value.keys()) { for (const x of components.value[y].keys()) { const data = components.value[y][x]; @@ -287,6 +295,13 @@ const factory = createLayer(id, () => { if (compBehind.type === "conveyor") { // push it to the next conveyor, kill it from the // curent conveyor + // too many packages + if ( + compBehind.nextPackages.length + + compBehind.packages.length >= + 1 + ) + continue; block.lastX += dirAmt; compBehind.nextPackages.push(block); compData.packages.splice(key, 1); From b7d337f19b0ac11d8215dea5b71c75b8d1b63c81 Mon Sep 17 00:00:00 2001 From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com> Date: Wed, 21 Dec 2022 13:40:54 +0700 Subject: [PATCH 02/10] Some factory redesigning --- src/data/layers/factory.tsx | 133 ++++++++++++++++++----------- src/data/layers/styles/factory.css | 76 ++++++++++++----- 2 files changed, 136 insertions(+), 73 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index ff66c46..0f0a3d2 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -200,7 +200,10 @@ const factory = createLayer(id, () => { y: 0 }); const isMouseHoverShown = ref(false); + + const isComponentHover = ref(false); const whatIsHovered = ref(""); + const compSelected = ref("cursor"); const components: Persistent<{ [key: string]: FactoryComponent }> = persistent({}); const compInternalData: Record = {}; @@ -610,15 +613,20 @@ const factory = createLayer(id, () => { isMouseHoverShown.value = false; } - function goBack() { - player.tabs.splice(0, Infinity, "main"); - } - function onComponentHover(name: FactoryCompNames | "") { + function onComponentMouseEnter(name: FactoryCompNames | "") { whatIsHovered.value = name; + isComponentHover.value = true; + } + function onComponentMouseLeave() { + isComponentHover.value = false; } function onCompClick(name: FactoryCompNames) { compSelected.value = name; } + + function goBack() { + player.tabs.splice(0, Infinity, "main"); + } return { name, day, @@ -640,54 +648,77 @@ const factory = createLayer(id, () => { onPointerleave={onFactoryMouseLeave} onContextmenu={(e: MouseEvent) => e.preventDefault()} /> -
- {compHovered.value !== undefined ? ( - <> - {FACTORY_COMPONENTS[compHovered.value.type].name} -
- {FACTORY_COMPONENTS[compHovered.value.type].description} -
- {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} -
-
-
- {whatIsHovered.value === "" - ? undefined - : FACTORY_COMPONENTS[whatIsHovered.value].description} + + {compHovered.value !== undefined ? ( +
+

{FACTORY_COMPONENTS[compHovered.value.type].name}

+
+ {FACTORY_COMPONENTS[compHovered.value.type].description} +
+ {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}
-
-
- {Object.entries(FACTORY_COMPONENTS).map(value => { - const key = value[0] as FactoryCompNames; - const item = value[1]; - return ( - onComponentHover(key)} - onMouseleave={() => onComponentHover("")} - onClick={() => onCompClick(key)} - > - ); - })} -
+ ) : undefined} + +
+
+ {whatIsHovered.value === "" ? undefined : ( + <> +

{FACTORY_COMPONENTS[whatIsHovered.value].name}

+
+ {FACTORY_COMPONENTS[whatIsHovered.value].description} + + )} +
+
+ {Object.entries(FACTORY_COMPONENTS).map(value => { + const key = value[0] as FactoryCompNames; + const item = value[1]; + return ( + onComponentMouseEnter(key)} + onMouseleave={() => onComponentMouseLeave()} + onClick={() => onCompClick(key)} + > + ); + })}
diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css index 0e6471a..b06534a 100644 --- a/src/data/layers/styles/factory.css +++ b/src/data/layers/styles/factory.css @@ -17,38 +17,70 @@ .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; + max-width: 300px; + + margin: 20px 0 0 10px; + padding: 5px 10px; + + background: var(--background); + border-radius: var(--border-radius); + box-shadow: 0 1px 5px black; + + text-align: left; + font-size: smaller; + + pointer-events: none; + transition: height .3s; } .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; + top: calc(5% + 30px); + bottom: 5%; + left: 0%; + width: 70px; margin: 0; padding: 0; } -.comps > div > img { +.comp-info { + position: absolute; + right: 10px; + padding: 5px 10px; + + width: max-content; + max-width: 300px; + + background: var(--background); + border-radius: var(--border-radius); + box-shadow: 0 1px 5px #0007; + + text-align: left; + font-size: smaller; + + pointer-events: none; + transition: transform 0.3s; +} +.comp-info.active { + transform: translateX(calc(20px + 100%)); +} + +.comp-list { + position: relative; + height: 100%; + padding: 10px; + + background: var(--raised-background); + border-radius: 0 var(--border-radius) var(--border-radius) 0; + box-shadow: 0 2px 10px black; +} +.comp-list > img { + display: block; width: 50px; height: 50px; } -.comps > div > img.selected { - transform: translateY(-5px); - filter: drop-shadow(0 5px 5px #0007); +.comp-list > img.selected { + transform: translate(-5px, -5px); + filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007); } \ No newline at end of file From 0f2ae44de0046cb92e9a9e974f8593836b702215 Mon Sep 17 00:00:00 2001 From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com> Date: Wed, 21 Dec 2022 17:00:56 +0700 Subject: [PATCH 03/10] Fix ts errors --- src/data/layers/factory.tsx | 102 ++++++++++++++++------------- src/data/layers/styles/factory.css | 1 + 2 files changed, 58 insertions(+), 45 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 22bdc71..30b88c3 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -1,7 +1,9 @@ import { Application } from "@pixi/app"; import { Assets } from "@pixi/assets"; +import { Resource, Texture } from "@pixi/core"; import { Container } from "@pixi/display"; import { Graphics } from "@pixi/graphics"; +import { Matrix } from "@pixi/math"; import { Sprite } from "@pixi/sprite"; import { jsx } from "features/feature"; import { globalBus } from "game/events"; @@ -94,6 +96,8 @@ const factory = createLayer(id, () => { const name = "The Factory"; const color = "grey"; + // ---------------------------------------------- Components + const FACTORY_COMPONENTS = { cursor: { imageSrc: cursor, @@ -147,17 +151,19 @@ const factory = createLayer(id, () => { consumption: {}, consumptionStock: {} } - } as const; + } as Record; const RESOURCES = { square: square } as Record; type FactoryCompNames = keyof typeof FACTORY_COMPONENTS; type BuildableCompName = Exclude; + interface FactoryComponentBase extends Record { direction: Direction; } - interface FactoryComponentProducers extends FactoryComponentBase { + + interface FactoryComponentProducer extends FactoryComponentBase { type: Exclude; consumptionStock: Record; @@ -165,11 +171,14 @@ const factory = createLayer(id, () => { productionStock: Record; ticksDone: number; } + interface FactoryComponentConveyor extends FactoryComponentBase { type: "conveyor"; } + type FactoryComponent = FactoryComponentBase & - (FactoryComponentConveyor | FactoryComponentProducers); + (FactoryComponentConveyor | FactoryComponentProducer); + interface FactoryComponentDeclaration { tick: number; imageSrc: string; @@ -263,8 +272,8 @@ const factory = createLayer(id, () => { const floorGraphics = new Graphics(); floorGraphics.beginFill(0x70645d); floorGraphics.drawRect( - -factorySize.width * blockSize, - -factorySize.height * blockSize, + (-factorySize.width - 0.5) * blockSize, + (-factorySize.height - 0.5) * blockSize, factorySize.width * 2 * blockSize, factorySize.height * 2 * blockSize ); @@ -305,13 +314,14 @@ const factory = createLayer(id, () => { // 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]; + const _data = components.value[id]; + const _compData = compInternalData[id]; + if (_data === undefined || _compData === undefined) continue; + const factoryData = FACTORY_COMPONENTS[_data.type]; //debugger; - if (data.type === "conveyor") { + if (_data.type === "conveyor") { + const data = _data as FactoryComponentConveyor; + const compData = _compData as FactoryInternalConveyor; if (compData.type !== "conveyor") throw new TypeError("this should not happen"); // conveyor part // use a copy @@ -336,14 +346,13 @@ const factory = createLayer(id, () => { // push it to the next conveyor, kill it from the // curent conveyor block.lastX += dirAmt; - compBehind.nextPackages.push(block); + (compBehind as FactoryInternalConveyor).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 - ]++; + const factoryData = storedComp as FactoryComponentProducer; + factoryData.consumptionStock[block.type]++; movingBlocks.removeChild(block.sprite); compData.packages.splice(key, 1); } @@ -367,12 +376,12 @@ const factory = createLayer(id, () => { // push it to the next conveyor, kill it from the // curent conveyor block.lastY += dirAmt; - compBehind.nextPackages.push(block); + (compBehind as FactoryInternalConveyor).nextPackages.push(block); compData.packages.splice(key, 1); } else { // send it to the factory // destory its sprite and data - const factoryData = storedComp as FactoryComponentProducers; + const factoryData = storedComp as FactoryComponentProducer; factoryData.consumptionStock[block.type]++; movingBlocks.removeChild(block.sprite); compData.packages.splice(key, 1); @@ -385,6 +394,8 @@ const factory = createLayer(id, () => { } } } else { + const data = _data as FactoryComponentProducer; + const compData = _compData as FactoryInternalProducer; // factory part // PRODUCTION if (data.ticksDone >= factoryData.tick) { @@ -406,27 +417,16 @@ const factory = createLayer(id, () => { 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; + if (components.value[x + "x" + (y + 1)]?.type === "conveyor") { + if (components.value[x + "x" + (y + 1)].direction === Direction.Up) { + yInc = 1; + } else if (components.value[x + "x" + (y - 1)].direction === Direction.Down) { + yInc = -1; + } else if (components.value[x + 1 + "x" + y].direction === Direction.Right) { + xInc = 1; + } else if (components.value[x - 1 + "x" + y].direction === Direction.Left) { + xInc = -1; + } } // no suitable location to dump stuff in //console.log(x, y) @@ -535,7 +535,7 @@ const factory = createLayer(id, () => { 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; + const compData = components.value[x + "x" + y] as FactoryComponentProducer; for (const [key, res] of Object.entries(compData.productionStock)) { // if the current stock + production is more than you can handle if ( @@ -551,7 +551,7 @@ const factory = createLayer(id, () => { return true; }), sprite - } as FactoryInternal; + } as FactoryInternalProducer; spriteContainer.addChild(sprite); } @@ -572,7 +572,7 @@ const factory = createLayer(id, () => { compSelected.value !== "rotate" ) { const { tx, ty } = spriteContainer.localTransform; - graphicContainer.beginFill(0x808080); + graphicContainer.lineStyle(4, 0x808080, 1); graphicContainer.drawRect( roundDownTo(mouseCoords.x - tx, blockSize) + tx - blockSize / 2, roundDownTo(mouseCoords.y - ty, blockSize) + ty - blockSize / 2, @@ -603,8 +603,14 @@ const factory = createLayer(id, () => { 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); + mapOffset.x = Math.min( + Math.max(mapOffset.x, -factorySize.width + 0.5), + factorySize.width + 0.5 + ); + mapOffset.y = Math.min( + Math.max(mapOffset.y, -factorySize.height + 0.5), + factorySize.height + 0.5 + ); } if (!pointerDown.value && !pointerDrag.value) { const { tx, ty } = spriteContainer.localTransform; @@ -721,8 +727,14 @@ const factory = createLayer(id, () => { <> Stock:{" "} {Object.entries({ - ...compHovered.value.productionStock, - ...compHovered.value.consumptionStock + ...(compHovered.value.productionStock as Record< + string, + number + >), + ...(compHovered.value.consumptionStock as Record< + string, + number + >) }).map(i => { return `${i[0]}: ${i[1]}/${ FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"] diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css index b06534a..00d48ae 100644 --- a/src/data/layers/styles/factory.css +++ b/src/data/layers/styles/factory.css @@ -17,6 +17,7 @@ .info-container { position: absolute; + width: max-content; max-width: 300px; margin: 20px 0 0 10px; From ed16506ab29cc069a6bb7b532715efcd694d9025 Mon Sep 17 00:00:00 2001 From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com> Date: Wed, 21 Dec 2022 17:09:06 +0700 Subject: [PATCH 04/10] Whoops --- src/data/layers/factory.tsx | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 30b88c3..9c58117 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -417,20 +417,30 @@ const factory = createLayer(id, () => { let yInc = 0; let xInc = 0; - if (components.value[x + "x" + (y + 1)]?.type === "conveyor") { - if (components.value[x + "x" + (y + 1)].direction === Direction.Up) { - yInc = 1; - } else if (components.value[x + "x" + (y - 1)].direction === Direction.Down) { - yInc = -1; - } else if (components.value[x + 1 + "x" + y].direction === Direction.Right) { - xInc = 1; - } else if (components.value[x - 1 + "x" + y].direction === Direction.Left) { - xInc = -1; - } + 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 + 1 + "x" + y].direction === Direction.Right + ) { + xInc = 1; + } else if ( + components.value[x - 1 + "x" + y]?.type === "conveyor" && + components.value[x - 1 + "x" + y].direction === Direction.Left + ) { + xInc = -1; } // no suitable location to dump stuff in - //console.log(x, y) - //debugger; + 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)) { From 56fb26dcada6bb825b48b28b216eb11863093698 Mon Sep 17 00:00:00 2001 From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com> Date: Wed, 21 Dec 2022 17:15:55 +0700 Subject: [PATCH 05/10] Whoops --- src/data/layers/factory.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 9c58117..869d7cf 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -288,7 +288,6 @@ const factory = createLayer(id, () => { } 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; @@ -305,9 +304,8 @@ const factory = createLayer(id, () => { (window as any).blocks = movingBlocks; let taskIsRunning = false; - globalBus.on("update", async diff => { + globalBus.on("update", diff => { if (taskIsRunning || !loaded) return; - taskIsRunning = true; //debugger // will change soon:tm: const tick = diff; @@ -318,14 +316,13 @@ const factory = createLayer(id, () => { const _compData = compInternalData[id]; if (_data === undefined || _compData === undefined) continue; const factoryData = FACTORY_COMPONENTS[_data.type]; - //debugger; + // debugger; if (_data.type === "conveyor") { const data = _data as FactoryComponentConveyor; const compData = _compData as FactoryInternalConveyor; 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()) { @@ -439,8 +436,8 @@ const factory = createLayer(id, () => { xInc = -1; } // no suitable location to dump stuff in - console.log(x, y); - debugger; + // 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)) { From dbf6af8607eb46900894786bec83c7cfd73694b5 Mon Sep 17 00:00:00 2001 From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com> Date: Wed, 21 Dec 2022 20:52:09 +0700 Subject: [PATCH 06/10] The factory should work as intended now --- src/data/layers/factory.tsx | 325 +++++++++++++++++++++++------------- src/game/persistence.ts | 1 + 2 files changed, 206 insertions(+), 120 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 869d7cf..2d8255b 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -10,6 +10,7 @@ import { globalBus } from "game/events"; import { createLayer } from "game/layers"; import { Persistent, persistent, State } from "game/persistence"; import player from "game/player"; +import { format, formatWhole } from "util/bignum"; import { Direction } from "util/common"; import { computed, ComputedRef, reactive, ref, watchEffect } from "vue"; import conveyor from "./factory-components/conveyor.png"; @@ -103,31 +104,19 @@ const factory = createLayer(id, () => { imageSrc: cursor, name: "Cursor", description: "Use this to move.", - tick: 0, - consumption: {}, - consumptionStock: {}, - production: {}, - productionStock: {} + tick: 0 }, rotate: { imageSrc: rotate, name: "Rotate", description: "Use this to rotate components.", - tick: 0, - consumption: {}, - consumptionStock: {}, - production: {}, - productionStock: {} + tick: 0 }, conveyor: { imageSrc: conveyor, name: "Conveyor", description: "Moves 1 item per tick.", tick: 1, - consumption: {}, - consumptionStock: {}, - production: {}, - productionStock: {}, ports: { [Direction.Left]: { type: "input" @@ -139,17 +128,44 @@ const factory = createLayer(id, () => { }, square: { imageSrc: square, - name: "???", + name: "Producer", description: "Produces 1 square every 1 tick.", tick: 1, - production: { - square: 1 + outputs: { + square: { + amount: 1 + } + } + }, + receiver: { + imageSrc: square, + name: "Receiver", + description: "Obtains squares. Pretty much does nothing else.", + tick: 0, + inputs: { + square: { + amount: Infinity + } + } + }, + shrinker: { + imageSrc: square, + name: "Shrinker", + description: + "Converts 100 squares to 1 square. I don't know why you would want to do this but here you go anyways.", + tick: 1, + inputs: { + square: { + amount: 100, + capacity: 10000 + } }, - productionStock: { - square: Infinity - }, - consumption: {}, - consumptionStock: {} + outputs: { + square: { + amount: 1, + capacity: 10 + } + } } } as Record; const RESOURCES = { @@ -165,10 +181,10 @@ const factory = createLayer(id, () => { interface FactoryComponentProducer extends FactoryComponentBase { type: Exclude; - consumptionStock: Record; + inputStock?: Record; // current production stock - productionStock: Record; + outputStock?: Record; ticksDone: number; } @@ -186,13 +202,21 @@ const factory = createLayer(id, () => { description: string; /** amount it consumes */ - consumption: Record; - /** maximum stock of consumption */ - consumptionStock: Record; + inputs?: Record< + string, + { + amount: number; + capacity?: number; + } + >; /** amount it produces */ - production: Record; - /** maximum stock of production */ - productionStock: Record; + outputs?: Record< + string, + { + amount: number; + capacity?: number; + } + >; /** on produce, do something */ onProduce?: (times: number) => void; @@ -223,8 +247,8 @@ const factory = createLayer(id, () => { // in block amts, not screen x: number; y: number; - lastX: number; - lastY: number; + // make blocks turn in random amounts; + turbulance: number; } // mouse positions @@ -307,8 +331,6 @@ const factory = createLayer(id, () => { globalBus.on("update", diff => { if (taskIsRunning || !loaded) return; //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); @@ -325,12 +347,13 @@ const factory = createLayer(id, () => { // use a copy compData.packages = compData.packages.concat(compData.nextPackages); compData.nextPackages = []; - for (const [key, block] of [...compData.packages].entries()) { - const inputDirection = rotateDir(data.direction, Direction.Left); + for (let key = 0; key < compData.packages.length; key++) { + const block = compData.packages[key]; + const inputDirection = data.direction; const dirType = getDirection(inputDirection); const dirAmt = directionToNum(inputDirection); if (dirType === "h") { - if (block.x <= block.lastX + dirAmt) { + if ((block.x - x) * dirAmt >= 1 + block.turbulance) { const compBehind = compInternalData[x + dirAmt + "x" + y]; const storedComp = components.value[x + dirAmt + "x" + y]; @@ -338,29 +361,34 @@ const factory = createLayer(id, () => { 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; + block.turbulance = Math.random() * 0.4 - 0.2; (compBehind as FactoryInternalConveyor).nextPackages.push(block); - compData.packages.splice(key, 1); } else { // send it to the factory // destory its sprite and data const factoryData = storedComp as FactoryComponentProducer; - factoryData.consumptionStock[block.type]++; + if (factoryData.inputStock !== undefined) + factoryData.inputStock[block.type] = Math.min( + (factoryData.inputStock[block.type] ?? 0) + 1, + FACTORY_COMPONENTS[compBehind.type].inputs?.[block.type] + ?.capacity ?? Infinity + ); movingBlocks.removeChild(block.sprite); - compData.packages.splice(key, 1); } + + compData.packages.splice(key, 1); + key--; } else { const change = - dirAmt * Math.min(Math.abs(block.x + 1 - block.lastX), tick); + dirAmt * Math.min(Math.abs(x + 1.3 * dirAmt - block.x), diff); block.x += change; block.sprite.x += change * blockSize; } } else { - if (block.y <= block.lastY + dirAmt) { + if ((block.y - y) * dirAmt >= 1 + block.turbulance) { const compBehind = compInternalData[x + "x" + (y + dirAmt)]; const storedComp = components.value[x + "x" + (y + dirAmt)]; @@ -368,23 +396,28 @@ const factory = createLayer(id, () => { 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; + block.turbulance = Math.random() * 0.4 - 0.2; (compBehind as FactoryInternalConveyor).nextPackages.push(block); - compData.packages.splice(key, 1); } else { // send it to the factory // destory its sprite and data - const factoryData = storedComp as FactoryComponentProducer; - factoryData.consumptionStock[block.type]++; + const data = storedComp as FactoryComponentProducer; + if (factoryData.inputs?.[block.type] !== undefined) { + if (data.inputStock === undefined) data.inputStock = {}; + data.inputStock[block.type] = + (data.inputStock[block.type] ?? 0) + 1; + } movingBlocks.removeChild(block.sprite); - compData.packages.splice(key, 1); } + + compData.packages.splice(key, 1); + key--; } else { - const change = dirAmt * Math.min(Math.abs(block.y - block.lastY), tick); + const change = + dirAmt * Math.min(Math.abs(y + 1.3 * dirAmt - block.y), diff); block.y += change; block.sprite.y += change * blockSize; } @@ -396,55 +429,67 @@ const factory = createLayer(id, () => { // 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; + if (compData.canProduce.value) { + const cyclesDone = Math.floor(data.ticksDone / factoryData.tick); + factoryData.onProduce?.(cyclesDone); + if (factoryData.inputs !== undefined) { + if (data.inputStock === undefined) data.inputStock = {}; + for (const [key, val] of Object.entries(factoryData.inputs)) { + data.inputStock[key] = (data.inputStock[key] ?? 0) - val.amount; + } + } + if (factoryData.outputs !== undefined) { + if (data.outputStock === undefined) data.outputStock = {}; + for (const [key, val] of Object.entries(factoryData.outputs)) { + data.outputStock[key] = (data.outputStock[key] ?? 0) + val.amount; + } + } + data.ticksDone -= cyclesDone * factoryData.tick; } - for (const [key, val] of Object.entries(factoryData.production)) { - data.productionStock[key] += val; - } - data.ticksDone -= cyclesDone * factoryData.tick; } else { - data.ticksDone += tick; + data.ticksDone += diff; } // 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; + const incs: [number, number][] = []; if ( components.value[x + "x" + (y + 1)]?.type === "conveyor" && - components.value[x + "x" + (y + 1)].direction === Direction.Up + components.value[x + "x" + (y + 1)].direction === Direction.Down ) { - yInc = 1; - } else if ( + incs.push([0, 1]); + } + if ( components.value[x + "x" + (y - 1)]?.type === "conveyor" && - components.value[x + "x" + (y - 1)].direction === Direction.Down + components.value[x + "x" + (y - 1)].direction === Direction.Up ) { - yInc = -1; - } else if ( + incs.push([0, -1]); + } + if ( components.value[x + 1 + "x" + y]?.type === "conveyor" && components.value[x + 1 + "x" + y].direction === Direction.Right ) { - xInc = 1; - } else if ( + incs.push([1, 0]); + } + if ( components.value[x - 1 + "x" + y]?.type === "conveyor" && components.value[x - 1 + "x" + y].direction === Direction.Left ) { - xInc = -1; + incs.push([-1, 0]); } // no suitable location to dump stuff in // console.log(x, y); // debugger; - if (xInc === 0 && yInc === 0) continue; + if (incs.length <= 0) continue; + const [xInc, yInc] = incs[Math.floor(Math.random() * incs.length)]; 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; + if (data.outputStock !== undefined) { + for (const [name, amt] of Object.entries(data.outputStock)) { + if (amt >= 1) { + itemToMove = [name, amt]; + data.outputStock[name]--; + break; + } } } // there is nothing to move @@ -465,20 +510,17 @@ const factory = createLayer(id, () => { // 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.x = (x + xInc * 0.3) * blockSize; + sprite.y = (y + yInc * 0.3) * 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, + x: x + xInc * 0.3, + y: y + yInc * 0.3, + turbulance: Math.random() * 0.4 - 0.2, type: itemToMove[0] }; @@ -519,17 +561,17 @@ const factory = createLayer(id, () => { components.value[x + "x" + y] = { ticksDone: 0, direction: Direction.Right, - consumptionStock: - data.type === "conveyor" + inputStock: + factoryBaseData.inputs === undefined ? undefined : Object.fromEntries( - Object.keys(factoryBaseData.consumptionStock).map(i => [i, 0]) + Object.entries(factoryBaseData.inputs).map(x => [x[0], 0]) ), - productionStock: - data.type === "conveyor" + outputStock: + factoryBaseData.outputs === undefined ? undefined : Object.fromEntries( - Object.keys(factoryBaseData.productionStock).map(i => [i, 0]) + Object.entries(factoryBaseData.outputs).map(x => [x[0], 0]) ), ...data } as FactoryComponent; @@ -543,17 +585,17 @@ const factory = createLayer(id, () => { if (!(factoryBaseData.canProduce?.value ?? true)) return false; // this should NEVER be null const compData = components.value[x + "x" + y] as FactoryComponentProducer; - 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; + if (factoryBaseData.inputs !== undefined) { + for (const [res, val] of Object.entries(factoryBaseData.inputs)) + if ((compData.inputStock?.[res] ?? 0) < val.amount) 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; + if (factoryBaseData.outputs !== undefined) { + for (const [res, val] of Object.entries(factoryBaseData.outputs)) + if ( + (compData.outputStock?.[res] ?? 0) + val.amount > + (val.capacity ?? Infinity) + ) + return false; } return true; }), @@ -667,7 +709,16 @@ const factory = createLayer(id, () => { } else if (e.button === 2) { const data = compInternalData[x + "x" + y]; if (data === undefined) return; + + if (data.type === "conveyor") { + const cData = data as FactoryInternalConveyor; + for (const p of cData.packages) { + p.sprite.destroy(); + } + } + delete components.value[x + "x" + y]; + delete compInternalData[x + "x" + y]; spriteContainer.removeChild(data.sprite); } } @@ -732,24 +783,58 @@ const factory = createLayer(id, () => {
{compHovered.value.type !== "conveyor" ? ( <> - Stock:{" "} - {Object.entries({ - ...(compHovered.value.productionStock as Record< - string, - number - >), - ...(compHovered.value.consumptionStock as Record< - string, - number - >) - }).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]] - }`; - })} + {compHovered.value.inputStock !== undefined ? ( + <> +
+
Inputs:
+ {Object.entries(compHovered.value.inputStock).map(x => ( +
+ {x[0]}: {formatWhole(x[1])} + {FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].inputs?.[x[0]].amount !== undefined + ? " / " + + formatWhole( + FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].inputs?.[x[0]].amount ?? 0 + ) + : ""} + {FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].inputs?.[x[0]].capacity !== undefined + ? " / " + + formatWhole( + FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].inputs?.[x[0]].capacity ?? 0 + ) + : ""} +
+ ))} + + ) : undefined} + {compHovered.value.outputStock !== undefined ? ( + <> +
+
Outputs:
+ {Object.entries(compHovered.value.outputStock).map(x => ( +
+ {x[0]}: {formatWhole(x[1])} + {FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].outputs?.[x[0]].capacity !== undefined + ? " / " + + formatWhole( + FACTORY_COMPONENTS[ + compHovered.value?.type ?? "cursor" + ].outputs?.[x[0]].capacity ?? 0 + ) + : ""} +
+ ))} + + ) : undefined} ) : undefined}
diff --git a/src/game/persistence.ts b/src/game/persistence.ts index 893d435..efb43c0 100644 --- a/src/game/persistence.ts +++ b/src/game/persistence.ts @@ -48,6 +48,7 @@ export type State = | string | number | boolean + | undefined | DecimalSource | { [key: string]: State } | { [key: number]: State }; From 90bacccbbb735f78395587938fe0f8e6ef59a6b5 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Wed, 21 Dec 2022 08:11:39 -0600 Subject: [PATCH 07/10] Change FACTORY_COMPONENTS typing for best of both worlds --- src/data/layers/factory.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 2d8255b..e448e9c 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -167,12 +167,12 @@ const factory = createLayer(id, () => { } } } - } as Record; + } as Record; const RESOURCES = { square: square } as Record; - type FactoryCompNames = keyof typeof FACTORY_COMPONENTS; + type FactoryCompNames = "cursor" | "rotate" | "conveyor" | "square" | "receiver" | "shrinker"; type BuildableCompName = Exclude; interface FactoryComponentBase extends Record { From fcb2f58986e027e897d17c9e0aec65c2832c83fd Mon Sep 17 00:00:00 2001 From: circle-gon <97845741+circle-gon@users.noreply.github.com> Date: Wed, 21 Dec 2022 14:20:34 +0000 Subject: [PATCH 08/10] remove useless code --- src/data/layers/factory.tsx | 42 ++----------------------------------- 1 file changed, 2 insertions(+), 40 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 96054b3..e8b5322 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -1,16 +1,14 @@ import { Application } from "@pixi/app"; import { Assets } from "@pixi/assets"; -import { Resource, Texture } from "@pixi/core"; import { Container } from "@pixi/display"; import { Graphics } from "@pixi/graphics"; -import { Matrix } from "@pixi/math"; 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 { format, formatWhole } from "util/bignum"; +import { formatWhole } from "util/bignum"; import { Direction } from "util/common"; import { computed, ComputedRef, reactive, ref, watchEffect } from "vue"; import conveyor from "./factory-components/conveyor.png"; @@ -28,12 +26,6 @@ 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; } @@ -44,20 +36,6 @@ function getRelativeCoords(e: MouseEvent) { 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); @@ -284,20 +262,6 @@ const factory = createLayer(id, () => { app.stage.sortableChildren = true; let loaded = false; - function resetContainers() { - spriteContainer.destroy({ children: true }); - movingBlocks.destroy({ children: true }); - spriteContainer = new Container(); - movingBlocks = new Container(); - graphicContainer.zIndex = 1; - /*graphicContainer.position.x = 0.5 - graphicContainer.position.y = 0.5 - movingBlocks.position.x = 0.5 - movingBlocks.position.y = 0.5*/ - movingBlocks.zIndex = 2; - app.stage.addChild(spriteContainer, movingBlocks); - } - globalBus.on("onLoad", async () => { loaded = false; @@ -340,10 +304,9 @@ const factory = createLayer(id, () => { (window as any).internal = compInternalData; (window as any).comp = components; (window as any).blocks = movingBlocks; - let taskIsRunning = false; globalBus.on("update", diff => { - if (taskIsRunning || !loaded) return; + if (!loaded) return; //debugger // make them produce for (const id in components.value) { @@ -544,7 +507,6 @@ const factory = createLayer(id, () => { movingBlocks.addChild(sprite); } } - taskIsRunning = false; }); function addFactoryComp( From 58ea4f821386eab76ba519259138f575a1b7d794 Mon Sep 17 00:00:00 2001 From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com> Date: Wed, 21 Dec 2022 22:26:00 +0700 Subject: [PATCH 09/10] Keep the tooltip on screen --- src/data/layers/factory.tsx | 18 ++++++++++++++---- src/data/layers/styles/factory.css | 2 +- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index e8b5322..9c3c51d 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -93,7 +93,7 @@ const factory = createLayer(id, () => { conveyor: { imageSrc: conveyor, name: "Conveyor", - description: "Moves 1 item per tick.", + description: "Moves items at 1 block per second.", tick: 1, ports: { [Direction.Left]: { @@ -107,7 +107,7 @@ const factory = createLayer(id, () => { square: { imageSrc: square, name: "Producer", - description: "Produces 1 square every 1 tick.", + description: "Produces 1 square every 1 second.", tick: 1, outputs: { square: { @@ -707,6 +707,7 @@ const factory = createLayer(id, () => { } function onFactoryMouseLeave() { isMouseHoverShown.value = false; + compHovered.value = undefined; } function onComponentMouseEnter(name: FactoryCompNames | "") { @@ -748,9 +749,18 @@ const factory = createLayer(id, () => { {compHovered.value !== undefined ? (
+ app.view.width - 30 + ? { right: app.view.width - mouseCoords.x + "px" } + : { left: mouseCoords.x + "px" }), + ...(mouseCoords.y + + (document.getElementById("factory-info")?.clientHeight ?? 0) > + app.view.height - 30 + ? { bottom: app.view.height - mouseCoords.y + "px" } + : { top: mouseCoords.y + "px" }) }} >

{FACTORY_COMPONENTS[compHovered.value.type].name}

diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css index 00d48ae..1cc656b 100644 --- a/src/data/layers/styles/factory.css +++ b/src/data/layers/styles/factory.css @@ -20,7 +20,7 @@ width: max-content; max-width: 300px; - margin: 20px 0 0 10px; + margin: 20px 0 10px 10px; padding: 5px 10px; background: var(--background); From 25c0b60ec692943cb2d3b1107696a658d8a826ba Mon Sep 17 00:00:00 2001 From: Chunkybanana <62921243+chunkybanana@users.noreply.github.com> Date: Wed, 21 Dec 2022 22:25:22 +0000 Subject: [PATCH 10/10] Show building on hover (pls don't break package.json) --- package-lock.json | 1 + src/data/layers/factory.tsx | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 590be8d..0834b90 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12083,6 +12083,7 @@ }, "vue-panzoom": { "version": "git+ssh://git@github.com/thepaperpilot/vue-panzoom.git#fa3cc91f6842cdfbd1bfb433c75cac01f177fe2d", + "integrity": "sha512-d4URo4PVl2jCFG1WNY+5lDQ8nloOVLf2gFLqE+TLNmF43+F/STgld0A58uf9aq2xbaupVJdZAp/prGtve9ESRQ==", "from": "vue-panzoom@https://github.com/thepaperpilot/vue-panzoom.git", "requires": { "panzoom": "^9.4.1" diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 9c3c51d..a9bcffd 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -254,6 +254,7 @@ const factory = createLayer(id, () => { const graphicContainer = new Graphics(); let spriteContainer = new Container(); const movingBlocks = new Container(); + let hoverSprite = new Sprite(); spriteContainer.zIndex = 0; movingBlocks.zIndex = 1; @@ -591,6 +592,7 @@ const factory = createLayer(id, () => { spriteContainer.x = movingBlocks.x = calculatedX; spriteContainer.y = movingBlocks.y = calculatedY; + graphicContainer.removeChild(hoverSprite); if ( isMouseHoverShown.value && compSelected.value !== "cursor" && @@ -604,6 +606,14 @@ const factory = createLayer(id, () => { blockSize, blockSize ); + const factoryBaseData = FACTORY_COMPONENTS[compSelected.value]; + const sheet = Assets.get(factoryBaseData.imageSrc); + hoverSprite = new Sprite(sheet); + hoverSprite.x = roundDownTo(mouseCoords.x - tx, blockSize) + tx - blockSize / 2; + hoverSprite.y = roundDownTo(mouseCoords.y - ty, blockSize) + ty - blockSize / 2; + hoverSprite.width = blockSize; + hoverSprite.height = blockSize; + graphicContainer.addChild(hoverSprite); } } watchEffect(updateGraphics); @@ -862,7 +872,7 @@ const factory = createLayer(id, () => { onMouseenter={() => onComponentMouseEnter(key)} onMouseleave={() => onComponentMouseLeave()} onClick={() => onCompClick(key)} - > + /> ); })}