pretty home page

app/helpers/items_helper.rb

@@ -1,12 +1,33 @@
 module ItemsHelper
-  StandardSpeciesImageFormat = 'http://pets.neopets.com/cp/%s/1/1.png'
+  module PetTypeImage
+    Format = 'http://pets.neopets.com/cp/%s/%i/%i.png'
+    
+    Emotions = {
+      :happy => 1,
+      :sad => 2,
+      :angry => 3,
+      :ill => 4
+    }
+    
+    Sizes = {
+      :face => 1,
+      :thumb => 2,
+      :zoom => 3,
+      :full => 4
+    }
+  end
   
-  def standard_species_images(species_list)
+  def standard_species_search_links
-    pet_types = PetType.random_basic_per_species(species_list.map(&:id))
+    build_on_random_standard_pet_types(Species.all) do |pet_type|
-    raw(pet_types.inject('') do |html, pet_type|
+      image = pet_type_image(pet_type, :happy, :zoom)
-      src = sprintf(StandardSpeciesImageFormat, pet_type.image_hash)
+      query = "species:#{pet_type.species.name}"
-      human_name = pet_type.species.name.humanize
+      link_to(image, items_path(:q => query))
-      image = image_tag(src, :alt => human_name, :title => human_name)
+    end
+  end
+  
+  def standard_species_images(species)
+    build_on_random_standard_pet_types(species) do |pet_type|
+      image = pet_type_image(pet_type, :happy, :face)
       attributes = {
         'data-id' => pet_type.id,
         'data-body-id' => pet_type.body_id
@@ -18,11 +39,25 @@ module ItemsHelper
             pet_type_attribute.send(subattribute_name)
         end
       end
-      html + link_to(
+      link_to(
         image,
         '#',
         attributes
       )
-    end)
+    end
+  end
+  
+  private
+  
+  def build_on_random_standard_pet_types(species, &block)
+    raw(PetType.random_basic_per_species(species.map(&:id)).map(&block).join)
+  end
+  
+  def pet_type_image(pet_type, emotion, size)
+    emotion_id = PetTypeImage::Emotions[emotion]
+    size_id = PetTypeImage::Sizes[size]
+    src = sprintf(PetTypeImage::Format, pet_type.image_hash, emotion_id, size_id)
+    human_name = pet_type.species.name.humanize
+    image_tag(src, :alt => human_name, :title => human_name)
   end
 end

app/stylesheets/items/_index.scss

@@ -0,0 +1,36 @@
+form {
+  margin-bottom: 2em;
+}
+
+@mixin main_unit {
+  float: left;
+  width: 49%;
+  
+  h2 {
+    font-size: 125%;
+  }
+}
+
+#search-help {
+  @include main_unit;
+  padding-right: 1%;
+  
+  dl {
+    text-align: left;
+  }
+  
+  dd {
+    margin-bottom: 1em;
+  }
+}
+
+#species-search-links {
+  @include main_unit;
+  
+  padding-left: 1%;
+  
+  img {
+    height: 80px;
+    width: 80px;
+  }
+}

app/stylesheets/screen.scss

@@ -84,12 +84,14 @@ h1 a {
   }
 }
 
-a.item {
+a {
   img {
     @include opacity(.9);
   }
-  &:hover img {
+  &:hover, &:focus {
-    @include opacity(1);
+    img {
+      @include opacity(1);
+    }
   }
 }
 
@@ -115,4 +117,5 @@ a.item {
 	src: url('http://impress.openneo.net/assets/fonts/Delicious-Italic.otf');
 }
 
+@import "items/index";
 @import "items/show";

app/views/items/index.html.haml

@@ -11,3 +11,19 @@
     = will_paginate @results
     = render @results
     = will_paginate @results
+- else
+  #search-help
+    %h2 Find what you're looking for
+    %dl
+      %dt negg
+      %dd returns any item with the word "negg" in it
+      %dt floating doll
+      %dd returns any item with the words "floating" and "doll" in it
+      %dt "easter negg"
+      %dd returns any item with the phrase "easter negg" in it
+      %dt species:shoyru
+      %dd returns any item a Shoyru can wear
+      
+  #species-search-links
+    %h2 Can't decide? Search by species
+    = standard_species_search_links

public/stylesheets/compiled/screen.css

@@ -541,7 +541,7 @@ h1 a:hover {
 }
 
 /* line 88, ../../../app/stylesheets/screen.scss */
-a.item img {
+a img {
   -moz-opacity: 0.9;
   -webkit-opacity: 0.9;
   -o-opacity: 0.9;
@@ -550,8 +550,8 @@ a.item img {
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
 }
-/* line 91, ../../../app/stylesheets/screen.scss */
+/* line 92, ../../../app/stylesheets/screen.scss */
-a.item:hover img {
+a:hover img, a:focus img {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
@@ -579,6 +579,46 @@ a.item:hover img {
   src: url("http://impress.openneo.net/assets/fonts/Delicious-Italic.otf");
 }
 
+/* line 1, ../../../app/stylesheets/items/_index.scss */
+form {
+  margin-bottom: 2em;
+}
+
+/* line 14, ../../../app/stylesheets/items/_index.scss */
+#search-help {
+  float: left;
+  width: 49%;
+  padding-right: 1%;
+}
+/* line 9, ../../../app/stylesheets/items/_index.scss */
+#search-help h2 {
+  font-size: 125%;
+}
+/* line 18, ../../../app/stylesheets/items/_index.scss */
+#search-help dl {
+  text-align: left;
+}
+/* line 22, ../../../app/stylesheets/items/_index.scss */
+#search-help dd {
+  margin-bottom: 1em;
+}
+
+/* line 27, ../../../app/stylesheets/items/_index.scss */
+#species-search-links {
+  float: left;
+  width: 49%;
+  padding-left: 1%;
+}
+/* line 9, ../../../app/stylesheets/items/_index.scss */
+#species-search-links h2 {
+  font-size: 125%;
+}
+/* line 32, ../../../app/stylesheets/items/_index.scss */
+#species-search-links img {
+  height: 80px;
+  width: 80px;
+}
+
 /* line 2, ../../../app/stylesheets/items/_show.scss */
 body.show header {
   border-bottom: 1px solid #033e6b;