More features

components/Group.tsx

@@ -12,10 +12,16 @@ interface Props {
   intermediateFactories: string[]
   onSetInputFactories: (uids: string[]) => void
   inputFactories: string[]
+  onToggleExported: () => void
+  isExported: boolean
   onRename: (name: string) => void
   onDoIgnore: (name: string) => void
   name: string
-  doNotSuggest: string[]
+  sets: {
+    doNotSuggest: Set<string>
+    basic: Set<string>
+    exported: Set<string>
+  }
 }
 
 export const Group: FC<Props> = ({
@@ -27,8 +33,14 @@ export const Group: FC<Props> = ({
   intermediateFactories,
   onSetInputFactories,
   inputFactories,
+  onToggleExported,
+  isExported,
   name,
+  sets: {
     doNotSuggest,
+    basic,
+    exported
+  },
   onDoIgnore
 }) => {
   const details = useDetails()
@@ -49,17 +61,9 @@ export const Group: FC<Props> = ({
       .filter(detail => {
         if (!detail.recipe) return false
         if (selectedValues.includes(detail.href)) return false
-        if (doNotSuggest.includes(detail.href)) return false
+        if (doNotSuggest.has(detail.href)) return false
         const prerequisites = Object.keys(detail.recipe?.prerequisites ?? {})
-        /*if (intermediateFactories.length) {
-          const usesInter = prerequisites.some(pre => outputFactories.includes(pre) || intermediateFactories.includes(pre))
-          if (!usesInter) return false
-        } else {
-          const usesEveryInput = inputs.every(inp => prerequisites.includes(inp))
-          if (!usesEveryInput) return false
-        }*/
         return prerequisites.every(pre => availableIngredients.includes(pre))
-
       })
   }, [inputFactories, doNotSuggest, details, inputs, intermediateFactories, outputFactories])
 
@@ -73,13 +77,18 @@ export const Group: FC<Props> = ({
 
   return <div style={{border: "2px solid black", padding: "0.5em", margin: "1em"}}>
     <div>
-      <h3 contentEditable={true} onBlur={event => {
+      <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={inputFactories}
@@ -99,7 +108,15 @@ export const Group: FC<Props> = ({
         <div>
           <h4>Inputs</h4>
           <ul>
-            {inputs.map(input => <li key={input}><a href={'javascript:void(0)'} onClick={() => addIntermediateFactory(input)}>{input}</a></li>)}
+            {
+              inputs.map(input => <li key={input}><a
+                href={'javascript:void(0)'}
+                onClick={() => addIntermediateFactory(input)}
+                style={{color: basic.has(input) ? 'darkgreen' : exported.has(input) ? 'orange' : undefined}}
+              >
+                {input}
+              </a></li>)
+            }
           </ul>
         </div>
         <div>
@@ -113,6 +130,7 @@ export const Group: FC<Props> = ({
                   event.preventDefault()
                   onDoIgnore(suggestion.href)
                 }}
+                style={{color: basic.has(suggestion.href) ? 'darkgreen' : exported.has(suggestion.href) ? 'orange' : undefined}}
               >
                 {suggestion.name}
               </a>

components/Home.tsx

@@ -4,15 +4,20 @@ import {Group} from "./Group";
 import {FactorySelect} from "./FactorySelect";
 import styles from "./Home.module.css"
 import {sortByProperty} from "../src/utils";
+import {useDetails} from "../src/hooks/useDetails";
+import {Entity} from "../src/types";
+import pako from 'pako';
 
 interface Group {
   name: string
+  isExported?: boolean
   factories: string[]
   intermediates: string[]
   inputs: string[]
 }
 
 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', [])
@@ -20,9 +25,24 @@ export const HomeComponent: FC = () => {
   const [groups, setGroups] = useLocalStorage<Group[]>('serviceGroups', [])
   const [clientGroups, setClientGroups] = useState<typeof groups>([])
 
-  const doNotSuggest = useMemo<string[]>(() => {
+  const doNotSuggest = useMemo<Set<string>>(() => {
-    return groups.flatMap(group => [...group.intermediates, ...group.factories, ...excludedSuggestions])
+    return new Set([...groups.flatMap(group => [...(group.name.includes('Mall') ? group.intermediates : []), ...group.factories]), ...excludedSuggestions, ...basicValues])
-  }, [groups, excludedSuggestions])
+  }, [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 => {
@@ -43,10 +63,25 @@ export const HomeComponent: FC = () => {
     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
@@ -71,6 +106,18 @@ export const HomeComponent: FC = () => {
           Add group &quot;{newGroupValue}&quot;
         </button>
       </fieldset>
+      <fieldset>
+        <legend>Missing factories</legend>
+        <ul>
+          {
+            missingFactories.map(missing => <li key={missing.href}
+            onContextMenu={event => {
+              event.preventDefault()
+              setExcludedSuggestions([...excludedSuggestions, missing.href])
+            }}>{missing.name}</li>)
+          }
+        </ul>
+      </fieldset>
       <div className={styles.grid}>
         {
           clientGroups.map((group, idx) => <Group
@@ -79,12 +126,14 @@ export const HomeComponent: FC = () => {
             intermediateFactories={group.intermediates}
             inputFactories={group.inputs}
             name={group.name}
+            isExported={group.isExported ?? false}
             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')}
-            doNotSuggest={doNotSuggest}
+            onToggleExported={() => toggleExported(idx)}
+            sets={{doNotSuggest, basic: basicSet, exported: exportedSet}}
             onDoIgnore={uid => setExcludedSuggestions([...excludedSuggestions, uid])}
           />)
         }

package.json

@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "next": "12.2.4",
+    "pako": "^2.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-select": "^5.4.0"
   },
   "devDependencies": {
     "@types/node": "18.6.4",
+    "@types/pako": "^2.0.0",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
     "eslint": "8.21.0",