From b0b840741b5efb3f1088ed226aab9f56aae7a659 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 20 Jan 2014 15:51:51 -0600
Subject: [PATCH] reload pet thumbnail when and only when its appearance
 changes

---
 app/assets/javascripts/modeling.js.jsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/modeling.js.jsx b/app/assets/javascripts/modeling.js.jsx
index 074a2817..6ff7264b 100644
--- a/app/assets/javascripts/modeling.js.jsx
+++ b/app/assets/javascripts/modeling.js.jsx
@@ -292,7 +292,8 @@
         disabled = true;
       }
       var itemName = this.props.item.name;
-      var imageSrc = "http://pets.neopets.com/cpn/" + petName + "/1/1.png";
+      var imageSrc = "http://pets.neopets.com/cpn/" + petName + "/1/1.png?" +
+        this.appearanceQuery();
       var title = I18n.pet.title
         .replace(/%{pet}/g, petName)
         .replace(/%{item}/g, itemName);
@@ -307,6 +308,24 @@
     },
     handleClick: function(e) {
       Modeling.model(this.props.customization.custom_pet.name, this.props.item.id);
+    },
+    appearanceQuery: function() {
+      // By appending this string to the image URL, we update it when and only
+      // when the pet's appearance has changed.
+      var assetIdByZone = {};
+      var biologyByZone = this.props.customization.custom_pet.biology_by_zone;
+      var biologyPartIds = Object.keys(biologyByZone).forEach(function(zone) {
+        assetIdByZone[zone] = biologyByZone[zone].part_id;
+      });
+      var equippedByZone = this.props.customization.custom_pet.equipped_by_zone;
+      var equippedAssetIds = Object.keys(equippedByZone).forEach(function(zone) {
+        assetIdByZone[zone] = equippedByZone[zone].asset_id;
+      });
+      // Sort the zones, so the string (which should match exactly when the
+      // appearance matches) isn't dependent on iteration order.
+      return Object.keys(assetIdByZone).sort().map(function(zone) {
+        return "zone[" + zone + "]=" + assetIdByZone[zone];
+      }).join("&");
     }
   });