Moving files around

2022-08-10 11:07:33 +02:00
parent 270ec5e7ab
commit 8dfc844c24
13 changed files with 22 additions and 22 deletions
--- a/components/home/EntityIcon/EntityIcon.module.css
+++ b/components/home/EntityIcon/EntityIcon.module.css
@@ -0,0 +1,27 @@
+.span {
+    background: #DDD;
+    font-size: 2em;
+    border: 1px solid white;
+    display: inline-block;
+    position: relative;
+}
+
+.amount {
+    position: absolute;
+    inset-inline-end: 0.2em;
+    inset-block-end: 0;
+    font-size: 50%;
+    color: white;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+}
+
+.img {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-inline-end: 0.2em;
+}
+
+.strong {
+    font-weight: 600;
+}
--- a/components/home/EntityIcon/EntityIcon.tsx
+++ b/components/home/EntityIcon/EntityIcon.tsx
@@ -0,0 +1,29 @@
+import {FC, HTMLProps, useMemo} from "react"
+import {Entity} from "../../../src/types"
+import {useDetails} from "../../../src/hooks/useDetails"
+import styles from './EntityIcon.module.css'
+
+interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
+  value: Entity|string
+  amount?: number
+}
+
+export const EntityIcon: FC<Props> = ({value, amount, ...rest}) => {
+  const details = useDetails()
+  const entity = useMemo<Entity>(() => {
+    return typeof value === "object"
+      ? value
+      : details.find(detail => detail.href === value) ?? {
+        href: value,
+        name: value,
+        image: value,
+        recipe: undefined
+      }
+  }, [details, value])
+
+  return <span className={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}/>
+    {amount !== undefined && <span className={styles.amount}>{amount}</span>}
+  </span>
+}
--- a/components/home/EntitySpan/EntitySpan.module.css
+++ b/components/home/EntitySpan/EntitySpan.module.css
@@ -0,0 +1,73 @@
+.span {
+    background: #DDD;
+    font-size: 1em;
+    border: 1px solid white;
+    display: inline-block;
+    position: relative;
+}
+
+.tooltip {
+    --background: lightsalmon;
+    --arrow-width: 0.6em;
+    --arrow-height: 0.4em;
+    display: none;
+    position: absolute;
+    left: calc(100% + var(--arrow-width));
+    top: -500%;
+    bottom: -500%;
+    margin: auto 0;
+    width: max-content;
+    height: max-content;
+    background: var(--background);
+    padding: 0.5em;
+    border-radius: 0.7em;
+    z-index: 1;
+}
+
+.span:hover > .tooltip {
+    display: initial;
+}
+
+.tooltip::before {
+    content: "";
+    border-style: solid;
+    top: -500%;
+    bottom: -500%;
+    margin: auto 0;
+    height: max-content;
+    border-width: var(--arrow-height) var(--arrow-width) var(--arrow-height) 0;
+    border-color: transparent var(--background) transparent transparent;
+    position: absolute;
+    left: calc(var(--arrow-width) * -1 + 1px);
+}
+
+.img {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-inline-end: 0.2em;
+    transform: translateY(0.1em);
+}
+
+.strong {
+    font-weight: 600;
+    margin-block: 1em 0.4em;
+}
+
+.strong:first-child {
+    margin-block-start: 0;
+}
+
+.leftClick {
+    height: 1em;
+    transform: translateY(0.1em);
+}
+
+.rightClick {
+    height: 1em;
+    transform: scaleX(-1) translateY(0.1em);
+}
+
+.clickBtn {
+    fill: red;
+}
--- a/components/home/EntitySpan/EntitySpan.tsx
+++ b/components/home/EntitySpan/EntitySpan.tsx
@@ -0,0 +1,47 @@
+import {FC, HTMLProps, useMemo} from "react"
+import {Entity} from "../../../src/types"
+import {useDetails} from "../../../src/hooks/useDetails"
+import styles from './EntitySpan.module.css'
+import {RecipeSpan} from "../Recipe/Recipe";
+import {LeftClickIcon} from "../LeftClickIcon/LeftClickIcon";
+
+interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
+  value: Entity|string
+  leftClickText?: string
+  rightClickText?: string
+}
+
+export const EntitySpan: FC<Props> = ({value, leftClickText, rightClickText, ...rest}) => {
+  const details = useDetails()
+  const entity = useMemo<Entity>(() => {
+    return typeof value === "object"
+      ? value
+      : details.find(detail => detail.href === value) ?? {
+        href: value,
+        name: value,
+        image: value,
+        recipe: undefined
+      }
+  }, [details, value])
+
+  return <span className={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}/>
+    {entity.name}
+    <div className={styles.tooltip}>
+      {entity.recipe && (
+        <>
+          <div className={styles.strong}>Recipe</div>
+          <RecipeSpan recipe={entity.recipe}/>
+        </>
+      )}
+      {(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>
+}
--- a/components/home/FactorySelect/FactorySelect.tsx
+++ b/components/home/FactorySelect/FactorySelect.tsx
@@ -0,0 +1,33 @@
+import {FC, useEffect, useState} from "react";
+import Select from "react-select";
+import {isNonNullable} from "../../../src/utils";
+import details from "../../../res/details.json";
+
+interface Props {
+  factories: string[]
+  onSetFactories: (factories: string[]) => void
+}
+
+const options = details.map(detail => ({
+  label: detail.name,
+  value: detail.href
+}))
+
+export const FactorySelect: FC<Props> = ({factories, onSetFactories}) => {
+  const [state, setState] = useState<typeof options>([])
+  useEffect(() => {
+    setState(factories
+      .map(factory => options.find(option => option.value === factory))
+      .filter(isNonNullable))
+  }, [factories])
+
+  return <Select
+    value={state}
+    isMulti
+    options={options as never}
+    onChange={e => {
+      setState(e as typeof options)
+      onSetFactories(e.map(s => s?.value))
+    }}
+  />
+}
--- a/components/home/Group/Group.module.css
+++ b/components/home/Group/Group.module.css
@@ -0,0 +1,4 @@
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
--- a/components/home/Group/Group.tsx
+++ b/components/home/Group/Group.tsx
@@ -0,0 +1,140 @@
+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";
+
+interface Props {
+  onRemove: () => void
+  onSetOutputFactories: (uids: string[]) => void
+  onSetIntermediateFactories: (uids: string[]) => void
+  onSetInputFactories: (uids: string[]) => void
+  onToggleExported: () => void
+  onRename: (name: string) => void
+  onDoIgnore: (name: string) => void
+  group: Group
+  sets: {
+    doNotSuggest: Set<string>
+    basic: Set<string>
+    exported: Set<string>
+  }
+}
+
+export const GroupBox: FC<Props> = ({
+  onRemove,
+  onRename,
+  onSetOutputFactories,
+  onSetIntermediateFactories,
+  onSetInputFactories,
+  onToggleExported,
+  group: {
+    inputs,
+    intermediates,
+    factories,
+    isExported,
+    name
+  },
+  sets: {
+    doNotSuggest,
+    basic,
+    exported
+  },
+  onDoIgnore
+}) => {
+  const details = useDetails()
+
+  const calculatedInputs = useMemo<string[]>(() => {
+    const newData: string[] = details
+      .filter(detail => intermediates.includes(detail.href) || factories.includes(detail.href))
+      .flatMap(detail => Object.keys(detail.recipe?.prerequisites ?? {}))
+    const uniqueInputs = Array.from(new Set(newData))
+    return uniqueInputs
+      .filter(input => !intermediates.includes(input) && !factories.includes(input))
+  }, [details, intermediates, factories])
+
+  const suggestions = useMemo<Entity[]>(() => {
+    const availableIngredients = Array.from(new Set([...intermediates, ...factories, ...calculatedInputs, ...inputs]))
+    const selectedValues = Array.from(new Set([...intermediates, ...factories, ...inputs]))
+    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))
+      })
+  }, [inputs, doNotSuggest, details, calculatedInputs, intermediates, factories])
+
+  const addIntermediateFactory = (uid: string) => {
+    onSetIntermediateFactories([...intermediates, uid])
+  }
+
+  const addOutputFactory = (uid: string) => {
+    onSetOutputFactories([...factories, uid])
+  }
+
+  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()
+          onRename(event.currentTarget.innerText);
+        }}
+      >
+        {name}
+      </h3>
+      <button onClick={onRemove} style={{display: 'block'}}>X</button>
+      <input type={"checkbox"} onChange={onToggleExported} checked={isExported} style={{display: 'block'}}/>
+      <label>Additional Inputs</label>
+      <FactorySelect
+        factories={inputs}
+        onSetFactories={onSetInputFactories}
+      />
+      <label>Intermediate Factories</label>
+      <FactorySelect
+        factories={intermediates}
+        onSetFactories={onSetIntermediateFactories}
+      />
+      <label>Output Factories</label>
+      <FactorySelect
+        factories={factories}
+        onSetFactories={onSetOutputFactories}
+      />
+      <div className={styles.grid}>
+        <div>
+          <h4>Inputs</h4>
+          <ul>
+            {
+              calculatedInputs.map(input => <li key={input}><EntitySpan
+                value={input}
+                onClick={() => addIntermediateFactory(input)}
+                style={{color: basic.has(input) ? 'darkgreen' : exported.has(input) ? 'orange' : undefined}}
+                leftClickText={"Add to intermediate factories"}
+              /></li>)
+            }
+          </ul>
+        </div>
+        <div>
+          <h4>Suggestions</h4>
+          <ul>
+            {suggestions.map(suggestion => <li key={suggestion.href}>
+              <EntitySpan
+                value={suggestion}
+                onClick={() => addOutputFactory(suggestion.href)}
+                onContextMenu={event => {
+                  event.preventDefault()
+                  onDoIgnore(suggestion.href)
+                }}
+                leftClickText={"Add to output factories"}
+                rightClickText={"Exclude this recipe from suggestions"}
+              />
+            </li>)}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+}
--- a/components/home/Home.module.css
+++ b/components/home/Home.module.css
@@ -0,0 +1,14 @@
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(500px, max-content));
+}
+
+.missingFactories {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.1em;
+}
+
+.missingFactories > * {
+    width: max-content;
+}
--- a/components/home/Home.tsx
+++ b/components/home/Home.tsx
@@ -0,0 +1,141 @@
+import {FC, useCallback, useEffect, useMemo, useState} from "react";
+import {useLocalStorage} from "../../src/hooks/useLocalStorage";
+import {GroupBox} from "./Group/Group";
+import {FactorySelect} from "./FactorySelect/FactorySelect";
+import styles from "./Home.module.css"
+import {sortByProperty} from "../../src/utils";
+import {useDetails} from "../../src/hooks/useDetails";
+import {Entity, Group} from "../../src/types";
+import pako from 'pako';
+import {EntitySpan} from "./EntitySpan/EntitySpan";
+
+export const HomeComponent: FC = () => {
+  const details = useDetails()
+  const [newGroupValue, setNewGroupValue] = useState("New group")
+  const [excludedSuggestions, setExcludedSuggestions] = useLocalStorage<string[]>('excludedSuggestions', [])
+  const [basicValues, setBasicValues] = useLocalStorage<string[]>('basicValues', [])
+
+  const [groups, setGroups] = useLocalStorage<Group[]>('serviceGroups', [])
+  const [clientGroups, setClientGroups] = useState<Group[]>([])
+
+  const doNotSuggest = useMemo<Set<string>>(() => {
+    return new Set([...groups.flatMap(group => [...(group.name.includes('Mall') ? group.intermediates : []), ...group.factories]), ...excludedSuggestions, ...basicValues])
+  }, [basicValues, groups, excludedSuggestions])
+
+  const basicSet = useMemo<Set<string>>(() => {
+    return new Set(basicValues)
+  }, [basicValues])
+
+  const exportedSet = useMemo<Set<string>>(() => {
+    return new Set(groups
+      .filter(group => group.isExported)
+      .flatMap(group => group.factories)
+    )
+  }, [groups])
+
+  const missingFactories = useMemo<Entity[]>(() => {
+    return details.filter(detail => !doNotSuggest.has(detail.href) && detail.recipe)
+  }, [details, doNotSuggest])
+
+  useEffect(() => setClientGroups(groups), [groups])
+  const removeGroup = (idx: number) => setGroups(groups => {
+    groups.splice(idx, 1)
+    return groups
+  })
+  const appendGroup = useCallback((name: string, factories: string[] = []) => setGroups(groups => {
+    groups.push({name, factories, intermediates: [], inputs: []})
+    groups.sort(sortByProperty(group => group.name))
+    return groups
+  }), [setGroups])
+  const setFactories = useCallback((idx: number, uids: string[], key: 'intermediates'|'factories'|'inputs') => setGroups(groups => {
+    groups[idx][key] = uids
+    return groups
+  }), [setGroups])
+  const renameGroup = useCallback((idx: number, name: string) => setGroups(groups => {
+    groups[idx].name = name
+    groups.sort(sortByProperty(group => group.name))
+    return groups
+  }), [setGroups])
+  const toggleExported = useCallback((idx: number) => setGroups(groups => {
+    groups[idx].isExported = !groups[idx].isExported
+    groups.sort(sortByProperty(group => group.name))
+    return groups
+  }), [setGroups])
+
+  const store = () => {
+    const string = JSON.stringify(groups)
+    const btoa = (bin: Uint8Array) => Buffer.from(bin).toString('base64')
+    const atob = (str: string) => Buffer.from(str, 'base64')
+    const compressed = btoa(pako.deflate(string))
+    console.log(string.length, compressed.length)
+    const uncompressed = pako.inflate(atob(compressed), {to: "string"})
+  }
+
+  return (
+    <main>
+      <h1>Factorio Microservices</h1>
+      <button onClick={store}>Store</button>
+      <fieldset>
+        <legend>Basic Values</legend>
+        <FactorySelect
+          factories={basicValues}
+          onSetFactories={setBasicValues}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Ignored Values</legend>
+        <FactorySelect
+          factories={excludedSuggestions}
+          onSetFactories={setExcludedSuggestions}
+        />
+      </fieldset>
+      <fieldset>
+        <legend>Add new groups</legend>
+        <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)}/>
+        <button disabled={!newGroupValue} onClick={() => {
+          appendGroup(newGroupValue)
+          setNewGroupValue("New group")
+        }}>
+          Add group &quot;{newGroupValue}&quot;
+        </button>
+      </fieldset>
+      <fieldset>
+        <legend>Missing factories</legend>
+        <div className={styles.missingFactories}>
+          { missingFactories.map(missing => (
+            <EntitySpan
+              key={missing.href}
+              value={missing}
+              onClick={() => {
+                appendGroup(newGroupValue !== "New group" ? newGroupValue : missing.name, [missing.href])
+                setNewGroupValue("New group")
+              }}
+              onContextMenu={event => {
+                event.preventDefault()
+                setExcludedSuggestions([...excludedSuggestions, missing.href])
+              }}
+              leftClickText={"Create a new factory with this item and name"}
+              rightClickText={"Exclude this recipe from suggestions"}
+            />
+          ))}
+        </div>
+      </fieldset>
+      <div className={styles.grid}>
+        {
+          clientGroups.map((group, idx) => <GroupBox
+            key={idx}
+            group={group}
+            onRemove={() => removeGroup(idx)}
+            onRename={(name: string) => renameGroup(idx, name)}
+            onSetOutputFactories={uids => setFactories(idx, uids, 'factories')}
+            onSetIntermediateFactories={uids => setFactories(idx, uids, 'intermediates')}
+            onSetInputFactories={uids => setFactories(idx, uids, 'inputs')}
+            onToggleExported={() => toggleExported(idx)}
+            sets={{doNotSuggest, basic: basicSet, exported: exportedSet}}
+            onDoIgnore={uid => setExcludedSuggestions([...excludedSuggestions, uid])}
+          />)
+        }
+      </div>
+    </main>
+  )
+}
--- a/components/home/LeftClickIcon/LeftClickIcon.tsx
+++ b/components/home/LeftClickIcon/LeftClickIcon.tsx
@@ -0,0 +1,16 @@
+import {FC} from "react";
+
+interface Props {
+  className?: string
+  classBody?: string
+  classClick?: string
+}
+
+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>
+  )
+}
--- a/components/home/Recipe/Recipe.module.css
+++ b/components/home/Recipe/Recipe.module.css
@@ -0,0 +1,5 @@
+.recipe {
+    align-items: center;
+    display: flex;
+    gap: 0.2em;
+}
--- a/components/home/Recipe/Recipe.tsx
+++ b/components/home/Recipe/Recipe.tsx
@@ -0,0 +1,23 @@
+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 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(([key, amount]) => <EntityIcon key={key} value={key} amount={amount} />)
+  const after = Object.entries({...recipe.output}).map(([key, amount]) => <EntityIcon key={key} value={key} amount={amount} />)
+  return <span className={styles.recipe}>
+    {joinByPlus(before)} → {joinByPlus(after)}
+  </span>
+}