From 3b09d2f8b1fa72239f12f59aba66a386ec45e817 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 17 Jul 2021 14:02:54 -0700
Subject: [PATCH] Pixelated rendering for modern skins

---
 packages/webamp-modern-2/src/UIRoot.ts | 7 +++++++
 packages/webamp-modern-2/src/index.ts  | 6 ++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/webamp-modern-2/src/UIRoot.ts b/packages/webamp-modern-2/src/UIRoot.ts
index 336be90e..b2d1bb2a 100644
--- a/packages/webamp-modern-2/src/UIRoot.ts
+++ b/packages/webamp-modern-2/src/UIRoot.ts
@@ -212,6 +212,13 @@ export class UIRoot {
         assume(false, `Unknown global action: ${action}`);
     }
   }
+  draw() {
+    this._div.style.imageRendering = "pixelated";
+    for (const container of this.getContainers()) {
+      container.draw();
+      this._div.appendChild(container.getDiv());
+    }
+  }
 
   dispose() {
     this._div.remove();
diff --git a/packages/webamp-modern-2/src/index.ts b/packages/webamp-modern-2/src/index.ts
index 09cc231c..b1db1430 100644
--- a/packages/webamp-modern-2/src/index.ts
+++ b/packages/webamp-modern-2/src/index.ts
@@ -39,16 +39,14 @@ async function loadSkin(skinData: Blob) {
   setStatus("Parsing XML and initializing images...");
   const parser = new SkinParser(zip, UI_ROOT);
 
+  // This is always the same as the global singleton.
   const uiRoot = await parser.parse();
 
   setStatus("Enabling Colors...");
   uiRoot.enableDefaultGammaSet();
 
   setStatus("Rendering skin for the first time...");
-  for (const container of uiRoot.getContainers()) {
-    container.draw();
-    UI_ROOT.getRootDiv().appendChild(container.getDiv());
-  }
+  uiRoot.draw();
 
   setStatus("Initializing Maki...");
   for (const container of uiRoot.getContainers()) {