add images to the encounter table

web/encounter.js

@@ -54,6 +54,9 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
 
         function setResultTable(data) {
             let table = document.createElement('table');
+            table.style.fontSize = '18px';
+            table.style.fontFamily = 'Arial';
+
             for (let key in data) {
                 let tr = document.createElement('tr');
                 let tdKey = document.createElement('td');
@@ -99,6 +102,30 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
                 tr.appendChild(tdValue);
                 table.appendChild(tr);
             }
+
+            // 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);
+            }
+
             resultSection.appendChild(table);
         }
     }, 1000);