more fixes to encounters

web/encounter.js

@@ -43,11 +43,11 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
 
         function setResultImage(name) {
             let imgElement = document.createElement('img');
-            imgElement.src = './img/' + name + ".jpg";
+            imgElement.src = '/img/' + name + ".jpg";
             console.log(imgElement.src);
             imgElement.onerror = function () {
                 this.onerror = null;
-                this.src = './img/404.jpg';
+                this.src = '/img/404.jpg';
             };
             resultSection.appendChild(imgElement);
         }
@@ -67,6 +67,7 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
                 // Make the key names bold:
                 tdKey.style.fontWeight = 'bold';
 
+
                 if (Array.isArray(data[key])) {
                     if (key === 'environ' || key === 'mutations') {
                         tdValue.innerText = data[key].join(', ');
@@ -98,31 +99,22 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
                     tdValue.innerText = data[key];
                 }
 
-                tr.appendChild(tdKey);
-                tr.appendChild(tdValue);
-                table.appendChild(tr);
+                if (key === 'name') {
+                    let imgURL = "/img/" + data[key] + ".jpg";
+                    tdKey.innerHTML = `
+                        <div>
+                            <h2 style=\'font-size: 1.2em;\'>${data[key].toUpperCase()}</h2>
+                        </div>`;
+                    tdValue.innerHTML = `
+                        <div>                        
+                            <img src='${imgURL}' onerror='this.src="/img/404.jpg";' style='width: 230px; height: 230px;'>
+                        </div>`;
+                    console.log(tdValue.innerHTML);
                 }
 
-            // append image row if name key exists
-            if(data.name) {
-                let tr = document.createElement('tr');
-                let tdKey = document.createElement('td');
-                let tdValue = document.createElement('td');
-                let imgElement = document.createElement('img');
 
-                tdKey.innerText = 'IMAGE';
-                tdKey.style.fontWeight = 'bold';
-
-                imgElement.src = './img/' + data.name + ".jpg";
-                imgElement.onerror = function() {
-                    this.onerror = null;
-                    this.src = './img/404.jpg';
-                };
-
-                tdValue.appendChild(imgElement);
                 tr.appendChild(tdKey);
                 tr.appendChild(tdValue);
-
                 table.appendChild(tr);
             }