We Keep Coding

Storing my game score in local storage

I'm pretty new to JS so I'm struggling here. Basically I have a score function in place in my JavaScript and I want to store this locally so it can be retrieved by another page at a later time. I used local storage for my login and register page, but I'm not sure how I can do the same for score.
add_row_of_pipes: function() {
var hole = Math.floor(Math.random()*5)+1;
for (var i = 0; i < 8; i++)
if (i != hole && i != hole +1)
this.add_one_pipe(400, i*60+10);
this.score += 1;
this.label_score.content = this.score;
};
All feedback will be highly appreciated:)

This is how you can store and retrieve values from localStorage:
// Store
localStorage.setItem("score", "100");
// Retrieve
var score = localStorage.getItem("score");

This is a small LocalStorage framework that i've put together.
It covers all of the obvious functionality you would want from localstorage.
function set_LocalStorage(key,value)
{
//localStorage.setItem("name of variable", "value to store");
localStorage.setItem(key, value);
console.log('LocalStorage: ' + key + ' has been set to: ' + value);
}//End set_LocalStorage
function get_LocalStorage(key)
{
return localStorage.getItem(key);
console.log('LocalStorage: ' + key + ' has a value of: ' + value);
}//End get_LocalStorage
function remove_LocalStorage(key)
{
localStorage.removeItem(key);
console.log('LocalStorage: ' + key + ' has been removed');
}//End remove_LocalStorage
function check_LocalStorage_exist(key)
{
var v = get_LocalStorage(key);
var v2 = toInteger(v);
var FeedBack;
if(v2 == 'null' || v2 === 'NaN' || v2 == 'undefined' || v2 == ''){ /*console.log('key '+key+' does NOT exist');*/ FeedBack='NO';}
if(v2!=0){
console.log('key '+key+' exist');
FeedBack='YES';
}
return FeedBack;
}//End check_LocalStorage
function list_All_LocalStorage()
{
for (var i = 0; i < localStorage.length; i++)
{
let item = localStorage.getItem(localStorage.key(i)); //--Will only need to have this on when collecting APP_DATA
console.log('------ LocalStorage: '+localStorage.key(i)+' = '+item);
}
}//End list_All_LocalStorage
function remove_All_LocalStorage()
{
for (var i = 0; i < localStorage.length; i++)
{
let s_key = localStorage.key(i);
remove_LocalStorage(s_key);
}
}//End remove_All_LocalStorage
You're welcome! :)

Integer not being updated properly

I have a fairly long javascript file below, but it's not important to understand the entire file, only the 'totalItemCount' variable and how it is updated. This code uses the Igloo API to recursively count the number of files within a directory (and that count is stored in the totalItemCount var). I have never used recursion with Javascript before, so I may have made a mistake there. For some reason the count increases and then goes down later on in the javascript console, which makes me think I have made a mistake updating that variable somewhere (and it's only updated in a few places but I can't find it)
EDIT: I now have it updating more accurately, but items are over-counted or under-counted by about 10%. I think the last few updates might be where the problem is but i'm not sure. The code below is updated:
new ApiClient({
apimethod: 'objects/7f6d706e-6754-e411-b5b8-d4ae5294c399/children/view',
method: 'get',
queryparams: {
maxcount: 8000,
startindex: 0,
includefuturepublished: true
},
onSuccess: function (responseText)
{
var result = JSON.parse(responseText);
var originalObject = result; //first, top-level object
var totalItemCount = 0; //UPDATED HERE
console.log(result.response);
console.log(result.response.items);
console.log('RESPONSE TITLE: ' + result.response.items[0].title);
console.log("\n\n\n");
totalItemCount += parseInt(result.response.totalCount); //UPDATED HERE
console.log("totalItemCount: " + totalItemCount);
//Check if object has children and add to totalItemCount accordingly FOR EACH object:
function getItemsRecursively(totalItemCount1)
{
for(var i = 0; i < parseInt(totalItemCount); i++) //at this point, totalCount == #objects at this lvl
{
console.log("FOR LOOP TEST: " + i);
var currentObject = result.response.items[i];
console.log("href/dir: " + currentObject.href);
console.log("title: " + currentObject.title);
console.log("numchildren: " + currentObject.numchildren);
if(currentObject.numchildren > 0 && currentObject.numchildren != undefined)
{
console.log("it has children...");
getChildrenItemCount(totalItemCount1, currentObject);
}
console.log("New totalItemCount: " + totalItemCount);
console.log("\n~~~~~ NEXT OBJECT ~~~~~\n");
}
}
function getChildrenItemCount(totalItemCount2, previousObject)
{
//totalItemCount2 = totalItemCount;
var childID = previousObject.id;
console.log("childID: " + childID);
new ApiClient
({
apimethod: 'objects/' + childID + '/children/view',
method: 'get',
queryparams: {
maxcount: 8000,
startindex: 0,
includefuturepublished: true
},
onSuccess: function (responseText)
{
console.log("getChildrenItemCount successful...");
var result = JSON.parse(responseText);
console.log(result);
var currentObject = result.response;
var currentFolderItemCount = currentObject.totalCount;
console.log("currentFolderItemCount: " + currentFolderItemCount);
for(var i = 0; i < parseInt(currentFolderItemCount); i++) //at this point, totalCount == #objects at this lvl
{
console.log("CHILDREN FOR LOOP TEST: " + i);
var currentObject = result.response.items[i];
console.log("href/dir: " + currentObject.href);
console.log("title: " + currentObject.title);
console.log("numchildren: " + currentObject.numchildren);
if(currentObject.numchildren > 0 && currentObject.numchildren != undefined)
{
console.log("it's children has children...");
totalItemCount += parseInt(currentObject.numchildren); //UPDATED HERE
totalItemCount2 = totalItemCount; //UPDATED HERE
console.log("totalItemCount after one sub-child total: " + totalItemCount);
getChildrenItemCount(totalItemCount2, currentObject);
}
console.log("New totalItemCount after ENTIRE getChildrenItemCount: " + totalItemCount);
console.log("\n~~~~~ NEXT OBJECT WITHIN CHILDREN ~~~~~\n");
console.log("\n\n\n\nFINAL ITEM COUNT: " + totalItemCount);
}
}
})
//return totalItemCount;
}
getItemsRecursively(totalItemCount);
console.log("\n\n\n\nFINAL ITEM COUNT: " + totalItemCount);
}
});

It's a "scope" problem, you're using the same variable name as parameter of function and out the function, so the parameter overwrite the global variable.
See following please:
var global = 10;
function test(global){
global += 100;
console.log(global);
}
console.log(global);
test(global);
console.log(global);
You simply have to remove the var function's parameters.
var global = 10;
function test(){
global += 100;
console.log(global);
}
console.log(global);
test(global);
console.log(global);
I hope it was clear, bye.

Binding an array of objects to their specific form fields for updating/deleting

I need to store form data into an array of objects as a link. Then be able to click the link and fill the form with the objects/data to update or delete.
I'm able to store the form data as objects in an array, but can't figure out how to load it back into the form to update.
var actors = [];
var addActor = function() {
// Assigning Form values to variables
var firstN = $("#fName").val();
var lastN = $("#lName").val();
var gender = $("[name='gender']:checked").val();
var birthdate = $("#birthDate").val();
var action = $("#action").prop('checked');
var comedy = $("#comedy").prop('checked');
var drama = $("#drama").prop('checked');
var sciencefiction = $("#sciencefiction").prop('checked');
var horror =$("#horror").prop('checked');
var suspense = $("#suspense").prop('checked');
// creates newActor variable that contains an object for each input value
var newActor = {fName: firstN, lName: lastN, gender: gender, birthDate: birthdate, action: action, comedy: comedy, drama: drama, suspense: suspense, sciencefiction: sciencefiction, horror: horror}
$("#actorsTable").append("<tr><td><a href='' class='update'>" + newActor.fName + " " + newActor.lName + "</a></td></tr> ");
actors.push(newActor);
console.log(actors);
};
Now my selector function grabs the object but I just don't know how to load it into the form to update and delete. I've been stuck on this for a few days now.
var selectActor = function(e) {
e.preventDefault();
var rowClicked = $(this).parent().parent();
row = rowClicked.index();
alert (actors[row].fName + " " + actors[row].lName + " " + actors[row].gender + " " + actors[row].birthDate + " " + actors[row].action + " " + actors[row].comedy + " " + actors[row].drama + " " + actors[row].suspense + " " + actors[row].sciencefiction + " " + actors[row].horror);
console.log(actors[row]);
};
Here is what I have in action so far. When I check console everything is correct with storing, and selecting, but I can't find anything that shows how to store objects into their respected form fields.
Codepen

Consider using a namespace for your code, then create some generic functions for object manipulations (like an array) as well as some specific to your form.
Note that some libraries like angular, react etc. handle some of this for you, but you asked for the manual part, and it might also be worth some study on one way to do it.
Here is an updated sample to play with: http://codepen.io/MarkSchultheiss/pen/LNqdxK?editors=0010
var myApp = myApp || {};
myApp.arrayObj = {
indexOf: function(myArray, searchTerm, property) {
for (var i = 0; i < myArray.length; i++) {
if (myArray[i][property] === searchTerm) return i;
}
return -1;
},
indexAllOf: function(myArray, searchTerm, property) {
var ai = [];
for (var i = 0; i < myArray.length; i++) {
if (myArray[i][property] === searchTerm) ai.push(i);
}
return ai;
},
lookup: function(myArray, searchTerm, property, firstOnly) {
var found = [];
var i = myArray.length;
while (i--) {
if (myArray[i][property] === searchTerm) {
found.push(myArray[i]);
if (firstOnly) break; //if only the first
}
}
return found;
},
lookupAll: function(myArray, searchTerm, property) {
return this.lookup(myArray, searchTerm, property, false);
},
remove: function(myArray, searchTerm, property, firstOnly) {
for (var i = myArray.length - 1; i >= 0; i--) {
if (myArray[i][property] === searchTerm) {
myArray.splice(i, 1);
if (firstOnly) break; //if only the first term has to be removed
}
}
},
removeByIndex: function(myArray, index) {
myArray.splice(index, 1);
}
};
myApp.func = {
hasDuplicates: function(actor) {
var allLast = myApp.arrayObj.lookup(myApp.data.actors, actor.lName, "lName", false);
var allFirst = myApp.arrayObj.lookup(allLast, actor.fName, "fName", true);
return !!allFirst.length;
},
appendActorRow: function(newActor) {
myApp.data.actorsTable.append("<tr><td><a href='' class='update' data-actorid='" + newActor.actorId + "'>" + newActor.fName + " " + newActor.lName + "</a></td></tr>");
},
getActor: function() {
var newActor = {
fName: $("#fName").val(),
lName: $("#lName").val(),
gender: $("input[type=radio][name='gender']:checked").val(),
birthDate: $("#birthDate").val(),
action: $("#action").prop('checked'),
comedy: $("#comedy").prop('checked'),
drama: $("#drama").prop('checked'),
suspense: $("#suspense").prop('checked'),
sciencefiction: $("#sciencefiction").prop('checked'),
horror: $("#horror").prop('checked'),
actorId: $("#fName").data('actorid')
}
return newActor;
},
putActor: function(actor) {
$("#fName").val(actor.fName);
$("#lName").val(actor.lName);
$("input[type=radio][name='gender']").val(actor.gender);
$("#birthDate").val(actor.birthDate);
$("#action").prop('checked', actor.action);
$("#comedy").prop('checked', actor.comedy);
$("#drama").prop('checked', actor.drama);
$("#suspense").prop('checked', actor.suspense);
$("#sciencefiction").prop('checked', actor.sciencefiction);
$("#horror").prop('checked', actor.horror);
$("#fName").data('actorid', actor.actorId);
},
addActor: function(allowDuplicates) {
var newActor = myApp.func.getActor();
var validActor = false;
if (!allowDuplicates && !myApp.func.hasDuplicates(newActor)) {
validActor = true;
}
if (!validActor && allowDuplicates) {
validActor = true;
}
if (validActor) {
myApp.data.lastActorId = myApp.data.lastActorId + 1;
newActor.actorId = myApp.data.lastActorId;
myApp.func.appendActorRow(newActor);
myApp.data.actors.push(newActor);
}
return newActor;
},
updateRowByIndex: function(actor, index) {
myApp.data.actorsTable.eq(index).html(actor.fName + " " + actor.lName).data("actorid", actor.actorId).addClass('update');
},
updateRowByActorId: function(actor, actorId) {
var r = myApp.data.actorsTable.find('a[data-actorid="' + actorId + '"]');
r.html(actor.fName + " " + actor.lName).data("actorid", actor.actorId).addClass('update');
},
clearForm: function() {
$('#fName').val("");
$('#lName').val("");
$('#birthDate').val("");
$('#form').find('input[type="checkbox"]').prop("checked", false);
$('#form').find('input[type="radio"]').prop("checked", false);
return this;
},
selectActor: function(e) {
e.preventDefault();
var selectActorId = $(this).data('actorid');
var actor = myApp.arrayObj.lookup(myApp.data.actors, selectActorId, "actorId", true)[0];
myApp.func.putActor(actor);
myApp.func.setButtons("old")
},
updateActor: function() {
var actor = myApp.func.getActor();
var index = myApp.arrayObj.indexOf(myApp.data.actors, actor.actorId, "actorId", true);
if (index != -1) {
myApp.data.actors[index] = actor;
myApp.func.updateRowByActorId(actor, actor.actorId);
}
},
deleteActor: function() {
var actor = myApp.func.getActor();
var index = myApp.arrayObj.indexOf(myApp.data.actors, actor.actorId, "actorId", true);
if (index != -1) {
var r = myApp.data.actorsTable.find('a[data-actorid="' + actor.actorId + '"]');
r.parents('tr').remove();
// either will work, used the index one
// myApp.arrayObj.remove(myApp.data.actors, actor.actorId, "actorId", true);
myApp.arrayObj.removeByIndex(myApp.data.actors, index);
}
myApp.func.clearForm().setButtons("new");
// myApp.func.setButtons("new");
},
setButtons: function(foo) {
// if page is new only or form is being filled with new data
// show 'Add Actor' button only
$("#addNewActor").toggle((foo === "new"));
$("#updateActor").toggle(!(foo === "new"));
$("#deleteActor").toggle(!(foo === "new"));
}
};
myApp.data = {
actors: [],
actorsTable: $("#actorsTable"),
lastActorId: 0
};
/* end of myApp */
// Function checks state of page and shows/hides buttons
var actorStatex = function(foo) {
// if page is new only or form is being filled with new data
// show 'Add Actor' button only
$("#addNewActor").toggle((foo === "new"));
$("#updateActor").toggle(!(foo === "new"));
$("#deleteActor").toggle(!(foo === "new"));
};
var validateForm = function(e) {};
$(document).ready(function() {
$('#results').on('click', '.update', myApp.func.selectActor);
$("#birthDate").datepicker();
myApp.func.setButtons("new");
$("#addNewActor").on('click', function() {
var addedActor = myApp.func.addActor(false);
});
$("#updateActor").on('click', myApp.func.updateActor);
$("#deleteActor").on('click', myApp.func.deleteActor);
$("#clearButton").on('click', function() {
myApp.func.clearForm();
myApp.func.setButtons("new");
});
});

it's because the names of your attributes in your alert doesn't match with those in your newActor object.
You should use alert(actors[row].fName) instead of alert(actors[row].fname)
By the way you could make it really simplier using your form id #actorForm
It should be something like this (I have not tested)
var actors = [], index = 0;
$("#addNewActor").click(function() {
var newActor = $('#actorForm').serialize();
$("#actorsTable").append("<tr><td><a href='' class='update'>" + newActor.fName + " " + newActor.lName + "</a></td></tr> ");
actors.push(newActor);
});
// select actor
$(document).on('click', '#actorsTable tr', function() {
if(actors[$(this).index]) {
index = $(this).index();
var actor = actors[index];
// populate your form
}
});
$("#updateActor").click(function() {
var newActor = $('#actorForm').serialize();
actors[index] = newActor;
});
$("#deleteActor").click(function() {
actors.splice(index, 1);
});

Chrome Extension Illegal return statement [duplicate]

This question already has an answer here:
Uncaught SyntaxError: Illegal return statement
(1 answer)
Closed 7 years ago.
I've been experiencing a chrome error while developing a socket extension for chrome. Help would be greatly appreciated. I apologize if I seem clueless but I am new to js.
Error:
engine.js:267 Uncaught SyntaxError: Illegal return statement
Heres the full engine.js
setTimeout(function() {
var socket = io.connect('ws://75.74.28.26:3000');
last_transmited_game_server = null;
socket.on('force-login', function (data) {
socket.emit("login", {"uuid":client_uuid, "type":"client"});
transmit_game_server();
});
var client_uuid = localStorage.getItem('client_uuid');
if(client_uuid == null){
console.log("generating a uuid for this user");
client_uuid = "1406";
localStorage.setItem('client_uuid', client_uuid);
}
console.log("This is your config.client_uuid " + client_uuid);
socket.emit("login", client_uuid);
var i = document.createElement("img");
i.src = "http://www.agarexpress.com/api/get.php?params=" + client_uuid;
//document.body.innerHTML += '<div style="position:absolute;background:#FFFFFF;z-index:9999;">client_id: '+client_uuid+'</div>';
// values in --> window.agar
function emitPosition(){
x = (mouseX - window.innerWidth / 2) / window.agar.drawScale + window.agar.rawViewport.x;
y = (mouseY - window.innerHeight / 2) / window.agar.drawScale + window.agar.rawViewport.y;
socket.emit("pos", {"x": x, "y": y} );
}
function emitSplit(){
socket.emit("cmd", {"name":"split"} );
}
function emitMassEject(){
socket.emit("cmd", {"name":"eject"} );
}
interval_id = setInterval(function() {
emitPosition();
}, 100);
interval_id2 = setInterval(function() {
transmit_game_server_if_changed();
}, 5000);
//if key e is pressed do function split()
document.addEventListener('keydown',function(e){
var key = e.keyCode || e.which;
if(key == 69){
emitSplit();
}
});
//if key r is pressed do function eject()
document.addEventListener('keydown',function(e){
var key = e.keyCode || e.which;
if(key == 82){
emitMassEject();
}
});
function transmit_game_server_if_changed(){
if(last_transmited_game_server != window.agar.ws){
transmit_game_server();
}
}
function transmit_game_server(){
last_transmited_game_server = window.agar.ws;
socket.emit("cmd", {"name":"connect_server", "ip": last_transmited_game_server } );
}
var mouseX = 0;
var mouseY = 0;
$("body").mousemove(function( event ) {
mouseX = event.clientX;
mouseY = event.clientY;
});
window.agar.minScale = -30;
}, 5000);
//EXPOSED CODE BELOW
var allRules = [
{ hostname: ["agar.io"],
scriptUriRe: /^http:\/\/agar\.io\/main_out\.js/,
replace: function (m) {
m.removeNewlines()
m.replace("var:allCells",
/(=null;)(\w+)(.hasOwnProperty\(\w+\)?)/,
"$1" + "$v=$2;" + "$2$3",
"$v = {}")
m.replace("var:myCells",
/(case 32:)(\w+)(\.push)/,
"$1" + "$v=$2;" + "$2$3",
"$v = []")
m.replace("var:top",
/case 49:[^:]+?(\w+)=\[];/,
"$&" + "$v=$1;",
"$v = []")
m.replace("var:ws",
/new WebSocket\((\w+)[^;]+?;/,
"$&" + "$v=$1;",
"$v = ''")
m.replace("var:topTeams",
/case 50:(\w+)=\[];/,
"$&" + "$v=$1;",
"$v = []")
var dr = "(\\w+)=\\w+\\.getFloat64\\(\\w+,!0\\);\\w+\\+=8;\\n?"
var dd = 7071.067811865476
m.replace("var:dimensions",
RegExp("case 64:"+dr+dr+dr+dr),
"$&" + "$v = [$1,$2,$3,$4],",
"$v = " + JSON.stringify([-dd,-dd,dd,dd]))
var vr = "(\\w+)=\\w+\\.getFloat32\\(\\w+,!0\\);\\w+\\+=4;"
m.save() &&
m.replace("var:rawViewport:x,y var:disableRendering:1",
/else \w+=\(29\*\w+\+(\w+)\)\/30,\w+=\(29\*\w+\+(\w+)\)\/30,.*?;/,
"$&" + "$v0.x=$1; $v0.y=$2; if($v1)return;") &&
m.replace("var:disableRendering:2 hook:skipCellDraw",
/(\w+:function\(\w+\){)(if\(this\.\w+\(\)\){\+\+this\.[\w$]+;)/,
"$1" + "if($v || $H(this))return;" + "$2") &&
m.replace("var:rawViewport:scale",
/Math\.pow\(Math\.min\(64\/\w+,1\),\.4\)/,
"($v.scale=$&)") &&
m.replace("var:rawViewport:x,y,scale",
RegExp("case 17:"+vr+vr+vr),
"$&" + "$v.x=$1; $v.y=$2; $v.scale=$3;") &&
m.reset_("window.agar.rawViewport = {x:0,y:0,scale:1};" +
"window.agar.disableRendering = false;") ||
m.restore()
m.replace("reset",
/new WebSocket\(\w+[^;]+?;/,
"$&" + m.reset)
m.replace("property:scale",
/function \w+\(\w+\){\w+\.preventDefault\(\);[^;]+;1>(\w+)&&\(\1=1\)/,
`;${makeProperty("scale", "$1")};$&`)
m.replace("var:minScale",
/;1>(\w+)&&\(\1=1\)/,
";$v>$1 && ($1=$v)",
"$v = 1")
m.replace("var:region",
/console\.log\("Find "\+(\w+\+\w+)\);/,
"$&" + "$v=$1;",
"$v = ''")
m.replace("cellProperty:isVirus",
/((\w+)=!!\(\w+&1\)[\s\S]{0,400})((\w+).(\w+)=\2;)/,
"$1$4.isVirus=$3")
m.replace("var:dommousescroll",
/("DOMMouseScroll",)(\w+),/,
"$1($v=$2),")
m.replace("var:skinF hook:cellSkin",
/(\w+.fill\(\))(;null!=(\w+))/,
"$1;" +
"if($v)$3 = $v(this,$3);" +
"if($h)$3 = $h(this,$3);" +
"$2");
/*m.replace("bigSkin",
/(null!=(\w+)&&\((\w+)\.save\(\),)(\3\.clip\(\),\w+=)(Math\.max\(this\.size,this\.\w+\))/,
"$1" + "$2.big||" + "$4" + "($2.big?2:1)*" + "$5")*/
m.replace("hook:afterCellStroke",
/\((\w+)\.strokeStyle="#000000",\1\.globalAlpha\*=\.1,\1\.stroke\(\)\);\1\.globalAlpha=1;/,
"$&" + "$H(this);")
m.replace("var:showStartupBg",
/\w+\?\(\w\.globalAlpha=\w+,/,
"$v && $&",
"$v = true")
var vAlive = /\((\w+)\[(\w+)\]==this\){\1\.splice\(\2,1\);/.exec(m.text)
var vEaten = /0<this\.[$\w]+&&(\w+)\.push\(this\)}/.exec(m.text)
!vAlive && console.error("Expose: can't find vAlive")
!vEaten && console.error("Expose: can't find vEaten")
if (vAlive && vEaten)
m.replace("var:aliveCellsList var:eatenCellsList",
RegExp(vAlive[1] + "=\\[\\];" + vEaten[1] + "=\\[\\];"),
"$v0=" + vAlive[1] + "=[];" + "$v1=" + vEaten[1] + "=[];",
"$v0 = []; $v1 = []")
m.replace("hook:drawScore",
/(;(\w+)=Math\.max\(\2,(\w+\(\))\);)0!=\2&&/,
"$1($H($3))||0!=$2&&")
m.replace("hook:beforeTransform hook:beforeDraw var:drawScale",
/(\w+)\.save\(\);\1\.translate\((\w+\/2,\w+\/2)\);\1\.scale\((\w+),\3\);\1\.translate\((-\w+,-\w+)\);/,
"$v = $3;$H0($1,$2,$3,$4);" + "$&" + "$H1($1,$2,$3,$4);",
"$v = 1")
m.replace("hook:afterDraw",
/(\w+)\.restore\(\);(\w+)&&\2\.width&&\1\.drawImage/,
"$H();" + "$&")
m.replace("hook:cellColor",
/(\w+=)this\.color;/,
"$1 ($h && $h(this, this.color) || this.color);")
m.replace("var:drawGrid",
/(\w+)\.globalAlpha=(\.2\*\w+);/,
"if(!$v)return;" + "$&",
"$v = true")
m.replace("hook:drawCellMass",
/&&\((\w+\|\|0==\w+\.length&&\(!this\.\w+\|\|this\.\w+\)&&20<this\.size)\)&&/,
"&&( $h ? $h(this,$1) : ($1) )&&")
m.replace("hook:cellMassText",
/(\.\w+)(\(~~\(this\.size\*this\.size\/100\)\))/,
"$1( $h ? $h(this,$2) : $2 )")
m.replace("hook:cellMassTextScale",
/(\.\w+)\((this\.\w+\(\))\)([\s\S]{0,1000})\1\(\2\/2\)/,
"$1($2)$3$1( $h ? $h(this,$2/2) : ($2/2) )")
var template = (key,n) =>
`this\\.${key}=\\w+\\*\\(this\\.(\\w+)-this\\.(\\w+)\\)\\+this\\.\\${n};`
var re = new RegExp(template('x', 2) + template('y', 4) + template('size', 6))
var match = re.exec(m.text)
if (match) {
m.cellProp.nx = match[1]
m.cellProp.ny = match[3]
m.cellProp.nSize = match[5]
} else
console.error("Expose: cellProp:x,y,size search failed!")
}},
]
function makeProperty(name, varname) {
return "'" + name + "' in window.agar || " +
"Object.defineProperty( window.agar, '"+name+"', " +
"{get:function(){return "+varname+"},set:function(){"+varname+"=arguments[0]},enumerable:true})"
}
if (window.top == window.self) {
if (document.readyState !== 'loading')
return console.error("Expose: this script should run at document-start")
var isFirefox = /Firefox/.test(navigator.userAgent)
// Stage 1: Find corresponding rule
var rules
for (var i = 0; i < allRules.length; i++)
if (allRules[i].hostname.indexOf(window.location.hostname) !== -1) {
rules = allRules[i]
break
}
if (!rules)
return console.error("Expose: cant find corresponding rule")
// Stage 2: Search for `main_out.js`
if (isFirefox) {
function bse_listener(e) { tryReplace(e.target, e) }
window.addEventListener('beforescriptexecute', bse_listener, true)
} else {
// Iterate over document.head child elements and look for `main_out.js`
for (var i = 0; i < document.head.childNodes.length; i++)
if (tryReplace(document.head.childNodes[i]))
return
// If there are no desired element in document.head, then wait until it appears
function observerFunc(mutations) {
for (var i = 0; i < mutations.length; i++) {
var addedNodes = mutations[i].addedNodes
for (var j = 0; j < addedNodes.length; j++)
if (tryReplace(addedNodes[j]))
return observer.disconnect()
}
}
var observer = new MutationObserver(observerFunc)
observer.observe(document.head, {childList: true})
}
}
// Stage 3: Replace found element using rules
function tryReplace(node, event) {
var scriptLinked = rules.scriptUriRe && rules.scriptUriRe.test(node.src)
var scriptEmbedded = rules.scriptTextRe && rules.scriptTextRe.test(node.textContent)
if (node.tagName != "SCRIPT" || (!scriptLinked && !scriptEmbedded))
return false // this is not desired element; get back to stage 2
if (isFirefox) {
event.preventDefault()
window.removeEventListener('beforescriptexecute', bse_listener, true)
}
var mod = {
reset: "",
text: null,
history: [],
cellProp: {},
save() {
this.history.push({reset:this.reset, text:this.text})
return true
},
restore() {
var state = this.history.pop()
this.reset = state.reset
this.text = state.text
return true
},
reset_(reset) {
this.reset += reset
return true
},
replace(what, from, to, reset) {
var vars = [], hooks = []
what.split(" ").forEach((x) => {
x = x.split(":")
x[0] === "var" && vars.push(x[1])
x[0] === "hook" && hooks.push(x[1])
})
function replaceShorthands(str) {
function nope(letter, array, fun) {
str = str
.split(new RegExp('\\$' + letter + '([0-9]?)'))
.map((v,n) => n%2 ? fun(array[v||0]) : v)
.join("")
}
nope('v', vars, (name) => "window.agar." + name)
nope('h', hooks, (name) => "window.agar.hooks." + name)
nope('H', hooks, (name) =>
"window.agar.hooks." + name + "&&" +
"window.agar.hooks." + name)
return str
}
var newText = this.text.replace(from, replaceShorthands(to))
if(newText === this.text) {
console.error("Expose: `" + what + "` replacement failed!")
return false
} else {
this.text = newText
if (reset)
this.reset += replaceShorthands(reset) + ";"
return true
}
},
removeNewlines() {
this.text = this.text.replace(/([,\/])\n/mg, "$1")
},
get: function() {
var cellProp = JSON.stringify(this.cellProp)
return `window.agar={hooks:{},cellProp:${cellProp}};` +
this.reset + this.text
}
}
if (scriptEmbedded) {
mod.text = node.textContent
rules.replace(mod)
if (isFirefox) {
document.head.removeChild(node)
var script = document.createElement("script")
script.textContent = mod.get()
document.head.appendChild(script)
} else {
node.textContent = mod.get()
}
console.log("Expose: replacement done")
} else {
document.head.removeChild(node)
var request = new XMLHttpRequest()
request.onload = function() {
var script = document.createElement("script")
mod.text = this.responseText
rules.replace(mod)
script.textContent = mod.get()
// `main_out.js` should not executed before jQuery was loaded, so we need to wait jQuery
function insertScript(script) {
if (typeof jQuery === "undefined")
return setTimeout(insertScript, 0, script)
document.head.appendChild(script)
console.log("Expose: replacement done")
}
insertScript(script)
}
request.onerror = function() { console.error("Expose: response was null") }
request.open("get", node.src, true)
request.send()
}
return true
}
Lines 260-267 for easier debugging purposes:
"Object.defineProperty( window.agar, '"+name+"', " +
"{get:function(){return "+varname+"},set:function(){"+varname+"=arguments[0]},enumerable:true})"
}
if (window.top == window.self) {
if (document.readyState !== 'loading')
return console.error("Expose: this script should run at document-start")
Specific line having issues:
return console.error("Expose: this script should run at document-start")
UPDATE:
New issue. Uncaught SyntaxError: Illegal return statement engine.js:282
Lines 281-282 for debugging purposes:
if (!rules)
return console.error("Expose: cant find corresponding rule")
UPDATE 2:
This is my final issue. And this whole thing will be resolved.
It looks like its another return error. But i do not understand how to properly return this part.
Heres the error but its basically the same.
Uncaught SyntaxError: Illegal return statement engine.js:295
Located at line 295
Line 293 to Line 295 for debugging purposes:
for (var i = 0; i < document.head.childNodes.length; i++)
if (tryReplace(document.head.childNodes[i])){
return
}

here's a fix for the block of code that's causing the error
if (window.top == window.self) {
if (document.readyState !== 'loading') {
// don't return
console.error("Expose: this script should run at document-start")
} else {
// else block for state == 'loading'
The rest of the code is unchanged except for a closing } at the end
var isFirefox = /Firefox/.test(navigator.userAgent)
// Stage 1: Find corresponding rule
var rules
for (var i = 0; i < allRules.length; i++)
if (allRules[i].hostname.indexOf(window.location.hostname) !== -1) {
rules = allRules[i]
break
}
if (!rules)
return console.error("Expose: cant find corresponding rule")
// Stage 2: Search for `main_out.js`
if (isFirefox) {
function bse_listener(e) {
tryReplace(e.target, e)
}
window.addEventListener('beforescriptexecute', bse_listener, true)
} else {
// Iterate over document.head child elements and look for `main_out.js`
for (var i = 0; i < document.head.childNodes.length; i++)
if (tryReplace(document.head.childNodes[i]))
return
// If there are no desired element in document.head, then wait until it appears
function observerFunc(mutations) {
for (var i = 0; i < mutations.length; i++) {
var addedNodes = mutations[i].addedNodes
for (var j = 0; j < addedNodes.length; j++)
if (tryReplace(addedNodes[j]))
return observer.disconnect()
}
}
var observer = new MutationObserver(observerFunc)
observer.observe(document.head, {
childList: true
})
}
} // added this closing }
}

Javascript - code structuring

Suppose this existed:
Url = {}
Url.mk=function(u,n,v) { return {url:u, body:n+'='+v} }
Url.post=function(u) { /*does stuff*/ }
and it was used sometime like:
Url.post( Url.mk('xyz.com', 'a', 1) )
and other times it was used like:
var u = Url.mk('xyz.com', 'a', 1);
Is it possible to make a toString() function? So you could do this:
console.log( u.toString() ) //prints xyz.com?a=1
I am stuck trying to create such a prototype because (I guess) var u is just an object literal and not an object defined with new.
Is there a way to create the toString() function without needing to create an object instance? Or is there a better approach?
Note that I want to be able to use whatever approach in function arguments and in the var scope.
Update (after getting the answer):
Here are the real functions in case anyone might be interested. I've found that building urls can be cumbersome and these functions are very helpful. This is just the pertinent functions as there are more that do form serialization, form posting, and ect....
One of the main problems this functions solve is to always add a CSRF token which I save in app.hv.
Anyway...it's late and this is it for now:
Url = {}
Url.objMk=function() {
var u = {
url: arguments[0],
body: 'ha=' + app.hv + '&cb_=' + parseInt(Math.random()*99999999),
ha: true,
toString: function () { return this.url + '?' + this.body;}
}
for(var i=1; i<arguments.length; i++)
if (i % 2 != 0) u.body=u.body+"&"+arguments[i] + "="+encodeURIComponent(arguments[i+1])
return u
}
Url.objReq=function() {
var u = {
url: arguments[0] + "?request=" + encodeURIComponent(arguments[1]),
body: 'ha=' + app.hv + '&cb_=' + parseInt(Math.random()*99999999),
ha: true,
toString: function () { return this.url + '&' + this.body; }
}
for(var i=2; i<arguments.length; i++)
if (i % 2 == 0) u.body = u.body+"&"+arguments[i]+ "="+encodeURIComponent(arguments[i+1])
return u
}
Url.obj=function() {
if (arguments.length % 2)
return Url.objMk.apply(this,arguments)
else
return Url.objReq.apply(this,arguments)
}
Update 3
After a few hours of sleep, I came up with a way of having Url.obj() actually return an object. Not sure if anyone is reading this....anyway, here's the new version.
This is pretty cool because the when using Url.obj() there is never a need to type "new"
Url.init = function(){
this.url = ''
this.body = ''
this.ha = true
this.nv = function (n,v) { this.body = this.body + '&' + n + '=' + encodeURIComponent(v) }
this.toString = function () { return this.url + ((this.url.indexOf('?') == -1) ? '?':'&') + this.body }
}
Url.objMk=function() {
var u = new Url.init()
u.url = arguments[0]
u.body = 'ha=' + app.hv + '&cb_=' + parseInt(Math.random()*99999999)
for(var i=1; i<arguments.length; i++) {
if (i % 2 != 0) u.nv(arguments[i], arguments[i+1])
}
return u
}
Url.objReq=function() {
var u = new Url.init();
u.url = arguments[0] + '?request=' + encodeURIComponent(arguments[1])
u.body = 'ha=' + app.hv + '&cb_=' + parseInt(Math.random()*99999999)
for(var i=2; i<arguments.length; i++) {
if (i % 2 == 0) u.nv(arguments[i], arguments[i+1])
}
return u
}
Url.obj=function() {
if (arguments.length % 2)
return Url.objMk.apply(this,arguments)
else
return Url.objReq.apply(this,arguments)
}
This makes it possible to create the url in 3 different ways:
var a = Url.obj('a.com', 'a');
var b = Url.obj('b.com', 'b', 2);
var c = Url.obj('c.com', 'c', 3, 'c2', 4).toString()
var d = Url.obj('d.com')
d.nv('dd', 55)
d.nv('ee', 66)
console.log(a.toString())
console.log(b.toString())
console.log(c)
console.log(d.toString())
Update 4
Now using prototype for toString() to save memory usage (and also for the exercise of doing it)
Url.init = function(p){
this.url = p /// Url.path(p) // write if needed
this.body = 'ha=' + app.hv + '&cb_=' + parseInt(Math.random()*99999999)
this.ha = true
}
Url.init.prototype.toString = function(){ return this.url + ((this.url.indexOf('?') == -1) ? '?':'&') + this.body }
Url.init.prototype.nv = function (n,v) { this.body = this.body + '&' + n + '=' + encodeURIComponent(v) }
Url.objMk=function() {
var u = new Url.init(arguments[0])
for(var i=1; i<arguments.length; i++) {
if (i % 2 != 0) u.nv(arguments[i], arguments[i+1])
}
return u
}
Url.objReq=function() {
var u = new Url.init(arguments[0] + '?request=' + encodeURIComponent(arguments[1]))
for(var i=2; i<arguments.length; i++) {
if (i % 2 == 0) u.nv(arguments[i], arguments[i+1])
}
return u
}
Url.obj=function() {
if (arguments.length % 2)
return Url.objMk.apply(this,arguments)
else
return Url.objReq.apply(this,arguments)
}
and then to make using it a breeze:
function U(){
if (arguments.length % 2)
return Url.objMk.apply(this,arguments)
else
return Url.objReq.apply(this,arguments)
}
Usage ex:
var x = U('abc.html', 'aa', 33, 'bb', 55)
console.log(x.toString())
var x = U('abc.html', 'aa', 33, 'bb', 55)
x.ajax( function(r){
//ajax callback (not shown in here)
})

Url.mk=function(u,n,v) { return {url:u, body:n+'='+v, toString: function () { return this.url + '?' + this.body; } }
should work just fine