appearance dropdown - wow, that was easy

app/models/pet_state.rb

@@ -35,6 +35,10 @@ class PetState < ActiveRecord::Base
     group("pet_states.id").
     order("(mood_id = 1) DESC, COUNT(effect_assets.remote_id) ASC, COUNT(parents_swf_assets.swf_asset_id) DESC, female ASC, SUM(parents_swf_assets.swf_asset_id) ASC")
 
+  def as_json(options={})
+    serializable_hash :only => [:id], :methods => [:gender_mood_description]
+  end
+
   def reassign_children_to!(main_pet_state)
     self.contributions.each do |contribution|
       contribution.contributed = main_pet_state
@@ -117,7 +121,9 @@ class PetState < ActiveRecord::Base
   end
   
   def gender_mood_description
-    if labeled?
+    if unconverted?
+      I18n.translate('pet_states.description.unconverted')
+    elsif labeled?
       I18n.translate('pet_states.description.main', :gender => gender_name,
                      :mood => mood_name)
     else

app/models/pet_type.rb

@@ -50,7 +50,7 @@ class PetType < ActiveRecord::Base
       {
         :id => id,
         :body_id => body_id,
-        :pet_state_ids => pet_state_ids
+        :pet_states => pet_states.emotion_order.as_json
       }
     else
       {:image_hash => image_hash}
@@ -106,10 +106,6 @@ class PetType < ActiveRecord::Base
     pet_state
   end
 
-  def pet_state_ids
-    pet_states.select('pet_states.id').emotion_order.map(&:id)
-  end
-
   before_save do
     if @origin_pet && @origin_pet.name =~ IMAGE_CPN_ACCEPTABLE_NAME
       cpn_uri = URI.parse sprintf(IMAGE_CPN_FORMAT, CGI.escape(@origin_pet.name));

app/stylesheets/outfits/_edit.sass

@@ -55,17 +55,7 @@ body.outfits-edit
   #pet-info form
     display: inline
   #pet-state-form
-    ul
-      list-style: none
-      &, li
-        display: inline
-    input
-      display: none
-    label
-      +awesome-button
-      margin: 0 .25em
-    li.selected button
-      +awesome-button-color($marked_button_color)
+    font-size: 85%
     &.hidden
       visibility: hidden
   #save-outfit-wrapper

app/views/outfits/edit.html.haml

@@ -9,7 +9,7 @@
       %input{:type => "submit", :value => t('.pet_type.form.submit')}
     %form#pet-state-form
       = t '.pet_state_form.header'
-      %ul
+      %select
     #save-outfit-wrapper
       %a#current-outfit-permalink{:target => '_blank'}
         = image_tag 'link_go.png', :alt => t('.outfit.permalink.name'),

config/locales/en-MEEP.yml

@@ -480,7 +480,7 @@ en-MEEP:
         form:
           submit: Meep
       pet_state_form:
-        header: "Gender/Emeepshuns:"
+        header: "Meepearance:"
       outfit:
         permalink:
           name: Permameep
@@ -657,6 +657,19 @@ en-MEEP:
       clone: Meep a copy
       creation_summary_html: Meeped by %{user_link}, %{created_at_ago} ago
   
+  pet_states:
+    description:
+      main: "%{gender} %{mood}"
+      gender:
+        female: Feepmale
+        male: Meep
+      mood:
+        happy: ":)"
+        sad: ":("
+        sick: "X("
+      unconverted: Unconveeped
+      unlabeled: Unleeped
+  
   pets:
     bulk:
       needed_items:

config/locales/en.yml

@@ -511,7 +511,7 @@ en:
         form:
           submit: Go
       pet_state_form:
-        header: "Gender/Emotions:"
+        header: "Appearance:"
       outfit:
         permalink:
           name: Permalink
@@ -716,6 +716,7 @@ en:
         happy: Happy
         sad: Sad
         sick: Sick
+      unconverted: Unconverted
       unlabeled: Unlabeled
   
   pets:

public/javascripts/outfits/edit.js

@@ -370,7 +370,7 @@ View.Hash = function (wardrobe) {
 
   singleOutfitResponse('updatePetState', function (pet_state) {
     var pet_type = wardrobe.outfits.getPetType();
-    if(pet_state.id != data.state && pet_type && (data.state || pet_state.id != pet_type.pet_state_ids[0])) {
+    if(pet_state.id != data.state && pet_type && (data.state || pet_state.id != pet_type.pet_states[0].id)) {
       changeQuery({state: pet_state.id});
     }
   });
@@ -929,37 +929,33 @@ View.Outfits = function (wardrobe) {
 View.PetStateForm = function (wardrobe) {
   var INPUT_NAME = 'pet_state_id', form_query = '#pet-state-form',
     form = $(form_query),
-    ul = form.children('ul'),
-    button_query = form_query + ' button';
-  $(button_query).live('click', function (e) {
-    e.preventDefault();
-    wardrobe.outfits.setPetStateById(+$(this).data('value'));
+    select = form.children('select');
+  
+  select.change(function (e) {
+    var id = parseInt(select.children(':selected').val(), 10);
+    wardrobe.outfits.setPetStateById(id);
   });
 
   function updatePetState(pet_state) {
     if(pet_state) {
-      ul.children('li.selected').removeClass('selected');
-      $(button_query + '[data-value=' + pet_state.id + ']').parent().addClass('selected');
+      select.val(pet_state.id);
     }
   }
 
   wardrobe.outfits.bind('petTypeLoaded', function (pet_type) {
-    var ids = pet_type.pet_state_ids, i, id, li, button, label;
-    ul.children().remove();
-    if(ids.length == 1) {
+    var pet_states = pet_type.pet_states, i, id, option;
+    select.children().remove();
+    if(pet_states.length == 1) {
       form.addClass('hidden');
     } else {
       form.removeClass('hidden');
-      for(var i = 0; i < ids.length; i++) {
+      for(var i = 0; i < pet_states.length; i++) {
         id = 'pet-state-button-' + i;
-        li = $('<li/>');
-        button = $('<button/>', {
-          id: id,
-          text: i + 1,
-          "data-value": ids[i]
+        option = $('<option/>', {
+          value: pet_states[i].id,
+          text: pet_states[i].gender_mood_description
         });
-        button.appendTo(li);
-        li.appendTo(ul);
+        option.appendTo(select);
       }
       updatePetState(wardrobe.outfits.getPetState());
     }

public/javascripts/wardrobe.js

@@ -441,7 +441,7 @@ function Wardrobe() {
 
     this.setPetStateById = function (id, petStateOnLoad) {
       if(!id && this.pet_type) {
-        id = this.pet_type.pet_state_ids[0];
+        id = this.pet_type.pet_states[0].id;
       }
       if(id) {
         this.pet_state = PetState.find(id);
@@ -670,6 +670,7 @@ function Wardrobe() {
     var pet_state = this, loaded = false;
 
     this.id = id;
+    this.gender_mood_description = '';
     this.assets = [];
 
     this.loadAssets = function (success) {
@@ -686,6 +687,10 @@ function Wardrobe() {
       }
     }
     
+    this.update = function (data) {
+      this.gender_mood_description = data.gender_mood_description;
+    }
+
     PetState.cache[id] = this;
   }
 
@@ -697,6 +702,12 @@ function Wardrobe() {
     return pet_state;
   }
   
+  PetState.buildOrUpdate = function (data) {
+    var pet_state = PetState.find(data.id);
+    pet_state.update(data);
+    return pet_state;
+  }
+
   PetState.cache = {};
 
   function PetType() {
@@ -713,13 +724,13 @@ function Wardrobe() {
           'for': 'wardrobe'
         }, function (data) {
           if(data) {
-            for(var key in data) {
-              if(data.hasOwnProperty(key)) {
-                pet_type[key] = data[key];
-              }
-            }
-            for(var i = 0; i < pet_type.pet_state_ids.length; i++) {
-              pet_type.pet_states.push(PetState.find(pet_type.pet_state_ids[i]));
+            pet_type.id = data.id;
+            pet_type.body_id = data.body_id;
+            
+            var pet_state;
+            for(var i = 0; i < data.pet_states.length; i++) {
+              pet_state = PetState.buildOrUpdate(data.pet_states[i]);
+              pet_type.pet_states.push(pet_state);
             }
             PetType.cache_by_color_and_species.deepSet(
               pet_type.color_id,