wip

editserver.js

@@ -9,8 +9,14 @@ app.use(bodyParser.text({
     limit:'1MB'
 }));
 
+app.get('/src/data/levels.json', (req, res) => {
+  console.log('src/data/levels.json')
+    res.json(JSON.parse(fs.readFileSync('src/data/levels.json')))
+})
+
 app.post('/src/data/levels.json', (req, res) => {
     if(req.body?.trim()) {
+        console.log('Levels updated')
         fs.writeFileSync('src/data/levels.json', req.body)
     }
     res.end('OK')

src/data/levels.json

@@ -2,7 +2,7 @@
   {
     "name": "71 mini",
     "size": 5,
-    "bricks": "bbb____bt__btt__b_t___ttt",
+    "bricks": "bbb____tt__btt__b_t___ttt",
     "svg": 1,
     "color": ""
   },
@@ -972,14 +972,14 @@
   {
     "name": "icon:settings",
     "size": 8,
-    "bricks": "_g_g_g_gggggggg__gbbbbggggb__bg__gb__bggggbbbbg__gggggggg_g_g_g_",
+    "bricks": "_l_l_l_llllllll__lbbbbllllb__bl__lb__bllllbbbbl__llllllll_l_l_l_",
     "svg": null,
     "color": ""
   },
   {
     "name": "icon:unlocks",
     "size": 7,
-    "bricks": "gggg___g__g___g__g______bbbb___bbbb___bbbb___bbbb",
+    "bricks": "eeee___e__e___e__e______ctCb___Gbsc___tOGO___OCbs",
     "svg": null,
     "color": ""
   },
@@ -1266,12 +1266,5 @@
     "bricks": "_vvvvv_vvvvv__v___v_v___v__v_bbbbbbb_v__v_b_v_v_b_v__v_b_v_v_b_v__v_b_v_v_b_v__v_b_v_v_b_v__v_b_v_v_b_v__v_b_v_v_b_v__v_b_vvv_b_v__v_b_____b_v__vvvvvvvvvvv_bbbb_____bbbb",
     "svg": null,
     "color": ""
-  },
-  {
-    "name": "icon:new_run",
-    "size": 8,
-    "bricks": "____b_______bb__ggggbbb_ggggbbbbggggbbb_____bb______b___________",
-    "svg": null,
-    "color": ""
   }
 ]

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 [levels, setLevels] = useState([]);
-  const updateLevel = useCallback(
+  useEffect(()=>{
-    (index: number, change: Partial<RawLevel>) => {
+    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>