Updates (visual and refactoring)

4 files changed, 35 insertions, 44 deletions

diff --git a/client/css/styles.css b/client/css/styles.css
index 5f8f1df..9253e79 100644
--- a/client/css/styles.css
+++ b/client/css/styles.css
@@ -71,6 +71,7 @@ a:hover {
 button {
   background:black;
   color:red;
+  font-family: 'Doto';
   border: dotted 2px;
   width: 100%;
 }
@@ -143,10 +144,15 @@ summary:hover {
 .previously-played img {
     width: 48px;
 }
+
 .previously-played div {
-    border-color: purple;
-    border-style: dotted;
-    border-width: 1px;
+    gap: 5px;
+}
+
+
+.previously-played div:hover {
+    background-color: lightgreen;
+    color: black;
 }
 
 .div-inline-reverse {
@@ -165,7 +171,6 @@ summary:hover {
 }
 
 table {
-    background-color: lightgreen;
     width: 100%;
 }
 
diff --git a/client/js/arching-kaos-generator.js b/client/js/arching-kaos-generator.js
index e6e28f5..22e0747 100644
--- a/client/js/arching-kaos-generator.js
+++ b/client/js/arching-kaos-generator.js
@@ -37,6 +37,7 @@ function makeElement(obj, attachTo)
     if ( obj.hidden !== undefined ) temp.hidden = obj.hidden;
     if ( obj.placeholder !== undefined ) temp.placeholder = obj.placeholder;
     if ( obj.classes !== undefined ) temp.classList = obj.classes;
+    if ( obj.style !== undefined ) temp.style = obj.style;
     if ( obj.max !== undefined ) temp.max = obj.max;
     if ( obj.innerText !== undefined ) temp.innerText = obj.innerText;
     if ( obj.innerHTML !== undefined && Array.isArray(obj.innerHTML) )
diff --git a/client/js/image_generator.js b/client/js/image_generator.js
index 81169e1..2b64a5c 100644
--- a/client/js/image_generator.js
+++ b/client/js/image_generator.js
@@ -94,10 +94,10 @@ function createImage(pixels, hash, what)
     canvas.width = output_x_y;
     canvas.height = output_x_y;
     var context = canvas.getContext('2d');
-    var zoom_factor = 5;
+    var zoom_factor = 6;
     var zoom_size = Math.floor(output_x_y/zoom_factor);
     var radius = Math.floor(output_x_y/zoom_size);
-    debugLog(`Radius: ${radius}`);
+    // debugLog(`Radius: ${radius}`);
     for ( var y = 0; y < zoom_size; ++y )
     {
         for ( var x = 0; x < zoom_size; ++x )
@@ -115,9 +115,9 @@ function createImage(pixels, hash, what)
                 for (var k = 0; k < radius; ++k)
                 {
                     var subpixel = pixel_to_be_enhanced;
-                    if ( i >= radius - Math.floor(radius/2) )
+                    if ( i >= radius - Math.floor(radius/3) )
                     {
-                        if ( k >= radius - Math.floor(radius/2) )
+                        if ( k >= radius - Math.floor(radius/3) )
                         {
                             //     debugLog(i);
                             c = (x*radius)+k;
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 37bb163..97b0474 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -259,49 +259,34 @@ function syncOnDOMfromListCallback(now, hash_of_list, json)
 function infoShowCallback(json, params)
 {
     var [ hash ] = params;
-    if ( document.querySelector(`#t-${hash}`) === null )
+    if ( document.querySelector(`#d-${hash}`) !== null )
     {
         var parent = document.querySelector(`#d-${hash}`);
-        var tableElement = document.createElement('table');
-        tableElement.id = `t-${hash}`;
-
-        var atr = document.createElement('tr');
-        var artistth = document.createElement('th');
-        artistth.innerText = "Artist";
-        var artistElement = document.createElement('td');
-        artistElement.innerText = `${json.artist}`;
-        atr.appendChild(artistth);
-        atr.appendChild(artistElement);
-        tableElement.appendChild(atr);
-
-        var ttr = document.createElement('tr');
-        var titleth = document.createElement('th');
-        titleth.innerText = "Title";
-        var titleElement = document.createElement('td');
-        titleElement.innerText = `${json.title}`;
-        ttr.appendChild(titleth);
-        ttr.appendChild(titleElement);
-        tableElement.appendChild(ttr);
-
-        parent.appendChild(tableElement);
+        var tableElement = {
+            element:'div',
+            id: `t-${hash}`,
+            innerHTML:[
+                {element:"div",innerText:`${json.artist}`},
+                {element:"div",innerText:`${json.title}`}
+            ]
+        };
+        makeElement(tableElement, parent);
     }
 }
 
 function appendPreviouslyPlayedShows(listItem){
-    if ( document.querySelector(`#s-${listItem.hash}`) === null )
+    if ( document.querySelector(`#d-${listItem.hash}`) === null )
     {
-        var tmp = document.createElement('div');
-        var tmpp = document.createElement('pre');
-        // tmp.style = 'flex-direction:row-reverse;';
-        tmp.style = 'flex-direction:row;align-items:center;';
-        tmp.id = `d-${listItem.hash}`;
-        // tmpp.id = `s-${listItem.hash}`;
-        // tmpp.innerText = JSON.stringify(listItem, null, 2);
-        var tmpc = document.createElement('img');
-        tmpc.id = `i-${listItem.hash}`;
-        // tmp.append(tmpp);
-        tmp.append(tmpc);
-        placeholders.previouslyPlayed.append(tmp);
+        var tmp = {
+            element:'div',
+            style: 'flex-direction:row;align-items:center;',
+            id: `d-${listItem.hash}`,
+            innerHTML:[
+                { element:"img", id: `i-${listItem.hash}` }
+            ]
+        }
+        makeElement(tmp, placeholders.previouslyPlayed);
+        document.querySelector(`#d-${listItem.hash}`).scrollIntoView();
         generateImage(listItem.hash, 'new');
         FetchJSON(`${jsonRequest}${listItem.hash}`, infoShowCallback, [listItem.hash]);
     }