86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import {FC, useMemo} from "react";
|
|
import {EnrichedEntity, Recipe} from "../../src/types";
|
|
import styles from './ProducingGraph.module.css'
|
|
import {EntityIcon} from "../home/EntityIcon/EntityIcon";
|
|
import {sortByProperty} from "../../src/utils";
|
|
import Link from "next/link";
|
|
import {RecipeSpan} from "../home/Recipe/Recipe";
|
|
|
|
export interface ProducingNode {
|
|
inputs: string[]
|
|
outputs: string[]
|
|
name: string
|
|
icons?: (EnrichedEntity|string)[]
|
|
linkOut?: string
|
|
recipe?: Recipe
|
|
}
|
|
|
|
interface Props {
|
|
nodes: ProducingNode[]
|
|
inputs: string[]
|
|
}
|
|
|
|
export const ProducingGraph: FC<Props> = ({nodes, inputs}) => {
|
|
const rows: ProducingNode[][] = useMemo(() => {
|
|
const available = new Set(inputs)
|
|
let todo = [...nodes]
|
|
const result: ProducingNode[][] = []
|
|
while (todo.length) {
|
|
const amount = todo.length
|
|
const thisRow: string[] = []
|
|
result.push([])
|
|
|
|
todo = todo.filter((node) => {
|
|
if (node.inputs.every(input => available.has(input))) {
|
|
result[result.length - 1].push(node)
|
|
thisRow.push(...node.outputs)
|
|
return false
|
|
}
|
|
return true
|
|
})
|
|
thisRow.map(uid => available.add(uid))
|
|
result[result.length - 1].sort(sortByProperty(val => -val.outputs.length * 1000 + -val.inputs.length))
|
|
|
|
if (amount === todo.length) {
|
|
console.warn("Loop detected! Left over:", todo)
|
|
result.pop()
|
|
break
|
|
}
|
|
}
|
|
return result
|
|
}, [inputs, nodes])
|
|
|
|
return <div className={styles.plane}>
|
|
{inputs.map((input, idx) => <EntityIcon className={styles.input} style={{left: 75 * idx}} key={input} value={input} />)}
|
|
{rows.map((row, colIdx) => row.map((node, idx) => (
|
|
<div
|
|
className={styles.node}
|
|
key={node.name}
|
|
style={{left: 220*idx, top: 320*colIdx+100}}
|
|
>
|
|
{ node.linkOut && <Link className={styles.linkOut} href={node.linkOut}>🔗</Link> }
|
|
<h3>{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 }
|
|
{
|
|
node.recipe
|
|
? <RecipeSpan recipe={node.recipe}/>
|
|
: <>
|
|
<h4>Inputs</h4>
|
|
<div className={styles.small}>
|
|
{node.inputs.map((input) => <EntityIcon key={input} value={input} />)}
|
|
</div>
|
|
{node.outputs.length ? <>
|
|
<h4>Outputs</h4>
|
|
<div className={styles.small}>
|
|
{node.outputs.map((input) => <EntityIcon key={input} value={input} />)}
|
|
</div>
|
|
</>: null}
|
|
</>
|
|
}
|
|
</div>
|
|
)))}
|
|
</div>
|
|
}
|