sebse/node-factorio-recipes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Linting

Browse Source
This commit is contained in:
Sebastian Seedorf
2022-08-18 09:20:00 +02:00
parent 92b762bbd2
commit de95f57b18
60 changed files with 3450 additions and 994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/visualize/NodeDetails/NodeDetails.tsx
View File

@@ -1,9 +1,9 @@
import {FC, HTMLProps} from "react";
import {GraphNode} from "../../shared/ProducingGraph/ProducingGraph";
import {Recipe} from "../../../src/types";
import cx from "classnames";
import styles from "./NodeDetails.module.css";
import {RecipeSpan} from "../../home/Recipe/Recipe";
import { FC, HTMLProps } from 'react'
import { Recipe } from '../../../src/types'
import cx from 'classnames'
import styles from './NodeDetails.module.css'
import { RecipeSpan } from '../../home/Recipe/Recipe'
import { GraphNode } from '../../../src/graph-untangle/types'
export type DetailGraphNode = GraphNode<{
recipes: Recipe[]
@@ -13,9 +13,13 @@ interface Props extends HTMLProps<HTMLDivElement> {
node: DetailGraphNode
}
export const NodeDetails: FC<Props> = ({node, className, ...props}) => {
return <div {...props} className={cx(className, styles.root)}>
<h3>{node.name}</h3>
{node.recipes.map((recipe, idx) => <RecipeSpan key={idx} recipe={recipe}/>)}
</div>
export const NodeDetails: FC<Props> = ({ node, className, ...props }) => {
return (
<div {...props} className={cx(className, styles.root)}>
<h3>{node.name}</h3>
{node.recipes.map((recipe, idx) => (
<RecipeSpan key={idx} recipe={recipe} />
))}
</div>
)
}

7
components/visualize/NodeOverview/NodeOverview.module.css
View File

@@ -4,9 +4,9 @@
}
.tiny {
font-size: 0.5em;
margin-top: -1.6em;
}
font-size: 0.5em;
margin-top: -1.6em;
}
.small {
font-size: 0.8em;
@@ -15,4 +15,3 @@
.linkOut {
margin-inline-end: 0.5em;
}

64
components/visualize/NodeOverview/NodeOverview.tsx
View File

@@ -1,14 +1,13 @@
import {FC, HTMLProps} from "react";
import {GraphNode} from "../../shared/ProducingGraph/ProducingGraph";
import {EnrichedEntity, Recipe} from "../../../src/types";
import cx from "classnames";
import styles from "./NodeOverview.module.css";
import {RecipeSpan} from "../../home/Recipe/Recipe";
import Link from "next/link";
import {EntityIcon} from "../../home/EntityIcon/EntityIcon";
import { FC, HTMLProps } from 'react'
import { EnrichedEntity } from '../../../src/types'
import cx from 'classnames'
import styles from './NodeOverview.module.css'
import Link from 'next/link'
import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
import { GraphNode } from '../../../src/graph-untangle/types'
export type OverviewGraphNode = GraphNode<{
icons: (EnrichedEntity|string)[]
icons: (EnrichedEntity | string)[]
linkOut: string
}>
@@ -16,21 +15,38 @@ interface Props extends HTMLProps<HTMLDivElement> {
node: OverviewGraphNode
}
export const NodeOverview: FC<Props> = ({node, className, ...props}) => {
return <div {...props} className={cx(className, styles.root)}>
<h3><span className={styles.linkOut}><Link href={node.linkOut}>🔗</Link></span>{node.name}</h3>
{ node.icons?.length ? <div className={styles.tiny}>
{node.icons.map((input) => <EntityIcon key={typeof input === "string" ? input : input.href} value={input} />)}
</div> : null }
<h4>Inputs</h4>
<div className={styles.small}>
{node.inputs.map((input) => <EntityIcon key={input} value={input} />)}
</div>
{node.outputs.length ? <>
<h4>Outputs</h4>
export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
return (
<div {...props} className={cx(className, styles.root)}>
<h3>
<span className={styles.linkOut}>
<Link href={node.linkOut}>🔗</Link>
</span>
{node.name}
</h3>
{node.icons?.length ? (
<div className={styles.tiny}>
{node.icons.map(input => (
<EntityIcon key={typeof input === 'string' ? input : input.href} value={input} />
))}
</div>
) : null}
<h4>Inputs</h4>
<div className={styles.small}>
{node.outputs.map((input) => <EntityIcon key={input} value={input} />)}
{node.inputs.map(input => (
<EntityIcon key={input} value={input} />
))}
</div>
</>: null}
</div>
{node.outputs.length ? (
<>
<h4>Outputs</h4>
<div className={styles.small}>
{node.outputs.map(input => (
<EntityIcon key={input} value={input} />
))}
</div>
</>
) : null}
</div>
)
}

86
components/visualize/PageDetails.tsx
View File

@@ -1,72 +1,74 @@
import {useRouter} from "next/router";
import {GroupProvider, useGroups} from "../contexts/GroupProvider";
import {useFactories} from "../../src/hooks/useFactories";
import {FC, useEffect, useMemo} from "react";
import {calculateInputs} from "../../src/calculateInputs";
import {DetailGraphNode, NodeDetails} from "./NodeDetails/NodeDetails";
import {groupBy, isNonNullable, uniquify} from "../../src/utils";
import {EnrichedEntity} from "../../src/types";
import Head from "next/head";
import {ScrollContainer} from "../shared/ScrollContainer/ScrollContainer";
import {ProducingGraph} from "../shared/ProducingGraph/ProducingGraph";
import { useRouter } from 'next/router'
import { useGroups } from '../contexts/GroupProvider'
import { useFactories } from '../../src/hooks/useFactories'
import { FC, useEffect, useMemo } from 'react'
import { calculateInputs } from '../../src/calculateInputs'
import { DetailGraphNode, NodeDetails } from './NodeDetails/NodeDetails'
import { groupBy, isNonNullable, uniquify } from '../../src/utils'
import { EnrichedEntity } from '../../src/types'
import Head from 'next/head'
import { ScrollContainer } from '../shared/ScrollContainer/ScrollContainer'
import { ProducingGraph } from '../shared/ProducingGraph/ProducingGraph'
export const PageDetails: FC = () => {
const {query: {name}} = useRouter()
const {
exportedFactories,
baseFactories,
ignoredFactories,
groups
} = useGroups()
const {
findFactory
} = useFactories()
query: { name }
} = useRouter()
const { exportedFactories, baseFactories, groups } = useGroups()
const { findFactory } = useFactories()
useEffect(() => {
document.body.classList.add("scroll");
return () => document.body.classList.remove("scroll")
}, []);
document.body.classList.add('scroll')
return () => document.body.classList.remove('scroll')
}, [])
const group = typeof name === 'string' ? groups[name] : undefined
const [inputFactories, intermediateFactories] = useMemo<ReturnType<typeof calculateInputs>>(() => {
const [inputFactories, intermediateFactories] = useMemo<
ReturnType<typeof calculateInputs>
>(() => {
if (!group) return [[], []]
return calculateInputs(
[...group.exports, ...group.malls],
ignoredFactories,
baseFactories,
exportedFactories,
findFactory
)
}, [baseFactories, exportedFactories, findFactory, group, ignoredFactories])
}, [baseFactories, exportedFactories, findFactory, group])
const producingNodes: DetailGraphNode[] = useMemo(() => {
if (!group) return []
const nodes = uniquify([...intermediateFactories, ...group.exports, ...group.malls])
.map(findFactory)
.filter(isNonNullable)
.map((factory: EnrichedEntity) => ({
inputs: Object.keys(factory.recipe?.prerequisites ?? {}).sort((a, b) => a.localeCompare(b)),
outputs: Object.keys(factory.recipe?.output ?? {}).sort((a, b) => a.localeCompare(b)),
name: factory.name,
recipes: [factory.recipe]
} as DetailGraphNode))
return Object
.values(groupBy(nodes, node => node.inputs.join()))
.map(nodesOfInput => ({
inputs: nodesOfInput[0].inputs,
outputs: uniquify(nodesOfInput.flatMap(node => node.outputs)),
name: nodesOfInput.map(node => node.name).join(', '),
recipes: nodesOfInput.flatMap(node => node.recipes)
} as DetailGraphNode))
.map(
(factory: EnrichedEntity) =>
({
inputs: Object.keys(factory.recipe?.prerequisites ?? {}).sort((a, b) =>
a.localeCompare(b)
),
outputs: Object.keys(factory.recipe?.output ?? {}).sort((a, b) => a.localeCompare(b)),
name: factory.name,
recipes: [factory.recipe]
} as DetailGraphNode)
)
return Object.values(groupBy(nodes, node => node.inputs.join())).map(
nodesOfInput =>
({
inputs: nodesOfInput[0].inputs,
outputs: uniquify(nodesOfInput.flatMap(node => node.outputs)),
name: nodesOfInput.map(node => node.name).join(', '),
recipes: nodesOfInput.flatMap(node => node.recipes)
} as DetailGraphNode)
)
}, [findFactory, group, intermediateFactories])
return (
<>
<Head>
<title>Factorio Microservices</title>
<meta name="description" content="Create Factorio microservices" />
<link rel="icon" href="/public/favicon.ico" />
<meta name='description' content='Create Factorio microservices' />
<link rel='icon' href='/public/favicon.ico' />
</Head>
<main>
<ScrollContainer>