wip

src/level_editor/levels_editor.tsx

@@ -1,7 +1,7 @@
 import {Level, Palette, RawLevel} from "../types";
 import _backgrounds from "../data/backgrounds.json";
 import _palette from "../data/palette.json";
-import _allLevels from "../data/levels.json";
+// import _allLevels from "../data/levels.json";
 import { getLevelBackground, hashCode } from "../getLevelBackground";
 import { createRoot } from "react-dom/client";
 import { useCallback, useEffect, useState } from "react";
@@ -11,28 +11,35 @@ const backgrounds = _backgrounds as string[];
 
 const palette = _palette as Palette;
 
-let allLevels = _allLevels as RawLevel[];
+// let allLevels = _allLevels ;
+let allLevels=null
 
 function App() {
   const [selected, setSelected] = useState("W");
   const [applying, setApplying] = useState("");
-  const [levels, setLevels] = useState(allLevels);
-  const updateLevel = useCallback(
-    (index: number, change: Partial<RawLevel>) => {
+  const [levels, setLevels] = useState([]);
+  useEffect(()=>{
+    fetch('http://localhost:4400/src/data/levels.json')
+        .then(r=>r.json())
+        .then(list=>{ 
+          setLevels(list as RawLevel[])
+          allLevels=list
+        })
+  },[])
+
+  const updateLevel =   (index: number, change: Partial<RawLevel>) => {
       setLevels((list) =>
         list.map((l, li) => (li === index ? { ...l, ...change } : l)),
       );
-    },
-    [],
-  );
+  }
 
-  const deleteLevel = useCallback((level: RawLevel) => {
+  const deleteLevel = (index: number) => {
     if (confirm("Delete level")) {
-      setLevels(levels.filter((l, i) => l!==level));
+      setLevels(levels.filter((l, i) => i!==index));
     }
-  }, [levels]);
-
+  }
   useEffect(() => {
+    if(!allLevels||JSON.stringify(allLevels) === JSON.stringify(levels)) return
     const timoutId = setTimeout(() => {
       return fetch("http://localhost:4400/src/data/levels.json", {
         method: "POST",
@@ -110,7 +117,7 @@ function App() {
               />
 
               <div className={"buttons"}>
-                <button onClick={() => deleteLevel(level)}>Delete</button>
+                <button onClick={() => deleteLevel(li)}>Delete</button>
                 <button onClick={() => updateLevel(li, resizeLevel(level, -1))}>
                   -
                 </button>