diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index e50955f..db463b3 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -33,51 +33,29 @@ import { Direction, WithRequired } from "util/common"; import { ProcessedComputable } from "util/computed"; import { render, renderGrid, renderRow, VueFeature } from "util/vue"; import { computed, ComputedRef, reactive, ref, shallowRef, unref, watchEffect } from "vue"; -import boxes from "./boxes"; -import coal from "./coal"; -import dyes from "./dyes"; -import Factory from "./Factory.vue"; -import metal from "./metal"; -import oil from "./oil"; -import paper from "./paper"; -import plastic from "./plastic"; -import "./styles/factory.css"; -import Toy from "./Toy.vue"; -import toys from "./toys"; -import trees from "./trees"; -import workshop from "./workshop"; - import _cloth from "../symbols/cloth.png"; import _dye from "../symbols/dyes.png"; import _metal from "../symbols/metal.png"; import _plastic from "../symbols/plastic.png"; -import _boxes from "../symbols/cardboardBox.png"; -import _wrappingPaper from "../symbols/wrappingPaper.png"; -import _ribbon from "../symbols/ribbons.png"; - +import boxes from "./boxes"; +import coal from "./coal"; +import dyes from "./dyes"; import _bear from "./factory-components/bear.svg"; import _bearMaker from "./factory-components/bearmaker.svg"; -import _bearWrapper from "./factory-components/__placeholder.png"; import _block from "./factory-components/block.svg"; import _blockMaker from "./factory-components/blockmaker.svg"; -import _blockWrapper from "./factory-components/__placeholder.png"; -import _bow from "./factory-components/__placeholder.png"; -import _bowMaker from "./factory-components/__placeholder.png"; import _bucket from "./factory-components/bucket.svg"; import _bucketMaker from "./factory-components/bucketmaker.svg"; import _bucketShovel from "./factory-components/bucketshovel.svg"; import _bucketShovelMaker from "./factory-components/bucketshovelmaker.svg"; -import _bucketShovelWrapper from "./factory-components/__placeholder.png"; import _button from "./factory-components/button.svg"; import _buttonMaker from "./factory-components/buttonmaker.svg"; import _circuitBoard from "./factory-components/circuit.svg"; import _circuitBoardMaker from "./factory-components/circuitmaker.svg"; import _clothes from "./factory-components/clothes.svg"; import _clothesMaker from "./factory-components/clothesmaker.svg"; -import _clothesWrapper from "./factory-components/__placeholder.png"; import _console from "./factory-components/console.svg"; import _consoleMaker from "./factory-components/consolemaker.svg"; -import _consoleWrapper from "./factory-components/__placeholder.png"; import _conveyor from "./factory-components/conveyor.png"; import _cursor from "./factory-components/cursor.svg"; import _delete from "./factory-components/delete.svg"; @@ -95,11 +73,18 @@ import _thread from "./factory-components/thread.svg"; import _threadMaker from "./factory-components/threadmaker.svg"; import _truck from "./factory-components/truck.svg"; import _truckMaker from "./factory-components/truckmaker.svg"; -import _truckWrapper from "./factory-components/__placeholder.png"; import _wheel from "./factory-components/wheel.svg"; import _wheelMaker from "./factory-components/wheelmaker.svg"; -import _wrappedBox from "./factory-components/__placeholder.png"; -import _wrappedBoxMaker from "./factory-components/__placeholder.png"; +import Factory from "./Factory.vue"; +import metal from "./metal"; +import oil from "./oil"; +import paper from "./paper"; +import plastic from "./plastic"; +import "./styles/factory.css"; +import Toy from "./Toy.vue"; +import toys from "./toys"; +import trees from "./trees"; +import workshop from "./workshop"; const id = "factory"; @@ -221,7 +206,10 @@ const factory = createLayer(id, () => { createMultiplicativeModifier(() => ({ multiplier: Decimal.lt(energyEfficiency.value, 1) ? 1 - : Decimal.sub(2, Decimal.div(energyConsumption.value, Decimal.max(computedEnergy.value, 1))), + : Decimal.sub( + 2, + Decimal.div(energyConsumption.value, Decimal.max(computedEnergy.value, 1)) + ), description: "Brighter work rooms", enabled: () => upgrades[2][0].bought.value })), @@ -302,17 +290,29 @@ const factory = createLayer(id, () => { // ---------------------------------------------- Components - function generateComponentDescription(declaration: FactoryComponentDeclaration) { - let str = declaration.inputs === undefined ? "Produces " : "Turns "; if (declaration.inputs !== undefined) { - str += formatList(Object.entries(declaration.inputs) - .map(x => formatWhole(unref(x[1].amount)) + " " + RESOURCES[x[0] as ResourceNames].name)) + " into "; + str += + formatList( + Object.entries(declaration.inputs).map( + x => + formatWhole(unref(x[1].amount)) + + " " + + RESOURCES[x[0] as ResourceNames].name + ) + ) + " into "; } if (declaration.outputs !== undefined) { - str += formatList(Object.entries(declaration.outputs) - .map(x => formatWhole(unref(x[1].amount)) + " " + RESOURCES[x[0] as ResourceNames].name)) + " per tick."; + str += + formatList( + Object.entries(declaration.outputs).map( + x => + formatWhole(unref(x[1].amount)) + + " " + + RESOURCES[x[0] as ResourceNames].name + ) + ) + " per tick."; } return str; } @@ -371,7 +371,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _wood, key: "1", - name: "Wood Warehouse", + name: "Wood Machine", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wood)), energyCost: 10, @@ -386,7 +386,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _cloth, key: "2", - name: "Cloth Warehouse", + name: "Cloth Machine", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.cloth)), energyCost: 10, @@ -401,7 +401,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _dye, key: "3", - name: "Dye Warehouse", + name: "Dye Machine", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.dye)), energyCost: 10, @@ -416,7 +416,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _metal, key: "4", - name: "Metal Warehouse", + name: "Metal Machine", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.metal)), energyCost: 10, @@ -431,7 +431,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _plastic, key: "5", - name: "Plastic Warehouse", + name: "Plastic Machine", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.plastic)), energyCost: 10, @@ -442,54 +442,6 @@ const factory = createLayer(id, () => { } } } as FactoryComponentDeclaration, - boxes: { - imageSrc: _shed, - extraImage: _boxes, - key: "6", - name: "Box Warehouse", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.boxes)), - energyCost: 10, - tick: 1, - outputs: { - boxes: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, - wrappingPaper: { - imageSrc: _shed, - extraImage: _wrappingPaper, - key: "7", - name: "Wrapping Paper Warehouse", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wrappingPaper)), - energyCost: 10, - tick: 1, - outputs: { - wrappingPaper: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, - ribbon: { - imageSrc: _shed, - extraImage: _ribbon, - key: "8", - name: "Ribbon Warehouse", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.ribbon)), - energyCost: 10, - tick: 1, - outputs: { - ribbon: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, plank: { imageSrc: _plankMaker, key: "shift+1", @@ -632,7 +584,9 @@ const factory = createLayer(id, () => { key: "shift+8", name: "Circuit Board Manufacturer", type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.circuitBoard)), + description: computed(() => + generateComponentDescription(FACTORY_COMPONENTS.circuitBoard) + ), energyCost: 2, tick: 1, inputs: { @@ -650,55 +604,6 @@ const factory = createLayer(id, () => { }, visible: main.days[advancedDay - 1].opened } as FactoryComponentDeclaration, - bow: { - imageSrc: _bowMaker, - key: "shift+9", - name: "Bow Maker", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.bow)), - energyCost: 2, - tick: 1, - inputs: { - ribbon: { - amount: 1 - } - }, - outputs: { - bow: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, - wrappedBox: { - imageSrc: _wrappedBoxMaker, - key: "shift+0", - name: "Box Wrapper", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wrappedBox)), - energyCost: 2, - tick: 1, - inputs: { - boxes: { - amount: 1 - }, - wrappingPaper: { - amount: 1 - }, - bow: { - amount: 1 - }, - ribbon: { - amount: 1 - } - }, - outputs: { - wrappedBox: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, blocks: { imageSrc: _blockMaker, key: "ctrl+1", @@ -803,7 +708,9 @@ const factory = createLayer(id, () => { key: "ctrl+5", name: "Shovel and Pail Maker", type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.bucketShovel)), + description: computed(() => + generateComponentDescription(FACTORY_COMPONENTS.bucketShovel) + ), energyCost: 20, tick: 1, inputs: { @@ -848,144 +755,6 @@ const factory = createLayer(id, () => { } }, visible: main.days[advancedDay - 1].opened - } as FactoryComponentDeclaration, - wrappedBlocks: { - imageSrc: _blockWrapper, - key: "ctrl+shift+1", - name: "Wooden Block Wrapper", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wrappedBlocks)), - energyCost: 20, - tick: 1, - inputs: { - block: { - amount: 1 - }, - wrappedBox: { - amount: 1 - } - }, - outputs: { - wrappedBlock: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, - wrappedClothes: { - imageSrc: _clothesWrapper, - key: "ctrl+shift+2", - name: "Clothes Wrapper", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wrappedClothes)), - energyCost: 20, - tick: 1, - inputs: { - clothes: { - amount: 1 - }, - wrappedBox: { - amount: 1 - } - }, - outputs: { - wrappedClothes: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, - wrappedTrucks: { - imageSrc: _truckWrapper, - key: "ctrl+shift+3", - name: "Trucks Wrapper", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wrappedTrucks)), - energyCost: 20, - tick: 1, - inputs: { - trucks: { - amount: 1 - }, - wrappedBox: { - amount: 1 - } - }, - outputs: { - wrappedTrucks: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, - wrappedBear: { - imageSrc: _bearWrapper, - key: "ctrl+shift+4", - name: "Teddy Bear Wrapper", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wrappedBear)), - energyCost: 20, - tick: 1, - inputs: { - bear: { - amount: 1 - }, - wrappedBox: { - amount: 1 - } - }, - outputs: { - wrappedBear: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, - wrappedBucketShovel: { - imageSrc: _bucketShovelWrapper, - key: "ctrl+shift+5", - name: "Shovel and Pail Wrapper", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wrappedBucketShovel)), - energyCost: 20, - tick: 1, - inputs: { - shovelBucket: { - amount: 1 - }, - wrappedBox: { - amount: 1 - } - }, - outputs: { - wrappedShovelBucket: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened - } as FactoryComponentDeclaration, - wrappedConsole: { - imageSrc: _consoleWrapper, - key: "ctrl+shift+6", - name: "Game Console Wrapper", - type: "processor", - description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wrappedConsole)), - energyCost: 20, - tick: 1, - inputs: { - console: { - amount: 1 - }, - wrappedBox: { - amount: 1 - } - }, - outputs: { - wrappedConsole: { - amount: 1 - } - }, - visible: main.days[presentsDay - 1].opened } as FactoryComponentDeclaration } as Record; const RESOURCES = { @@ -1010,18 +779,6 @@ const factory = createLayer(id, () => { name: "Metal", imageSrc: _metal }, - boxes: { - name: "Boxes", - imageSrc: _boxes - }, - wrappingPaper: { - name: "Wrapping Paper", - imageSrc: _wrappingPaper - }, - ribbon: { - name: "Ribbon", - imageSrc: _ribbon - }, // Processed resources plank: { name: "Planks", @@ -1055,14 +812,6 @@ const factory = createLayer(id, () => { name: "Circuit Board", imageSrc: _circuitBoard }, - bow: { - name: "Bow", - imageSrc: _bow - }, - wrappedBox: { - name: "Wrapped Box", - imageSrc: _wrappedBox - }, // Toys block: { name: "Wooden Blocks", @@ -1087,31 +836,6 @@ const factory = createLayer(id, () => { console: { name: "Game Console", imageSrc: _console - }, - // Wrapped toys - wrappedBlock: { - name: "Wrapped Wooden Blocks", - imageSrc: _block - }, - wrappedClothes: { - name: "Wrapped Clothes", - imageSrc: _clothes - }, - wrappedTrucks: { - name: "Wrapped Trucks", - imageSrc: _truck - }, - wrappedBear: { - name: "Wrapped Teddy Bear", - imageSrc: _bear - }, - wrappedShovelBucket: { - name: "Wrapped Shovel and Pail", - imageSrc: _bucketShovel - }, - wrappedConsole: { - name: "Wrapped Game Console", - imageSrc: _console } } as const; @@ -1333,7 +1057,7 @@ const factory = createLayer(id, () => { showAmount: false }, style: "width: 200px", - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })) as GenericBuyable; const oilFuel = createBuyable(() => ({ resource: oil.oil, @@ -1347,7 +1071,7 @@ const factory = createLayer(id, () => { showAmount: false }, style: "width: 200px", - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })) as GenericBuyable; const carryToys = createBuyable(() => ({ resource: boxes.boxes, @@ -1363,7 +1087,7 @@ const factory = createLayer(id, () => { showAmount: false }, style: "width: 200px", - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })) as GenericBuyable; const factoryBuyables = { expandFactory, oilFuel, carryToys }; const upgrades = [ @@ -1376,7 +1100,7 @@ const factory = createLayer(id, () => { description: "Double sawmill consumption and production and metal supplier efficiency" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: paper.paper, @@ -1385,7 +1109,7 @@ const factory = createLayer(id, () => { title: "News Ticker", description: "Paper boosts tick speed" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: toys.trucks, @@ -1394,7 +1118,7 @@ const factory = createLayer(id, () => { title: "Haul wood in trucks", description: "Trucks multiply wood gain" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: metal.metal, @@ -1403,7 +1127,7 @@ const factory = createLayer(id, () => { title: "Diamond-tipped drills", description: "Drill power ^1.2" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })) ], [ @@ -1414,7 +1138,7 @@ const factory = createLayer(id, () => { title: "Larger wood pieces", description: "Wooden block producers produce 3x as much" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: dyes.dyes.red.amount, @@ -1423,7 +1147,7 @@ const factory = createLayer(id, () => { title: "Colorful clothes", description: "Dye producers produce 4x as much" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: plastic.plastic, @@ -1432,7 +1156,7 @@ const factory = createLayer(id, () => { title: "Improved plastic producers", description: "Plastic producers produce 4x as much" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: oil.oil, @@ -1441,7 +1165,7 @@ const factory = createLayer(id, () => { title: "Capitalism", description: "Console production is tripled" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })) ], [ @@ -1452,7 +1176,7 @@ const factory = createLayer(id, () => { title: "Brighter work rooms", description: "Unused electricity makes ticks faster" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: dyes.dyes.blue.amount, @@ -1461,7 +1185,7 @@ const factory = createLayer(id, () => { title: "Colorful teddy bears", description: "Teddy bears produce 2x as much" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: dyes.dyes.black.amount, @@ -1470,7 +1194,7 @@ const factory = createLayer(id, () => { title: "New Colors", description: "Unlock white dye" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })), createUpgrade(() => ({ resource: boxes.boxes, @@ -1479,7 +1203,7 @@ const factory = createLayer(id, () => { title: "Carry ticks in boxes", description: "Tick speed x1.5" }, - visible: () => showIf(main.days[advancedDay - 1].opened.value) + visibility: () => showIf(main.days[advancedDay - 1].opened.value) })) ] ]; @@ -1515,6 +1239,9 @@ const factory = createLayer(id, () => { let loaded = false; globalBus.on("onLoad", async () => { + if (loaded) { + return; + } loaded = false; spriteContainer.destroy({ @@ -1843,7 +1570,11 @@ const factory = createLayer(id, () => { lastProdTimes: !isConveyor ? (reactive([]) as number[]) : undefined, lastFactoryProd: !isConveyor ? Date.now() - - 1000 * Decimal.div(data.ticksDone ?? 0, computedActualTickRate.value).toNumber() + 1000 * + Decimal.div( + (data as FactoryComponentProcessor).ticksDone ?? 0, + computedActualTickRate.value + ).toNumber() : undefined, average: !isConveyor ? computed(() => { @@ -1867,7 +1598,7 @@ const factory = createLayer(id, () => { const compData = components.value[x + "x" + y] as FactoryComponentProcessor; if (factoryBaseData.inputs !== undefined) { for (const [res, val] of Object.entries(factoryBaseData.inputs)) - if ((compData.inputStock?.[res as ResourceNames] ?? 0) < val.amount) + if ((compData.inputStock?.[res as ResourceNames] ?? 0) < unref(val.amount)) return false; } if (factoryBaseData.outputs !== undefined) { @@ -2110,6 +1841,9 @@ const factory = createLayer(id, () => { {Object.entries(FACTORY_COMPONENTS).map(value => { const key = value[0] as FactoryCompNames; const item = value[1]; + if (unref(item.visible) === false) { + return null; + } return (
{ compInternalHovered.value.type !== "conveyor" ? ( <> {showStockAmount( - compHovered.value.inputStock, + (compHovered.value as FactoryComponentProcessor).inputStock, FACTORY_COMPONENTS[compHovered.value.type].inputs, "Inputs:" )} {showStockAmount( - compHovered.value.outputStock, + (compHovered.value as FactoryComponentProcessor).outputStock, FACTORY_COMPONENTS[compHovered.value.type].outputs, "Outputs:", false )}
Efficency:{" "} - {compInternalHovered.value.average.value !== undefined ? ( + {(compInternalHovered.value as FactoryInternalProcessor).average.value !== + undefined ? ( 1 + (compInternalHovered.value as FactoryInternalProcessor) + .average.value! > 1 ? "purple" - : compInternalHovered.value.average.value >= 0.9 + : ( + compInternalHovered.value as FactoryInternalProcessor + ).average.value! >= 0.9 ? "green" - : compInternalHovered.value.average.value >= 0.5 + : ( + compInternalHovered.value as FactoryInternalProcessor + ).average.value! >= 0.5 ? "yellow" : "red" }} > - {formatWhole(compInternalHovered.value.average.value * 100)} + {formatWhole( + (compInternalHovered.value as FactoryInternalProcessor).average + .value! * 100 + )} ) : ( "--" @@ -2476,4 +2219,4 @@ const factory = createLayer(id, () => { )) }; }); -export default factory; +export default factory; \ No newline at end of file