OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Remove unused JSX pragma in modeling React code

Browse source 
lol again this is hard to test so uhh I hope this didn't break it all!! though tbh I feel like we removed this feature or something anyway? idk it stopped working in some way
This commit is contained in:
Matchu 2023-07-22 13:35:41 -07:00
parent 5d5830c3b1
commit 989d12050b
1 changed files with 218 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

377
app/assets/javascripts/modeling.js.jsx
View file

@ -1,37 +1,37 @@
/** @jsx React.DOM */ var Neopia = (function ($, I18n) {
var Neopia = (function($, I18n) {
// Console-polyfill. MIT license. // Console-polyfill. MIT license.
// https://github.com/paulmillr/console-polyfill // https://github.com/paulmillr/console-polyfill
// Make it safe to do console.log() always. // Make it safe to do console.log() always.
var console = (function (con) { var console = (function (con) {
'use strict'; "use strict";
var prop, method; var prop, method;
var empty = {}; var empty = {};
var dummy = function() {}; var dummy = function () {};
var properties = 'memory'.split(','); var properties = "memory".split(",");
var methods = ('assert,count,debug,dir,dirxml,error,exception,group,' + var methods = (
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' + "assert,count,debug,dir,dirxml,error,exception,group," +
'time,timeEnd,trace,warn').split(','); "groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd," +
while (prop = properties.pop()) con[prop] = con[prop] || empty; "time,timeEnd,trace,warn"
while (method = methods.pop()) con[method] = con[method] || dummy; ).split(",");
while ((prop = properties.pop())) con[prop] = con[prop] || empty;
while ((method = methods.pop())) con[method] = con[method] || dummy;
return con; return con;
})(window.console || {}); })(window.console || {});
var Neopia = { var Neopia = {
User: { User: {
get: function(id) { get: function (id) {
return $.ajax({ return $.ajax({
dataType: "json", dataType: "json",
url: Neopia.API_URL + "/users/" + id, url: Neopia.API_URL + "/users/" + id,
useCSRFProtection: false useCSRFProtection: false,
}).then(function(response) { }).then(function (response) {
return response.users[0]; return response.users[0];
}); });
} },
}, },
Customization: { Customization: {
request: function(petId, type) { request: function (petId, type) {
var data = {}; var data = {};
if (ImpressUser.id) { if (ImpressUser.id) {
data.impress_user = ImpressUser.id; data.impress_user = ImpressUser.id;
@ -41,80 +41,91 @@ var Neopia = (function($, I18n) {
type: type, type: type,
url: Neopia.API_URL + "/pets/" + petId + "/customization", url: Neopia.API_URL + "/pets/" + petId + "/customization",
useCSRFProtection: false, useCSRFProtection: false,
data: data data: data,
}); });
}, },
get: function(petId) { get: function (petId) {
return this.request(petId, "GET"); return this.request(petId, "GET");
}, },
post: function(petId) { post: function (petId) {
return this.request(petId, "POST"); return this.request(petId, "POST");
} },
}, },
Status: { Status: {
get: function() { get: function () {
return $.ajax({ return $.ajax({
dataType: "json", dataType: "json",
url: Neopia.API_URL + "/status", url: Neopia.API_URL + "/status",
useCSRFProtection: false useCSRFProtection: false,
}); });
} },
}, },
init: function() { init: function () {
var hostEl = $('meta[name=neopia-host]'); var hostEl = $("meta[name=neopia-host]");
if (!hostEl.length) { if (!hostEl.length) {
throw "missing neopia-host meta tag"; throw "missing neopia-host meta tag";
} }
var host = hostEl.attr('content'); var host = hostEl.attr("content");
if (!host) { if (!host) {
throw "neopia-host meta tag exists, but is empty"; throw "neopia-host meta tag exists, but is empty";
} }
Neopia.API_URL = "//" + host + "/api/1"; Neopia.API_URL = "//" + host + "/api/1";
} },
}; };
var ImpressUser = (function() { var ImpressUser = (function () {
var userSignedIn = ($('meta[name=user-signed-in]').attr('content') === 'true'); var userSignedIn =
$("meta[name=user-signed-in]").attr("content") === "true";
if (userSignedIn) { if (userSignedIn) {
var currentUserId = $('meta[name=current-user-id]').attr('content'); var currentUserId = $("meta[name=current-user-id]").attr("content");
return { return {
addNeopetsUsername: function(username) { addNeopetsUsername: function (username) {
return $.ajax({ return $.ajax({
url: '/user/' + currentUserId + '/neopets-connections', url: "/user/" + currentUserId + "/neopets-connections",
type: 'POST', type: "POST",
data: {neopets_connection: {neopets_username: username}} data: { neopets_connection: { neopets_username: username } },
}); });
}, },
removeNeopetsUsername: function(username) { removeNeopetsUsername: function (username) {
return $.ajax({ return $.ajax({
url: '/user/' + currentUserId + '/neopets-connections/' + encodeURIComponent(username), url:
type: 'POST', "/user/" +
data: {_method: 'DELETE'} currentUserId +
"/neopets-connections/" +
encodeURIComponent(username),
type: "POST",
data: { _method: "DELETE" },
}); });
}, },
getNeopetsUsernames: function() { getNeopetsUsernames: function () {
return JSON.parse($('#modeling-neopets-users').attr('data-usernames')); return JSON.parse(
$("#modeling-neopets-users").attr("data-usernames")
);
}, },
id: currentUserId id: currentUserId,
}; };
} else { } else {
return { return {
_key: "guestNeopetsUsernames", _key: "guestNeopetsUsernames",
_setNeopetsUsernames: function(usernames) { _setNeopetsUsernames: function (usernames) {
localStorage.setItem(this._key, JSON.stringify(usernames)); localStorage.setItem(this._key, JSON.stringify(usernames));
}, },
addNeopetsUsername: function(username) { addNeopetsUsername: function (username) {
this._setNeopetsUsernames(this.getNeopetsUsernames().concat([username])); this._setNeopetsUsernames(
this.getNeopetsUsernames().concat([username])
);
}, },
removeNeopetsUsername: function(username) { removeNeopetsUsername: function (username) {
this._setNeopetsUsernames(this.getNeopetsUsernames().filter(function(u) { this._setNeopetsUsernames(
return u !== username; this.getNeopetsUsernames().filter(function (u) {
})); return u !== username;
})
);
}, },
getNeopetsUsernames: function() { getNeopetsUsernames: function () {
return JSON.parse(localStorage.getItem(this._key)) || []; return JSON.parse(localStorage.getItem(this._key)) || [];
}, },
id: null id: null,
}; };
} }
})(); })();
@ -124,121 +135,135 @@ var Neopia = (function($, I18n) {
_customizations: [], _customizations: [],
_itemsById: {}, _itemsById: {},
_items: [], _items: [],
_usersComponent: {setState: function() {}}, _usersComponent: { setState: function () {} },
_neopetsUsernamesPresenceMap: {}, _neopetsUsernamesPresenceMap: {},
_addCustomization: function(customization) { _addCustomization: function (customization) {
// Set all equipped, interesting items' statuses as success and cross // Set all equipped, interesting items' statuses as success and cross
// them off the list. // them off the list.
var itemsById = this._itemsById; var itemsById = this._itemsById;
var equippedByZone = customization.custom_pet.equipped_by_zone; var equippedByZone = customization.custom_pet.equipped_by_zone;
var closetItems = customization.closet_items; var closetItems = customization.closet_items;
Object.keys(equippedByZone).forEach(function(zoneId) { Object.keys(equippedByZone).forEach(function (zoneId) {
var equippedClosetId = equippedByZone[zoneId].closet_obj_id; var equippedClosetId = equippedByZone[zoneId].closet_obj_id;
var equippedObjectId = closetItems[equippedClosetId].obj_info_id; var equippedObjectId = closetItems[equippedClosetId].obj_info_id;
if (itemsById.hasOwnProperty(equippedObjectId)) { if (itemsById.hasOwnProperty(equippedObjectId)) {
customization.statusByItemId[equippedObjectId] = "success"; customization.statusByItemId[equippedObjectId] = "success";
itemsById[equippedObjectId].el.find("span[data-body-id=" + itemsById[equippedObjectId].el
customization.custom_pet.body_id + "]").addClass("modeled") .find("span[data-body-id=" + customization.custom_pet.body_id + "]")
.addClass("modeled")
.attr("title", I18n.modeledBodyTitle); .attr("title", I18n.modeledBodyTitle);
} }
}); });
this._customizationsByPetId[customization.custom_pet.name] = customization; this._customizationsByPetId[customization.custom_pet.name] =
customization;
this._customizations = this._buildCustomizations(); this._customizations = this._buildCustomizations();
this._updateCustomizations(); this._updateCustomizations();
}, },
_addNewCustomization: function(customization) { _addNewCustomization: function (customization) {
customization.loadingForItemId = null; customization.loadingForItemId = null;
customization.statusByItemId = {}; customization.statusByItemId = {};
this._addCustomization(customization); this._addCustomization(customization);
}, },
_buildCustomizations: function() { _buildCustomizations: function () {
var modelCustomizationsByPetId = this._customizationsByPetId; var modelCustomizationsByPetId = this._customizationsByPetId;
return Object.keys(modelCustomizationsByPetId).map(function(petId) { return Object.keys(modelCustomizationsByPetId).map(function (petId) {
return modelCustomizationsByPetId[petId]; return modelCustomizationsByPetId[petId];
}); });
}, },
_createItems: function($) { _createItems: function ($) {
var itemsById = this._itemsById; var itemsById = this._itemsById;
this._items = $('#newest-unmodeled-items li').map(function() { this._items = $("#newest-unmodeled-items li")
var el = $(this); .map(function () {
var item = { var el = $(this);
el: el, var item = {
id: el.attr('data-item-id'), el: el,
name: el.find('h2').text(), id: el.attr("data-item-id"),
missingBodyIdsPresenceMap: el.find('span[data-body-id]').toArray().reduce(function(map, node) { name: el.find("h2").text(),
map[$(node).attr('data-body-id')] = true; missingBodyIdsPresenceMap: el
return map; .find("span[data-body-id]")
}, {}) .toArray()
}; .reduce(function (map, node) {
item.component = React.renderComponent(<ModelForItem item={item} />, map[$(node).attr("data-body-id")] = true;
el.find('.models').get(0)); return map;
itemsById[item.id] = item; }, {}),
return item; };
}).toArray(); item.component = React.renderComponent(
<ModelForItem item={item} />,
el.find(".models").get(0)
);
itemsById[item.id] = item;
return item;
})
.toArray();
}, },
_loadPetCustomization: function(neopiaPetId) { _loadPetCustomization: function (neopiaPetId) {
return Neopia.Customization.get(neopiaPetId) return Neopia.Customization.get(neopiaPetId)
.done(this._addNewCustomization.bind(this)) .done(this._addNewCustomization.bind(this))
.fail(function() { .fail(function () {
console.error("couldn't load pet %s", neopiaPetId); console.error("couldn't load pet %s", neopiaPetId);
}); });
}, },
_loadManyPetsCustomizations: function(neopiaPetIds) { _loadManyPetsCustomizations: function (neopiaPetIds) {
return neopiaPetIds.map(this._loadPetCustomization.bind(this)); return neopiaPetIds.map(this._loadPetCustomization.bind(this));
}, },
_loadUserCustomizations: function(neopiaUserId) { _loadUserCustomizations: function (neopiaUserId) {
return Neopia.User.get(neopiaUserId).then(function(neopiaUser) { return Neopia.User.get(neopiaUserId)
return neopiaUser.links.pets; .then(function (neopiaUser) {
}).then(this._loadManyPetsCustomizations.bind(this)).fail(function() { return neopiaUser.links.pets;
console.error("couldn't load user %s's customizations", neopiaUserId); })
}); .then(this._loadManyPetsCustomizations.bind(this))
.fail(function () {
console.error("couldn't load user %s's customizations", neopiaUserId);
});
}, },
_startLoading: function(neopiaPetId, itemId) { _startLoading: function (neopiaPetId, itemId) {
var customization = this._customizationsByPetId[neopiaPetId]; var customization = this._customizationsByPetId[neopiaPetId];
customization.loadingForItemId = itemId; customization.loadingForItemId = itemId;
customization.statusByItemId[itemId] = "loading"; customization.statusByItemId[itemId] = "loading";
this._updateCustomizations(); this._updateCustomizations();
}, },
_stopLoading: function(neopiaPetId, itemId, status) { _stopLoading: function (neopiaPetId, itemId, status) {
var customization = this._customizationsByPetId[neopiaPetId]; var customization = this._customizationsByPetId[neopiaPetId];
customization.loadingForItemId = null; customization.loadingForItemId = null;
customization.statusByItemId[itemId] = status; customization.statusByItemId[itemId] = status;
this._updateCustomizations(); this._updateCustomizations();
}, },
_updateCustomizations: function() { _updateCustomizations: function () {
var neopetsUsernamesPresenceMap = this._neopetsUsernamesPresenceMap; var neopetsUsernamesPresenceMap = this._neopetsUsernamesPresenceMap;
var liveCustomizations = this._customizations.filter(function(c) { var liveCustomizations = this._customizations.filter(function (c) {
return neopetsUsernamesPresenceMap[c.custom_pet.owner]; return neopetsUsernamesPresenceMap[c.custom_pet.owner];
}); });
this._items.forEach(function(item) { this._items.forEach(function (item) {
var filteredCustomizations = liveCustomizations.filter(function(c) { var filteredCustomizations = liveCustomizations.filter(function (c) {
return item.missingBodyIdsPresenceMap[c.custom_pet.body_id]; return item.missingBodyIdsPresenceMap[c.custom_pet.body_id];
}); });
item.component.setState({customizations: filteredCustomizations}); item.component.setState({ customizations: filteredCustomizations });
}); });
}, },
_updateUsernames: function() { _updateUsernames: function () {
var usernames = Object.keys(this._neopetsUsernamesPresenceMap); var usernames = Object.keys(this._neopetsUsernamesPresenceMap);
this._usersComponent.setState({usernames: usernames}); this._usersComponent.setState({ usernames: usernames });
}, },
init: function($) { init: function ($) {
Neopia.init(); Neopia.init();
this._createItems($); this._createItems($);
var usersEl = $('#modeling-neopets-users'); var usersEl = $("#modeling-neopets-users");
if (usersEl.length) { if (usersEl.length) {
this._usersComponent = React.renderComponent(<NeopetsUsernamesForm />, this._usersComponent = React.renderComponent(
usersEl.get(0)); <NeopetsUsernamesForm />,
usersEl.get(0)
);
var usernames = ImpressUser.getNeopetsUsernames(); var usernames = ImpressUser.getNeopetsUsernames();
usernames.forEach(this._registerUsername.bind(this)); usernames.forEach(this._registerUsername.bind(this));
this._updateUsernames(); this._updateUsernames();
} }
}, },
model: function(neopiaPetId, itemId) { model: function (neopiaPetId, itemId) {
var oldCustomization = this._customizationsByPetId[neopiaPetId]; var oldCustomization = this._customizationsByPetId[neopiaPetId];
var itemsById = this._itemsById; var itemsById = this._itemsById;
this._startLoading(neopiaPetId, itemId); this._startLoading(neopiaPetId, itemId);
return Neopia.Customization.post(neopiaPetId) return Neopia.Customization.post(neopiaPetId)
.done(function(newCustomization) { .done(function (newCustomization) {
// Add this field as null for consistency. // Add this field as null for consistency.
newCustomization.loadingForItemId = null; newCustomization.loadingForItemId = null;
@ -252,137 +277,171 @@ var Neopia = (function($, I18n) {
// Now, finally, let's overwrite the old customization with the new. // Now, finally, let's overwrite the old customization with the new.
Modeling._addCustomization(newCustomization); Modeling._addCustomization(newCustomization);
}) })
.fail(function() { .fail(function () {
Modeling._stopLoading(neopiaPetId, itemId, "error"); Modeling._stopLoading(neopiaPetId, itemId, "error");
}); });
}, },
_registerUsername: function(username) { _registerUsername: function (username) {
this._neopetsUsernamesPresenceMap[username] = true; this._neopetsUsernamesPresenceMap[username] = true;
this._loadUserCustomizations(username); this._loadUserCustomizations(username);
this._updateUsernames(); this._updateUsernames();
}, },
addUsername: function(username) { addUsername: function (username) {
if (typeof this._neopetsUsernamesPresenceMap[username] === 'undefined') { if (typeof this._neopetsUsernamesPresenceMap[username] === "undefined") {
ImpressUser.addNeopetsUsername(username); ImpressUser.addNeopetsUsername(username);
this._registerUsername(username); this._registerUsername(username);
} }
}, },
removeUsername: function(username) { removeUsername: function (username) {
if (this._neopetsUsernamesPresenceMap[username]) { if (this._neopetsUsernamesPresenceMap[username]) {
ImpressUser.removeNeopetsUsername(username); ImpressUser.removeNeopetsUsername(username);
delete this._neopetsUsernamesPresenceMap[username]; delete this._neopetsUsernamesPresenceMap[username];
this._updateCustomizations(); this._updateCustomizations();
this._updateUsernames(); this._updateUsernames();
} }
} },
}; };
var ModelForItem = React.createClass({ var ModelForItem = React.createClass({
getInitialState: function() { getInitialState: function () {
return {customizations: []}; return { customizations: [] };
}, },
render: function() { render: function () {
var item = this.props.item; var item = this.props.item;
function createModelPet(customization) { function createModelPet(customization) {
return <ModelPet customization={customization} return (
item={item} <ModelPet
key={customization.custom_pet.name} />; customization={customization}
item={item}
key={customization.custom_pet.name}
/>
);
} }
var sortedCustomizations = this.state.customizations.slice(0).sort(function(a, b) { var sortedCustomizations = this.state.customizations
var aName = a.custom_pet.name.toLowerCase(); .slice(0)
var bName = b.custom_pet.name.toLowerCase(); .sort(function (a, b) {
if (aName < bName) return -1; var aName = a.custom_pet.name.toLowerCase();
if (aName > bName) return 1; var bName = b.custom_pet.name.toLowerCase();
return 0; if (aName < bName) return -1;
}); if (aName > bName) return 1;
return 0;
});
return <ul>{sortedCustomizations.map(createModelPet)}</ul>; return <ul>{sortedCustomizations.map(createModelPet)}</ul>;
} },
}); });
var ModelPet = React.createClass({ var ModelPet = React.createClass({
render: function() { render: function () {
var petName = this.props.customization.custom_pet.name; var petName = this.props.customization.custom_pet.name;
var status = this.props.customization.statusByItemId[this.props.item.id]; var status = this.props.customization.statusByItemId[this.props.item.id];
var loadingForItemId = this.props.customization.loadingForItemId; var loadingForItemId = this.props.customization.loadingForItemId;
var disabled = (status === "loading" var disabled = status === "loading" || status === "success";
|| status === "success"); if (
if (loadingForItemId !== null && loadingForItemId !== this.props.item.id) { loadingForItemId !== null &&
loadingForItemId !== this.props.item.id
) {
disabled = true; disabled = true;
} }
var itemName = this.props.item.name; var itemName = this.props.item.name;
var imageSrc = "http://pets.neopets.com/cpn/" + petName + "/1/1.png?" + var imageSrc =
"http://pets.neopets.com/cpn/" +
petName +
"/1/1.png?" +
this.appearanceQuery(); this.appearanceQuery();
var title = I18n.pet.title var title = I18n.pet.title
.replace(/%{pet}/g, petName) .replace(/%{pet}/g, petName)
.replace(/%{item}/g, itemName); .replace(/%{item}/g, itemName);
var statusMessage = I18n.pet.status[status] || ""; var statusMessage = I18n.pet.status[status] || "";
return <li data-status={status}><button onClick={this.handleClick} title={title} disabled={disabled}> return (
<img src={imageSrc} /> <li data-status={status}>
<div> <button onClick={this.handleClick} title={title} disabled={disabled}>
<span className="pet-name">{petName}</span> <img src={imageSrc} />
<span className="message">{statusMessage}</span> <div>
</div> <span className="pet-name">{petName}</span>
</button></li>; <span className="message">{statusMessage}</span>
</div>
</button>
</li>
);
}, },
handleClick: function(e) { handleClick: function (e) {
Modeling.model(this.props.customization.custom_pet.name, this.props.item.id); Modeling.model(
this.props.customization.custom_pet.name,
this.props.item.id
);
}, },
appearanceQuery: function() { appearanceQuery: function () {
// By appending this string to the image URL, we update it when and only // By appending this string to the image URL, we update it when and only
// when the pet's appearance has changed. // when the pet's appearance has changed.
var assetIdByZone = {}; var assetIdByZone = {};
var biologyByZone = this.props.customization.custom_pet.biology_by_zone; var biologyByZone = this.props.customization.custom_pet.biology_by_zone;
var biologyPartIds = Object.keys(biologyByZone).forEach(function(zone) { var biologyPartIds = Object.keys(biologyByZone).forEach(function (zone) {
assetIdByZone[zone] = biologyByZone[zone].part_id; assetIdByZone[zone] = biologyByZone[zone].part_id;
}); });
var equippedByZone = this.props.customization.custom_pet.equipped_by_zone; var equippedByZone = this.props.customization.custom_pet.equipped_by_zone;
var equippedAssetIds = Object.keys(equippedByZone).forEach(function(zone) { var equippedAssetIds = Object.keys(equippedByZone).forEach(function (
zone
) {
assetIdByZone[zone] = equippedByZone[zone].asset_id; assetIdByZone[zone] = equippedByZone[zone].asset_id;
}); });
// Sort the zones, so the string (which should match exactly when the // Sort the zones, so the string (which should match exactly when the
// appearance matches) isn't dependent on iteration order. // appearance matches) isn't dependent on iteration order.
return Object.keys(assetIdByZone).sort().map(function(zone) { return Object.keys(assetIdByZone)
return "zone[" + zone + "]=" + assetIdByZone[zone]; .sort()
}).join("&"); .map(function (zone) {
} return "zone[" + zone + "]=" + assetIdByZone[zone];
})
.join("&");
},
}); });
var NeopetsUsernamesForm = React.createClass({ var NeopetsUsernamesForm = React.createClass({
getInitialState: function() { getInitialState: function () {
return {usernames: [], newUsername: ""}; return { usernames: [], newUsername: "" };
}, },
render: function() { render: function () {
function buildUsernameItem(username) { function buildUsernameItem(username) {
return <NeopetsUsernameItem username={username} key={username} />; return <NeopetsUsernameItem username={username} key={username} />;
} }
return <div> return (
<ul>{this.state.usernames.slice(0).sort().map(buildUsernameItem)}</ul> <div>
<ul>{this.state.usernames.slice(0).sort().map(buildUsernameItem)}</ul>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<input type="text" placeholder={I18n.neopetsUsernamesForm.label} <input
onChange={this.handleChange} type="text"
value={this.state.newUsername} /> placeholder={I18n.neopetsUsernamesForm.label}
<button type="submit">{I18n.neopetsUsernamesForm.submit}</button></form></div>; onChange={this.handleChange}
value={this.state.newUsername}
/>
<button type="submit">{I18n.neopetsUsernamesForm.submit}</button>
</form>
</div>
);
}, },
handleChange: function(e) { handleChange: function (e) {
this.setState({newUsername: e.target.value}); this.setState({ newUsername: e.target.value });
}, },
handleSubmit: function(e) { handleSubmit: function (e) {
e.preventDefault(); e.preventDefault();
this.state.newUsername = $.trim(this.state.newUsername); this.state.newUsername = $.trim(this.state.newUsername);
if (this.state.newUsername.length) { if (this.state.newUsername.length) {
Modeling.addUsername(this.state.newUsername); Modeling.addUsername(this.state.newUsername);
this.setState({newUsername: ""}); this.setState({ newUsername: "" });
} }
} },
}); });
var NeopetsUsernameItem = React.createClass({ var NeopetsUsernameItem = React.createClass({
render: function() { render: function () {
return <li>{this.props.username} <button onClick={this.handleClick}>×</button></li> return (
<li>
{this.props.username} <button onClick={this.handleClick}>×</button>
</li>
);
}, },
handleClick: function(e) { handleClick: function (e) {
Modeling.removeUsername(this.props.username); Modeling.removeUsername(this.props.username);
} },
}); });
Modeling.init($); Modeling.init($);