Linting
This commit is contained in:
Sebastian Seedorf
@@ -1,10 +1,14 @@
|
||||
import {createContext, FC, useCallback, useContext, useEffect, useMemo, useState} from "react";
|
||||
import {Group} from "../../src/types";
|
||||
import {ReactNodeLike} from "prop-types";
|
||||
import pako from "pako";
|
||||
import {Dict} from "../../src/types";
|
||||
import {fixedEncodeURIComponent} from "../../src/utils";
|
||||
import {GroupRenameBody, GroupSetFactoryArrayBody, SetFactoryArrayBody} from "../../src/types/ApiSchemasFrontend";
|
||||
import { createContext, FC, useCallback, useContext, useMemo, useState } from 'react'
|
||||
import { Group } from '../../src/types'
|
||||
import { ReactNodeLike } from 'prop-types'
|
||||
import pako from 'pako'
|
||||
import { Dict } from '../../src/types'
|
||||
import { fixedEncodeURIComponent } from '../../src/utils'
|
||||
import {
|
||||
GroupRenameBody,
|
||||
GroupSetFactoryArrayBody,
|
||||
SetFactoryArrayBody
|
||||
} from '../../src/types/ApiSchemasFrontend'
|
||||
|
||||
interface Props {
|
||||
children: ReactNodeLike
|
||||
@@ -31,8 +35,8 @@ interface GroupContextType {
|
||||
removeGroup(name: string): void
|
||||
renameGroup(name: string, newName: string): void
|
||||
|
||||
setFactories(name: string, factories: string[], type: 'exports'|'malls'): void
|
||||
getInputType(uid: string): 'base'|'produced'|'unknown'
|
||||
setFactories(name: string, factories: string[], type: 'exports' | 'malls'): void
|
||||
getInputType(uid: string): 'base' | 'produced' | 'unknown'
|
||||
|
||||
store(): Uint8Array
|
||||
load(str: Uint8Array): void
|
||||
@@ -43,29 +47,47 @@ const defaultValues: GroupContextType = {
|
||||
exportedFactories: new Set(),
|
||||
|
||||
ignoredFactories: [],
|
||||
setIgnoredFactories() {},
|
||||
setIgnoredFactories() {
|
||||
return
|
||||
},
|
||||
|
||||
baseFactories: [],
|
||||
setBaseFactories() {},
|
||||
setBaseFactories() {
|
||||
return
|
||||
},
|
||||
|
||||
groups: {},
|
||||
addGroup() {},
|
||||
removeGroup() {},
|
||||
renameGroup() {},
|
||||
addGroup() {
|
||||
return
|
||||
},
|
||||
removeGroup() {
|
||||
return
|
||||
},
|
||||
renameGroup() {
|
||||
return
|
||||
},
|
||||
|
||||
setFactories() {},
|
||||
getInputType() {return 'unknown'},
|
||||
setFactories() {
|
||||
return
|
||||
},
|
||||
getInputType() {
|
||||
return 'unknown'
|
||||
},
|
||||
|
||||
store() {return new Uint8Array(0)},
|
||||
load() {}
|
||||
store() {
|
||||
return new Uint8Array(0)
|
||||
},
|
||||
load() {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const GroupContext = createContext<GroupContextType>(defaultValues);
|
||||
const GroupContext = createContext<GroupContextType>(defaultValues)
|
||||
export const useGroups = () => useContext(GroupContext)
|
||||
|
||||
interface StoredFile {
|
||||
groups: Dict<Group>,
|
||||
basicValues: string[],
|
||||
groups: Dict<Group>
|
||||
basicValues: string[]
|
||||
excludedSuggestions: string[]
|
||||
}
|
||||
|
||||
@@ -80,143 +102,203 @@ export const postFetchJson = async (url: string, body: Dict<unknown>) => {
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export const GroupProvider: FC<Props> = ({children, id, initial}) => {
|
||||
export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
|
||||
const [excludedSuggestions, _setExcludedSuggestions] = useState<string[]>(initial.ignored)
|
||||
const [basicValues, _setBasicValues] = useState<string[]>(initial.base)
|
||||
const [groups, setGroups] = useState<Dict<Group>>(initial.groups)
|
||||
|
||||
const doNotSuggest = useMemo<Set<string>>(() => {
|
||||
return new Set([...Object.values(groups).flatMap(group => [...group.exports, ...group.malls]), ...excludedSuggestions, ...basicValues])
|
||||
return new Set([
|
||||
...Object.values(groups).flatMap(group => [...group.exports, ...group.malls]),
|
||||
...excludedSuggestions,
|
||||
...basicValues
|
||||
])
|
||||
}, [basicValues, groups, excludedSuggestions])
|
||||
|
||||
const exportedFactories = useMemo<Set<string>>(() => {
|
||||
return new Set([...Object.values(groups).flatMap(group => [...group.exports])])
|
||||
}, [groups])
|
||||
|
||||
const setExcludedSuggestions = useCallback<typeof _setExcludedSuggestions>((val) => {
|
||||
_setExcludedSuggestions(val)
|
||||
postFetchJson(`/api/${fixedEncodeURIComponent(id)}/factories`, {
|
||||
type: 'ignored',
|
||||
factories: val
|
||||
} as SetFactoryArrayBody)
|
||||
.catch(console.error)
|
||||
}, [id])
|
||||
const setExcludedSuggestions = useCallback<typeof _setExcludedSuggestions>(
|
||||
val => {
|
||||
_setExcludedSuggestions(val)
|
||||
postFetchJson(`/api/${fixedEncodeURIComponent(id)}/factories`, {
|
||||
type: 'ignored',
|
||||
factories: val
|
||||
} as SetFactoryArrayBody).catch(console.error)
|
||||
},
|
||||
[id]
|
||||
)
|
||||
|
||||
const setBasicValues = useCallback<typeof _setBasicValues>((val) => {
|
||||
_setBasicValues(val)
|
||||
postFetchJson(`/api/${fixedEncodeURIComponent(id)}/factories`, {
|
||||
type: 'base',
|
||||
factories: val
|
||||
} as SetFactoryArrayBody)
|
||||
.catch(console.error)
|
||||
}, [id])
|
||||
const setBasicValues = useCallback<typeof _setBasicValues>(
|
||||
val => {
|
||||
_setBasicValues(val)
|
||||
postFetchJson(`/api/${fixedEncodeURIComponent(id)}/factories`, {
|
||||
type: 'base',
|
||||
factories: val
|
||||
} as SetFactoryArrayBody).catch(console.error)
|
||||
},
|
||||
[id]
|
||||
)
|
||||
|
||||
const addGroup = useCallback((name: string, exports: string[] = [], malls: string[] = []) => {
|
||||
name = name.replace(/[.$]/g, '')
|
||||
if (name in groups) return false
|
||||
setGroups(groups => {
|
||||
groups[name] = { name, exports, malls }
|
||||
return {...groups}
|
||||
})
|
||||
;(async () => {
|
||||
await postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/add`, {})
|
||||
if (exports.length) {
|
||||
await postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, {
|
||||
type: 'exports',
|
||||
factories: exports
|
||||
} as GroupSetFactoryArrayBody)
|
||||
}
|
||||
if (malls.length) {
|
||||
await postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, {
|
||||
type: 'malls',
|
||||
factories: exports
|
||||
} as GroupSetFactoryArrayBody)
|
||||
}
|
||||
})().catch(console.error)
|
||||
return true
|
||||
}, [groups, id])
|
||||
const removeGroup = useCallback((name: string) => {
|
||||
name = name.replace(/[.$]/g, '')
|
||||
setGroups(groups => {
|
||||
delete groups[name]
|
||||
console.log(groups[name])
|
||||
return {...groups}
|
||||
})
|
||||
postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/remove`, {})
|
||||
.catch(console.error)
|
||||
}, [id])
|
||||
const renameGroup = useCallback((name: string, newName: string) => {
|
||||
name = name.replace(/[.$]/g, '')
|
||||
newName = newName.replace(/[.$]/g, '')
|
||||
if (newName in groups) return
|
||||
setGroups(groups => {
|
||||
groups[newName] = {...groups[name], name: newName}
|
||||
delete groups[name]
|
||||
return {...groups}
|
||||
})
|
||||
postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/rename`, {
|
||||
newName
|
||||
} as GroupRenameBody)
|
||||
.catch(console.error)
|
||||
}, [groups, id])
|
||||
const addGroup = useCallback(
|
||||
(name: string, exports: string[] = [], malls: string[] = []) => {
|
||||
name = name.replace(/[.$]/g, '')
|
||||
if (name in groups) return false
|
||||
setGroups(g => {
|
||||
g[name] = { name, exports, malls }
|
||||
return { ...g }
|
||||
})
|
||||
;(async () => {
|
||||
await postFetchJson(
|
||||
`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/add`,
|
||||
{}
|
||||
)
|
||||
if (exports.length) {
|
||||
await postFetchJson(
|
||||
`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`,
|
||||
{
|
||||
type: 'exports',
|
||||
factories: exports
|
||||
} as GroupSetFactoryArrayBody
|
||||
)
|
||||
}
|
||||
if (malls.length) {
|
||||
await postFetchJson(
|
||||
`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`,
|
||||
{
|
||||
type: 'malls',
|
||||
factories: exports
|
||||
} as GroupSetFactoryArrayBody
|
||||
)
|
||||
}
|
||||
})().catch(console.error)
|
||||
return true
|
||||
},
|
||||
[groups, id]
|
||||
)
|
||||
const removeGroup = useCallback(
|
||||
(name: string) => {
|
||||
name = name.replace(/[.$]/g, '')
|
||||
setGroups(g => {
|
||||
delete g[name]
|
||||
return { ...g }
|
||||
})
|
||||
postFetchJson(
|
||||
`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/remove`,
|
||||
{}
|
||||
).catch(console.error)
|
||||
},
|
||||
[id]
|
||||
)
|
||||
const renameGroup = useCallback(
|
||||
(name: string, newName: string) => {
|
||||
name = name.replace(/[.$]/g, '')
|
||||
newName = newName.replace(/[.$]/g, '')
|
||||
if (newName in groups) return
|
||||
setGroups(g => {
|
||||
g[newName] = { ...g[name], name: newName }
|
||||
delete g[name]
|
||||
return { ...g }
|
||||
})
|
||||
postFetchJson(
|
||||
`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/rename`,
|
||||
{
|
||||
newName
|
||||
} as GroupRenameBody
|
||||
).catch(console.error)
|
||||
},
|
||||
[groups, id]
|
||||
)
|
||||
|
||||
const setFactories = useCallback((name: string, factories: string[], type: 'exports'|'malls') => {
|
||||
name = name.replace(/[.$]/g, '')
|
||||
setGroups(groups => {
|
||||
groups[name] = {...groups[name], [type]: factories}
|
||||
return {...groups}
|
||||
})
|
||||
postFetchJson(`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`, {
|
||||
type,
|
||||
factories
|
||||
} as GroupSetFactoryArrayBody)
|
||||
.catch(console.error)
|
||||
}, [id])
|
||||
const getInputType = useCallback((uid: string) => {
|
||||
if (basicValues.includes(uid)) return 'base'
|
||||
else if (exportedFactories.has(uid)) return 'produced'
|
||||
else return 'unknown'
|
||||
}, [basicValues, exportedFactories])
|
||||
const setFactories = useCallback(
|
||||
(name: string, factories: string[], type: 'exports' | 'malls') => {
|
||||
name = name.replace(/[.$]/g, '')
|
||||
setGroups(g => {
|
||||
g[name] = { ...g[name], [type]: factories }
|
||||
return { ...g }
|
||||
})
|
||||
postFetchJson(
|
||||
`/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`,
|
||||
{
|
||||
type,
|
||||
factories
|
||||
} as GroupSetFactoryArrayBody
|
||||
).catch(console.error)
|
||||
},
|
||||
[id]
|
||||
)
|
||||
const getInputType = useCallback(
|
||||
(uid: string) => {
|
||||
if (basicValues.includes(uid)) return 'base'
|
||||
else if (exportedFactories.has(uid)) return 'produced'
|
||||
else return 'unknown'
|
||||
},
|
||||
[basicValues, exportedFactories]
|
||||
)
|
||||
|
||||
const store = useCallback(() => {
|
||||
const btoa = (bin: Uint8Array) => Buffer.from(bin).toString('base64')
|
||||
// const btoa = (bin: Uint8Array) => Buffer.from(bin).toString('base64')
|
||||
const value: StoredFile = {
|
||||
groups, basicValues, excludedSuggestions
|
||||
groups,
|
||||
basicValues,
|
||||
excludedSuggestions
|
||||
}
|
||||
const uncompressed = JSON.stringify(value)
|
||||
return pako.deflate(uncompressed)
|
||||
}, [basicValues, excludedSuggestions, groups])
|
||||
|
||||
const load = useCallback((compressed: Uint8Array) => {
|
||||
const atob = (str: string) => Buffer.from(str, 'base64')
|
||||
const uncompressed = pako.inflate(compressed, {to: "string"})
|
||||
const value: StoredFile = JSON.parse(uncompressed)
|
||||
if (!value.groups || !value.basicValues || !value.excludedSuggestions) return
|
||||
setGroups(value.groups)
|
||||
setBasicValues(value.basicValues)
|
||||
setExcludedSuggestions(value.excludedSuggestions)
|
||||
}, [])
|
||||
const load = useCallback(
|
||||
(compressed: Uint8Array) => {
|
||||
// const atob = (str: string) => Buffer.from(str, 'base64')
|
||||
const uncompressed = pako.inflate(compressed, { to: 'string' })
|
||||
const value: StoredFile = JSON.parse(uncompressed)
|
||||
if (!value.groups || !value.basicValues || !value.excludedSuggestions) return
|
||||
setGroups(value.groups)
|
||||
setBasicValues(value.basicValues)
|
||||
setExcludedSuggestions(value.excludedSuggestions)
|
||||
},
|
||||
[setBasicValues, setExcludedSuggestions]
|
||||
)
|
||||
|
||||
const value: GroupContextType = useMemo(() => ({
|
||||
doNotSuggest,
|
||||
exportedFactories,
|
||||
const value: GroupContextType = useMemo(
|
||||
() => ({
|
||||
doNotSuggest,
|
||||
exportedFactories,
|
||||
|
||||
ignoredFactories: excludedSuggestions,
|
||||
setIgnoredFactories: setExcludedSuggestions,
|
||||
ignoredFactories: excludedSuggestions,
|
||||
setIgnoredFactories: setExcludedSuggestions,
|
||||
|
||||
baseFactories: basicValues,
|
||||
setBaseFactories: setBasicValues,
|
||||
baseFactories: basicValues,
|
||||
setBaseFactories: setBasicValues,
|
||||
|
||||
groups,
|
||||
addGroup,
|
||||
removeGroup,
|
||||
renameGroup,
|
||||
groups,
|
||||
addGroup,
|
||||
removeGroup,
|
||||
renameGroup,
|
||||
|
||||
setFactories,
|
||||
getInputType,
|
||||
setFactories,
|
||||
getInputType,
|
||||
|
||||
store,
|
||||
load
|
||||
}), [addGroup, basicValues, doNotSuggest, excludedSuggestions, exportedFactories, getInputType, groups, load, removeGroup, renameGroup, setBasicValues, setExcludedSuggestions, setFactories, store])
|
||||
store,
|
||||
load
|
||||
}),
|
||||
[
|
||||
addGroup,
|
||||
basicValues,
|
||||
doNotSuggest,
|
||||
excludedSuggestions,
|
||||
exportedFactories,
|
||||
getInputType,
|
||||
groups,
|
||||
load,
|
||||
removeGroup,
|
||||
renameGroup,
|
||||
setBasicValues,
|
||||
setExcludedSuggestions,
|
||||
setFactories,
|
||||
store
|
||||
]
|
||||
)
|
||||
return <GroupContext.Provider value={value}>{children}</GroupContext.Provider>
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.span {
|
||||
background: #DDD;
|
||||
background: #ddd;
|
||||
font-size: 2em;
|
||||
border: 1px solid white;
|
||||
display: inline-block;
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import {FC, HTMLProps, useMemo} from "react"
|
||||
import {Entity} from "../../../src/types"
|
||||
import {useFactories} from "../../../src/hooks/useFactories"
|
||||
import { FC, HTMLProps, useMemo } from 'react'
|
||||
import { Entity } from '../../../src/types'
|
||||
import { useFactories } from '../../../src/hooks/useFactories'
|
||||
import styles from './EntityIcon.module.css'
|
||||
import cx from "classnames";
|
||||
import cx from 'classnames'
|
||||
|
||||
interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
|
||||
value: Entity|string
|
||||
value: Entity | string
|
||||
amount?: number
|
||||
}
|
||||
|
||||
export const EntityIcon: FC<Props> = ({className, value, amount, ...rest}) => {
|
||||
const {findFactory} = useFactories()
|
||||
export const EntityIcon: FC<Props> = ({ className, value, amount, ...rest }) => {
|
||||
const { findFactory } = useFactories()
|
||||
const entity = useMemo<Entity>(() => {
|
||||
return typeof value === "object"
|
||||
return typeof value === 'object'
|
||||
? value
|
||||
: value === '/Time'
|
||||
? {
|
||||
@@ -29,9 +29,15 @@ export const EntityIcon: FC<Props> = ({className, value, amount, ...rest}) => {
|
||||
}
|
||||
}, [findFactory, value])
|
||||
|
||||
return <span {...rest} className={cx(className, styles.span)} title={entity.name}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className={cx(styles.img, amount === undefined ? styles.noAmount : undefined)} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
|
||||
{amount !== undefined && <span className={styles.amount}>{amount}</span>}
|
||||
</span>
|
||||
return (
|
||||
<span {...rest} className={cx(className, styles.span)} title={entity.name}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
className={cx(styles.img, amount === undefined ? styles.noAmount : undefined)}
|
||||
src={`https://wiki.factorio.com${entity.image}`}
|
||||
alt={entity.name}
|
||||
/>
|
||||
{amount !== undefined && <span className={styles.amount}>{amount}</span>}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,25 +1,33 @@
|
||||
import {FC, HTMLProps, memo, useMemo} from "react"
|
||||
import {EnrichedEntity, Entity} from "../../../src/types"
|
||||
import {useFactories} from "../../../src/hooks/useFactories"
|
||||
import { FC, HTMLProps, memo, useMemo } from 'react'
|
||||
import { EnrichedEntity } from '../../../src/types'
|
||||
import { useFactories } from '../../../src/hooks/useFactories'
|
||||
import styles from './EntitySpan.module.css'
|
||||
import {RecipeSpan} from "../Recipe/Recipe";
|
||||
import {LeftClickIcon} from "../LeftClickIcon/LeftClickIcon";
|
||||
import cx from 'classnames';
|
||||
import {EntityIcon} from "../EntityIcon/EntityIcon";
|
||||
import { RecipeSpan } from '../Recipe/Recipe'
|
||||
import { LeftClickIcon } from '../LeftClickIcon/LeftClickIcon'
|
||||
import cx from 'classnames'
|
||||
import { EntityIcon } from '../EntityIcon/EntityIcon'
|
||||
|
||||
interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
|
||||
value: EnrichedEntity|string
|
||||
state?: 'base'|'produced'|'unknown'
|
||||
value: EnrichedEntity | string
|
||||
state?: 'base' | 'produced' | 'unknown'
|
||||
leftClickText?: string
|
||||
rightClickText?: string
|
||||
simpleStyle?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
const EntitySpanUnmemo: FC<Props> = ({className, value, state, leftClickText, rightClickText, simpleStyle, ...rest}) => {
|
||||
const {findFactory} = useFactories()
|
||||
const EntitySpanUnmemo: FC<Props> = ({
|
||||
className,
|
||||
value,
|
||||
state,
|
||||
leftClickText,
|
||||
rightClickText,
|
||||
simpleStyle,
|
||||
...rest
|
||||
}) => {
|
||||
const { findFactory } = useFactories()
|
||||
const entity = useMemo<EnrichedEntity>(() => {
|
||||
return typeof value === "object"
|
||||
return typeof value === 'object'
|
||||
? value
|
||||
: findFactory(value) ?? {
|
||||
usedBy: [],
|
||||
@@ -30,34 +38,52 @@ const EntitySpanUnmemo: FC<Props> = ({className, value, state, leftClickText, ri
|
||||
}
|
||||
}, [findFactory, value])
|
||||
|
||||
return <span className={cx(className, simpleStyle ? styles.spanSimple : styles.span)} {...rest}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
|
||||
<span className={styles[state ?? 'unknown']}>{entity.name}</span>
|
||||
<div className={styles.tooltip}>
|
||||
{entity.recipe && (
|
||||
<>
|
||||
<div className={styles.strong}>Recipe</div>
|
||||
<RecipeSpan recipe={entity.recipe}/>
|
||||
</>
|
||||
)}
|
||||
{entity.usedBy?.length ? (
|
||||
<>
|
||||
<div className={styles.strong}>Used By</div>
|
||||
<div className={styles.usedBy}>
|
||||
{entity.usedBy.map(used => <EntityIcon value={used} key={used.name}/>)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
{(leftClickText || rightClickText) && (
|
||||
<>
|
||||
<div className={styles.strong}>Actions</div>
|
||||
{leftClickText && <div><LeftClickIcon className={styles.leftClick} classClick={styles.clickBtn}/> {leftClickText}</div>}
|
||||
{rightClickText && <div><LeftClickIcon className={styles.rightClick} classClick={styles.clickBtn}/> {rightClickText}</div>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</span>
|
||||
return (
|
||||
<span className={cx(className, simpleStyle ? styles.spanSimple : styles.span)} {...rest}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
className={styles.img}
|
||||
src={`https://wiki.factorio.com${entity.image}`}
|
||||
alt={entity.name}
|
||||
/>
|
||||
<span className={styles[state ?? 'unknown']}>{entity.name}</span>
|
||||
<div className={styles.tooltip}>
|
||||
{entity.recipe && (
|
||||
<>
|
||||
<div className={styles.strong}>Recipe</div>
|
||||
<RecipeSpan recipe={entity.recipe} />
|
||||
</>
|
||||
)}
|
||||
{entity.usedBy?.length ? (
|
||||
<>
|
||||
<div className={styles.strong}>Used By</div>
|
||||
<div className={styles.usedBy}>
|
||||
{entity.usedBy.map(used => (
|
||||
<EntityIcon value={used} key={used.name} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
{(leftClickText || rightClickText) && (
|
||||
<>
|
||||
<div className={styles.strong}>Actions</div>
|
||||
{leftClickText && (
|
||||
<div>
|
||||
<LeftClickIcon className={styles.leftClick} classClick={styles.clickBtn} />{' '}
|
||||
{leftClickText}
|
||||
</div>
|
||||
)}
|
||||
{rightClickText && (
|
||||
<div>
|
||||
<LeftClickIcon className={styles.rightClick} classClick={styles.clickBtn} />{' '}
|
||||
{rightClickText}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export const EntitySpan = memo(EntitySpanUnmemo)
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
}
|
||||
|
||||
.select :global(.factory-select__multi-value),
|
||||
.select :global(.factory-select__menu)
|
||||
{
|
||||
.select :global(.factory-select__menu) {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
@@ -18,6 +17,6 @@
|
||||
}
|
||||
|
||||
.select :global(.factory-select__multi-value__label) {
|
||||
color: #DDDDDD;
|
||||
color: #dddddd;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {FC, memo, useEffect, useMemo, useState} from "react";
|
||||
import Select from "react-select";
|
||||
import {isNonNullable} from "../../../src/utils";
|
||||
import details from "../../../res/details.json";
|
||||
import styles from "./FactorySelect.module.css";
|
||||
import {EntitySpan} from "../EntitySpan/EntitySpan";
|
||||
import { FC, memo, useMemo } from 'react'
|
||||
import Select from 'react-select'
|
||||
import { isNonNullable } from '../../../src/utils'
|
||||
import details from '../../../res/details.json'
|
||||
import styles from './FactorySelect.module.css'
|
||||
import { EntitySpan } from '../EntitySpan/EntitySpan'
|
||||
|
||||
interface Props {
|
||||
id: string
|
||||
@@ -16,33 +16,37 @@ const options = details.map(detail => ({
|
||||
value: detail.href
|
||||
}))
|
||||
|
||||
const FactorySelectBase: FC<Props> = ({id, factories, onSetFactories}) => {
|
||||
const FactorySelectBase: FC<Props> = ({ id, factories, onSetFactories }) => {
|
||||
const state = useMemo<typeof options>(() => {
|
||||
return factories
|
||||
.map(factory => options.find(option => option.value === factory))
|
||||
.filter(isNonNullable)
|
||||
}, [factories])
|
||||
|
||||
return <Select
|
||||
id={id}
|
||||
instanceId={id}
|
||||
value={state}
|
||||
components={{
|
||||
MultiValueLabel: ({data, innerProps}) => (
|
||||
<EntitySpan {...innerProps} value={data.value} simpleStyle={true}/>
|
||||
),
|
||||
Option: ({innerProps, data}) => (
|
||||
<div {...innerProps} className={styles.option}><EntitySpan value={data.value} simpleStyle={true}/></div>
|
||||
)
|
||||
}}
|
||||
isMulti
|
||||
options={options as never}
|
||||
onChange={e => {
|
||||
onSetFactories(e.map(s => s?.value))
|
||||
}}
|
||||
className={styles.select}
|
||||
classNamePrefix={"factory-select"}
|
||||
/>
|
||||
return (
|
||||
<Select
|
||||
id={id}
|
||||
instanceId={id}
|
||||
value={state}
|
||||
components={{
|
||||
MultiValueLabel: ({ data, innerProps }) => (
|
||||
<EntitySpan {...innerProps} value={data.value} simpleStyle={true} />
|
||||
),
|
||||
Option: ({ innerProps, data }) => (
|
||||
<div {...innerProps} className={styles.option}>
|
||||
<EntitySpan value={data.value} simpleStyle={true} />
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
isMulti
|
||||
options={options as never}
|
||||
onChange={e => {
|
||||
onSetFactories(e.map(s => s?.value))
|
||||
}}
|
||||
className={styles.select}
|
||||
classNamePrefix={'factory-select'}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export const FactorySelect = memo(FactorySelectBase)
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import {FC, memo, useCallback, useMemo, useState} from "react";
|
||||
import {FactorySelect} from "../FactorySelect/FactorySelect";
|
||||
import {useFactories} from "../../../src/hooks/useFactories";
|
||||
import {EnrichedEntity, Group} from "../../../src/types";
|
||||
import styles from "./GroupBox.module.css"
|
||||
import {EntitySpan} from "../EntitySpan/EntitySpan";
|
||||
import {useGroups} from "../../contexts/GroupProvider";
|
||||
import {calculateInputs} from "../../../src/calculateInputs";
|
||||
import {fixedEncodeURIComponent, uniquify} from "../../../src/utils";
|
||||
import Link from "next/link";
|
||||
import {useRouter} from "next/router";
|
||||
import { FC, memo, useCallback, useMemo, useState } from 'react'
|
||||
import { FactorySelect } from '../FactorySelect/FactorySelect'
|
||||
import { useFactories } from '../../../src/hooks/useFactories'
|
||||
import { EnrichedEntity, Group } from '../../../src/types'
|
||||
import styles from './GroupBox.module.css'
|
||||
import { EntitySpan } from '../EntitySpan/EntitySpan'
|
||||
import { useGroups } from '../../contexts/GroupProvider'
|
||||
import { calculateInputs } from '../../../src/calculateInputs'
|
||||
import { fixedEncodeURIComponent, uniquify } from '../../../src/utils'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
interface Props {
|
||||
group: Group
|
||||
@@ -16,7 +16,7 @@ interface Props {
|
||||
|
||||
const GroupBoxBase: FC<Props> = ({ group }) => {
|
||||
const router = useRouter()
|
||||
const {factories, findFactory} = useFactories()
|
||||
const { factories, findFactory } = useFactories()
|
||||
const {
|
||||
doNotSuggest,
|
||||
setFactories,
|
||||
@@ -28,24 +28,14 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
|
||||
removeGroup,
|
||||
getInputType
|
||||
} = useGroups()
|
||||
const {
|
||||
name,
|
||||
exports,
|
||||
malls
|
||||
} = group
|
||||
const { name, exports, malls } = group
|
||||
|
||||
const [isDeleteConfirm, setDeleteConfirm] = useState(false)
|
||||
|
||||
const [inputs, intermediates] = useMemo(() => {
|
||||
const allProducingFactories = [...exports, ...malls]
|
||||
return calculateInputs(
|
||||
allProducingFactories,
|
||||
ignoredFactories,
|
||||
baseFactories,
|
||||
exportedFactories,
|
||||
findFactory
|
||||
)
|
||||
}, [exports, malls, ignoredFactories, baseFactories, findFactory, exportedFactories])
|
||||
return calculateInputs(allProducingFactories, baseFactories, exportedFactories, findFactory)
|
||||
}, [exports, malls, baseFactories, findFactory, exportedFactories])
|
||||
|
||||
const [suggestionsExport, suggestionMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
|
||||
const selectedValues = uniquify([...exports, ...malls])
|
||||
@@ -58,110 +48,142 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
|
||||
const prerequisites = Object.keys(factory.recipe.prerequisites ?? {})
|
||||
return prerequisites.every(pre => availableIngredients.includes(pre))
|
||||
})
|
||||
.reduce((acc, factory) =>
|
||||
(factory.usedBy?.length ?? 0) >= 3
|
||||
? [[...acc[0], factory], acc[1]]
|
||||
: [acc[0], [...acc[1], factory]],
|
||||
.reduce(
|
||||
(acc, factory) =>
|
||||
(factory.usedBy?.length ?? 0) >= 3
|
||||
? [[...acc[0], factory], acc[1]]
|
||||
: [acc[0], [...acc[1], factory]],
|
||||
[[], []] as [EnrichedEntity[], EnrichedEntity[]]
|
||||
)
|
||||
}, [exports, malls, intermediates, inputs, factories, doNotSuggest])
|
||||
|
||||
const addFactory = useCallback((uid: string, type: Parameters<typeof setFactories>[2]) => {
|
||||
setFactories(name, [...group[type], uid], type)
|
||||
}, [group, name, setFactories])
|
||||
const addFactory = useCallback(
|
||||
(uid: string, type: Parameters<typeof setFactories>[2]) => {
|
||||
setFactories(name, [...group[type], uid], type)
|
||||
},
|
||||
[group, name, setFactories]
|
||||
)
|
||||
|
||||
const setExportFactories = useCallback((factories: string[]) => setFactories(name, factories, 'exports'), [setFactories, name])
|
||||
const setMallFactories = useCallback((factories: string[]) => setFactories(name, factories, 'malls'), [setFactories, name])
|
||||
const setExportFactories = useCallback(
|
||||
(exportFactories: string[]) => setFactories(name, exportFactories, 'exports'),
|
||||
[setFactories, name]
|
||||
)
|
||||
const setMallFactories = useCallback(
|
||||
(mallFactories: string[]) => setFactories(name, mallFactories, '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>
|
||||
<Link href={{pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`, query: router.query}}>👁</Link>
|
||||
<button
|
||||
className={styles.quit}
|
||||
onBlur={() => setDeleteConfirm(false)}
|
||||
onClick={() => !isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name)} style={{display: 'block'}}
|
||||
>
|
||||
{isDeleteConfirm ? 'Delete GroupBox?' : 'X'}
|
||||
</button>
|
||||
<h4>Exported Factories</h4>
|
||||
<FactorySelect
|
||||
id={name+"-exports"}
|
||||
factories={exports}
|
||||
onSetFactories={setExportFactories}
|
||||
/>
|
||||
<h4>Mall Factories</h4>
|
||||
<FactorySelect
|
||||
id={name+"-malls"}
|
||||
factories={malls}
|
||||
onSetFactories={setMallFactories}
|
||||
/>
|
||||
{ inputs.length ? <>
|
||||
<h4>Input Factories ({inputs.length})</h4>
|
||||
<div className={styles.flex}>
|
||||
{ inputs.map(input => <EntitySpan
|
||||
key={input}
|
||||
value={input}
|
||||
state={getInputType(input)}
|
||||
onContextMenu={event => {
|
||||
event.preventDefault()
|
||||
setIgnoredFactories([...ignoredFactories, input])
|
||||
}}
|
||||
rightClickText={"Exclude this recipe from suggestions"}
|
||||
/>) }
|
||||
</div>
|
||||
</> : null }
|
||||
{ intermediates.length ? <>
|
||||
<h4>Intermediate Factories ({intermediates.length})</h4>
|
||||
<div className={styles.flex}>
|
||||
{ intermediates.map(intermediate => <EntitySpan
|
||||
key={intermediate}
|
||||
value={intermediate}
|
||||
state={getInputType(intermediate)}
|
||||
/>) }
|
||||
</div>
|
||||
</> : null }
|
||||
{ suggestionsExport.length ? <>
|
||||
<h4>Suggestions (Export)</h4>
|
||||
<div className={styles.flex}>
|
||||
{ suggestionsExport.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 }
|
||||
{ suggestionMall.length ? <>
|
||||
<h4>Suggestions (Mall)</h4>
|
||||
<div className={styles.flex}>
|
||||
{ suggestionMall.map(suggestion => <EntitySpan
|
||||
key={suggestion.href}
|
||||
value={suggestion}
|
||||
onClick={() => addFactory(suggestion.href, 'malls')}
|
||||
onContextMenu={event => {
|
||||
event.preventDefault()
|
||||
setIgnoredFactories([...ignoredFactories, suggestion.href])
|
||||
}}
|
||||
leftClickText={"Add to mall factories"}
|
||||
rightClickText={"Exclude this recipe from suggestions"}
|
||||
/>) }
|
||||
</div>
|
||||
</> : null }
|
||||
</div>
|
||||
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>
|
||||
<Link
|
||||
href={{
|
||||
pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`,
|
||||
query: router.query
|
||||
}}
|
||||
>
|
||||
👁
|
||||
</Link>
|
||||
<button
|
||||
className={styles.quit}
|
||||
onBlur={() => setDeleteConfirm(false)}
|
||||
onClick={() => (!isDeleteConfirm ? setDeleteConfirm(true) : removeGroup(name))}
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{isDeleteConfirm ? 'Delete GroupBox?' : 'X'}
|
||||
</button>
|
||||
<h4>Exported Factories</h4>
|
||||
<FactorySelect
|
||||
id={name + '-exports'}
|
||||
factories={exports}
|
||||
onSetFactories={setExportFactories}
|
||||
/>
|
||||
<h4>Mall Factories</h4>
|
||||
<FactorySelect id={name + '-malls'} factories={malls} onSetFactories={setMallFactories} />
|
||||
{inputs.length ? (
|
||||
<>
|
||||
<h4>Input Factories ({inputs.length})</h4>
|
||||
<div className={styles.flex}>
|
||||
{inputs.map(input => (
|
||||
<EntitySpan
|
||||
key={input}
|
||||
value={input}
|
||||
state={getInputType(input)}
|
||||
onContextMenu={event => {
|
||||
event.preventDefault()
|
||||
setIgnoredFactories([...ignoredFactories, input])
|
||||
}}
|
||||
rightClickText={'Exclude this recipe from suggestions'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
{intermediates.length ? (
|
||||
<>
|
||||
<h4>Intermediate Factories ({intermediates.length})</h4>
|
||||
<div className={styles.flex}>
|
||||
{intermediates.map(intermediate => (
|
||||
<EntitySpan
|
||||
key={intermediate}
|
||||
value={intermediate}
|
||||
state={getInputType(intermediate)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
{suggestionsExport.length ? (
|
||||
<>
|
||||
<h4>Suggestions (Export)</h4>
|
||||
<div className={styles.flex}>
|
||||
{suggestionsExport.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}
|
||||
{suggestionMall.length ? (
|
||||
<>
|
||||
<h4>Suggestions (Mall)</h4>
|
||||
<div className={styles.flex}>
|
||||
{suggestionMall.map(suggestion => (
|
||||
<EntitySpan
|
||||
key={suggestion.href}
|
||||
value={suggestion}
|
||||
onClick={() => addFactory(suggestion.href, 'malls')}
|
||||
onContextMenu={event => {
|
||||
event.preventDefault()
|
||||
setIgnoredFactories([...ignoredFactories, suggestion.href])
|
||||
}}
|
||||
leftClickText={'Add to mall factories'}
|
||||
rightClickText={'Exclude this recipe from suggestions'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const GroupBox = memo(GroupBoxBase)
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import {FC, useMemo, useRef, useState} from "react";
|
||||
import {GroupBox} from "./GroupBox/GroupBox";
|
||||
import styles from "./Home.module.css"
|
||||
import {useFactories} from "../../src/hooks/useFactories";
|
||||
import {EnrichedEntity} from "../../src/types";
|
||||
import {EntitySpan} from "./EntitySpan/EntitySpan";
|
||||
import {useGroups} from "../contexts/GroupProvider";
|
||||
import {Preferences} from "./Preferences/Preferences";
|
||||
import {download, streamToArrayBuffer} from "../../src/download";
|
||||
import Link from "next/link";
|
||||
import {useRouter} from "next/router";
|
||||
import { FC, useMemo, useRef, useState } from 'react'
|
||||
import { GroupBox } from './GroupBox/GroupBox'
|
||||
import styles from './Home.module.css'
|
||||
import { useFactories } from '../../src/hooks/useFactories'
|
||||
import { EnrichedEntity } from '../../src/types'
|
||||
import { EntitySpan } from './EntitySpan/EntitySpan'
|
||||
import { useGroups } from '../contexts/GroupProvider'
|
||||
import { Preferences } from './Preferences/Preferences'
|
||||
import { download, streamToArrayBuffer } from '../../src/download'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export const Home: FC = () => {
|
||||
const router = useRouter()
|
||||
const {factories} = useFactories()
|
||||
const { factories } = useFactories()
|
||||
const {
|
||||
groups,
|
||||
addGroup,
|
||||
@@ -23,13 +23,14 @@ export const Home: FC = () => {
|
||||
store,
|
||||
load
|
||||
} = useGroups()
|
||||
const [newGroupValue, setNewGroupValue] = useState("New group")
|
||||
const [newGroupValue, setNewGroupValue] = useState('New group')
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const [missingExport, missingMall] = useMemo<[EnrichedEntity[], EnrichedEntity[]]>(() => {
|
||||
return factories
|
||||
.filter(factory => !doNotSuggest.has(factory.href) && factory.recipe)
|
||||
.reduce((acc, factory) =>
|
||||
.reduce(
|
||||
(acc, factory) =>
|
||||
(factory.usedBy?.length ?? 0) >= 3
|
||||
? [[...acc[0], factory], acc[1]]
|
||||
: [acc[0], [...acc[1], factory]],
|
||||
@@ -40,49 +41,66 @@ export const Home: FC = () => {
|
||||
return (
|
||||
<main>
|
||||
<h1>Factorio Microservices</h1>
|
||||
<button onClick={() => {
|
||||
download('factorio-microservices.bin', store());
|
||||
}}>Store</button>
|
||||
<button onClick={async () => {
|
||||
const res = await fetch( '/api/submit', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({groups, ignored: ignoredFactories, base: baseFactories})
|
||||
})
|
||||
if (res.ok) {
|
||||
const { uuid } = await res.json()
|
||||
if (uuid) await router.push({query: {...router.query, id: uuid}})
|
||||
}
|
||||
}}>Upload</button>
|
||||
<input type={"file"} multiple={false} ref={inputRef} onChange={async evt => {
|
||||
const stream = evt.currentTarget.files?.[0].stream() as globalThis.ReadableStream<Uint8Array>|undefined
|
||||
if (stream) {
|
||||
const array = await streamToArrayBuffer(stream)
|
||||
load(array)
|
||||
if (inputRef.current) inputRef.current.value = null as unknown as string
|
||||
}
|
||||
}}/>
|
||||
<Link href={{pathname: '/visualize', query: router.query}}>Visualize</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
download('factorio-microservices.bin', store())
|
||||
}}
|
||||
>
|
||||
Store
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const res = await fetch('/api/submit', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ groups, ignored: ignoredFactories, base: baseFactories })
|
||||
})
|
||||
if (res.ok) {
|
||||
const { uuid } = await res.json()
|
||||
if (uuid) await router.push({ query: { ...router.query, id: uuid } })
|
||||
}
|
||||
}}
|
||||
>
|
||||
Upload
|
||||
</button>
|
||||
<input
|
||||
type={'file'}
|
||||
multiple={false}
|
||||
ref={inputRef}
|
||||
onChange={async evt => {
|
||||
const stream = evt.currentTarget.files?.[0].stream() as
|
||||
| globalThis.ReadableStream<Uint8Array>
|
||||
| undefined
|
||||
if (stream) {
|
||||
const array = await streamToArrayBuffer(stream)
|
||||
load(array)
|
||||
if (inputRef.current) inputRef.current.value = null as unknown as string
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Link href={{ pathname: '/visualize', query: router.query }}>Visualize</Link>
|
||||
<Preferences />
|
||||
<fieldset>
|
||||
<legend>Missing export factories</legend>
|
||||
<div className={styles.missingFactories}>
|
||||
{ missingExport.map(missing => (
|
||||
{missingExport.map(missing => (
|
||||
<EntitySpan
|
||||
key={missing.href}
|
||||
value={missing}
|
||||
onClick={() => {
|
||||
addGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [missing.href])
|
||||
setNewGroupValue("New group")
|
||||
addGroup(newGroupValue !== 'New group' ? newGroupValue : missing.name, [
|
||||
missing.href
|
||||
])
|
||||
setNewGroupValue('New group')
|
||||
}}
|
||||
onContextMenu={event => {
|
||||
event.preventDefault()
|
||||
setIgnoredFactories([...ignoredFactories, missing.href])
|
||||
}}
|
||||
leftClickText={"Create a new group with this name and item as exported factory"}
|
||||
rightClickText={"Exclude this recipe from suggestions"}
|
||||
leftClickText={'Create a new group with this name and item as exported factory'}
|
||||
rightClickText={'Exclude this recipe from suggestions'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -90,31 +108,34 @@ export const Home: FC = () => {
|
||||
<fieldset>
|
||||
<legend>Missing mall factories</legend>
|
||||
<div className={styles.missingFactories}>
|
||||
{ missingMall.map(missing => (
|
||||
{missingMall.map(missing => (
|
||||
<EntitySpan
|
||||
key={missing.href}
|
||||
value={missing}
|
||||
onClick={() => {
|
||||
addGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [], [missing.href])
|
||||
setNewGroupValue("New group")
|
||||
addGroup(
|
||||
newGroupValue !== 'New group' ? newGroupValue : missing.name,
|
||||
[],
|
||||
[missing.href]
|
||||
)
|
||||
setNewGroupValue('New group')
|
||||
}}
|
||||
onContextMenu={event => {
|
||||
event.preventDefault()
|
||||
setIgnoredFactories([...ignoredFactories, missing.href])
|
||||
}}
|
||||
leftClickText={"Create a new group with this name and item as mall factory"}
|
||||
rightClickText={"Exclude this recipe from suggestions"}
|
||||
leftClickText={'Create a new group with this name and item as mall factory'}
|
||||
rightClickText={'Exclude this recipe from suggestions'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
<div className={styles.grid}>
|
||||
{
|
||||
Object
|
||||
.values(groups)
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((group) => <GroupBox key={group.name} group={group} />)
|
||||
}
|
||||
{Object.values(groups)
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map(group => (
|
||||
<GroupBox key={group.name} group={group} />
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {FC} from "react";
|
||||
import { FC } from 'react'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
@@ -6,11 +6,25 @@ interface Props {
|
||||
classClick?: string
|
||||
}
|
||||
|
||||
export const LeftClickIcon: FC<Props> = ({className, classBody, classClick}) => {
|
||||
export const LeftClickIcon: FC<Props> = ({ className, classBody, classClick }) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" className={className}>
|
||||
<path className={classBody} d="M51.552,8.117v32.554l-3.095,0.009c-9.203,0.027-17.447,0.297-24.509,0.803l-0.291,0.021 c-0.026,1.733-0.036,3.521-0.036,5.378c0,24.854,1.527,45,26.379,45c24.854,0,26.379-20.146,26.379-45 C76.379,22.563,74.903,8.701,51.552,8.117z" />
|
||||
<path className={classClick} id="click" d="M48.448,37.577V8.117C27.971,8.629,24.313,19.354,23.727,38.388C29.914,37.945,38.002,37.607,48.448,37.577z" />
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
version='1.1'
|
||||
x='0px'
|
||||
y='0px'
|
||||
viewBox='0 0 100 100'
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
className={classBody}
|
||||
d='M51.552,8.117v32.554l-3.095,0.009c-9.203,0.027-17.447,0.297-24.509,0.803l-0.291,0.021 c-0.026,1.733-0.036,3.521-0.036,5.378c0,24.854,1.527,45,26.379,45c24.854,0,26.379-20.146,26.379-45 C76.379,22.563,74.903,8.701,51.552,8.117z'
|
||||
/>
|
||||
<path
|
||||
className={classClick}
|
||||
id='click'
|
||||
d='M48.448,37.577V8.117C27.971,8.629,24.313,19.354,23.727,38.388C29.914,37.945,38.002,37.607,48.448,37.577z'
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
import {FC, useState} from "react";
|
||||
import {FactorySelect} from "../FactorySelect/FactorySelect";
|
||||
import {useGroups} from "../../contexts/GroupProvider";
|
||||
import { FC, useState } from 'react'
|
||||
import { FactorySelect } from '../FactorySelect/FactorySelect'
|
||||
import { useGroups } from '../../contexts/GroupProvider'
|
||||
|
||||
export const Preferences: FC = () => {
|
||||
const {
|
||||
addGroup,
|
||||
baseFactories,
|
||||
setBaseFactories,
|
||||
ignoredFactories,
|
||||
setIgnoredFactories
|
||||
} = useGroups()
|
||||
const [newGroupValue, setNewGroupValue] = useState("New group")
|
||||
return <>
|
||||
<fieldset>
|
||||
<legend>Basic Values</legend>
|
||||
<FactorySelect
|
||||
id={'baseFactoriesSelect'}
|
||||
factories={baseFactories}
|
||||
onSetFactories={setBaseFactories}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Ignored Values</legend>
|
||||
<FactorySelect
|
||||
id={'ignoredFactoriesSelect'}
|
||||
factories={ignoredFactories}
|
||||
onSetFactories={setIgnoredFactories}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Add new groups</legend>
|
||||
<input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)}/>
|
||||
<button disabled={!newGroupValue} onClick={() => {
|
||||
addGroup(newGroupValue)
|
||||
setNewGroupValue("New group")
|
||||
}}>
|
||||
Add group "{newGroupValue}"
|
||||
</button>
|
||||
</fieldset>
|
||||
</>
|
||||
const { addGroup, baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } =
|
||||
useGroups()
|
||||
const [newGroupValue, setNewGroupValue] = useState('New group')
|
||||
return (
|
||||
<>
|
||||
<fieldset>
|
||||
<legend>Basic Values</legend>
|
||||
<FactorySelect
|
||||
id={'baseFactoriesSelect'}
|
||||
factories={baseFactories}
|
||||
onSetFactories={setBaseFactories}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Ignored Values</legend>
|
||||
<FactorySelect
|
||||
id={'ignoredFactoriesSelect'}
|
||||
factories={ignoredFactories}
|
||||
onSetFactories={setIgnoredFactories}
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Add new groups</legend>
|
||||
<input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)} />
|
||||
<button
|
||||
disabled={!newGroupValue}
|
||||
onClick={() => {
|
||||
addGroup(newGroupValue)
|
||||
setNewGroupValue('New group')
|
||||
}}
|
||||
>
|
||||
Add group "{newGroupValue}"
|
||||
</button>
|
||||
</fieldset>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,24 +1,29 @@
|
||||
import {FC} from "react"
|
||||
import {Recipe} from "../../../src/types"
|
||||
import {EntityIcon} from "../EntityIcon/EntityIcon";
|
||||
import { FC } from 'react'
|
||||
import { Recipe } from '../../../src/types'
|
||||
import { EntityIcon } from '../EntityIcon/EntityIcon'
|
||||
import styles from './Recipe.module.css'
|
||||
|
||||
interface Props {
|
||||
recipe: Recipe
|
||||
}
|
||||
|
||||
export const RecipeSpan: FC<Props> = ({recipe}) => {
|
||||
const toEntityIcon = ([key, amount]: [string, number]) => <EntityIcon key={key} value={key} amount={amount} />
|
||||
const joinByPlus = (elems: JSX.Element[]) => elems.reduce((acc, curr) => {
|
||||
if (acc.length) {
|
||||
return [...acc, '+', curr]
|
||||
} else {
|
||||
return [curr]
|
||||
}
|
||||
}, [] as (JSX.Element|string)[])
|
||||
const before = Object.entries({...recipe.prerequisites}).map(toEntityIcon)
|
||||
const after = Object.entries({...recipe.output}).map(toEntityIcon)
|
||||
return <span className={styles.recipe}>
|
||||
{joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])} → {joinByPlus(after)}
|
||||
</span>
|
||||
export const RecipeSpan: FC<Props> = ({ recipe }) => {
|
||||
const toEntityIcon = ([key, amount]: [string, number]) => (
|
||||
<EntityIcon key={key} value={key} amount={amount} />
|
||||
)
|
||||
const joinByPlus = (elems: JSX.Element[]) =>
|
||||
elems.reduce((acc, curr) => {
|
||||
if (acc.length) {
|
||||
return [...acc, '+', curr]
|
||||
} else {
|
||||
return [curr]
|
||||
}
|
||||
}, [] as (JSX.Element | string)[])
|
||||
const before = Object.entries({ ...recipe.prerequisites }).map(toEntityIcon)
|
||||
const after = Object.entries({ ...recipe.output }).map(toEntityIcon)
|
||||
return (
|
||||
<span className={styles.recipe}>
|
||||
{joinByPlus([toEntityIcon(['/Time', recipe.time]), ...before])} → {joinByPlus(after)}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
.node {
|
||||
padding: 0.5em;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DDDDDD;
|
||||
background-color: #EEE;
|
||||
border: 1px solid #dddddd;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
||||
@@ -1,29 +1,44 @@
|
||||
import {FC, HTMLProps, PropsWithChildren, useEffect, useRef, useState} from "react";
|
||||
import { FC, HTMLProps, PropsWithChildren, useEffect, useRef, useState } from 'react'
|
||||
import styles from './ProducingGraph.module.css'
|
||||
import {EntityIcon} from "../../home/EntityIcon/EntityIcon";
|
||||
import {createPath, drawLine} from "../../../src/svg";
|
||||
import {AdditionalNode, GraphNode, GraphNodeWithIds, isAdditionalNode} from "../../../src/graph-untangle/types";
|
||||
import {graphUntangled} from "../../../src/graph-untangle";
|
||||
import {Dict} from "../../../src/types";
|
||||
import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
|
||||
import { createPath, drawLine } from '../../../src/svg'
|
||||
import {
|
||||
AdditionalNode,
|
||||
GraphNode,
|
||||
GraphNodeWithIds,
|
||||
isAdditionalNode
|
||||
} from '../../../src/graph-untangle/types'
|
||||
import { graphUntangled } from '../../../src/graph-untangle'
|
||||
import { Dict } from '../../../src/types'
|
||||
|
||||
interface Props<T extends {}> {
|
||||
interface Props<T extends Dict<unknown>> {
|
||||
nodes: GraphNode<T>[]
|
||||
inputs: string[]
|
||||
outputs?: string[]
|
||||
childType: FC<HTMLProps<HTMLDivElement> & {node: GraphNode<T>}>
|
||||
childType: FC<HTMLProps<HTMLDivElement> & { node: GraphNode<T> }>
|
||||
}
|
||||
|
||||
export const ProducingGraph = <T extends Dict<unknown>,>({nodes, inputs, outputs, childType: ChildType}: PropsWithChildren<Props<T>>) => {
|
||||
export const ProducingGraph = <T extends Dict<unknown>>({
|
||||
nodes,
|
||||
inputs,
|
||||
outputs,
|
||||
childType: ChildType
|
||||
}: PropsWithChildren<Props<T>>) => {
|
||||
const planeRef = useRef<HTMLDivElement>(null)
|
||||
const [[rows, nodeMap], setGraph] = useState<[string[][], Dict<GraphNodeWithIds<T|AdditionalNode>>]>(graphUntangled(nodes, inputs, outputs ?? [], 3000))
|
||||
const [[rows, nodeMap]] = useState<[string[][], Dict<GraphNodeWithIds<T | AdditionalNode>>]>(
|
||||
graphUntangled(nodes, inputs, outputs ?? [], 3000)
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!planeRef.current) return
|
||||
const plane = planeRef.current
|
||||
function createSvgElement() {
|
||||
const elem = document.createElementNS("http://www.w3.org/2000/svg", "svg")
|
||||
const elem = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
||||
elem.id = 'arrows'
|
||||
elem.setAttribute('style', 'position: absolute; inset: 0 0 0 0; pointer-events: none; z-index: -10;')
|
||||
elem.setAttribute(
|
||||
'style',
|
||||
'position: absolute; inset: 0 0 0 0; pointer-events: none; z-index: -10;'
|
||||
)
|
||||
elem.setAttributeNS(null, 'stroke', 'black')
|
||||
elem.setAttributeNS(null, 'fill', 'none')
|
||||
plane.appendChild(elem)
|
||||
@@ -37,69 +52,75 @@ export const ProducingGraph = <T extends Dict<unknown>,>({nodes, inputs, outputs
|
||||
svg.setAttributeNS(null, 'viewBox', `0 0 ${width} ${height}`)
|
||||
svg.replaceChildren()
|
||||
|
||||
let paths: string[] = []
|
||||
const paths: string[] = []
|
||||
plane.querySelectorAll('[data-outputs]').forEach(startNode => {
|
||||
if (!(startNode instanceof HTMLElement)) return
|
||||
(startNode.dataset.outputs?.split(' ') ?? []).forEach(output => {
|
||||
;(startNode.dataset.outputs?.split(' ') ?? []).forEach(output => {
|
||||
const endNode = plane.querySelector(`[data-name="${output}"]`)
|
||||
if (!(endNode instanceof HTMLElement)) return
|
||||
paths.push(createPath(plane.getBoundingClientRect(), startNode.getBoundingClientRect(), endNode.getBoundingClientRect()))
|
||||
paths.push(
|
||||
createPath(
|
||||
plane.getBoundingClientRect(),
|
||||
startNode.getBoundingClientRect(),
|
||||
endNode.getBoundingClientRect()
|
||||
)
|
||||
)
|
||||
})
|
||||
})
|
||||
plane.querySelectorAll('[data-hidden="true"][data-outputs]').forEach(elem => {
|
||||
if (!(elem instanceof HTMLElement)) return
|
||||
paths.push(drawLine(plane.getBoundingClientRect(), elem.getBoundingClientRect()))
|
||||
})
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg',"path")
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
|
||||
path.setAttributeNS(null, 'd', paths.join(' '))
|
||||
svg.appendChild(path)
|
||||
})
|
||||
|
||||
return <div className={styles.plane} ref={planeRef}>
|
||||
{rows.map((row, colIdx) => (
|
||||
<div className={styles.row} key={colIdx} data-row={true}>
|
||||
{
|
||||
row.map((uid) => {
|
||||
return (
|
||||
<div className={styles.plane} ref={planeRef}>
|
||||
{rows.map((row, colIdx) => (
|
||||
<div className={styles.row} key={colIdx} data-row={true}>
|
||||
{row.map(uid => {
|
||||
const node = nodeMap[uid]
|
||||
return (
|
||||
!isAdditionalNode(node)
|
||||
? <span
|
||||
data-name={node.___uid}
|
||||
data-inputs={node.___uidInputs.join(' ')}
|
||||
data-outputs={node.___uidOutputs.join(' ')}
|
||||
key={node.___uid}
|
||||
data-hidden={node.___uidOutputs.length > 0}>
|
||||
<ChildType
|
||||
className={styles.node}
|
||||
node={node}
|
||||
/>
|
||||
</span>
|
||||
: node.___type === 'h'
|
||||
? <span
|
||||
className={styles.hidden}
|
||||
key={node.___uid}
|
||||
data-name={node.___uid}
|
||||
data-inputs={node.___uidInputs.join(' ')}
|
||||
data-outputs={node.___uidOutputs.join(' ')}
|
||||
data-hidden={true}></span>
|
||||
: node.___type === 'i'
|
||||
? <span
|
||||
key={node.___uid}
|
||||
data-name={node.___uid}
|
||||
data-outputs={node.___uidOutputs.join(' ')}
|
||||
data-hidden={true}>
|
||||
<EntityIcon value={node.name}/>
|
||||
</span>
|
||||
: <EntityIcon
|
||||
key={node.___uid}
|
||||
value={node.name}
|
||||
data-name={node.___uid}
|
||||
data-inputs={node.___uidInputs.join(' ')}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
return !isAdditionalNode(node) ? (
|
||||
<span
|
||||
data-name={node.___uid}
|
||||
data-inputs={node.___uidInputs.join(' ')}
|
||||
data-outputs={node.___uidOutputs.join(' ')}
|
||||
key={node.___uid}
|
||||
data-hidden={node.___uidOutputs.length > 0}
|
||||
>
|
||||
<ChildType className={styles.node} node={node} />
|
||||
</span>
|
||||
) : node.___type === 'h' ? (
|
||||
<span
|
||||
className={styles.hidden}
|
||||
key={node.___uid}
|
||||
data-name={node.___uid}
|
||||
data-inputs={node.___uidInputs.join(' ')}
|
||||
data-outputs={node.___uidOutputs.join(' ')}
|
||||
data-hidden={true}
|
||||
></span>
|
||||
) : node.___type === 'i' ? (
|
||||
<span
|
||||
key={node.___uid}
|
||||
data-name={node.___uid}
|
||||
data-outputs={node.___uidOutputs.join(' ')}
|
||||
data-hidden={true}
|
||||
>
|
||||
<EntityIcon value={node.name} />
|
||||
</span>
|
||||
) : (
|
||||
<EntityIcon
|
||||
key={node.___uid}
|
||||
value={node.name}
|
||||
data-name={node.___uid}
|
||||
data-inputs={node.___uidInputs.join(' ')}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import {FC, PropsWithChildren, useEffect, useRef} from "react";
|
||||
import IndianaDragScoll from "react-indiana-drag-scroll";
|
||||
import { FC, PropsWithChildren, useEffect, useRef } from 'react'
|
||||
import IndianaDragScoll from 'react-indiana-drag-scroll'
|
||||
import styles from './ScrollContainer.module.css'
|
||||
|
||||
export const ScrollContainer: FC<PropsWithChildren> = ({children}) => {
|
||||
const container = useRef<HTMLDivElement>(null);
|
||||
export const ScrollContainer: FC<PropsWithChildren> = ({ children }) => {
|
||||
const container = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (container.current) {
|
||||
container.current.oncontextmenu = e => e.preventDefault()
|
||||
}
|
||||
}, []);
|
||||
}, [])
|
||||
|
||||
return <IndianaDragScoll
|
||||
className={styles.container}
|
||||
buttons={[2]}
|
||||
innerRef={container}
|
||||
hideScrollbars={false}
|
||||
activationDistance={5}
|
||||
>
|
||||
<div className={styles.inner}>
|
||||
{children}
|
||||
</div>
|
||||
</IndianaDragScoll>
|
||||
return (
|
||||
<IndianaDragScoll
|
||||
className={styles.container}
|
||||
buttons={[2]}
|
||||
innerRef={container}
|
||||
hideScrollbars={false}
|
||||
activationDistance={5}
|
||||
>
|
||||
<div className={styles.inner}>{children}</div>
|
||||
</IndianaDragScoll>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user