2023-07-22 13:35:41 -07:00
|
|
|
|
var Neopia = (function ($, I18n) {
|
2014-01-04 13:06:08 -08:00
|
|
|
|
// Console-polyfill. MIT license.
|
|
|
|
|
// https://github.com/paulmillr/console-polyfill
|
|
|
|
|
// Make it safe to do console.log() always.
|
|
|
|
|
var console = (function (con) {
|
2023-07-22 13:35:41 -07:00
|
|
|
|
"use strict";
|
2014-01-04 13:06:08 -08:00
|
|
|
|
var prop, method;
|
|
|
|
|
var empty = {};
|
2023-07-22 13:35:41 -07:00
|
|
|
|
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;
|
2014-01-04 13:06:08 -08:00
|
|
|
|
return con;
|
|
|
|
|
})(window.console || {});
|
|
|
|
|
|
2015-07-27 10:33:15 -07:00
|
|
|
|
var Neopia = {
|
|
|
|
|
User: {
|
2023-07-22 13:35:41 -07:00
|
|
|
|
get: function (id) {
|
2015-07-27 10:33:15 -07:00
|
|
|
|
return $.ajax({
|
|
|
|
|
dataType: "json",
|
|
|
|
|
url: Neopia.API_URL + "/users/" + id,
|
2023-07-22 13:35:41 -07:00
|
|
|
|
useCSRFProtection: false,
|
|
|
|
|
}).then(function (response) {
|
2015-07-27 10:33:15 -07:00
|
|
|
|
return response.users[0];
|
|
|
|
|
});
|
2023-07-22 13:35:41 -07:00
|
|
|
|
},
|
2015-07-27 10:33:15 -07:00
|
|
|
|
},
|
|
|
|
|
Customization: {
|
2023-07-22 13:35:41 -07:00
|
|
|
|
request: function (petId, type) {
|
2015-07-27 10:33:15 -07:00
|
|
|
|
var data = {};
|
|
|
|
|
if (ImpressUser.id) {
|
|
|
|
|
data.impress_user = ImpressUser.id;
|
|
|
|
|
}
|
|
|
|
|
return $.ajax({
|
|
|
|
|
dataType: "json",
|
|
|
|
|
type: type,
|
|
|
|
|
url: Neopia.API_URL + "/pets/" + petId + "/customization",
|
|
|
|
|
useCSRFProtection: false,
|
2023-07-22 13:35:41 -07:00
|
|
|
|
data: data,
|
2015-07-27 10:33:15 -07:00
|
|
|
|
});
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
get: function (petId) {
|
2015-07-27 10:33:15 -07:00
|
|
|
|
return this.request(petId, "GET");
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
post: function (petId) {
|
2015-07-27 10:33:15 -07:00
|
|
|
|
return this.request(petId, "POST");
|
2023-07-22 13:35:41 -07:00
|
|
|
|
},
|
2015-07-27 10:33:15 -07:00
|
|
|
|
},
|
|
|
|
|
Status: {
|
2023-07-22 13:35:41 -07:00
|
|
|
|
get: function () {
|
2015-07-27 10:33:15 -07:00
|
|
|
|
return $.ajax({
|
|
|
|
|
dataType: "json",
|
|
|
|
|
url: Neopia.API_URL + "/status",
|
2023-07-22 13:35:41 -07:00
|
|
|
|
useCSRFProtection: false,
|
2015-07-27 10:33:15 -07:00
|
|
|
|
});
|
2023-07-22 13:35:41 -07:00
|
|
|
|
},
|
2015-07-27 10:33:15 -07:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
init: function () {
|
|
|
|
|
var hostEl = $("meta[name=neopia-host]");
|
2015-07-27 10:33:15 -07:00
|
|
|
|
if (!hostEl.length) {
|
|
|
|
|
throw "missing neopia-host meta tag";
|
|
|
|
|
}
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var host = hostEl.attr("content");
|
2015-07-27 10:33:15 -07:00
|
|
|
|
if (!host) {
|
|
|
|
|
throw "neopia-host meta tag exists, but is empty";
|
|
|
|
|
}
|
2015-08-05 15:57:08 -07:00
|
|
|
|
Neopia.API_URL = "//" + host + "/api/1";
|
2023-07-22 13:35:41 -07:00
|
|
|
|
},
|
2015-07-27 10:33:15 -07:00
|
|
|
|
};
|
|
|
|
|
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var ImpressUser = (function () {
|
|
|
|
|
var userSignedIn =
|
|
|
|
|
$("meta[name=user-signed-in]").attr("content") === "true";
|
2014-01-17 09:12:56 -08:00
|
|
|
|
if (userSignedIn) {
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var currentUserId = $("meta[name=current-user-id]").attr("content");
|
2014-01-17 09:12:56 -08:00
|
|
|
|
return {
|
2023-07-22 13:35:41 -07:00
|
|
|
|
addNeopetsUsername: function (username) {
|
2014-01-18 19:54:11 -08:00
|
|
|
|
return $.ajax({
|
2023-07-22 13:35:41 -07:00
|
|
|
|
url: "/user/" + currentUserId + "/neopets-connections",
|
|
|
|
|
type: "POST",
|
|
|
|
|
data: { neopets_connection: { neopets_username: username } },
|
2014-01-18 19:54:11 -08:00
|
|
|
|
});
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
removeNeopetsUsername: function (username) {
|
2014-01-18 19:54:11 -08:00
|
|
|
|
return $.ajax({
|
2023-07-22 13:35:41 -07:00
|
|
|
|
url:
|
|
|
|
|
"/user/" +
|
|
|
|
|
currentUserId +
|
|
|
|
|
"/neopets-connections/" +
|
|
|
|
|
encodeURIComponent(username),
|
|
|
|
|
type: "POST",
|
|
|
|
|
data: { _method: "DELETE" },
|
2014-01-18 19:54:11 -08:00
|
|
|
|
});
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
getNeopetsUsernames: function () {
|
|
|
|
|
return JSON.parse(
|
|
|
|
|
$("#modeling-neopets-users").attr("data-usernames")
|
|
|
|
|
);
|
2014-01-20 14:08:57 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
id: currentUserId,
|
2014-01-17 09:12:56 -08:00
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
return {
|
|
|
|
|
_key: "guestNeopetsUsernames",
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_setNeopetsUsernames: function (usernames) {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
localStorage.setItem(this._key, JSON.stringify(usernames));
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
addNeopetsUsername: function (username) {
|
|
|
|
|
this._setNeopetsUsernames(
|
|
|
|
|
this.getNeopetsUsernames().concat([username])
|
|
|
|
|
);
|
2014-01-17 09:12:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
removeNeopetsUsername: function (username) {
|
|
|
|
|
this._setNeopetsUsernames(
|
|
|
|
|
this.getNeopetsUsernames().filter(function (u) {
|
|
|
|
|
return u !== username;
|
|
|
|
|
})
|
|
|
|
|
);
|
2014-01-17 09:12:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
getNeopetsUsernames: function () {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
return JSON.parse(localStorage.getItem(this._key)) || [];
|
2014-01-20 14:08:57 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
id: null,
|
2014-01-17 09:12:56 -08:00
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
})();
|
|
|
|
|
|
2014-01-03 13:11:02 -08:00
|
|
|
|
var Modeling = {
|
|
|
|
|
_customizationsByPetId: {},
|
2014-01-04 12:45:27 -08:00
|
|
|
|
_customizations: [],
|
2014-01-17 08:15:56 -08:00
|
|
|
|
_itemsById: {},
|
2014-01-04 12:45:27 -08:00
|
|
|
|
_items: [],
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_usersComponent: { setState: function () {} },
|
2014-01-17 09:12:56 -08:00
|
|
|
|
_neopetsUsernamesPresenceMap: {},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_addCustomization: function (customization) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
// 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;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
Object.keys(equippedByZone).forEach(function (zoneId) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
var equippedClosetId = equippedByZone[zoneId].closet_obj_id;
|
|
|
|
|
var equippedObjectId = closetItems[equippedClosetId].obj_info_id;
|
|
|
|
|
if (itemsById.hasOwnProperty(equippedObjectId)) {
|
|
|
|
|
customization.statusByItemId[equippedObjectId] = "success";
|
2023-07-22 13:35:41 -07:00
|
|
|
|
itemsById[equippedObjectId].el
|
|
|
|
|
.find("span[data-body-id=" + customization.custom_pet.body_id + "]")
|
|
|
|
|
.addClass("modeled")
|
2014-01-20 11:56:19 -08:00
|
|
|
|
.attr("title", I18n.modeledBodyTitle);
|
2014-01-17 08:15:56 -08:00
|
|
|
|
}
|
|
|
|
|
});
|
2023-07-22 13:35:41 -07:00
|
|
|
|
this._customizationsByPetId[customization.custom_pet.name] =
|
|
|
|
|
customization;
|
2014-01-04 12:45:27 -08:00
|
|
|
|
this._customizations = this._buildCustomizations();
|
2014-01-17 09:12:56 -08:00
|
|
|
|
this._updateCustomizations();
|
2014-01-03 13:11:02 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_addNewCustomization: function (customization) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
customization.loadingForItemId = null;
|
|
|
|
|
customization.statusByItemId = {};
|
|
|
|
|
this._addCustomization(customization);
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_buildCustomizations: function () {
|
2014-01-03 13:11:02 -08:00
|
|
|
|
var modelCustomizationsByPetId = this._customizationsByPetId;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
return Object.keys(modelCustomizationsByPetId).map(function (petId) {
|
2014-01-03 13:11:02 -08:00
|
|
|
|
return modelCustomizationsByPetId[petId];
|
|
|
|
|
});
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_createItems: function ($) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
var itemsById = this._itemsById;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
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();
|
2014-01-04 12:45:27 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_loadPetCustomization: function (neopiaPetId) {
|
2014-01-03 13:11:02 -08:00
|
|
|
|
return Neopia.Customization.get(neopiaPetId)
|
2014-01-17 08:15:56 -08:00
|
|
|
|
.done(this._addNewCustomization.bind(this))
|
2023-07-22 13:35:41 -07:00
|
|
|
|
.fail(function () {
|
2014-01-09 13:50:03 -08:00
|
|
|
|
console.error("couldn't load pet %s", neopiaPetId);
|
|
|
|
|
});
|
2014-01-03 13:11:02 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_loadManyPetsCustomizations: function (neopiaPetIds) {
|
2014-01-03 13:11:02 -08:00
|
|
|
|
return neopiaPetIds.map(this._loadPetCustomization.bind(this));
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_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);
|
|
|
|
|
});
|
2014-01-03 13:11:02 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_startLoading: function (neopiaPetId, itemId) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
var customization = this._customizationsByPetId[neopiaPetId];
|
|
|
|
|
customization.loadingForItemId = itemId;
|
|
|
|
|
customization.statusByItemId[itemId] = "loading";
|
2014-01-17 09:12:56 -08:00
|
|
|
|
this._updateCustomizations();
|
2014-01-17 08:15:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_stopLoading: function (neopiaPetId, itemId, status) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
var customization = this._customizationsByPetId[neopiaPetId];
|
|
|
|
|
customization.loadingForItemId = null;
|
|
|
|
|
customization.statusByItemId[itemId] = status;
|
2014-01-17 09:12:56 -08:00
|
|
|
|
this._updateCustomizations();
|
2014-01-17 08:15:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_updateCustomizations: function () {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
var neopetsUsernamesPresenceMap = this._neopetsUsernamesPresenceMap;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var liveCustomizations = this._customizations.filter(function (c) {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
return neopetsUsernamesPresenceMap[c.custom_pet.owner];
|
|
|
|
|
});
|
2023-07-22 13:35:41 -07:00
|
|
|
|
this._items.forEach(function (item) {
|
|
|
|
|
var filteredCustomizations = liveCustomizations.filter(function (c) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
return item.missingBodyIdsPresenceMap[c.custom_pet.body_id];
|
2014-01-04 12:45:27 -08:00
|
|
|
|
});
|
2023-07-22 13:35:41 -07:00
|
|
|
|
item.component.setState({ customizations: filteredCustomizations });
|
2014-01-03 13:11:02 -08:00
|
|
|
|
});
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_updateUsernames: function () {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
var usernames = Object.keys(this._neopetsUsernamesPresenceMap);
|
2023-07-22 13:35:41 -07:00
|
|
|
|
this._usersComponent.setState({ usernames: usernames });
|
2014-01-17 09:12:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
init: function ($) {
|
2014-01-03 13:11:02 -08:00
|
|
|
|
Neopia.init();
|
2014-01-04 12:45:27 -08:00
|
|
|
|
this._createItems($);
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var usersEl = $("#modeling-neopets-users");
|
2015-08-05 17:11:08 -07:00
|
|
|
|
if (usersEl.length) {
|
2023-07-22 13:35:41 -07:00
|
|
|
|
this._usersComponent = React.renderComponent(
|
|
|
|
|
<NeopetsUsernamesForm />,
|
|
|
|
|
usersEl.get(0)
|
|
|
|
|
);
|
2015-08-05 17:11:08 -07:00
|
|
|
|
var usernames = ImpressUser.getNeopetsUsernames();
|
|
|
|
|
usernames.forEach(this._registerUsername.bind(this));
|
|
|
|
|
this._updateUsernames();
|
|
|
|
|
}
|
2014-01-17 08:15:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
model: function (neopiaPetId, itemId) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
var oldCustomization = this._customizationsByPetId[neopiaPetId];
|
|
|
|
|
var itemsById = this._itemsById;
|
|
|
|
|
this._startLoading(neopiaPetId, itemId);
|
|
|
|
|
return Neopia.Customization.post(neopiaPetId)
|
2023-07-22 13:35:41 -07:00
|
|
|
|
.done(function (newCustomization) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
// 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);
|
|
|
|
|
})
|
2023-07-22 13:35:41 -07:00
|
|
|
|
.fail(function () {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
Modeling._stopLoading(neopiaPetId, itemId, "error");
|
|
|
|
|
});
|
2014-01-17 09:12:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
_registerUsername: function (username) {
|
2014-01-18 19:54:11 -08:00
|
|
|
|
this._neopetsUsernamesPresenceMap[username] = true;
|
|
|
|
|
this._loadUserCustomizations(username);
|
|
|
|
|
this._updateUsernames();
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
addUsername: function (username) {
|
|
|
|
|
if (typeof this._neopetsUsernamesPresenceMap[username] === "undefined") {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
ImpressUser.addNeopetsUsername(username);
|
2014-01-18 19:54:11 -08:00
|
|
|
|
this._registerUsername(username);
|
2014-01-17 09:12:56 -08:00
|
|
|
|
}
|
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
removeUsername: function (username) {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
if (this._neopetsUsernamesPresenceMap[username]) {
|
|
|
|
|
ImpressUser.removeNeopetsUsername(username);
|
2014-01-18 19:54:11 -08:00
|
|
|
|
delete this._neopetsUsernamesPresenceMap[username];
|
2014-01-17 09:12:56 -08:00
|
|
|
|
this._updateCustomizations();
|
|
|
|
|
this._updateUsernames();
|
|
|
|
|
}
|
2023-07-22 13:35:41 -07:00
|
|
|
|
},
|
2014-01-03 13:11:02 -08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var ModelForItem = React.createClass({
|
2023-07-22 13:35:41 -07:00
|
|
|
|
getInitialState: function () {
|
|
|
|
|
return { customizations: [] };
|
2014-01-03 13:11:02 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
render: function () {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
var item = this.props.item;
|
2014-01-03 13:11:02 -08:00
|
|
|
|
function createModelPet(customization) {
|
2023-07-22 13:35:41 -07:00
|
|
|
|
return (
|
|
|
|
|
<ModelPet
|
|
|
|
|
customization={customization}
|
|
|
|
|
item={item}
|
|
|
|
|
key={customization.custom_pet.name}
|
|
|
|
|
/>
|
|
|
|
|
);
|
2014-01-03 13:11:02 -08:00
|
|
|
|
}
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var sortedCustomizations = this.state.customizations
|
|
|
|
|
.slice(0)
|
|
|
|
|
.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;
|
|
|
|
|
});
|
2014-01-03 13:11:02 -08:00
|
|
|
|
return <ul>{sortedCustomizations.map(createModelPet)}</ul>;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
},
|
2014-01-03 13:11:02 -08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var ModelPet = React.createClass({
|
2023-07-22 13:35:41 -07:00
|
|
|
|
render: function () {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
var petName = this.props.customization.custom_pet.name;
|
|
|
|
|
var status = this.props.customization.statusByItemId[this.props.item.id];
|
|
|
|
|
var loadingForItemId = this.props.customization.loadingForItemId;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var disabled = status === "loading" || status === "success";
|
|
|
|
|
if (
|
|
|
|
|
loadingForItemId !== null &&
|
|
|
|
|
loadingForItemId !== this.props.item.id
|
|
|
|
|
) {
|
2014-01-17 08:15:56 -08:00
|
|
|
|
disabled = true;
|
|
|
|
|
}
|
|
|
|
|
var itemName = this.props.item.name;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var imageSrc =
|
|
|
|
|
"http://pets.neopets.com/cpn/" +
|
|
|
|
|
petName +
|
|
|
|
|
"/1/1.png?" +
|
2014-01-20 13:51:51 -08:00
|
|
|
|
this.appearanceQuery();
|
2014-01-20 11:56:19 -08:00
|
|
|
|
var title = I18n.pet.title
|
|
|
|
|
.replace(/%{pet}/g, petName)
|
|
|
|
|
.replace(/%{item}/g, itemName);
|
|
|
|
|
var statusMessage = I18n.pet.status[status] || "";
|
2023-07-22 13:35:41 -07:00
|
|
|
|
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>
|
|
|
|
|
);
|
2014-01-17 08:15:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
handleClick: function (e) {
|
|
|
|
|
Modeling.model(
|
|
|
|
|
this.props.customization.custom_pet.name,
|
|
|
|
|
this.props.item.id
|
|
|
|
|
);
|
2014-01-20 13:51:51 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
appearanceQuery: function () {
|
2014-01-20 13:51:51 -08:00
|
|
|
|
// 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;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var biologyPartIds = Object.keys(biologyByZone).forEach(function (zone) {
|
2014-01-20 13:51:51 -08:00
|
|
|
|
assetIdByZone[zone] = biologyByZone[zone].part_id;
|
|
|
|
|
});
|
|
|
|
|
var equippedByZone = this.props.customization.custom_pet.equipped_by_zone;
|
2023-07-22 13:35:41 -07:00
|
|
|
|
var equippedAssetIds = Object.keys(equippedByZone).forEach(function (
|
|
|
|
|
zone
|
|
|
|
|
) {
|
2014-01-20 13:51:51 -08:00
|
|
|
|
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.
|
2023-07-22 13:35:41 -07:00
|
|
|
|
return Object.keys(assetIdByZone)
|
|
|
|
|
.sort()
|
|
|
|
|
.map(function (zone) {
|
|
|
|
|
return "zone[" + zone + "]=" + assetIdByZone[zone];
|
|
|
|
|
})
|
|
|
|
|
.join("&");
|
|
|
|
|
},
|
2014-01-03 13:11:02 -08:00
|
|
|
|
});
|
|
|
|
|
|
2014-01-17 09:12:56 -08:00
|
|
|
|
var NeopetsUsernamesForm = React.createClass({
|
2023-07-22 13:35:41 -07:00
|
|
|
|
getInitialState: function () {
|
|
|
|
|
return { usernames: [], newUsername: "" };
|
2014-01-17 09:12:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
render: function () {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
function buildUsernameItem(username) {
|
|
|
|
|
return <NeopetsUsernameItem username={username} key={username} />;
|
|
|
|
|
}
|
2023-07-22 13:35:41 -07:00
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<ul>{this.state.usernames.slice(0).sort().map(buildUsernameItem)}</ul>
|
2014-01-17 09:12:56 -08:00
|
|
|
|
<form onSubmit={this.handleSubmit}>
|
2023-07-22 13:35:41 -07:00
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder={I18n.neopetsUsernamesForm.label}
|
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
value={this.state.newUsername}
|
|
|
|
|
/>
|
|
|
|
|
<button type="submit">{I18n.neopetsUsernamesForm.submit}</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2014-01-17 09:12:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
handleChange: function (e) {
|
|
|
|
|
this.setState({ newUsername: e.target.value });
|
2014-01-17 09:12:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
handleSubmit: function (e) {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
this.state.newUsername = $.trim(this.state.newUsername);
|
|
|
|
|
if (this.state.newUsername.length) {
|
|
|
|
|
Modeling.addUsername(this.state.newUsername);
|
2023-07-22 13:35:41 -07:00
|
|
|
|
this.setState({ newUsername: "" });
|
2014-01-17 09:12:56 -08:00
|
|
|
|
}
|
2023-07-22 13:35:41 -07:00
|
|
|
|
},
|
2014-01-17 09:12:56 -08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var NeopetsUsernameItem = React.createClass({
|
2023-07-22 13:35:41 -07:00
|
|
|
|
render: function () {
|
|
|
|
|
return (
|
|
|
|
|
<li>
|
|
|
|
|
{this.props.username} <button onClick={this.handleClick}>×</button>
|
|
|
|
|
</li>
|
|
|
|
|
);
|
2014-01-17 09:12:56 -08:00
|
|
|
|
},
|
2023-07-22 13:35:41 -07:00
|
|
|
|
handleClick: function (e) {
|
2014-01-17 09:12:56 -08:00
|
|
|
|
Modeling.removeUsername(this.props.username);
|
2023-07-22 13:35:41 -07:00
|
|
|
|
},
|
2014-01-17 09:12:56 -08:00
|
|
|
|
});
|
|
|
|
|
|
2014-01-04 12:45:27 -08:00
|
|
|
|
Modeling.init($);
|
2015-07-27 10:33:15 -07:00
|
|
|
|
|
|
|
|
|
return Neopia;
|
2014-01-20 11:56:19 -08:00
|
|
|
|
})(jQuery, ModelingI18n);
|