From 81145f50c3429ccd70c6fb441a4e35d4c1c80c11 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Tue, 20 Dec 2022 23:39:34 -0600 Subject: [PATCH] Implemented rotation --- .../factory-components/rotate_rectangle.png | Bin 0 -> 3008 bytes src/data/layers/factory.tsx | 160 ++++++++++++------ 2 files changed, 108 insertions(+), 52 deletions(-) create mode 100644 src/data/layers/factory-components/rotate_rectangle.png diff --git a/src/data/layers/factory-components/rotate_rectangle.png b/src/data/layers/factory-components/rotate_rectangle.png new file mode 100644 index 0000000000000000000000000000000000000000..14378a1599da4c1198bb2824e0683c5cb649031c GIT binary patch literal 3008 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 KUF%&!(*F+&Ma1_2 literal 0 HcmV?d00001 diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index ff66c46..8742e69 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -1,20 +1,21 @@ -import { jsx } from "features/feature"; -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 conveyor from "./factory-components/conveyor.png"; -import cursor from "./factory-components/cursor.jpg"; -import square from "./factory-components/square.jpg"; -import { computed, ComputedRef, reactive, Ref, ref, watchEffect } from "vue"; -import { Direction } from "util/common"; +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"; -import { globalBus } from "game/events"; -import { Container } from "@pixi/display"; const id = "factory"; @@ -31,7 +32,7 @@ enum FactoryDirections { type FactoryDirection = FactoryDirections | Direction; function roundDownTo(num: number, multiple: number) { - return Math.floor(num / multiple) * multiple; + return Math.floor((num + multiple / 2) / multiple) * multiple; } function getRelativeCoords(e: MouseEvent) { const rect = (e.target as HTMLElement).getBoundingClientRect(); @@ -54,6 +55,13 @@ function iterateDirection(dir: FactoryDirection, func: (dir: FactoryDirection) = 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: @@ -97,6 +105,16 @@ const factory = createLayer(id, () => { production: {}, productionStock: {} }, + rotate: { + imageSrc: rotate, + name: "Rotate", + description: "Use this to rotate components.", + tick: 0, + consumption: {}, + consumptionStock: {}, + production: {}, + productionStock: {} + }, conveyor: { imageSrc: conveyor, name: "Conveyor", @@ -105,7 +123,15 @@ const factory = createLayer(id, () => { consumption: {}, consumptionStock: {}, production: {}, - productionStock: {} + productionStock: {}, + ports: { + [Direction.Left]: { + type: "input" + }, + [Direction.Right]: { + type: "output" + } + } }, square: { imageSrc: square, @@ -121,14 +147,17 @@ const factory = createLayer(id, () => { consumption: {}, consumptionStock: {} } - } as Record<"cursor" | "conveyor" | "square", FactoryComponentDeclaration>; + } as const; const RESOURCES = { square: square } as Record; type FactoryCompNames = keyof typeof FACTORY_COMPONENTS; type BuildableCompName = Exclude; - interface FactoryComponentProducers extends Record { + interface FactoryComponentBase extends Record { + direction: Direction; + } + interface FactoryComponentProducers extends FactoryComponentBase { type: Exclude; consumptionStock: Record; @@ -136,11 +165,11 @@ const factory = createLayer(id, () => { productionStock: Record; ticksDone: number; } - interface FactoryComponentConveyor extends Record { + interface FactoryComponentConveyor extends FactoryComponentBase { type: "conveyor"; - directionOut: Direction; } - type FactoryComponent = FactoryComponentConveyor | FactoryComponentProducers; + type FactoryComponent = FactoryComponentBase & + (FactoryComponentConveyor | FactoryComponentProducers); interface FactoryComponentDeclaration { tick: number; imageSrc: string; @@ -176,7 +205,6 @@ const factory = createLayer(id, () => { } interface FactoryInternalProducer extends FactoryInternalBase { type: Exclude; - startingFrom: "up" | "right" | "down" | "left"; } type FactoryInternal = FactoryInternalConveyor | FactoryInternalProducer; @@ -243,8 +271,9 @@ const factory = createLayer(id, () => { // 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 + if (Array.isArray(components.value)) { + components.value = {}; + } else { for (const id in components.value) { const data = components.value[id]; console.log(id, data); @@ -253,8 +282,9 @@ const factory = createLayer(id, () => { continue; } const [x, y] = id.split("x").map(p => +p); - addFactoryComp(x, y, data.type); + addFactoryComp(x, y, data); } + } loaded = true; }); @@ -286,8 +316,9 @@ const factory = createLayer(id, () => { compData.packages = compData.packages.concat(compData.nextPackages); compData.nextPackages = []; for (const [key, block] of [...compData.packages].entries()) { - const dirType = getDirection(data.directionOut); - const dirAmt = directionToNum(data.directionOut); + 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]; @@ -375,26 +406,22 @@ const factory = createLayer(id, () => { //debugger; if ( components.value[x + "x" + (y + 1)]?.type === "conveyor" && - (compInternalData[x + "x" + (y + 1)] as FactoryInternalProducer) - .startingFrom === "up" + components.value[x + "x" + (y + 1)].direction === Direction.Up ) { yInc = 1; } else if ( components.value[x + "x" + (y - 1)]?.type === "conveyor" && - (compInternalData[x + "x" + (y - 1)] as FactoryInternalProducer) - .startingFrom === "down" + components.value[x + "x" + (y + 1)].direction === Direction.Down ) { yInc = -1; } else if ( components.value[x + 1 + "x" + y]?.type === "conveyor" && - (compInternalData[x + 1 + "x" + y] as FactoryInternalProducer).startingFrom === - "right" + components.value[x + "x" + (y + 1)].direction === Direction.Right ) { xInc = 1; } else if ( components.value[x - 1 + "x" + y]?.type === "conveyor" && - (compInternalData[x - 1 + "x" + y] as FactoryInternalProducer).startingFrom === - "left" + components.value[x + "x" + (y + 1)].direction === Direction.Left ) { xInc = -1; } @@ -454,11 +481,15 @@ const factory = createLayer(id, () => { taskIsRunning = false; }); - function addFactoryComp(x: number, y: number, type: BuildableCompName) { + function addFactoryComp( + x: number, + y: number, + data: Partial & { type: BuildableCompName } + ) { if (x < -factorySize.width || x >= factorySize.width) return; if (y < -factorySize.height || y >= factorySize.height) return; - const factoryBaseData = FACTORY_COMPONENTS[type]; + const factoryBaseData = FACTORY_COMPONENTS[data.type]; const sheet = Assets.get(factoryBaseData.imageSrc); const sprite = new Sprite(sheet); @@ -466,32 +497,39 @@ const factory = createLayer(id, () => { 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] = { - type, ticksDone: 0, - directionIn: type === "conveyor" ? Direction.Right : undefined, - directionOut: type === "conveyor" ? Direction.Left : undefined, + direction: Direction.Right, consumptionStock: - type === "conveyor" + data.type === "conveyor" ? undefined : Object.fromEntries( Object.keys(factoryBaseData.consumptionStock).map(i => [i, 0]) ), productionStock: - type === "conveyor" + data.type === "conveyor" ? undefined : Object.fromEntries( Object.keys(factoryBaseData.productionStock).map(i => [i, 0]) - ) + ), + ...data } as FactoryComponent; - const isConveyor = type === "conveyor"; + const isConveyor = data.type === "conveyor"; compInternalData[x + "x" + y] = { - type, + type: data.type, packages: isConveyor ? [] : undefined, nextPackages: isConveyor ? [] : undefined, - startingFrom: "left", canProduce: computed(() => { - if (type === "conveyor") return true; + 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; @@ -525,12 +563,16 @@ const factory = createLayer(id, () => { spriteContainer.x = movingBlocks.x = calculatedX; spriteContainer.y = movingBlocks.y = calculatedY; - if (isMouseHoverShown.value && compSelected.value !== "cursor") { + 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, - roundDownTo(mouseCoords.y - ty, blockSize) + ty, + roundDownTo(mouseCoords.x - tx, blockSize) + tx - blockSize / 2, + roundDownTo(mouseCoords.y - ty, blockSize) + ty - blockSize / 2, blockSize, blockSize ); @@ -587,15 +629,29 @@ const factory = createLayer(id, () => { x = roundDownTo(x - tx, blockSize) / blockSize; y = roundDownTo(y - ty, blockSize) / blockSize; if (e.button === 0) { - if (compSelected.value !== "cursor") { - if (components.value[x + "x" + y] === undefined) - addFactoryComp(x, y, compSelected.value); + 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]; - delete compInternalData[x + "x" + y]; spriteContainer.removeChild(data.sprite); } }