mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2024-11-22 00:21:34 +00:00
Merge pull request #6 from thepaperpilot/day-20-factory
merge day 20 into day 18 again
This commit is contained in:
unsoftcapped3
GitHub
commit
98afdc7301
4 changed files with 400 additions and 234 deletions
1
package-lock.json
generated
1
package-lock.json
generated
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { globalBus } from "game/events";
|
|||
import { createLayer } from "game/layers";
|
||||
import { Persistent, persistent, State } from "game/persistence";
|
||||
import player from "game/player";
|
||||
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";
|
||||
|
|
@ -25,12 +26,6 @@ const day = 18;
|
|||
// 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;
|
||||
}
|
||||
|
|
@ -41,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);
|
||||
|
|
@ -94,36 +75,26 @@ const factory = createLayer(id, () => {
|
|||
const name = "The Factory";
|
||||
const color = "grey";
|
||||
|
||||
// ---------------------------------------------- Components
|
||||
|
||||
const FACTORY_COMPONENTS = {
|
||||
cursor: {
|
||||
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.",
|
||||
description: "Moves items at 1 block per second.",
|
||||
tick: 1,
|
||||
consumption: {},
|
||||
consumptionStock: {},
|
||||
production: {},
|
||||
productionStock: {},
|
||||
ports: {
|
||||
[Direction.Left]: {
|
||||
type: "input"
|
||||
|
|
@ -135,41 +106,73 @@ const factory = createLayer(id, () => {
|
|||
},
|
||||
square: {
|
||||
imageSrc: square,
|
||||
name: "???",
|
||||
description: "Produces 1 square every 1 tick.",
|
||||
name: "Producer",
|
||||
description: "Produces 1 square every 1 second.",
|
||||
tick: 1,
|
||||
production: {
|
||||
square: 1
|
||||
},
|
||||
productionStock: {
|
||||
square: Infinity
|
||||
},
|
||||
consumption: {},
|
||||
consumptionStock: {}
|
||||
outputs: {
|
||||
square: {
|
||||
amount: 1
|
||||
}
|
||||
} as const;
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
outputs: {
|
||||
square: {
|
||||
amount: 1,
|
||||
capacity: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Record<FactoryCompNames, FactoryComponentDeclaration>;
|
||||
const RESOURCES = {
|
||||
square: square
|
||||
} as Record<string, string>;
|
||||
|
||||
type FactoryCompNames = keyof typeof FACTORY_COMPONENTS;
|
||||
type FactoryCompNames = "cursor" | "rotate" | "conveyor" | "square" | "receiver" | "shrinker";
|
||||
type BuildableCompName = Exclude<FactoryCompNames, "cursor">;
|
||||
|
||||
interface FactoryComponentBase extends Record<string, State> {
|
||||
direction: Direction;
|
||||
}
|
||||
interface FactoryComponentProducers extends FactoryComponentBase {
|
||||
|
||||
interface FactoryComponentProducer extends FactoryComponentBase {
|
||||
type: Exclude<BuildableCompName, "conveyor">;
|
||||
consumptionStock: Record<string, number>;
|
||||
inputStock?: Record<string, number>;
|
||||
|
||||
// current production stock
|
||||
productionStock: Record<string, number>;
|
||||
outputStock?: Record<string, number>;
|
||||
ticksDone: number;
|
||||
}
|
||||
|
||||
interface FactoryComponentConveyor extends FactoryComponentBase {
|
||||
type: "conveyor";
|
||||
}
|
||||
|
||||
type FactoryComponent = FactoryComponentBase &
|
||||
(FactoryComponentConveyor | FactoryComponentProducers);
|
||||
(FactoryComponentConveyor | FactoryComponentProducer);
|
||||
|
||||
interface FactoryComponentDeclaration {
|
||||
tick: number;
|
||||
imageSrc: string;
|
||||
|
|
@ -177,13 +180,21 @@ const factory = createLayer(id, () => {
|
|||
description: string;
|
||||
|
||||
/** amount it consumes */
|
||||
consumption: Record<string, number>;
|
||||
/** maximum stock of consumption */
|
||||
consumptionStock: Record<string, number>;
|
||||
inputs?: Record<
|
||||
string,
|
||||
{
|
||||
amount: number;
|
||||
capacity?: number;
|
||||
}
|
||||
>;
|
||||
/** amount it produces */
|
||||
production: Record<string, number>;
|
||||
/** maximum stock of production */
|
||||
productionStock: Record<string, number>;
|
||||
outputs?: Record<
|
||||
string,
|
||||
{
|
||||
amount: number;
|
||||
capacity?: number;
|
||||
}
|
||||
>;
|
||||
|
||||
/** on produce, do something */
|
||||
onProduce?: (times: number) => void;
|
||||
|
|
@ -214,8 +225,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
|
||||
|
|
@ -228,7 +239,10 @@ const factory = createLayer(id, () => {
|
|||
y: 0
|
||||
});
|
||||
const isMouseHoverShown = ref(false);
|
||||
|
||||
const isComponentHover = ref(false);
|
||||
const whatIsHovered = ref<FactoryCompNames | "">("");
|
||||
|
||||
const compSelected = ref<FactoryCompNames>("cursor");
|
||||
const components: Persistent<{ [key: string]: FactoryComponent }> = persistent({});
|
||||
const compInternalData: Record<string, FactoryInternal> = {};
|
||||
|
|
@ -240,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;
|
||||
|
|
@ -260,8 +275,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
|
||||
);
|
||||
|
|
@ -276,7 +291,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;
|
||||
|
|
@ -291,36 +305,33 @@ 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", async diff => {
|
||||
if (taskIsRunning || !loaded) return;
|
||||
taskIsRunning = true;
|
||||
globalBus.on("update", diff => {
|
||||
if (!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);
|
||||
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
|
||||
//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);
|
||||
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];
|
||||
|
||||
|
|
@ -328,30 +339,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;
|
||||
compBehind.nextPackages.push(block);
|
||||
compData.packages.splice(key, 1);
|
||||
block.turbulance = Math.random() * 0.4 - 0.2;
|
||||
(compBehind as FactoryInternalConveyor).nextPackages.push(block);
|
||||
} else {
|
||||
// send it to the factory
|
||||
// destory its sprite and data
|
||||
(storedComp as FactoryComponentProducers).consumptionStock[
|
||||
block.type
|
||||
]++;
|
||||
const factoryData = storedComp as FactoryComponentProducer;
|
||||
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)];
|
||||
|
||||
|
|
@ -359,84 +374,102 @@ 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;
|
||||
compBehind.nextPackages.push(block);
|
||||
compData.packages.splice(key, 1);
|
||||
block.turbulance = Math.random() * 0.4 - 0.2;
|
||||
(compBehind as FactoryInternalConveyor).nextPackages.push(block);
|
||||
} 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);
|
||||
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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const data = _data as FactoryComponentProducer;
|
||||
const compData = _compData as FactoryInternalProducer;
|
||||
// factory part
|
||||
// PRODUCTION
|
||||
if (data.ticksDone >= factoryData.tick) {
|
||||
if (!compData.canProduce.value) continue;
|
||||
if (compData.canProduce.value) {
|
||||
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 (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;
|
||||
}
|
||||
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;
|
||||
//debugger;
|
||||
const incs: [number, number][] = [];
|
||||
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 (
|
||||
incs.push([0, 1]);
|
||||
}
|
||||
if (
|
||||
components.value[x + "x" + (y - 1)]?.type === "conveyor" &&
|
||||
components.value[x + "x" + (y - 1)].direction === Direction.Up
|
||||
) {
|
||||
incs.push([0, -1]);
|
||||
}
|
||||
if (
|
||||
components.value[x + 1 + "x" + y]?.type === "conveyor" &&
|
||||
components.value[x + "x" + (y + 1)].direction === Direction.Right
|
||||
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 + "x" + (y + 1)].direction === Direction.Left
|
||||
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)
|
||||
// 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 (data.outputStock !== undefined) {
|
||||
for (const [name, amt] of Object.entries(data.outputStock)) {
|
||||
if (amt >= 1) {
|
||||
itemToMove = [name, amt];
|
||||
data.productionStock[name]--;
|
||||
data.outputStock[name]--;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// there is nothing to move
|
||||
if (itemToMove === undefined) continue;
|
||||
const texture = Assets.get(RESOURCES[itemToMove[0]]);
|
||||
|
|
@ -455,20 +488,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]
|
||||
};
|
||||
|
||||
|
|
@ -478,7 +508,6 @@ const factory = createLayer(id, () => {
|
|||
movingBlocks.addChild(sprite);
|
||||
}
|
||||
}
|
||||
taskIsRunning = false;
|
||||
});
|
||||
|
||||
function addFactoryComp(
|
||||
|
|
@ -509,17 +538,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;
|
||||
|
|
@ -532,23 +561,23 @@ 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;
|
||||
for (const [key, res] of Object.entries(compData.productionStock)) {
|
||||
// if the current stock + production is more than you can handle
|
||||
const compData = components.value[x + "x" + y] as FactoryComponentProducer;
|
||||
if (factoryBaseData.inputs !== undefined) {
|
||||
for (const [res, val] of Object.entries(factoryBaseData.inputs))
|
||||
if ((compData.inputStock?.[res] ?? 0) < val.amount) return false;
|
||||
}
|
||||
if (factoryBaseData.outputs !== undefined) {
|
||||
for (const [res, val] of Object.entries(factoryBaseData.outputs))
|
||||
if (
|
||||
res + factoryBaseData.production[key] >
|
||||
factoryBaseData.productionStock[key]
|
||||
(compData.outputStock?.[res] ?? 0) + val.amount >
|
||||
(val.capacity ?? Infinity)
|
||||
)
|
||||
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;
|
||||
} as FactoryInternalProducer;
|
||||
spriteContainer.addChild(sprite);
|
||||
}
|
||||
|
||||
|
|
@ -563,19 +592,28 @@ const factory = createLayer(id, () => {
|
|||
spriteContainer.x = movingBlocks.x = calculatedX;
|
||||
spriteContainer.y = movingBlocks.y = calculatedY;
|
||||
|
||||
graphicContainer.removeChild(hoverSprite);
|
||||
if (
|
||||
isMouseHoverShown.value &&
|
||||
compSelected.value !== "cursor" &&
|
||||
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,
|
||||
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);
|
||||
|
|
@ -600,8 +638,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;
|
||||
|
|
@ -651,7 +695,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);
|
||||
}
|
||||
}
|
||||
|
|
@ -664,17 +717,23 @@ const factory = createLayer(id, () => {
|
|||
}
|
||||
function onFactoryMouseLeave() {
|
||||
isMouseHoverShown.value = false;
|
||||
compHovered.value = undefined;
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
function onComponentHover(name: FactoryCompNames | "") {
|
||||
whatIsHovered.value = name;
|
||||
}
|
||||
function onCompClick(name: FactoryCompNames) {
|
||||
compSelected.value = name;
|
||||
}
|
||||
return {
|
||||
name,
|
||||
day,
|
||||
|
|
@ -696,40 +755,113 @@ const factory = createLayer(id, () => {
|
|||
onPointerleave={onFactoryMouseLeave}
|
||||
onContextmenu={(e: MouseEvent) => e.preventDefault()}
|
||||
/>
|
||||
<div class="info-container">
|
||||
|
||||
{compHovered.value !== undefined ? (
|
||||
<>
|
||||
<b>{FACTORY_COMPONENTS[compHovered.value.type].name}</b>
|
||||
<div
|
||||
class="info-container"
|
||||
id="factory-info"
|
||||
style={{
|
||||
...(mouseCoords.x +
|
||||
(document.getElementById("factory-info")?.clientWidth ?? 0) >
|
||||
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" })
|
||||
}}
|
||||
>
|
||||
<h3>{FACTORY_COMPONENTS[compHovered.value.type].name}</h3>
|
||||
<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">
|
||||
{compHovered.value.inputStock !== undefined ? (
|
||||
<>
|
||||
<br />
|
||||
<h5>Inputs:</h5>
|
||||
{Object.entries(compHovered.value.inputStock).map(x => (
|
||||
<div>
|
||||
{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
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
) : undefined}
|
||||
{compHovered.value.outputStock !== undefined ? (
|
||||
<>
|
||||
<br />
|
||||
<h5>Outputs:</h5>
|
||||
{Object.entries(compHovered.value.outputStock).map(x => (
|
||||
<div>
|
||||
{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
|
||||
)
|
||||
: ""}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
) : undefined}
|
||||
</>
|
||||
) : undefined}
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
<div class="factory-container">
|
||||
<div
|
||||
class={{
|
||||
"comp-info": true,
|
||||
active: isComponentHover.value
|
||||
}}
|
||||
style={{
|
||||
top:
|
||||
Math.max(
|
||||
Object.keys(FACTORY_COMPONENTS).indexOf(whatIsHovered.value),
|
||||
0
|
||||
) *
|
||||
50 +
|
||||
10 +
|
||||
"px"
|
||||
}}
|
||||
>
|
||||
{whatIsHovered.value === "" ? undefined : (
|
||||
<>
|
||||
<h3>{FACTORY_COMPONENTS[whatIsHovered.value].name}</h3>
|
||||
<br />
|
||||
{FACTORY_COMPONENTS[whatIsHovered.value].description}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div class="comp-list">
|
||||
{Object.entries(FACTORY_COMPONENTS).map(value => {
|
||||
const key = value[0] as FactoryCompNames;
|
||||
const item = value[1];
|
||||
|
|
@ -737,16 +869,15 @@ const factory = createLayer(id, () => {
|
|||
<img
|
||||
src={item.imageSrc}
|
||||
class={{ selected: compSelected.value === key }}
|
||||
onMouseenter={() => onComponentHover(key)}
|
||||
onMouseleave={() => onComponentHover("")}
|
||||
onMouseenter={() => onComponentMouseEnter(key)}
|
||||
onMouseleave={() => onComponentMouseLeave()}
|
||||
onClick={() => onCompClick(key)}
|
||||
></img>
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,38 +17,71 @@
|
|||
|
||||
.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;
|
||||
width: max-content;
|
||||
max-width: 300px;
|
||||
|
||||
margin: 20px 0 10px 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);
|
||||
}
|
||||
|
|
@ -48,6 +48,7 @@ export type State =
|
|||
| string
|
||||
| number
|
||||
| boolean
|
||||
| undefined
|
||||
| DecimalSource
|
||||
| { [key: string]: State }
|
||||
| { [key: number]: State };
|
||||
|
|
|
|||
Loading…
Reference in a new issue