;
46 | };
47 |
48 | export const unithealth: Omit = {
49 | title: "Unit Healths",
50 | icon: ["unit", "small-biter"],
51 | render: ToolRender,
52 | };
53 |
--------------------------------------------------------------------------------
/packages/ui/src/parts/factorio-image.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useMemo } from "react";
2 | import { useFactorioData, useFactorioDataPath } from "./data-provider";
3 |
4 | export const FactorioImage: FC<{
5 | image: string;
6 | spritesheet?: string;
7 | width?: number;
8 | }> = ({ image, width, spritesheet }) => {
9 | const dataPath = useFactorioDataPath();
10 | const data = useFactorioData();
11 |
12 | let resolvedSpritesheet = useMemo(() => {
13 | if (spritesheet && data.spriteMap[spritesheet]?.[`${image}.png`])
14 | return spritesheet;
15 | return Object.entries(data.spriteMap).find(
16 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
17 | ([_, images]) => `${image}.png` in images,
18 | )?.[0];
19 | }, [data.spriteMap, image, spritesheet]);
20 |
21 | if (
22 | !resolvedSpritesheet ||
23 | !data.spriteMap[resolvedSpritesheet][`${image}.png`]
24 | ) {
25 | resolvedSpritesheet = "quality";
26 | // eslint-disable-next-line no-param-reassign
27 | image = "quality-unknown";
28 | }
29 |
30 | const imageData = data.spriteMap[resolvedSpritesheet][`${image}.png`];
31 | const spritesheetSize = data.spriteMapSizes[resolvedSpritesheet];
32 |
33 | const url = `${dataPath}${dataPath === "/" ? "" : "/"}${resolvedSpritesheet}.png`;
34 | const scale = !width ? 1 : width / imageData.width;
35 |
36 | return (
37 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Factoriopedia
2 |
3 | Visit now at [factoriopedia.lukasbach.com](https://factoriopedia.lukasbach.com/)!
4 |
5 | This is a recreation of the Factoriopedia utility in the PC Game Factorio
6 | Space Age, as well as several other tools that are included that may be helpful
7 | to other players. It also includes a full list of all technologies in the game.
8 |
9 | The app is built on a data dump of the game, created by the Factorio binary.
10 |
11 | This repo also contains the tooling to create the data dump, as well as the
12 | UI components used for Factoriopedia as reusable React components that can be
13 | used by the community for other projects. You can find out more about that
14 | [here](https://factoriopedia.lukasbach.com/storybook/?path=/docs/documentation-introduction--docs).
15 |
16 | ## App Screenshots
17 |
18 | 
19 |
20 | 
21 |
22 | 
23 |
24 | 
25 |
26 | ## UI Components Screenshots
27 |
28 | 
29 |
30 | 
31 |
32 | ## Contributing
33 |
34 | Install volta, then call `yarn` to install all dependencies.
35 | Use `yarn build` to build all packages, and `yarn dev` to start
36 | the local dev server and storybook.
37 |
38 | You will need the Factorio data included in the repo for the app
39 | to run, which is not included in the repo. You can
40 |
41 | - Run a JSON data + locales + assets export with the Factorio binary,
42 | place the data in the `packages/data/script-output` folder and
43 | run `yarn reparse` to generate the data, or
44 | - Run `yarn download-data` to download the latest data from the
45 | NPM data package.
46 |
47 | Before contributing a PR, please run `yarn lint` to ensure your
48 | code matches the linting rules.
--------------------------------------------------------------------------------
/packages/ui/src/components/content-section.tsx:
--------------------------------------------------------------------------------
1 | import { FC, PropsWithChildren } from "react";
2 | import { Surface } from "./surface";
3 | import { QualityTiering } from "./quality-tiering";
4 |
5 | export type ContentSectionVariant = "dark" | "flat" | "inside";
6 |
7 | export const ContentSectionStat = ({
8 | label,
9 | children,
10 | skip,
11 | quality,
12 | }: PropsWithChildren<{
13 | label: string;
14 | skip?: boolean;
15 | quality?: true | [number, number, number, number, number];
16 | }>) =>
17 | skip || !children ? null : (
18 |
60 | The primary goal of this project was to experiment with the Factorio
61 | Datadump, and build something nice looking that reflects the
62 | beautiful UI design that Factorio uses.
63 |
64 |
65 | The app uses the JSON data dump provided by the Factorio binary in
66 | Space Age. There are still some bugs and issues in how data is
67 | interpreted from the Factorio data dump, and some pieces of
68 | information are missing since they simply not present in the data
69 | dump.
70 |
71 |
72 | If this tool was helpful to you, please consider{" "}
73 |
78 | starring the repository on Github
79 |
80 | .
81 |
82 |
83 | By the way, I made the UI components used in this project, including
84 | a Frontend Provider that makes the entire Factorio JSON Data and
85 | assets available in the browser, available as React components that
86 | you can use yourself in your own projects. They are deployed on npm
87 | in the package{" "}
88 |
89 | @factorioui/components
90 | {" "}
91 | and can be imported from there.
92 |
93 |
94 | You can find the Storybook for these components{" "}
95 |
100 | here
101 |
102 | .
103 |