132 lines
4.6 KiB
TypeScript
132 lines
4.6 KiB
TypeScript
import {FC, memo, useCallback, useEffect, useMemo} from "react";
|
|
import {FactorySelect} from "../FactorySelect/FactorySelect";
|
|
import {useFactories} from "../../../src/hooks/useFactories";
|
|
import {Entity, Group} from "../../../src/types";
|
|
import styles from "./Group.module.css"
|
|
import {EntitySpan} from "../EntitySpan/EntitySpan";
|
|
import {useGroups} from "../../contexts/GroupProvider";
|
|
|
|
interface Props {
|
|
group: Group
|
|
}
|
|
|
|
const GroupBoxBase: FC<Props> = ({ group }) => {
|
|
const {factories} = useFactories()
|
|
console.log("group")
|
|
const {
|
|
doNotSuggest,
|
|
setFactories,
|
|
ignoredFactories,
|
|
setIgnoredFactories,
|
|
renameGroup,
|
|
removeGroup,
|
|
getInputType
|
|
} = useGroups()
|
|
const {
|
|
name,
|
|
inputs,
|
|
intermediates,
|
|
exports,
|
|
malls
|
|
} = group
|
|
|
|
const calculatedInputs = useMemo<string[]>(() => {
|
|
const allProducingFactories = [...intermediates, ...exports, ...malls]
|
|
const newData: string[] = factories
|
|
.filter(factory => allProducingFactories.includes(factory.href))
|
|
.flatMap(factory => Object.keys(factory.recipe?.prerequisites ?? {}))
|
|
const uniqueInputs = Array.from(new Set(newData))
|
|
return uniqueInputs
|
|
.filter(input => !allProducingFactories.includes(input))
|
|
.sort((a, b) => a.localeCompare(b))
|
|
}, [factories, intermediates, exports, malls])
|
|
|
|
const suggestions = useMemo<Entity[]>(() => {
|
|
const selectedValues = Array.from(new Set([...inputs, ...intermediates, ...exports, ...malls]))
|
|
const availableIngredients = Array.from(new Set([...selectedValues, ...calculatedInputs]))
|
|
return factories
|
|
.filter(factory => {
|
|
if (!factory.recipe) return false
|
|
if (selectedValues.includes(factory.href)) return false
|
|
if (doNotSuggest.has(factory.href)) return false
|
|
const prerequisites = Object.keys(factory.recipe?.prerequisites ?? {})
|
|
return prerequisites.every(pre => availableIngredients.includes(pre))
|
|
})
|
|
}, [doNotSuggest, factories, calculatedInputs, inputs, intermediates, exports, malls])
|
|
|
|
const addFactory = (uid: string, type: Parameters<typeof setFactories>[2]) => {
|
|
setFactories(name, [...group[type], uid], type)
|
|
}
|
|
|
|
const setInputFactories = useCallback((factories: string[]) => setFactories(name, factories, 'inputs'), [setFactories, name])
|
|
const setIntermediateFactories = useCallback((factories: string[]) => setFactories(name, factories, 'intermediates'), [setFactories, name])
|
|
const setExportFactories = useCallback((factories: string[]) => setFactories(name, factories, 'exports'), [setFactories, name])
|
|
const setMallFactories = useCallback((factories: string[]) => setFactories(name, factories, 'malls'), [setFactories, name])
|
|
|
|
return <div className={styles.root}>
|
|
<h3
|
|
contentEditable={true}
|
|
suppressContentEditableWarning={true}
|
|
onBlur={event => {
|
|
event.currentTarget.innerText = event.currentTarget.innerText.trim()
|
|
renameGroup(name, event.currentTarget.innerText);
|
|
}}
|
|
>
|
|
{name}
|
|
</h3>
|
|
<button className={styles.quit} onClick={() => removeGroup(name)} style={{display: 'block'}}>X</button>
|
|
<label>Additional Inputs</label>
|
|
<FactorySelect
|
|
id={name+"-inputs"}
|
|
factories={inputs}
|
|
onSetFactories={setInputFactories}
|
|
/>
|
|
<label>Intermediate Factories</label>
|
|
<FactorySelect
|
|
id={name+"-intermediates"}
|
|
factories={intermediates}
|
|
onSetFactories={setIntermediateFactories}
|
|
/>
|
|
<label>Exported Factories</label>
|
|
<FactorySelect
|
|
id={name+"-exports"}
|
|
factories={exports}
|
|
onSetFactories={setExportFactories}
|
|
/>
|
|
<label>Mall Factories</label>
|
|
<FactorySelect
|
|
id={name+"-malls"}
|
|
factories={malls}
|
|
onSetFactories={setMallFactories}
|
|
/>
|
|
<h4>Inputs</h4>
|
|
<div className={styles.flex}>
|
|
{ calculatedInputs.map(input => <EntitySpan
|
|
key={input}
|
|
value={input}
|
|
onClick={() => addFactory(input, 'intermediates')}
|
|
state={getInputType(input)}
|
|
leftClickText={"Add to intermediate factories"}
|
|
/>) }
|
|
</div>
|
|
{ suggestions.length ? <>
|
|
<h4>Suggestions</h4>
|
|
<div className={styles.flex}>
|
|
{ suggestions.map(suggestion => <EntitySpan
|
|
key={suggestion.href}
|
|
value={suggestion}
|
|
onClick={() => addFactory(suggestion.href, 'exports')}
|
|
onContextMenu={event => {
|
|
event.preventDefault()
|
|
setIgnoredFactories([...ignoredFactories, suggestion.href])
|
|
}}
|
|
leftClickText={"Add to exported factories"}
|
|
rightClickText={"Exclude this recipe from suggestions"}
|
|
/>) }
|
|
</div>
|
|
</> : null }
|
|
</div>
|
|
}
|
|
|
|
export const GroupBox = memo(GroupBoxBase)
|