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

106
components/home/EntitySpan/EntitySpan.tsx
View File

@@ -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)