Ran into trouble integrating the JS code into a Twine game

Mirge

After some research I was able to figure out the JS code necessary to process a table into a playing field. However, it turned out it won't work in Twine (I'm working with the desktop version, so it might not be true for 2.0) since it asks for a specific table, which was there for the JSFiddle workings but is not processed for a Twine HTML file (instead, there's a plain block of unprocessed text directly from .TWS which interacts with external HTML and/or JS is no way). The table is used for the main variable of the whole code block, so without it, nothing works. Postrendering doesn't seem to cut it as well; even worse, more errors appear, so it could be either the postrender process or my own miniscule knowledge of JS. Here's the code:

postrender.table = function(table) {

var table = document.getElementById('field');
var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
var row = table.rows<i>;

var cellLength = row.cells.length;
for(var y=0; y<cellLength; y+=1){
var cell = row.cells[y];

if(cell.innerHTML > 10 &amp;&amp; cell.innerHTML == player1Position) {
cell.innerHTML = playerSymbol;
cell.setAttribute("class", "red");}
else if(cell.innerHTML > 10 &amp;&amp; cell.innerHTML == obstacle1)
{ cell.innerHTML = "A";
}
else if(cell.innerHTML > 10 &amp;&amp; cell.innerHTML == obstacle2)
{ cell.innerHTML = "B";
}
else if(cell.innerHTML > 10 &amp;&amp; cell.innerHTML == obstacle3)
{ cell.innerHTML = "C";
}
else if(cell.innerHTML > 10) {
cell.innerHTML = "";
}

}
}

}

Take away the first and the last lines and you'll get what I had initially, which only gave "can't read [i]rows [parameter] of null" as an error. All above the "if" cycles is taken directly from another post on JS and is not examined additionally by me, since I have very little knowledge of JS on my own. Is there a way to fix this and/or use postrender properly to manipulate the table?

TheMadExile

Those if statements are doing vile things.

Anyway, try this:


postrender["processField"] = function (content) {
var table = content.querySelector("#field");
if (table === null) {
// no table#field on this passage, so bail out
return;
}

for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
for (var j = 0; j < row.cells.length; j++) {
var cell = row.cells[j];
if (cell.innerHTML > 10 &amp;&amp; cell.innerHTML == player1Position) {
cell.innerHTML = playerSymbol;
cell.setAttribute("class", "red");
} else if (cell.innerHTML > 10 &amp;&amp; cell.innerHTML == obstacle1) {
cell.innerHTML = "A";
} else if (cell.innerHTML > 10 &amp;&amp; cell.innerHTML == obstacle2) {
cell.innerHTML = "B";
} else if (cell.innerHTML > 10 &amp;&amp; cell.innerHTML == obstacle3) {
cell.innerHTML = "C";
} else if (cell.innerHTML > 10) {
cell.innerHTML = "";
}
}
}
};


Mirge

TheMadExile wrote:

Those if statements are doing vile things.

How so?

Thanks for the code! It's working just fine. Time for Miners to emerge further.

I was trying to avoid using jQuery, though: DOM is easier for me to understand and respond in. I found out that I've had to repair the Twine variables used within the code (I thought they're stored in the global JS variables, but there were within an object), too, but it's not related to the code you presented.

TheMadExile

Mirge wrote:

How so?

Repetition of logic and using implicit coercion of the innerHTML property.  I didn't bother suggesting otherwise before because I assumed that was simply trial code, however, since you've asked.

As an example of what I might have suggested before for the contents of the inner for-loop: (I'm assuming that player1Position and the like hold actual numbers)


var cell = row.cells[j],
value = Number(cell.innerHTML); // I'm assuming you don't neeed the safety of .textContent here
if (value > 10) {
if (value === player1Position) {
cell.innerHTML = playerSymbol;
cell.setAttribute("class", "red");
} else if (value === obstacle1) {
cell.innerHTML = "A";
} else if (value === obstacle2) {
cell.innerHTML = "B";
} else if (value === obstacle3) {
cell.innerHTML = "C";
} else {
cell.innerHTML = "";
}
}


Mirge

TheMadExile wrote:

Mirge wrote:

How so?

Repetition of logic and using implicit coercion of the innerHTML property.  I didn't bother suggesting otherwise before because I assumed that was simply trial code, however, since you've asked.

I think I understand now how innerHTML could be bad for you. I used the first thing that came into my head, and it worked, so I let it flow. Surely, the Number(cell.innerHTML) part is important for the safety of the code, so I'm going to implement it.

But what about repetition of logic? I'm confused as to what that even means.

greyelf

Mirge wrote:

But what about repetition of logic? I'm confused as to what that even means.

An example of "repetition of logic" would be how you did the same innerHTML > 10 conditional test up to five times in your original version of the code instead of just once like TheMadExile does in his version.