Automatically generate factory component desciptions

This commit is contained in:
ducdat0507 2022-12-23 18:52:03 +07:00
parent f005b3a39f
commit d1a02cd394
4 changed files with 54 additions and 34 deletions

View file

@ -28,7 +28,7 @@ import {
Modifier Modifier
} from "game/modifiers"; } from "game/modifiers";
import { noPersist, Persistent, persistent, State } from "game/persistence"; import { noPersist, Persistent, persistent, State } from "game/persistence";
import Decimal, { DecimalSource, format, formatWhole } from "util/bignum"; import Decimal, { DecimalSource, format, formatList, formatWhole } from "util/bignum";
import { Direction, WithRequired } from "util/common"; import { Direction, WithRequired } from "util/common";
import { ProcessedComputable } from "util/computed"; import { ProcessedComputable } from "util/computed";
import { render, renderGrid, renderRow, VueFeature } from "util/vue"; import { render, renderGrid, renderRow, VueFeature } from "util/vue";
@ -287,6 +287,21 @@ const factory = createLayer(id, () => {
// ---------------------------------------------- Components // ---------------------------------------------- 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 ";
}
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.";
}
return str;
}
const FACTORY_COMPONENTS = { const FACTORY_COMPONENTS = {
cursor: { cursor: {
imageSrc: _cursor, imageSrc: _cursor,
@ -343,7 +358,7 @@ const factory = createLayer(id, () => {
key: "1", key: "1",
name: "Wood Machine", name: "Wood Machine",
type: "processor", type: "processor",
description: "Produces 1 wood per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wood)),
energyCost: 10, energyCost: 10,
tick: 1, tick: 1,
outputs: { outputs: {
@ -358,7 +373,7 @@ const factory = createLayer(id, () => {
key: "2", key: "2",
name: "Cloth Machine", name: "Cloth Machine",
type: "processor", type: "processor",
description: "Produces 1 cloth per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.cloth)),
energyCost: 10, energyCost: 10,
tick: 1, tick: 1,
outputs: { outputs: {
@ -373,7 +388,7 @@ const factory = createLayer(id, () => {
key: "3", key: "3",
name: "Dye Machine", name: "Dye Machine",
type: "processor", type: "processor",
description: "Produces 1 dye per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.dye)),
energyCost: 10, energyCost: 10,
tick: 1, tick: 1,
outputs: { outputs: {
@ -388,7 +403,7 @@ const factory = createLayer(id, () => {
key: "4", key: "4",
name: "Metal Machine", name: "Metal Machine",
type: "processor", type: "processor",
description: "Produces 1 metal per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.metal)),
energyCost: 10, energyCost: 10,
tick: 1, tick: 1,
outputs: { outputs: {
@ -403,7 +418,7 @@ const factory = createLayer(id, () => {
key: "5", key: "5",
name: "Plastic Machine", name: "Plastic Machine",
type: "processor", type: "processor",
description: "Produces 1 plastic per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.plastic)),
energyCost: 10, energyCost: 10,
tick: 1, tick: 1,
outputs: { outputs: {
@ -417,7 +432,7 @@ const factory = createLayer(id, () => {
key: "shift+1", key: "shift+1",
name: "Sawmill", name: "Sawmill",
type: "processor", type: "processor",
description: "Turns 1 wood into 1 plank per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.plank)),
energyCost: 2, energyCost: 2,
tick: 1, tick: 1,
inputs: { inputs: {
@ -436,7 +451,7 @@ const factory = createLayer(id, () => {
key: "shift+2", key: "shift+2",
name: "Thread Spinner", name: "Thread Spinner",
type: "processor", type: "processor",
description: "Turns 1 cloth into 1 thread per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.thread)),
energyCost: 2, energyCost: 2,
tick: 1, tick: 1,
inputs: { inputs: {
@ -455,13 +470,7 @@ const factory = createLayer(id, () => {
key: "shift+3", key: "shift+3",
name: "Wheel Crafter", name: "Wheel Crafter",
type: "processor", type: "processor",
// TODO construct descriptions dynamically better description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.wheel)),
description: computed(
() =>
`Turns 1 plastic into ${
toys.milestones.milestone5.earned.value ? "2 wheels" : "1 wheel"
} per tick.`
),
energyCost: 2, energyCost: 2,
tick: 1, tick: 1,
inputs: { inputs: {
@ -480,7 +489,7 @@ const factory = createLayer(id, () => {
key: "shift+4", key: "shift+4",
name: "Button Maker", name: "Button Maker",
type: "processor", type: "processor",
description: "Turns 1 plastic into 2 buttons every second.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.button)),
energyCost: 2, energyCost: 2,
tick: 1, tick: 1,
inputs: { inputs: {
@ -500,7 +509,7 @@ const factory = createLayer(id, () => {
key: "shift+5", key: "shift+5",
name: "Cloth Shredder", name: "Cloth Shredder",
type: "processor", type: "processor",
description: "Turns 1 cloth into 1 stuffing every second.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.stuffing)),
energyCost: 2, energyCost: 2,
tick: 1, tick: 1,
inputs: { inputs: {
@ -520,7 +529,7 @@ const factory = createLayer(id, () => {
key: "shift+6", key: "shift+6",
name: "Shovel Maker", name: "Shovel Maker",
type: "processor", type: "processor",
description: "Turns 2 plastic into 1 shovel every second.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.shovel)),
energyCost: 2, energyCost: 2,
tick: 1, tick: 1,
inputs: { inputs: {
@ -540,7 +549,7 @@ const factory = createLayer(id, () => {
key: "shift+7", key: "shift+7",
name: "Bucket Maker", name: "Bucket Maker",
type: "processor", type: "processor",
description: "Turns 3 plastic into 1 bucket every second.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.bucket)),
energyCost: 2, energyCost: 2,
tick: 1, tick: 1,
inputs: { inputs: {
@ -560,7 +569,7 @@ const factory = createLayer(id, () => {
key: "shift+8", key: "shift+8",
name: "Circuit Board Manufacturer", name: "Circuit Board Manufacturer",
type: "processor", type: "processor",
description: "Turns 1 metal and 1 plastic into 1 circuit board every second.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.circuitBoard)),
energyCost: 2, energyCost: 2,
tick: 1, tick: 1,
inputs: { inputs: {
@ -583,7 +592,7 @@ const factory = createLayer(id, () => {
key: "ctrl+1", key: "ctrl+1",
name: "Wooden Block Maker", name: "Wooden Block Maker",
type: "processor", type: "processor",
description: "Turns 1 plank into 1 wooden block per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.blocks)),
energyCost: 20, energyCost: 20,
tick: 1, tick: 1,
inputs: { inputs: {
@ -603,7 +612,7 @@ const factory = createLayer(id, () => {
key: "ctrl+2", key: "ctrl+2",
name: "Clothes Maker", name: "Clothes Maker",
type: "processor", type: "processor",
description: "Turns 2 threads, 3 cloth, and 1 dye into 1 clothes per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.clothes)),
energyCost: 20, energyCost: 20,
tick: 1, tick: 1,
inputs: { inputs: {
@ -629,7 +638,7 @@ const factory = createLayer(id, () => {
key: "ctrl+3", key: "ctrl+3",
name: "Trucks Maker", name: "Trucks Maker",
type: "processor", type: "processor",
description: "Turns 2 metal and 4 wheels into 1 truck per tick.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.trucks)),
energyCost: 20, energyCost: 20,
tick: 1, tick: 1,
inputs: { inputs: {
@ -652,8 +661,7 @@ const factory = createLayer(id, () => {
key: "ctrl+4", key: "ctrl+4",
name: "Teddy Bear Maker", name: "Teddy Bear Maker",
type: "processor", type: "processor",
description: description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.bear)),
"Turns 1 thread, 1 stuffing, 1 dye, and 3 buttons into 1 teddy bear every second.",
energyCost: 20, energyCost: 20,
tick: 1, tick: 1,
inputs: { inputs: {
@ -683,7 +691,7 @@ const factory = createLayer(id, () => {
key: "ctrl+5", key: "ctrl+5",
name: "Shovel and Pail Maker", name: "Shovel and Pail Maker",
type: "processor", type: "processor",
description: "Turns 1 bucket and 1 shovel into 1 shovel and pail every second.", description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.bucketShovel)),
energyCost: 20, energyCost: 20,
tick: 1, tick: 1,
inputs: { inputs: {
@ -707,8 +715,7 @@ const factory = createLayer(id, () => {
key: "ctrl+6", key: "ctrl+6",
name: "Game Console Maker", name: "Game Console Maker",
type: "processor", type: "processor",
description: description: computed(() => generateComponentDescription(FACTORY_COMPONENTS.console)),
"Turns 1 metal, 3 plastic, and 1 circuit board into 1 game console every second.",
energyCost: 20, energyCost: 20,
tick: 1, tick: 1,
inputs: { inputs: {
@ -730,7 +737,7 @@ const factory = createLayer(id, () => {
}, },
visible: main.days[advancedDay - 1].opened visible: main.days[advancedDay - 1].opened
} as FactoryComponentDeclaration } as FactoryComponentDeclaration
} as const; } as Record<string, FactoryComponentDeclaration>;
const RESOURCES = { const RESOURCES = {
// Raw resources // Raw resources
wood: { wood: {
@ -1486,6 +1493,7 @@ const factory = createLayer(id, () => {
const factoryBaseData = FACTORY_COMPONENTS[data.type]; const factoryBaseData = FACTORY_COMPONENTS[data.type];
if (factoryBaseData == undefined) return; if (factoryBaseData == undefined) return;
const sheet = Assets.get(factoryBaseData.imageSrc); const sheet = Assets.get(factoryBaseData.imageSrc);
const sprite = new Sprite(sheet); const sprite = new Sprite(sheet);
watchEffect(() => { watchEffect(() => {
@ -1507,6 +1515,7 @@ const factory = createLayer(id, () => {
) * ) *
Math.PI) / Math.PI) /
2; 2;
if (factoryBaseData.extraImage != null) { if (factoryBaseData.extraImage != null) {
const sheet = Assets.get(factoryBaseData.extraImage); const sheet = Assets.get(factoryBaseData.extraImage);
const extraSprite = new Sprite(sheet); const extraSprite = new Sprite(sheet);

View file

@ -64,7 +64,7 @@
left: 0px; left: 0px;
right: 0px; right: 0px;
position: absolute; position: absolute;
background-color: var(--raised-background); background-color: snow;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
} }
@ -109,7 +109,7 @@
.comp-info { .comp-info {
position: absolute; position: absolute;
top: 0; top: 0;
right: -10px; right: 0px;
padding: 5px 10px; padding: 5px 10px;
width: max-content; width: max-content;
@ -125,13 +125,14 @@
pointer-events: none; pointer-events: none;
transition: transform 0.3s; transition: transform 0.3s;
z-index: -1; z-index: -2;
} }
.comp-list .comp:nth-child(2n - 1) .comp-info { .comp-list .comp:nth-child(2n - 1) .comp-info {
right: -85px; right: -75px;
} }
.comp-list .comp:hover .comp-info { .comp-list .comp:hover .comp-info {
transform: translateX(calc(20px + 100%)); transform: translateX(calc(20px + 100%));
z-index: -1;
} }
.comp-list { .comp-list {
@ -159,6 +160,7 @@
position: absolute; position: absolute;
border-right: solid 2px var(--locked); border-right: solid 2px var(--locked);
background: var(--raised-background); background: var(--raised-background);
box-shadow: 0 2px 10px #0007;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;

View file

@ -14,7 +14,8 @@ export const {
formatSmall, formatSmall,
formatLimit, formatLimit,
invertOOM, invertOOM,
formatGain formatGain,
formatList
} = numberUtils; } = numberUtils;
export type DecimalSource = RawDecimalSource; export type DecimalSource = RawDecimalSource;
@ -34,6 +35,7 @@ declare global {
formatLimit: (list: [DecimalSource, string][], unit: string) => string; formatLimit: (list: [DecimalSource, string][], unit: string) => string;
invertOOM: (x: DecimalSource) => Decimal; invertOOM: (x: DecimalSource) => Decimal;
formatGain: (x: DecimalSource) => string; formatGain: (x: DecimalSource) => string;
formatList: (x: string[]) => string;
} }
} }
window.Decimal = Decimal; window.Decimal = Decimal;
@ -48,5 +50,6 @@ window.formatSmall = formatSmall;
window.formatLimit = formatLimit; window.formatLimit = formatLimit;
window.invertOOM = invertOOM; window.invertOOM = invertOOM;
window.formatGain = formatGain; window.formatGain = formatGain;
window.formatList = formatList;
export default Decimal; export default Decimal;

View file

@ -219,3 +219,9 @@ export function formatGain(gain: DecimalSource) {
1: `+${format(gain)}/s` 1: `+${format(gain)}/s`
}[Decimal.compare(gain, 0)]; }[Decimal.compare(gain, 0)];
} }
export function formatList(list: string[]) {
if (list.length <= 0) return "";
if (list.length == 1) return list[0];
return list.slice(0, -1).join(", ") + " and " + list[list.length - 1];
}