Merge pull request #133 from evan-goode/evan-goode/noscript-skin-view

noscript skin viewer fallback

public/style.css

@@ -238,6 +238,20 @@ pre {
   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);

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>

view/player.tmpl

@@ -19,8 +19,14 @@
   <h6 style="text-align: center;">{{ .Player.UUID }}<br />{{ .PlayerID }}</h6>
   {{/* prettier-ignore-end */}}
   {{ if .SkinURL }}
-    <div id="skin-container" style="height: 300px;">
-      <canvas id="skin-canvas"></canvas>
+    <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" class="noscript-hidden"></canvas>
     </div>
   {{ else }}
     No skin yet.
@@ -45,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" />
@@ -89,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" />