Add files via upload

README.md

@@ -68,4 +68,4 @@ The `DIR` constant defines which neighbor cells are being checked in a condition
 
 Also `DIR` takes values of `CROSS`, `X` (`DIR.CROSS`) for checking only corner neighbor cells and `PLUS` (`DIR.PLUS`) for checking all non-corner neighbor cells.
 
-For checking all the cells around use `DIR.ALL` or `DIR.ANY`.
+For checking all the cells aroung use `DIR.ALL` or `DIR.ANY`.

index.html

@@ -54,13 +54,24 @@
         <span>Cell size(px)</span><input id="size" class="input number" type="number" value="32">
         <span>Wrap aroung the map?</span><input id="wrap" class="input number" type="checkbox" checked="true">
         <button onclick="
-        WIDTH = document.getElementById('w').value
-        HEIGHT = document.getElementById('h').value
-        let size = document.getElementById('size').value
-        canvas.style = `width: ${WIDTH * size}px; height: ${HEIGHT * size}px; background-color: gray;`
+        W = Number(document.getElementById('w').value)
+        H = Number(document.getElementById('h').value)
         WORLDWRAP = document.getElementById('wrap').checked
 
-        generateEmptyMaps()
+        if(W != WIDTH | H != HEIGHT){
+            WIDTH = W
+            HEIGHT = H
+            resizeMaps()
+            let size = Number(document.getElementById('size').value)
+            canvas.style = `width: ${WIDTH * size}px; height: ${HEIGHT * size}px; background-color: gray;`
+            
+            for(let i = 0; i < WIDTH; i++){
+                for(let j = 0; j < HEIGHT; j++){
+                    ctx.fillStyle = TYPES[oldmap[i][j]].color
+                    ctx.fillRect(j * (canvas.width / WIDTH), i * (canvas.height / HEIGHT), canvas.width / WIDTH, canvas.height / HEIGHT)
+                }
+            }
+        }
         ">Apply</button>
     </div>
 
@@ -94,6 +105,5 @@
 setupExampleLoader();
 let running = false
     </script>
-
     <a href="https://github.com/zHoeshin/CellScriptEmu/blob/main/README.md" target="_blank">Short documentation</a>
-</body>
+</body>

index.js

@@ -22,6 +22,25 @@ function generateEmptyMaps(){
 }
 generateEmptyMaps()
 
+function resizeMaps(){
+    while(map.length < HEIGHT){
+        map.push([])
+        oldmap.push([])
+    }
+    map.length = HEIGHT
+    oldmap.length = HEIGHT
+
+    console.log(map.length, map[0].length, WIDTH)
+    for(let i = 0; i < map.length; i++){
+        while(map[i].length < WIDTH){
+            map[i].push(DEFAULTCELLTYPE)
+            oldmap[i].push(DEFAULTCELLTYPE)
+        }
+        map[i].length = WIDTH
+        oldmap[i].length = WIDTH
+    }
+}
+
 function getNeighborCells(x, y, rollaround = false){
     let neighborsmap = []
     for(let i = -1; i < 2; i++){
@@ -164,10 +183,10 @@ function update(){
     sel.innerHTML = ''
     seld.innerHTML = ''
     sel.onchange = (event) => {
-        selected = event.target.value;
+        selected = Number(event.target.value);
     }
     seld.onchange = (event) => {
-        DEFAULTCELLTYPE = event.target.value;
+        DEFAULTCELLTYPE = Number(event.target.value);
     }
     for(let i = 0; i < TYPES.length; i++){
         sel.innerHTML += `<option value=${i}>${TYPES[i].name}</option>`
@@ -179,7 +198,7 @@ let selectedexample = 0
 function setupExampleLoader(){
     let esel = document.getElementById('examples')
     esel.onchange = (event) => {
-        selectedexample = event.target.value;
+        selectedexample = Number(event.target.value);
     }
 }
 
@@ -203,8 +222,12 @@ element Dead {
 }`)
             update();
             for(let i = 0; i < TYPES.length; i++){
-                if(TYPES[i].name == "Live") selected = i
-                if(TYPES[i].name == "Dead") DEFAULTCELLTYPE = i
+                if(TYPES[i].name == "Live") {
+                    selected = i
+                }
+                if(TYPES[i].name == "Dead") {
+                    DEFAULTCELLTYPE = i
+                }
             }
             break;
 
@@ -241,12 +264,14 @@ element ChargeTrace {
             for(let i = 0; i < TYPES.length; i++){
                 if(TYPES[i].name == "Wire") selected = i
                 if(TYPES[i].name == "_Empty") DEFAULTCELLTYPE = i
-                console.log(selected, DEFAULTCELLTYPE)
             }
             break;
     }
+
+
+    document.getElementById('selection').value = selected
+    document.getElementById('selectdefault').value = DEFAULTCELLTYPE
 
-    console.log(DEFAULTCELLTYPE)
     var rect = document.getElementById('canvas').getBoundingClientRect();
     for(let i = 0; i < WIDTH; i++){
         for(let j = 0; j < HEIGHT; j++){