128 lines
4.4 KiB
TypeScript
128 lines
4.4 KiB
TypeScript
import {FC, useMemo} from "react";
|
|
import {FactorySelect} from "../FactorySelect/FactorySelect";
|
|
import {useDetails} from "../../../src/hooks/useDetails";
|
|
import {Entity, Group} from "../../../src/types";
|
|
import styles from "./Group.module.css"
|
|
import {EntitySpan} from "../EntitySpan/EntitySpan";
|
|
import {useGroups} from "../../contexts/GroupProvider";
|
|
|
|
interface Props {
|
|
index: number
|
|
}
|
|
|
|
export const GroupBox: FC<Props> = ({ index }) => {
|
|
const details = useDetails()
|
|
const {
|
|
getGroup,
|
|
doNotSuggest,
|
|
setFactories,
|
|
ignoredFactories,
|
|
setIgnoredFactories,
|
|
renameGroup,
|
|
removeGroup,
|
|
getInputType
|
|
} = useGroups()
|
|
const {
|
|
name,
|
|
inputs,
|
|
intermediates,
|
|
exports,
|
|
malls
|
|
} = getGroup(index)
|
|
|
|
const calculatedInputs = useMemo<string[]>(() => {
|
|
const allProducingFactories = [...intermediates, ...exports, ...malls]
|
|
const newData: string[] = details
|
|
.filter(detail => allProducingFactories.includes(detail.href))
|
|
.flatMap(detail => Object.keys(detail.recipe?.prerequisites ?? {}))
|
|
const uniqueInputs = Array.from(new Set(newData))
|
|
return uniqueInputs
|
|
.filter(input => !allProducingFactories.includes(input))
|
|
}, [details, 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 details
|
|
.filter(detail => {
|
|
if (!detail.recipe) return false
|
|
if (selectedValues.includes(detail.href)) return false
|
|
if (doNotSuggest.has(detail.href)) return false
|
|
const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
|
|
return prerequisites.every(pre => availableIngredients.includes(pre))
|
|
})
|
|
}, [doNotSuggest, details, calculatedInputs, inputs, intermediates, exports, malls])
|
|
|
|
const addFactory = (uid: string, type: Parameters<typeof setFactories>[2]) => {
|
|
setFactories(index, [...intermediates, uid], 'intermediates')
|
|
}
|
|
|
|
return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
|
|
<div>
|
|
<h3
|
|
contentEditable={true}
|
|
suppressContentEditableWarning={true}
|
|
onBlur={event => {
|
|
event.currentTarget.innerText = event.currentTarget.innerText.trim()
|
|
renameGroup(index, event.currentTarget.innerText);
|
|
}}
|
|
>
|
|
{name}
|
|
</h3>
|
|
<button onClick={() => removeGroup(index)} style={{display: 'block'}}>X</button>
|
|
<label>Additional Inputs</label>
|
|
<FactorySelect
|
|
factories={inputs}
|
|
onSetFactories={factories => setFactories(index, factories, 'inputs')}
|
|
/>
|
|
<label>Intermediate Factories</label>
|
|
<FactorySelect
|
|
factories={intermediates}
|
|
onSetFactories={factories => setFactories(index, factories, 'intermediates')}
|
|
/>
|
|
<label>Exported Factories</label>
|
|
<FactorySelect
|
|
factories={exports}
|
|
onSetFactories={factories => setFactories(index, factories, 'exports')}
|
|
/>
|
|
<label>Mall Factories</label>
|
|
<FactorySelect
|
|
factories={malls}
|
|
onSetFactories={factories => setFactories(index, factories, 'malls')}
|
|
/>
|
|
<div className={styles.grid}>
|
|
<div>
|
|
<h4>Inputs</h4>
|
|
<ul>
|
|
{
|
|
calculatedInputs.map(input => <li key={input}><EntitySpan
|
|
value={input}
|
|
onClick={() => addFactory(input, 'intermediates')}
|
|
style={{color: {base: 'darkgreen', produced: 'orange', unknown: undefined}[getInputType(input)]}}
|
|
leftClickText={"Add to intermediate factories"}
|
|
/></li>)
|
|
}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Suggestions</h4>
|
|
<ul>
|
|
{suggestions.map(suggestion => <li key={suggestion.href}>
|
|
<EntitySpan
|
|
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"}
|
|
/>
|
|
</li>)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|