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

merge day 20 into day 18 again
This commit is contained in:
unsoftcapped3 2022-12-21 14:51:08 -08:00 committed by GitHub
commit 98afdc7301
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 400 additions and 234 deletions

1
package-lock.json generated
View file

@ -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"

View file

@ -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
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 const;
} 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];
//debugger;
if (data.type === "conveyor") {
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") {
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,82 +374,100 @@ 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]++;
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;
}
}
}
} else {
const data = _data as FactoryComponentProducer;
const compData = _compData as FactoryInternalProducer;
// 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;
//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)
//debugger;
if (xInc === 0 && yInc === 0) continue;
// console.log(x, y);
// debugger;
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
@ -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
if (
res + factoryBaseData.production[key] >
factoryBaseData.productionStock[key]
)
return false;
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;
}
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;
}),
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,54 +755,126 @@ 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>
<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}
{compHovered.value !== undefined ? (
<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" ? (
<>
{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>
<div class="comps">
<div>
{Object.entries(FACTORY_COMPONENTS).map(value => {
const key = value[0] as FactoryCompNames;
const item = value[1];
return (
<img
src={item.imageSrc}
class={{ selected: compSelected.value === key }}
onMouseenter={() => onComponentHover(key)}
onMouseleave={() => onComponentHover("")}
onClick={() => onCompClick(key)}
></img>
);
})}
</div>
) : 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];
return (
<img
src={item.imageSrc}
class={{ selected: compSelected.value === key }}
onMouseenter={() => onComponentMouseEnter(key)}
onMouseleave={() => onComponentMouseLeave()}
onClick={() => onCompClick(key)}
/>
);
})}
</div>
</div>
</div>

View file

@ -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);
}

View file

@ -48,6 +48,7 @@ export type State =
| string
| number
| boolean
| undefined
| DecimalSource
| { [key: string]: State }
| { [key: number]: State };