247 lines
9.1 KiB
JavaScript
247 lines
9.1 KiB
JavaScript
/** @jsx React.DOM */
|
|
|
|
(function($) {
|
|
// Console-polyfill. MIT license.
|
|
// https://github.com/paulmillr/console-polyfill
|
|
// Make it safe to do console.log() always.
|
|
var console = (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;
|
|
return con;
|
|
})(window.console || {});
|
|
|
|
var Neopia = {
|
|
User: {
|
|
get: function(id) {
|
|
return $.getJSON(Neopia.API_URL + "/users/" + id).then(function(response) {
|
|
return response.users[0];
|
|
});
|
|
}
|
|
},
|
|
Customization: {
|
|
request: function(petId, type) {
|
|
return $.ajax({
|
|
dataType: "json",
|
|
type: type,
|
|
url: Neopia.API_URL + "/pets/" + petId + "/customization"
|
|
});
|
|
},
|
|
get: function(petId) {
|
|
return this.request(petId, "GET");
|
|
},
|
|
post: function(petId) {
|
|
return this.request(petId, "POST");
|
|
}
|
|
},
|
|
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 = {
|
|
_customizationsByPetId: {},
|
|
_customizations: [],
|
|
_itemsById: {},
|
|
_items: [],
|
|
_addCustomization: function(customization) {
|
|
// Set all equipped, interesting items' statuses as success and cross
|
|
// them off the list.
|
|
var itemsById = this._itemsById;
|
|
var equippedByZone = customization.custom_pet.equipped_by_zone;
|
|
var closetItems = customization.closet_items;
|
|
Object.keys(equippedByZone).forEach(function(zoneId) {
|
|
var equippedClosetId = equippedByZone[zoneId].closet_obj_id;
|
|
var equippedObjectId = closetItems[equippedClosetId].obj_info_id;
|
|
if (itemsById.hasOwnProperty(equippedObjectId)) {
|
|
// TODO: i18n title
|
|
customization.statusByItemId[equippedObjectId] = "success";
|
|
itemsById[equippedObjectId].el.find("span[data-body-id=" +
|
|
customization.custom_pet.body_id + "]").addClass("modeled")
|
|
.attr("title", "You just finished modeling this—thanks so much!");
|
|
}
|
|
});
|
|
this._customizationsByPetId[customization.custom_pet.name] = customization;
|
|
this._customizations = this._buildCustomizations();
|
|
this._update();
|
|
},
|
|
_addNewCustomization: function(customization) {
|
|
customization.loadingForItemId = null;
|
|
customization.statusByItemId = {};
|
|
this._addCustomization(customization);
|
|
},
|
|
_buildCustomizations: function() {
|
|
var modelCustomizationsByPetId = this._customizationsByPetId;
|
|
return Object.keys(modelCustomizationsByPetId).map(function(petId) {
|
|
return modelCustomizationsByPetId[petId];
|
|
});
|
|
},
|
|
_createItems: function($) {
|
|
var itemsById = this._itemsById;
|
|
this._items = $('#newest-unmodeled-items li').map(function() {
|
|
var el = $(this);
|
|
var item = {
|
|
el: el,
|
|
id: el.attr('data-item-id'),
|
|
name: el.find('h2').text(),
|
|
missingBodyIdsPresenceMap: el.find('span[data-body-id]').toArray().reduce(function(map, node) {
|
|
map[$(node).attr('data-body-id')] = true;
|
|
return map;
|
|
}, {})
|
|
};
|
|
item.component = React.renderComponent(<ModelForItem item={item} />,
|
|
el.find('.models').get(0));
|
|
itemsById[item.id] = item;
|
|
return item;
|
|
}).toArray();
|
|
},
|
|
_loadPetCustomization: function(neopiaPetId) {
|
|
return Neopia.Customization.get(neopiaPetId)
|
|
.done(this._addNewCustomization.bind(this))
|
|
.fail(function() {
|
|
console.error("couldn't load pet %s", neopiaPetId);
|
|
});
|
|
},
|
|
_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)).fail(function() {
|
|
console.error("couldn't load user %s's customizations", neopiaUserId);
|
|
});
|
|
},
|
|
_loadManyUsersCustomizations: function(neopiaUserIds) {
|
|
return neopiaUserIds.map(this._loadUserCustomizations.bind(this));
|
|
},
|
|
_startLoading: function(neopiaPetId, itemId) {
|
|
var customization = this._customizationsByPetId[neopiaPetId];
|
|
customization.loadingForItemId = itemId;
|
|
customization.statusByItemId[itemId] = "loading";
|
|
this._update();
|
|
},
|
|
_stopLoading: function(neopiaPetId, itemId, status) {
|
|
var customization = this._customizationsByPetId[neopiaPetId];
|
|
customization.loadingForItemId = null;
|
|
customization.statusByItemId[itemId] = status;
|
|
this._update();
|
|
},
|
|
_update: function() {
|
|
var customizations = this._customizations;
|
|
this._items.forEach(function(item) {
|
|
var filteredCustomizations = customizations.filter(function(c) {
|
|
return item.missingBodyIdsPresenceMap[c.custom_pet.body_id];
|
|
});
|
|
item.component.setState({customizations: filteredCustomizations});
|
|
});
|
|
},
|
|
init: function($) {
|
|
Neopia.init();
|
|
this._createItems($);
|
|
// TODO: use user prefs, silly!
|
|
var search = document.location.search;
|
|
var users = search.indexOf('=') >= 0 ? search.split('=')[1].split(',') : '';
|
|
this._loadManyUsersCustomizations(users);
|
|
},
|
|
model: function(neopiaPetId, itemId) {
|
|
var oldCustomization = this._customizationsByPetId[neopiaPetId];
|
|
var itemsById = this._itemsById;
|
|
this._startLoading(neopiaPetId, itemId);
|
|
return Neopia.Customization.post(neopiaPetId)
|
|
.done(function(newCustomization) {
|
|
// Add this field as null for consistency.
|
|
newCustomization.loadingForItemId = null;
|
|
|
|
// Copy previous statuses.
|
|
newCustomization.statusByItemId = oldCustomization.statusByItemId;
|
|
|
|
// Set the attempted item's status as unworn (to possibly be
|
|
// overridden by the upcoming loop in _addCustomization).
|
|
newCustomization.statusByItemId[itemId] = "unworn";
|
|
|
|
// Now, finally, let's overwrite the old customization with the new.
|
|
Modeling._addCustomization(newCustomization);
|
|
})
|
|
.fail(function() {
|
|
Modeling._stopLoading(neopiaPetId, itemId, "error");
|
|
});
|
|
}
|
|
};
|
|
|
|
var ModelForItem = React.createClass({
|
|
getInitialState: function() {
|
|
return {customizations: []};
|
|
},
|
|
render: function() {
|
|
var item = this.props.item;
|
|
function createModelPet(customization) {
|
|
return <ModelPet customization={customization}
|
|
item={item}
|
|
key={customization.custom_pet.name} />;
|
|
}
|
|
var sortedCustomizations = this.state.customizations.sort(function(a, b) {
|
|
var aName = a.custom_pet.name.toLowerCase();
|
|
var bName = b.custom_pet.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.custom_pet.name;
|
|
var status = this.props.customization.statusByItemId[this.props.item.id];
|
|
var loadingForItemId = this.props.customization.loadingForItemId;
|
|
var disabled = (status === "loading"
|
|
|| status === "success");
|
|
if (loadingForItemId !== null && loadingForItemId !== this.props.item.id) {
|
|
disabled = true;
|
|
}
|
|
var itemName = this.props.item.name;
|
|
var imageSrc = "http://pets.neopets.com/cpn/" + petName + "/1/1.png";
|
|
// TODO: i18n
|
|
var title = "Submit " + petName + " as a model, especially if they're " +
|
|
"wearing the " + itemName + "!";
|
|
if (status === "success") {
|
|
var statusMessage = "Thanks! <3";
|
|
} else if (status === "unworn") {
|
|
var statusMessage = "Not wearing this item.";
|
|
} else if (status === "error") {
|
|
var statusMessage = "Couldn't load. Try again?";
|
|
} else {
|
|
var statusMessage ="";
|
|
}
|
|
return <li data-status={status}><button onClick={this.handleClick} title={title} disabled={disabled}>
|
|
<img src={imageSrc} />
|
|
<div>
|
|
<span className="pet-name">{petName}</span>
|
|
<span className="message">{statusMessage}</span>
|
|
</div>
|
|
</button></li>;
|
|
},
|
|
handleClick: function(e) {
|
|
Modeling.model(this.props.customization.custom_pet.name, this.props.item.id);
|
|
}
|
|
});
|
|
|
|
Modeling.init($);
|
|
})(jQuery);
|