basic modeling buttons

no behavior yet, nor are they filtered
This commit is contained in:
Emi Matchu 2014-01-03 16:11:02 -05:00
parent 99b2acd419
commit fd106d7dba
11 changed files with 188 additions and 6 deletions

View file

@ -64,6 +64,8 @@ gem "rails-i18n"
gem 'rack-attack', '~> 2.2.0' gem 'rack-attack', '~> 2.2.0'
gem 'react-rails', '~> 0.8.0.0'
# Needed for the new asset pipeline # Needed for the new asset pipeline
group :assets do group :assets do

View file

@ -222,6 +222,11 @@ GEM
rdiscount (1.6.8) rdiscount (1.6.8)
rdoc (3.12.2) rdoc (3.12.2)
json (~> 1.4) json (~> 1.4)
react-rails (0.8.0.0)
execjs
rails (>= 3.1)
react-source (= 0.8.0)
react-source (0.8.0)
redis (3.0.3) redis (3.0.3)
redis-namespace (1.2.1) redis-namespace (1.2.1)
redis (~> 3.0.0) redis (~> 3.0.0)
@ -333,6 +338,7 @@ DEPENDENCIES
rails (= 3.2.16) rails (= 3.2.16)
rails-i18n rails-i18n
rdiscount (~> 1.6.5) rdiscount (~> 1.6.5)
react-rails (~> 0.8.0.0)
resque (~> 1.23.0) resque (~> 1.23.0)
resque-retry (~> 0.1.0) resque-retry (~> 0.1.0)
resque-scheduler (~> 2.0.0.d) resque-scheduler (~> 2.0.0.d)

View file

@ -0,0 +1,130 @@
/** @jsx React.DOM */
// Console-polyfill. MIT license.
// https://github.com/paulmillr/console-polyfill
// Make it safe to do console.log() always.
(function (con) {
'use strict';
var prop, method;
var empty = {};
var dummy = function() {};
var properties = 'memory'.split(',');
var methods = ('assert,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' +
'time,timeEnd,trace,warn').split(',');
while (prop = properties.pop()) con[prop] = con[prop] || empty;
while (method = methods.pop()) con[method] = con[method] || dummy;
})(window.console = window.console || {});
(function() {
var Neopia = {
User: {
get: function(id) {
return Neopia.getJSON("/users/" + id).then(function(response) {
return response.users[0];
});
}
},
Customization: {
get: function(petId) {
return Neopia.getJSON("/pets/" + petId + "/customization").then(function(response) {
return response.custom_pet;
});
}
},
getJSON: function(path) {
return $.getJSON(Neopia.API_URL + path);
},
init: function() {
var hostEl = $('meta[name=neopia-host]');
if (!hostEl.length) {
throw "missing neopia-host meta tag";
}
var host = hostEl.attr('content');
if (!host) {
throw "neopia-host meta tag exists, but is empty";
}
Neopia.API_URL = "http://" + host + "/api/1";
}
};
var Modeling = {
_modelForItemComponents: [],
_customizationsByPetId: {},
_addCustomization: function(customization) {
this._customizationsByPetId[customization.name] = customization;
this._update();
},
_getCustomizations: function() {
var modelCustomizationsByPetId = this._customizationsByPetId;
return Object.keys(modelCustomizationsByPetId).map(function(petId) {
return modelCustomizationsByPetId[petId];
});
},
_loadPetCustomization: function(neopiaPetId) {
return Neopia.Customization.get(neopiaPetId)
.done(this._addCustomization.bind(this));
},
_loadManyPetsCustomizations: function(neopiaPetIds) {
return neopiaPetIds.map(this._loadPetCustomization.bind(this));
},
_loadUserCustomizations: function(neopiaUserId) {
return Neopia.User.get(neopiaUserId).then(function(neopiaUser) {
return neopiaUser.links.pets;
}).then(this._loadManyPetsCustomizations.bind(this));
},
_loadManyUsersCustomizations: function(neopiaUserIds) {
return neopiaUserIds.map(this._loadUserCustomizations.bind(this));
},
_update: function() {
var state = {
customizations: this._getCustomizations()
};
this._modelForItemComponents.forEach(function(c) {
c.setState(state);
});
},
init: function() {
Neopia.init();
this._modelForItemComponents = $('#newest-unmodeled-items li').map(function() {
return React.renderComponent(<ModelForItem />,
$(this).find('.models').get(0));
}).toArray();
var users = ["borovan", "donna"];
this._loadManyUsersCustomizations(users);
}
};
var ModelForItem = React.createClass({
getInitialState: function() {
return {customizations: []};
},
render: function() {
function createModelPet(customization) {
return <ModelPet customization={customization}
key={customization.name} />;
}
var sortedCustomizations = this.state.customizations.sort(function(a, b) {
var aName = a.name.toLowerCase();
var bName = b.name.toLowerCase();
if (aName < bName) return -1;
if (aName > bName) return 1;
return 0;
});
return <ul>{sortedCustomizations.map(createModelPet)}</ul>;
}
});
var ModelPet = React.createClass({
render: function() {
var petName = this.props.customization.name;
var imageSrc = "http://pets.neopets.com/cpn/" + petName + "/1/1.png";
return <li><button>
<img src={imageSrc} />
<span>{petName}</span>
</button></li>;
}
});
Modeling.init();
})();

View file

@ -164,7 +164,7 @@ body.outfits-new
#newest-unmodeled-items #newest-unmodeled-items
list-style: none list-style: none
li > li
+clearfix +clearfix
margin: .5em 0 margin: .5em 0
@ -208,14 +208,45 @@ body.outfits-new
height: 80px height: 80px
width: 80px width: 80px
.missing-bodies, .models
margin-left: 82px
padding-left: 8px
padding-right: 8px
.missing-bodies .missing-bodies
font-size: 85% font-size: 85%
margin-left: 82px padding-bottom: .5em
padding: .5em 8px padding-top: .5em
p p
font-family: $main-font font-family: $main-font
margin-bottom: .5em margin-bottom: .5em
.models
font-size: 85%
li
display: inline-block
margin-bottom: 2px
margin-right: 2px
button
+reset-awesome-button
+border-radius(4px)
+box-shadow(0 1px 3px rgba(0, 0, 0, .5))
background: $module-bg-color
border: 1px solid $module-border-color
padding-right: 8px
&:active
position: relative
top: 1px
img
height: 40px
margin-right: 8px
vertical-align: middle
width: 40px
#latest-contribution #latest-contribution
+subtle-banner +subtle-banner

View file

@ -87,6 +87,7 @@ module ApplicationHelper
:bitly => 'http://bit.ly/javascript-api.js?version=latest&login=openneo&apiKey=R_4d0438829b7a99860de1d3edf55d8dc8', :bitly => 'http://bit.ly/javascript-api.js?version=latest&login=openneo&apiKey=R_4d0438829b7a99860de1d3edf55d8dc8',
:html5 => 'http://html5shim.googlecode.com/svn/trunk/html5.js', :html5 => 'http://html5shim.googlecode.com/svn/trunk/html5.js',
:jquery => 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js', :jquery => 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js',
:jquery20 => 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js',
:jquery_tmpl => 'http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js', :jquery_tmpl => 'http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js',
:swfobject => 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' :swfobject => 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'
} }

View file

@ -50,8 +50,12 @@ module OutfitsHelper
content_tag(:dd, search_query_description(base, filter_key)) content_tag(:dd, search_query_description(base, filter_key))
end end
def neopia_host
Rails.configuration.neopia_host
end
def remote_load_pet_path def remote_load_pet_path
"http://#{Rails.configuration.neopia_host}/api/1/pet/customization" "http://#{neopia_host}/api/1/pet/customization"
end end
def render_predicted_missing_species_by_color(species_by_color) def render_predicted_missing_species_by_color(species_by_color)

View file

@ -87,6 +87,7 @@
%span.meter{style: "width: #{@newest_unmodeled_items_predicted_modeled_ratio[item]*100}%"} %span.meter{style: "width: #{@newest_unmodeled_items_predicted_modeled_ratio[item]*100}%"}
.missing-bodies .missing-bodies
= render_predicted_missing_species_by_color(@newest_unmodeled_items_predicted_missing_species_by_color[item]) = render_predicted_missing_species_by_color(@newest_unmodeled_items_predicted_missing_species_by_color[item])
.models
- if @newest_modeled_items.present? - if @newest_modeled_items.present?
%h3= t '.newest_items.modeled.header' %h3= t '.newest_items.modeled.header'
%ul#newest-modeled-items %ul#newest-modeled-items
@ -110,6 +111,9 @@
%script#preview-pet-not-found-template{:type => 'text/x-jquery-tmpl'} %script#preview-pet-not-found-template{:type => 'text/x-jquery-tmpl'}
= t '.preview.pet_not_found' = t '.preview.pet_not_found'
- content_for :meta do
%meta{name: 'neopia-host', content: neopia_host}
- content_for :javascripts do - content_for :javascripts do
= include_javascript_libraries :jquery, :jquery_tmpl = include_javascript_libraries :jquery20, :jquery_tmpl
= javascript_include_tag 'jquery.timeago', 'pet_query', 'outfits/new' = javascript_include_tag 'react', 'jquery.timeago', 'pet_query', 'outfits/new', 'modeling'

View file

@ -30,6 +30,8 @@ OpenneoImpressItems::Application.configure do
# Expands the lines which load the assets # Expands the lines which load the assets
config.assets.debug = true config.assets.debug = true
config.react.variant = :development
end end
LocalImpressHost = 'betanewimpress.openneo.net' LocalImpressHost = 'betanewimpress.openneo.net'

View file

@ -59,6 +59,8 @@ OpenneoImpressItems::Application.configure do
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true # config.force_ssl = true
config.react.variant = :production
end end
LocalImpressHost = 'newimpress.openneo.net' LocalImpressHost = 'newimpress.openneo.net'

BIN
vendor/cache/react-rails-0.8.0.0.gem vendored Normal file

Binary file not shown.

BIN
vendor/cache/react-source-0.8.0.gem vendored Normal file

Binary file not shown.