diff --git a/src/data/layers/factory-components/rotate_rectangle.png b/src/data/layers/factory-components/__placeholder.png similarity index 100% rename from src/data/layers/factory-components/rotate_rectangle.png rename to src/data/layers/factory-components/__placeholder.png diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx index 0eeda6f..c3d87f5 100644 --- a/src/data/layers/factory.tsx +++ b/src/data/layers/factory.tsx @@ -33,29 +33,51 @@ 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 "./boxes"; -import coal from "./coal"; -import dyes from "./dyes"; +import _boxes from "../symbols/cardboardBox.png"; +import _wrappingPaper from "../symbols/wrappingPaper.png"; +import _ribbon from "../symbols/ribbons.png"; + 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"; @@ -73,18 +95,11 @@ 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 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 _wrappedBox from "./factory-components/__placeholder.png"; +import _wrappedBoxMaker from "./factory-components/__placeholder.png"; const id = "factory"; @@ -356,7 +371,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _wood, key: "1", - name: "Wood Machine", + name: "Wood Warehouse", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wood)), energyCost: 10, @@ -371,7 +386,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _cloth, key: "2", - name: "Cloth Machine", + name: "Cloth Warehouse", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.cloth)), energyCost: 10, @@ -386,7 +401,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _dye, key: "3", - name: "Dye Machine", + name: "Dye Warehouse", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.dye)), energyCost: 10, @@ -401,7 +416,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _metal, key: "4", - name: "Metal Machine", + name: "Metal Warehouse", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.metal)), energyCost: 10, @@ -416,7 +431,7 @@ const factory = createLayer(id, () => { imageSrc: _shed, extraImage: _plastic, key: "5", - name: "Plastic Machine", + name: "Plastic Warehouse", type: "processor", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.plastic)), energyCost: 10, @@ -427,6 +442,54 @@ 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", @@ -587,6 +650,55 @@ const factory = createLayer(id, () => { }, visible: main.days[advancedDay - 1].opened } as FactoryComponentDeclaration, + bow: { + imageSrc: _bowMaker, + key: "shift+0", + name: "Wrapped Box Manufacturer", + 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: "Wrapped Box Manufacturer", + 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", @@ -736,6 +848,144 @@ 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 = { @@ -760,6 +1010,18 @@ 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", @@ -793,6 +1055,14 @@ 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", @@ -817,6 +1087,31 @@ 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; diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css index 7cedc3a..da6ab57 100644 --- a/src/data/layers/styles/factory.css +++ b/src/data/layers/styles/factory.css @@ -151,8 +151,10 @@ justify-content: space-evenly; align-items: flex-start; align-content: flex-start; + justify-content: flex-start; width: 148px; direction: ltr; + text-align: left; } .comp-list::after { @@ -176,6 +178,11 @@ pointer-events: all; } +.comp-list .comp > img:first-child { + width: 50px; + height: 50px; +} + .comp-list .comp:nth-child(3)::after, .comp-list .comp:nth-child(4)::after { content: ""; @@ -192,7 +199,7 @@ .comp-list .comp:nth-child(4)::after { left: -50px; } -.comp-list .comp img.selected:not(.producedItem) { +.comp-list .comp img.selected, .comp-list .comp img.selected + img { transform: translate(-5px, -5px); filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007); }