From 4e11ee4da7aca221eafc14cfdfa6221c3e34d9be Mon Sep 17 00:00:00 2001 From: Matchu Date: Wed, 22 May 2024 16:59:36 -0700 Subject: [PATCH] Add paint brush images to Item Getting Guide In the previous change, we started grouping PB items by color. But I wanted to better express that the grouping itself *is* an item, and the items below it are secondary! The main change we make here is to leverage DTI's existing design language that "thumbnail image means item", and record thumbnail URLs as well as paint brush names now, too! We're still not leveraging the full Item system here, just fields on Color. Keeping it simple for now! Here's the script I ran to add the paint brush images to all the existing colors! ```rb Color.find_by_name("Baby").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/babypaintbrush.gif") Color.find_by_name("Biscuit").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_biscuit.gif") Color.find_by_name("Blue").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/bluepntbrsh.gif") Color.find_by_name("Brown").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/brownpntbrush.gif") Color.find_by_name("Camouflage").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_camo.gif") Color.find_by_name("Candy").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_candy.gif") Color.find_by_name("Checkered").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/checkeredpntbrush.gif") Color.find_by_name("Christmas").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/xmaspaintbrush.gif") Color.find_by_name("Cloud").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/cloudpntbrush.gif") Color.find_by_name("Darigan").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/pb_darigan.gif") Color.find_by_name("Dimensional").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_dimensional.gif") Color.find_by_name("Disco").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/discopntbrush.gif") Color.find_by_name("Electric").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/electricbluepntbrush.gif") Color.find_by_name("Eventide").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/eventidepaintbrush.gif") Color.find_by_name("Faerie").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/faeriepntbrush.gif") Color.find_by_name("Fire").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/firepntbrush.gif") Color.find_by_name("Elderlyboy").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/pb_elderly.gif") Color.find_by_name("Elderlygirl").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/pb_elderly.gif") Color.find_by_name("Ghost").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/ghostpntbrush.gif") Color.find_by_name("Glowing").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/glowingpntbrsh.gif") Color.find_by_name("Gold").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/gold_pntbrush.gif") Color.find_by_name("Green").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/greenpntbrsh.gif") Color.find_by_name("Grey").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/greypntbrush.gif") Color.find_by_name("Halloween").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/halloweenpntbrsh.gif") Color.find_by_name("Invisible").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/invisiblepntbrsh.gif") Color.find_by_name("Desert").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/desertpaintbrush.gif") Color.find_by_name("Maractite").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/maractitepaintbrush.gif") Color.find_by_name("Maraquan").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/maraquanpntbrush.gif") Color.find_by_name("Marble").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_marble.gif") Color.find_by_name("Island").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/islandpntbrush.gif") Color.find_by_name("Oil Paint").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/oilpaintingpntbrsh.gif") Color.find_by_name("Orange").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/orange_paint_brush.gif") Color.find_by_name("Origami").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_origami.gif") Color.find_by_name("Pastel").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_pastel.gif") Color.find_by_name("Pink").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/pink_paint_brush.gif") Color.find_by_name("Pirate").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/piratepntbrush.gif") Color.find_by_name("Plushie").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/plushiepaintbrush.gif") Color.find_by_name("Polka Dot").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_polkadot.gif") Color.find_by_name("Purple").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/purplepntbrsh.gif") Color.find_by_name("Rainbow").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/rainbowpntbrsh.gif") Color.find_by_name("Red").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/redpntbrsh.gif") Color.find_by_name("Relic").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/relic_pntbrush.gif") Color.find_by_name("Royalboy").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_royal.gif") Color.find_by_name("Royalgirl").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_royal.gif") Color.find_by_name("Sketch").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/sketchpntbrush.gif") Color.find_by_name("Shadow").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/shadowpntbrsh.gif") Color.find_by_name("Silver").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/silverpntbrsh.gif") Color.find_by_name("Skunk").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/skunkpntbrush.gif") Color.find_by_name("Snow").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_snowman.gif") Color.find_by_name("Speckled").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/greenwhitedotspntbrush.gif") Color.find_by_name("Split").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/halfandhalfpntbrsh.gif") Color.find_by_name("Spotted").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/spottedpntbrush.gif") Color.find_by_name("Starry").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/starspntbrush.gif") Color.find_by_name("Stealthy").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/pb_stealthy.gif") Color.find_by_name("Steampunk").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_steampunk.gif") Color.find_by_name("Strawberry").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/strawberrypntbrush.gif") Color.find_by_name("Striped").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/stripedpntbrsh.gif") Color.find_by_name("Swamp Gas").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/newpbsg2011color.gif") Color.find_by_name("Toy").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_toy.gif") Color.find_by_name("Transparent").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/transparentpaintbrush.gif") Color.find_by_name("Tyrannian").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/tyrannianpntbrush.gif") Color.find_by_name("Usuki Boy").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/usukipaintbrush.gif") Color.find_by_name("Usuki Girl").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/usukipaintbrush.gif") Color.find_by_name("Valentine").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_valentine.gif") Color.find_by_name("Water").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_water.gif") Color.find_by_name("White").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/whitepntbrsh.gif") Color.find_by_name("Woodland").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_woodland.gif") Color.find_by_name("Wraith").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_wraith.gif") Color.find_by_name("Yellow").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/yellowpntbrsh.gif") Color.find_by_name("Zombie").update!(pb_item_thumbnail_url: "https://images.neopets.com/items/paintbrush_zombie.gif") ``` --- app/assets/stylesheets/items/sources.sass | 13 +++++++++++++ app/views/items/sources.html.haml | 9 ++++++--- ...522233638_add_pb_item_thumbnail_url_to_colors.rb | 5 +++++ db/schema.rb | 3 ++- 4 files changed, 26 insertions(+), 4 deletions(-) create mode 100644 db/migrate/20240522233638_add_pb_item_thumbnail_url_to_colors.rb diff --git a/app/assets/stylesheets/items/sources.sass b/app/assets/stylesheets/items/sources.sass index e52395c0..862778c3 100644 --- a/app/assets/stylesheets/items/sources.sass +++ b/app/assets/stylesheets/items/sources.sass @@ -50,6 +50,9 @@ th text-align: left + .thumbnail-cell img + outline: 1px solid $soft-border-color + .actions-cell button /* Bootstrap's Purple 600 */ +awesome-button-color(#59359a) @@ -57,3 +60,13 @@ .special-color-explanation text-wrap: balance font-style: italic + + /* For wearable items that belong to a specific set that all come together, + * like a Paint Brush. */ + &[data-group-type="bundle"] + tbody + .thumbnail-cell + opacity: 0.65 + + tr:hover .thumbnail-cell + opacity: 0.85 diff --git a/app/views/items/sources.html.haml b/app/views/items/sources.html.haml index 97cbc58c..76bedf46 100644 --- a/app/views/items/sources.html.haml +++ b/app/views/items/sources.html.haml @@ -61,14 +61,17 @@ pet changes color again! You can use this to mix-and-match styles for "cross-paint" outfits. - @pb_items_by_color.each do |color, items| - %table.item-list + %table.item-list{"data-group-type": "bundle"} %thead - %td + %td.thumbnail-cell + - if color.pb_item_thumbnail_url? + = image_tag color.pb_item_thumbnail_url, + alt: "Item thumbnail for #{color.pb_item_name}" %th #{color.pb_item_name || color.name.humanize} (#{pluralize items.size, "item"}) %td.actions-cell - - if color.pb_item_name.present? + - if color.pb_item_name? = button_link_to "Shops", shop_wizard_url_for(color.pb_item_name), target: "_blank", icon: search_icon diff --git a/db/migrate/20240522233638_add_pb_item_thumbnail_url_to_colors.rb b/db/migrate/20240522233638_add_pb_item_thumbnail_url_to_colors.rb new file mode 100644 index 00000000..5e4e25b2 --- /dev/null +++ b/db/migrate/20240522233638_add_pb_item_thumbnail_url_to_colors.rb @@ -0,0 +1,5 @@ +class AddPbItemThumbnailUrlToColors < ActiveRecord::Migration[7.1] + def change + add_column :colors, :pb_item_thumbnail_url, :string + end +end diff --git a/db/schema.rb b/db/schema.rb index ac34a581..ff24a46f 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,7 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. -ActiveRecord::Schema[7.1].define(version: 2024_05_22_222040) do +ActiveRecord::Schema[7.1].define(version: 2024_05_22_233638) do create_table "alt_styles", charset: "utf8mb4", collation: "utf8mb4_unicode_520_ci", force: :cascade do |t| t.integer "species_id", null: false t.integer "color_id", null: false @@ -77,6 +77,7 @@ ActiveRecord::Schema[7.1].define(version: 2024_05_22_222040) do t.boolean "prank", default: false, null: false t.string "name", null: false t.string "pb_item_name" + t.string "pb_item_thumbnail_url" end create_table "contributions", id: :integer, charset: "utf8mb4", collation: "utf8mb4_unicode_520_ci", force: :cascade do |t|