Fix magic magnifier positioning in Firefox

Oh oops, Firefox is a bit stricter about interpreting custom elements
as inline elements by default instead of block elements. This messes up
the positioning relative to the container. Fixed!

.ruby-version

@@ -1 +1 @@
-3.3.5
+3.3.6

Gemfile

@@ -1,5 +1,5 @@
 source 'https://rubygems.org'
-ruby '3.3.5'
+ruby '3.3.6'
 
 gem 'rails', '~> 7.2', '>= 7.2.1'
 

Gemfile.lock

@@ -565,7 +565,7 @@ DEPENDENCIES
   will_paginate (~> 4.0)
 
 RUBY VERSION
-   ruby 3.3.5p100
+   ruby 3.3.6p108
 
 BUNDLED WITH
    2.5.18

app/assets/javascripts/magic-magnifier.js

@@ -1,4 +1,6 @@
 class MagicMagnifier extends HTMLElement {
+	#internals = this.attachInternals();
+
 	connectedCallback() {
 		setTimeout(() => this.#attachLens(), 0);
 		this.addEventListener("mousemove", this.#onMouseMove);
@@ -18,6 +20,7 @@ class MagicMagnifier extends HTMLElement {
 		const y = e.clientY - rect.top;
 		this.style.setProperty("--magic-magnifier-x", x + "px");
 		this.style.setProperty("--magic-magnifier-y", y + "px");
+		this.#internals.states.add("ready");
 	}
 }
 

app/assets/stylesheets/application/magic-magnifier.sass

@@ -1,4 +1,5 @@
 magic-magnifier
+	display: block
 	position: relative
 
 	// Only show the lens when we are hovering, and the magnifier's X and Y
@@ -7,12 +8,14 @@ magic-magnifier
 	magic-magnifier-lens
 		display: none
 
-	&:hover
-		@container style(--magic-magnifier-x) and style(--magic-magnifier-y)
+	// TODO: Once container query support is broader, we can remove the CSS state
+	//       and read for the presence of the X and Y custom properties instead.
+	&:hover:state(ready)
 		magic-magnifier-lens
 			display: block
 
 magic-magnifier-lens
+	display: block
 	width: var(--magic-magnifier-lens-width, 100px)
 	height: var(--magic-magnifier-lens-height, 100px)
 	overflow: hidden

app/services/neopets/nc_mall.rb

@@ -38,8 +38,20 @@ module Neopets::NCMall
 			uniq
 	end
 
-	STYLING_STUDIO_URL = "https://www.neopets.com/np-templates/ajax/stylingstudio/studio.php"
 	def self.load_styles(species_id:, neologin:)
+		Sync do
+			tabs = [
+				Async { load_styles_tab(species_id:, neologin:, tab: 1) },
+				Async { load_styles_tab(species_id:, neologin:, tab: 2) },
+			]
+			tabs.map(&:wait).flatten(1)
+		end
+	end
+
+	private
+
+	STYLING_STUDIO_URL = "https://www.neopets.com/np-templates/ajax/stylingstudio/studio.php"
+	def self.load_styles_tab(species_id:, neologin:, tab:)
 		Sync do
 			DTIRequests.post(
 				STYLING_STUDIO_URL,
@@ -48,7 +60,7 @@ module Neopets::NCMall
 					["Cookie", "neologin=#{neologin}"],
 					["X-Requested-With", "XMLHttpRequest"],
 				],
-				{tab: 1, mode: "getStyles", species: species_id}.to_query,
+				{tab:, mode: "getStyles", species: species_id}.to_query,
 			) do |response|
 				if response.status != 200
 					raise ResponseNotOK.new(response.status),
@@ -60,7 +72,8 @@ module Neopets::NCMall
 
 					# HACK: styles is a hash, unless it's empty, in which case it's an
 					#       array? Weird. Normalize this by converting to hash.
-					data.fetch(:styles).to_h.values
+					data.fetch(:styles).to_h.values.
+						map { |s| s.slice(:oii, :name, :image, :limited) }
 				rescue JSON::ParserError, KeyError
 					raise UnexpectedResponseFormat
 				end
@@ -68,8 +81,6 @@ module Neopets::NCMall
 		end
 	end
 
-	private
-
 	def self.load_page_by_url(url)
 		Sync do
 			DTIRequests.get(url) do |response|

config/routes.rb

@@ -37,8 +37,7 @@ OpenneoImpressItems::Application.routes.draw do
   end
   resources :swf_assets, path: 'swf-assets', only: [:show]
   scope "rainbow-pool" do
-    resources :alt_styles, path: 'alt-styles', only: [:index, :edit, :update],
-      path: 'styles'
+    resources :alt_styles, path: 'styles', only: [:index, :edit, :update]
   end
   resources :pet_types, path: 'rainbow-pool', param: "name",
             only: [:index, :show] do

deploy/deploy.yml

@@ -6,7 +6,7 @@
   vars:
     local_app_root: "{{ playbook_dir  }}/.."
     remote_project_root: "/srv/impress"
-    ruby_version: "3.3.5"
+    ruby_version: "3.3.6"
 
     # deploy:setup should have added us to the "impress-deployers" group, so we
     # should be able to become the "impress" user without a password.

deploy/setup.yml

@@ -6,7 +6,7 @@
   vars:
     email_address: "emi@matchu.dev" # TODO: Extract this to personal config?
     impress_hostname: impress.openneo.net
-    ruby_version: "3.3.5"
+    ruby_version: "3.3.6"
   vars_files:
     # mysql_root_password, mysql_user_password, mysql_user_password_2020,
     # dev_ips
@@ -171,7 +171,7 @@
       git:
         repo: https://github.com/rbenv/ruby-build.git
         dest: /opt/ruby-build
-        version: v20240917
+        version: v20241225.2
 
     - name: Check if Ruby {{ ruby_version }} is already installed
       stat:

lib/tasks/neopets/import/styling_studio.rake

@@ -42,7 +42,7 @@ namespace "neopets:import" do
 				record = style_records_by_id[style[:oii]]
 				label = "#{style[:name]} (#{style[:oii]})"
 				if record.nil?
-					puts "⚠️  [#{label}]: Not modeled yet, skipping"
+					puts "❔  [#{label}]: Not modeled yet, skipping"
 					counts[:skipped] += 1
 					next
 				end

spec/services/nc_mall_spec.rb

@@ -3,7 +3,7 @@ require_relative '../rails_helper'
 
 RSpec.describe Neopets::NCMall, type: :model do
 	describe ".load_styles" do
-		def stub_styles_request
+		def stub_styles_request(tab:)
 			stub_request(:post, "https://www.neopets.com/np-templates/ajax/stylingstudio/studio.php").
 				with(
 					headers: {
@@ -12,10 +12,15 @@ RSpec.describe Neopets::NCMall, type: :model do
 						"Cookie": "neologin=STUB_NEOLOGIN",
 						"User-Agent": Rails.configuration.user_agent_for_neopets,
 					},
-					body: "mode=getStyles&species=2&tab=1",
+					body: "mode=getStyles&species=2&tab=#{tab}",
 				)
 		end
 
+		def empty_styles_response
+			# You'd think styles would be `{}` in this case, but it's `[]`. Huh!
+			{ body: '{"success":true,"styles":[]}' }
+		end
+
 		subject(:styles) do
 			Neopets::NCMall.load_styles(
 				species_id: 2,
@@ -24,9 +29,12 @@ RSpec.describe Neopets::NCMall, type: :model do
 		end
 
 		it "loads current NC styles from the NC Mall" do
-			stub_styles_request.to_return(
+			stub_styles_request(tab: 1).to_return(
 				body: '{"success":true,"styles":{"87966":{"oii":87966,"name":"Nostalgic Alien Aisha","image":"https:\/\/images.neopets.com\/items\/nostalgic_alien_aisha.gif","limited":false},"87481":{"oii":87481,"name":"Nostalgic Sponge Aisha","image":"https:\/\/images.neopets.com\/items\/nostalgic_sponge_aisha.gif","limited":false},"90031":{"oii":90031,"name":"Celebratory Anniversary Aisha","image":"https:\/\/images.neopets.com\/items\/624dc08bcf.gif","limited":true},"90050":{"oii":90050,"name":"Nostalgic Tyrannian Aisha","image":"https:\/\/images.neopets.com\/items\/b225e06541.gif","limited":true}}}',
 			)
+			stub_styles_request(tab: 2).to_return(
+				body: '{"success":true,"styles":{"90338":{"oii":90338,"name":"Prismatic Pine: Christmas Aisha","image":"https:\/\/images.neopets.com\/items\/3m182ff5.gif","limited":true,"style":90252},"90348":{"oii":90348,"name":"Prismatic Tinsel: Christmas Aisha","image":"https:\/\/images.neopets.com\/items\/4j29mb91.gif","limited":true,"style":90252}}}'
+			)
 
 			expect(styles).to contain_exactly(
 				{
@@ -52,37 +60,50 @@ RSpec.describe Neopets::NCMall, type: :model do
 					name: "Nostalgic Tyrannian Aisha",
 					image: "https://images.neopets.com/items/b225e06541.gif",
 					limited: true,
+				},
+				{
+					oii: 90338,
+					name: "Prismatic Pine: Christmas Aisha",
+					image: "https://images.neopets.com/items/3m182ff5.gif",
+					limited: true,
+				},
+				{
+					oii: 90348,
+					name: "Prismatic Tinsel: Christmas Aisha",
+					image: "https://images.neopets.com/items/4j29mb91.gif",
+					limited: true,
 				}
 			)
 		end
 
 		it "handles the NC Mall's odd API behavior for zero styles" do
-			stub_styles_request.to_return(
-				# You'd think styles would be `{}` in this case, but it's `[]`. Huh!
-				body: '{"success":true,"styles":[]}',
-			)
+			stub_styles_request(tab: 1).to_return(empty_styles_response)
+			stub_styles_request(tab: 2).to_return(empty_styles_response)
 
 			expect(styles).to be_empty
 		end
 
 		it "raises an error if the request returns a non-200 status" do
-			stub_styles_request.to_return(status: 400)
+			stub_styles_request(tab: 1).to_return(status: 400)
+			stub_styles_request(tab: 2).to_return(empty_styles_response)
 
 			expect { styles }.to raise_error(Neopets::NCMall::ResponseNotOK)
 		end
 
 		it "raises an error if the request returns a non-JSON response" do
-			stub_styles_request.to_return(
+			stub_styles_request(tab: 1).to_return(
 				body: "Oops, this request failed for some weird reason!",
 			)
+			stub_styles_request(tab: 2).to_return(empty_styles_response)
 
 			expect { styles }.to raise_error(Neopets::NCMall::UnexpectedResponseFormat)
 		end
 
 		it "raises an error if the request returns unexpected JSON" do
-			stub_styles_request.to_return(
+			stub_styles_request(tab: 1).to_return(
 				body: '{"success": false}',
 			)
+			stub_styles_request(tab: 2).to_return(empty_styles_response)
 
 			expect { styles }.to raise_error(Neopets::NCMall::UnexpectedResponseFormat)
 		end