From b2dfa562052f6e993a531cc35396306c77e6fbcd Mon Sep 17 00:00:00 2001
From: Renee Ibeji <reneeibeji@gmail.com>
Date: Tue, 7 May 2024 23:25:15 +0100
Subject: [PATCH] Only generate preview image layers when all layer images have
 been loaded

---
 sources/chargen.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/sources/chargen.js b/sources/chargen.js
index dde21ecba..cf96ace0f 100755
--- a/sources/chargen.js
+++ b/sources/chargen.js
@@ -602,7 +602,7 @@ $(document).ready(function() {
 
   function getImage(imgRef) {
     if (images[imgRef])
-    return images[imgRef];
+      return images[imgRef];
     else {
       var img = new Image();
       img.src = "spritesheets/" + imgRef;
@@ -612,15 +612,15 @@ $(document).ready(function() {
     }
   }
 
-  function getImage2(imgRef, callback) {
+  function getImage2(imgRef, callback, layers, prevctx) {
     if (images[imgRef]) {
-      callback(images[imgRef]);
+      callback(layers, prevctx);
       return images[imgRef];
     } else {
 
       var img = new Image();
       img.src = "spritesheets/" + imgRef;
-      img.onload = function() { callback(img) };
+      img.onload = function() { callback(layers, prevctx) };
       images[imgRef] = img;
       return img;
     }
@@ -647,9 +647,17 @@ $(document).ready(function() {
         var prevctx = prev.getContext("2d");
         var img = null;
         const previewRow = parseInt($(this).data("preview_row"));
-        var callback = function(img) {
+        var callback = function(layers,prevctx) {
+          for(index = 0; index < layers.length; index++){
+            if(!images[layers[index].link]){
+              return;
+            }
+          }
+
           try {
-            prevctx.drawImage(img, 0, previewRow * universalFrameSize, universalFrameSize, universalFrameSize, 0, 0, universalFrameSize, universalFrameSize);
+            layers.forEach((layer) =>{
+              prevctx.drawImage(images[layer.link], 0, previewRow * universalFrameSize, universalFrameSize, universalFrameSize, 0, 0, universalFrameSize, universalFrameSize);
+            });
           } catch (err) {
             console.log(err);
           }
@@ -673,12 +681,13 @@ $(document).ready(function() {
           }
         }    
         
-        layers = layers.sort(function(lhs, rhs) {
+        layers.sort(function(lhs, rhs) {
           return parseInt(lhs.zPos) - parseInt(rhs.zPos);
         });
+        
 
         layers.forEach((layer) =>{
-          img = getImage2(layer.link, callback);
+          img = getImage2(layer.link, callback, layers, prevctx);
         });
 
         if (img != null) {