1 files changed, 67 insertions, 9 deletions
diff --git a/frontend/src/components/ElementList.tsx b/frontend/src/components/ElementList.tsx
index 20b27dd..04650c4 100644
--- a/frontend/src/components/ElementList.tsx
+++ b/frontend/src/components/ElementList.tsx
@@ -1,22 +1,35 @@
 import { FC, useEffect, useState } from 'react';
-import {Element} from '../types';
+import { Element } from '../types';
 import ElementView from './ElementView';
+import Dialog from './Dialog';
+import ElementCreator from './ElementCreator';
+import { userStore } from '../stores';
+import toast from 'react-hot-toast';
 
 const ElementList: FC = () => {
   const [elements, setElements] = useState<Element[]>([]);
+  const [elementCreatorVisible, setElementCreatorVisible] =
+    useState<boolean>(false);
+  const [creatorFirstElementId, setCreatorFirstElementId] = useState<
+    number | undefined
+  >(undefined);
+  const [creatorSecondElementId, setCreatorSecondElementId] = useState<
+    number | undefined
+  >(undefined);
+  const user = userStore((store) => store.user);
 
   useEffect(() => {
     const initialElements: number[] = [1, 2, 3, 4];
 
     const elementStateString = localStorage.getItem('elementState');
     if (elementStateString != null) {
-        setElements(JSON.parse(elementStateString));
-        return;
+      setElements(JSON.parse(elementStateString));
+      return;
     }
 
     const fetchElements = async () => {
       const elems: Element[] = [];
-      
+
       for (const elemId of initialElements) {
         const response = await fetch(`/api/element/${elemId}`);
         const elem: Element = await response.json();
@@ -32,14 +45,59 @@ const ElementList: FC = () => {
 
   useEffect(() => {
     if (elements.length != 0) {
-        localStorage.setItem('elementState', JSON.stringify(elements));
+      localStorage.setItem('elementState', JSON.stringify(elements));
     }
-  }, [elements])
+  }, [elements]);
+
+  const createOnElementCombine = (firstElementId: number) => {
+    return async (secondElementId: number) => {
+      const combineResponse = await fetch(
+        `/api/element/combine?firstElementId=${firstElementId}&secondElementId=${secondElementId}`,
+      );
+      if (combineResponse.status == 404) {
+        console.log("Element doesn't exist");
+        if (!user) {
+          toast("You have discovered a new element but need to log in to name it");
+          return;
+        }
+        setCreatorFirstElementId(firstElementId);
+        setCreatorSecondElementId(secondElementId);
+        setElementCreatorVisible(true);
+        return;
+      }
+
+      const newElem: Element = await combineResponse.json();
+      if (elements.find((e) => e.id == newElem.id)) {
+        toast(`You have already discovered ${newElem.name}`);
+        return;
+      }
+      setElements((elems) => elems.concat(newElem));
+    };
+  };
 
   return (
-    <>
-    {elements.map(elem => <ElementView key={elem.id} element={elem} />)}
-    </>
+    <div className="p-3 flex gap-3">
+      {elements.map((elem) => (
+        <ElementView
+          key={elem.id}
+          interactive={true}
+          isPreview={false}
+          element={elem}
+          onElementCombine={createOnElementCombine(elem.id)}
+        />
+      ))}
+      <Dialog
+        visible={elementCreatorVisible}
+        closeDialog={() => {
+          setElementCreatorVisible(false);
+        }}>
+        <ElementCreator
+          firstElementId={creatorFirstElementId}
+          secondElementId={creatorSecondElementId}
+          closeDialog={() => setElementCreatorVisible(false)}
+        />
+      </Dialog>
+    </div>
   );
 };