From a55840178441ad9b22f85e076a257e070a0a41b1 Mon Sep 17 00:00:00 2001
From: Evan Goode <mail@evangoo.de>
Date: Sun, 19 Jan 2025 19:24:55 -0500
Subject: [PATCH 1/2] noscript skin viewer fallback

Resolves https://github.com/unmojang/drasl/issues/30
---
 public/style.css | 5 +++--
 view/player.tmpl | 9 ++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/public/style.css b/public/style.css
index 36f9a6d..ec166c5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -234,8 +234,9 @@ pre {
   text-align: center;
 }
 
-#skin-canvas {
-  display: inline-block;
+.texture-preview {
+  width: 256px;
+  image-rendering: pixelated;
 }
 
 .list-profile-picture {
diff --git a/view/player.tmpl b/view/player.tmpl
index 0f6c2bb..cf5bd95 100644
--- a/view/player.tmpl
+++ b/view/player.tmpl
@@ -19,7 +19,13 @@
   <h6 style="text-align: center;">{{ .Player.UUID }}<br />{{ .PlayerID }}</h6>
   {{/* prettier-ignore-end */}}
   {{ if .SkinURL }}
-    <div id="skin-container" style="height: 300px;">
+    <div id="skin-container" style="min-height: 300px;">
+      <noscript>
+        <img class="texture-preview" src="{{ .SkinURL }}">
+        {{ if .CapeURL }}
+          <img class="texture-preview" src="{{ .CapeURL }}">
+        {{ end }}
+      </noscript>
       <canvas id="skin-canvas"></canvas>
     </div>
   {{ else }}
@@ -160,6 +166,7 @@
 <script type="module">
 	import { skinview3d } from "{{.App.FrontEndURL}}/web/public/bundle.js"
 	const skinCanvas = document.getElementById("skin-canvas");
+	skinCanvas.style.display = "inline-block";
 	const skinViewer = new skinview3d.SkinViewer({
 		canvas: skinCanvas,
 		width: 200,

From 4b91ecd154387574bcdaf55ed690e7c71677e4e0 Mon Sep 17 00:00:00 2001
From: Evan Goode <mail@evangoo.de>
Date: Sun, 19 Jan 2025 19:43:51 -0500
Subject: [PATCH 2/2] Always show tiny texture previews

So users can download their current skin/cape
---
 public/style.css | 13 +++++++++++++
 view/layout.tmpl |  4 ++++
 view/player.tmpl | 15 +++++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/public/style.css b/public/style.css
index ec166c5..ede3ae5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -234,11 +234,24 @@ pre {
   text-align: center;
 }
 
+#skin-canvas {
+  display: inline-block;
+}
+
 .texture-preview {
   width: 256px;
   image-rendering: pixelated;
 }
 
+.small-texture-preview {
+  width: 64px;
+  image-rendering: pixelated;
+}
+
+.noscript-hidden {
+  display: none !important;
+}
+
 .list-profile-picture {
   --list-profile-picture-size: 24px;
   width: var(--list-profile-picture-size);
diff --git a/view/layout.tmpl b/view/layout.tmpl
index 6896035..0db0a26 100644
--- a/view/layout.tmpl
+++ b/view/layout.tmpl
@@ -27,6 +27,10 @@
       <script type="module">
         import { background } from "{{.App.FrontEndURL}}/web/public/bundle.js";
         background(document.querySelector("#background"));
+
+        for (const el of document.querySelectorAll(".noscript-hidden")) {
+          el.classList.remove("noscript-hidden");
+        }
       </script>
       {{ end }}
     </body>
diff --git a/view/player.tmpl b/view/player.tmpl
index cf5bd95..295b0ff 100644
--- a/view/player.tmpl
+++ b/view/player.tmpl
@@ -26,7 +26,7 @@
           <img class="texture-preview" src="{{ .CapeURL }}">
         {{ end }}
       </noscript>
-      <canvas id="skin-canvas"></canvas>
+      <canvas id="skin-canvas" class="noscript-hidden"></canvas>
     </div>
   {{ else }}
     No skin yet.
@@ -51,6 +51,12 @@
     {{ end }}
     {{ if or .App.Config.AllowSkins .User.IsAdmin }}
       <h4>Skin</h4>
+      {{ if .SkinURL }}
+        <p>
+          <span style="vertical-align: top">Current skin: </span>
+          <img class="small-texture-preview" src="{{ .SkinURL }}">
+        </p>
+      {{ end }}
       <p>
         <label for="skin-file">Upload a skin</label><br />
         <input type="file" name="skinFile" id="skin-file" />
@@ -95,6 +101,12 @@
     {{ end }}
     {{ if or .App.Config.AllowCapes .User.IsAdmin }}
       <h4>Cape</h4>
+      {{ if .CapeURL }}
+        <p>
+          <span style="vertical-align: top">Current cape: </span>
+          <img class="small-texture-preview" src="{{ .CapeURL }}">
+        </p>
+      {{ end }}
       <p>
         <label for="cape-file">Upload a cape</label><br />
         <input type="file" name="capeFile" id="cape-file" />
@@ -166,7 +178,6 @@
 <script type="module">
 	import { skinview3d } from "{{.App.FrontEndURL}}/web/public/bundle.js"
 	const skinCanvas = document.getElementById("skin-canvas");
-	skinCanvas.style.display = "inline-block";
 	const skinViewer = new skinview3d.SkinViewer({
 		canvas: skinCanvas,
 		width: 200,