Fixed enderman level background and level picker in unlock

editclient.js

@@ -26,7 +26,6 @@ Object.entries(palette).forEach(([code, color]) => {
 function renderAllLevels() {
     allLevels.forEach((level, levelIndex) => {
         addLevelEditorToList(level, levelIndex)
-
     })
 }
 
@@ -46,6 +45,8 @@ function addLevelEditorToList(level, levelIndex) {
             <button data-offset-x="0"  data-offset-y="-1" data-level="${levelIndex}">U</button>
             <button data-offset-x="0"  data-offset-y="1" data-level="${levelIndex}">D</button>
             <input type="color" value="${level.color || ''}" data-level="${levelIndex}" />
+            <input type="number" value="${level.svg || (hashCode(level.name) % backgrounds.length)}" data-level="${levelIndex}" data-num-val="svg" />
+            
             <button data-level="${levelIndex}" data-set-bg-svg="true" >${svg ? 'replace' : 'set'}</button> 
  
            
@@ -54,6 +55,8 @@ function addLevelEditorToList(level, levelIndex) {
             <div class="level-bricks-preview" id="bricks-of-${levelIndex}" > 
             </div>
        `;
+
+
     document.getElementById('levels').appendChild(div)
 
     renderLevelBricks(levelIndex)
@@ -63,11 +66,21 @@ function addLevelEditorToList(level, levelIndex) {
 
 function updateLevelBackground(levelIndex) {
     const div = document.getElementById("bricks-of-" + levelIndex)
-    const {svg, color}= allLevels[levelIndex]
-    Object.assign(div.style, svg ?
-        {backgroundImage:`url('data:image/svg+xml,${encodeURIComponent(svg)}')`, backgroundColor:'transparent'} :
-        {backgroundImage:'none', backgroundColor:color||'#111'}
-   )
+    const level = allLevels[levelIndex]
+    const {svg, color} = level
+    if (color) {
+        Object.assign(div.style, {backgroundImage: 'none', backgroundColor: color})
+    } else {
+        const index = svg || (hashCode(level.name) % backgrounds.length)
+        const svgSource=backgrounds[index]
+        console.log(index)
+        div.setAttribute('data-svg',svgSource)
+        Object.assign(div.style, {
+            backgroundImage: `url("data:image/svg+xml;UTF8,${encodeURIComponent(svgSource)}")`,
+            backgroundColor: 'transparent'
+        })
+    }
+
 }
 
 function renderLevelBricks(levelIndex) {
@@ -90,7 +103,6 @@ function renderLevelBricks(levelIndex) {
 }
 
 
-
 document.getElementById('levels').addEventListener('change', e => {
     const levelIndexStr = e.target.getAttribute('data-level')
     if (levelIndexStr) {
@@ -185,10 +197,12 @@ function colorPixel(e) {
         setBrick(levelIndex, parseInt(index), applying)
     }
 }
+
 function setBrick(levelIndex, index, chr) {
     const bricks = allLevels[levelIndex].bricks
     allLevels[levelIndex].bricks = bricks.substring(0, index) + chr + bricks.substring(index + 1);
 }
+
 document.getElementById('levels').addEventListener('mousedown', e => {
     const index = parseInt(e.target.getAttribute('data-set-color-of'))
     const level = e.target.getAttribute('data-level')
@@ -238,3 +252,13 @@ function save() {
         body: JSON.stringify(allLevels, null, 2)
     })
 }
+
+function hashCode(string) {
+    var hash = 0;
+    for (var i = 0; i < string.length; i++) {
+        var code = string.charCodeAt(i);
+        hash = ((hash << 5) - hash) + code;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return Math.abs(hash);
+}

editserver.js

@@ -34,6 +34,7 @@ ${fs.readFileSync('./editclient.css').toString()}
 <script>
 let allLevels = ${fs.readFileSync(srcPath).toString()};
 let palette = ${fs.readFileSync('src/palette.json').toString()};
+let backgrounds = ${fs.readFileSync('src/backgrounds.json').toString()};
 ${fs.readFileSync('./editclient.js').toString()}
 </script>  
 </body>  

src/game.ts

@@ -495,13 +495,13 @@ function getPossibleUpgrades() {
 function shuffleLevels(nameToAvoid: string | null = null) {
     const target = nextRunOverrides?.level;
     delete nextRunOverrides.level;
-    const firstLevel = nextRunOverrides?.level
+    const firstLevel = target
         ? allLevels.filter((l) => l.name === target)
         : [];
 
     const restInRandomOrder = allLevels
         .filter((l) => totalScoreAtRunStart >= l.threshold)
-        .filter((l) => l.name !== nextRunOverrides?.level)
+        .filter((l) => l.name !== target)
         .filter((l) => l.name !== nameToAvoid || allLevels.length === 1)
         .sort(() => Math.random() - 0.5);
 

src/levels.json

@@ -151,8 +151,8 @@
     "name": "Enderman",
     "size": 10,
     "bricks": "___________gggggggg__gggggggg__gggggggg__gggggggg__vvvggvvv__gggggggg__gggggggg__gggggggg_____________________",
-    "svg": null,
-    "color": "#ffffff"
+    "svg": "",
+    "color": "#26a269"
   },
   {
     "name": "Mushroom",

src/loadGameData.ts

@@ -11,7 +11,6 @@ const rawLevelsList = _rawLevelsList as RawLevel[];
 
 export const appVersion = _appVersion as string;
 
-let attributed = 0;
 
 let levelIconHTMLCanvas = document.createElement("canvas");
 const levelIconHTMLCanvasCtx = levelIconHTMLCanvas.getContext("2d", {
@@ -69,8 +68,7 @@ export const allLevels = rawLevelsList
     let svg = level.svg!==null && backgrounds[level.svg]
 
     if (!level.color && !svg) {
-      svg = backgrounds[attributed % backgrounds.length];
-      attributed++;
+      svg = backgrounds[hashCode(level.name) % backgrounds.length];
     }
     return {
       ...level,
@@ -95,3 +93,14 @@ export const upgrades = rawUpgrades.map((u) => ({
   ...u,
   icon: icons["icon:" + u.id],
 })) as Upgrade[];
+
+
+function hashCode(string:string){
+    let hash = 0;
+    for (let i = 0; i < string.length; i++) {
+        let code = string.charCodeAt(i);
+        hash = ((hash<<5)-hash)+code;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return Math.abs(hash);
+}