From 347419aee800d41946b4f420093e21a957f72f46 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Sat, 7 Dec 2024 12:16:52 -0800
Subject: [PATCH] Add SVG/PNG picker when editing pet appearances
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I've known there are bugs in the SVGs pretty often, because they're not
very well attended-to—I noticed pretty quick that the Marble Eyrie, for
example, has its Body asset saved correctly in PNG, but its SVG is just
another copy of the head, oops!

I think SVG is still a nice default for this UI, but I added a little
form to switch to PNG, to give us a debugging method and escape hatch
if it starts to get weird.
---
 .../stylesheets/partials/_context_button.sass |  3 +-
 .../pet_states/support-outfit-viewer.sass     | 34 +++++++++++++++++++
 .../_support_outfit_viewer.html.haml          | 23 +++++++++++--
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/partials/_context_button.sass b/app/assets/stylesheets/partials/_context_button.sass
index a49f6cc3..2e7cc337 100644
--- a/app/assets/stylesheets/partials/_context_button.sass
+++ b/app/assets/stylesheets/partials/_context_button.sass
@@ -1,6 +1,7 @@
+@import "clean/mixins"
+
 =context-button
   +awesome-button
   +awesome-button-color(#aaaaaa)
   +opacity(0.9)
   font-size: 80%
-
diff --git a/app/assets/stylesheets/pet_states/support-outfit-viewer.sass b/app/assets/stylesheets/pet_states/support-outfit-viewer.sass
index 9184a86b..26e2c1fb 100644
--- a/app/assets/stylesheets/pet_states/support-outfit-viewer.sass
+++ b/app/assets/stylesheets/pet_states/support-outfit-viewer.sass
@@ -1,4 +1,5 @@
 @import "../partials/clean/constants"
+@import "../partials/context_button"
 
 support-outfit-viewer
 	display: flex
@@ -11,6 +12,36 @@ support-outfit-viewer
 		border: 1px solid $module-border-color
 		border-radius: 1em
 
+	.outfit-viewer-controls
+		margin-block: .5em
+		isolation: isolate // Avoid z-index weirdness with our buttons vs the lens
+
+		display: flex
+		align-items: center
+		justify-content: center
+		gap: .5em
+
+		font-size: .85em
+
+		fieldset
+			display: contents
+
+		legend
+			font-weight: bold
+			&::after
+				content: ":"
+
+		label
+			display: flex
+			align-items: center
+			gap: .25em
+
+			input[type=radio]
+				margin: 0
+
+		[type=submit]
+			+context-button
+
 	> table
 		flex: 0 0 auto
 		border-collapse: collapse
@@ -42,3 +73,6 @@ support-outfit-viewer
 		--magic-magnifier-lens-width: 100px
 		--magic-magnifier-lens-height: 100px
 		--magic-magnifier-scale: 2.5
+
+	magic-magnifier-lens
+		z-index: 2 // Be above things by default, but not by much!
diff --git a/app/views/pet_states/_support_outfit_viewer.html.haml b/app/views/pet_states/_support_outfit_viewer.html.haml
index fd403e44..26fe0f27 100644
--- a/app/views/pet_states/_support_outfit_viewer.html.haml
+++ b/app/views/pet_states/_support_outfit_viewer.html.haml
@@ -1,7 +1,24 @@
 = content_tag "support-outfit-viewer", **html_options do
-	-# Render an outfit viewer in a magnifier. Use SVG for maximum clarity!
-	%magic-magnifier
-		= outfit_viewer outfit, preferred_image_format: :svg
+	= turbo_frame_tag "support-outfit-viewer-preview" do
+		%div
+			-# Render an outfit viewer in a magnifier. Use SVG by default for clarity,
+			-# but also offer an option to switch to PNG if it looks wrong.
+			%magic-magnifier
+				= outfit_viewer outfit,
+					preferred_image_format: params[:preferred_image_format] == "png" ? :png : :svg
+
+			= form_with method: :get, class: "outfit-viewer-controls" do |f|
+				%fieldset
+					%legend Format
+					%label
+						= f.radio_button "preferred_image_format", "svg",
+							checked: params[:preferred_image_format] != "png"
+						SVG
+					%label
+						= f.radio_button "preferred_image_format", "png",
+							checked: params[:preferred_image_format] == "png"
+						PNG
+				= f.submit "Update"
 
 	%table
 		%thead