more fixes to encounters

app/tables/encounters.py

@@ -12,7 +12,7 @@ class EncounterTable:
             'forest': ['hisser', 'sep', 'blaash', 'blackun', 'terl', 'win seen', 'pineto', 'perth', 'obb', 'kailin',
                        'gren', 'badder', 'arn', 'lil', 'blood bird', 'horl choo', 'soul besh', 'dabber', 'centisteed',
                        None],
-            'desert': ['serf', 'kamodo', 'blight', 'perth', 'parn', 'zarn', 'yexil', 'hisser', 'sep', 'calthen',
+            'desert': ['serf', 'kamodo', 'blight', 'perth', 'parn', 'zarn', 'yexil', 'hisser', 'sep', 'cal then',
                        'manta', 'kep plant', 'carrin', 'podog', None, None, None, None, None, None],
             'watery': ['win seen', 'crep plant', 'seroon lou', 'terl', 'ert telden', 'barl nep', 'ert', 'fleshin',
                        'keeshin', 'narl ep', 'menarl', 'herkel', 'ber lep', 'cren tosh', 'fen', 'gator', None, None, None,

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);
             }