Tiles

nearest.js

@@ -24,16 +24,20 @@ const onColorChange = () => {
   database.map(([name, x, ...y]) => ({
     name,
     score: x - closeCoeff * y.map((yc, i) => yc * colorValues[i]).reduce((x, y) => x + y),
+    avgColor: y,
   }))
     .sort((a, b) => a.score - b.score)
-    .map(({ name }) => name)
     .slice(0, numPoke)
-    .forEach(name => {
+    .forEach(({ name, avgColor}) => {
       const li = document.createElement("li");
       const img = document.createElement("img");
+      const tile = document.createElement("div");
+      const hexColor = avgColor.map(c => Math.round(c).toString(16).padStart(2, "0")).reduce((x, y) => x + y);
+      tile.setAttribute("style", `width: 25px; height: 25px; background-color: #${hexColor}`)
       img.setAttribute("src", getSprite(name));
       li.appendChild(img)
       li.appendChild(document.createTextNode(name));
+      li.appendChild(tile)
       bestList.appendChild(li);
     });
 };