Board Game Arena

var jstpl_movement='<div class="movement movement${type}${dirx}${diry}" id="loc_${x_y}"></div>';

var jstpl_piece='<div class="piece" id="piece_${kind}_${owner}" style="left: ${LEFT}px; top: ${TOP}px; background-image: url('${pref}${tile}_${color}_${side}.jpg') ;"></div>';

Not sure how to post code, but these are my two jstpl templates in my game.tpl file. I'm trying to load the game pieces like I load the movement icons. If I take out the url('...') section in the background-image: of the 2nd template and replace it with "none" everything works fine. If I put anything in there with the url parameter (even a hard coded image that DOES exist), I get a JS error that jstpl_movement can't be found (which is NOT the one with the url parameter). I'm not actually using jstpl_piece anywhere yet as I can't get past this problem.

var jstpl_movement='<div class="movement movement${type}${dirx}${diry}" id="loc_${x_y}"></div>';

var jstpl_piece='<div class="piece" id="piece_${kind}_${owner}" style="left: ${LEFT}px; top: ${TOP}px; background-image: none;"></div>';

The above works without a problem (but leaves me with the issue of still needing to dynamically load the piece image). Putting ANYTHING in the background-image section other than none results in the error.

I'm not sure how using the browser debugger would be helpful since it's not actually a bug in the JS code. Any ideas on how to troubleshoot this beyond what I've already done? Am I doing something that I just simply shouldn't be using a JS Template for?

thx

Just escape the ' with a backslash. Any IDE which colors the code should make the issue obvious in principle.

I overcame this problem hardcoding css classes with colors corresponding to a number eg.
.piece_color_1 {
background-image: url(piece_yellow.jpg)
}
etc.

You can just mark in a comment which number corresponds to which color and then load it in JS's format_block with 'color: number' variable. For me it works pretty fine.

Then, when a yellow player needs to have yellow pieces, you can just assign proper color with if statement, eg. if (player_color == 'ff0000') {<code>}.

Cheers.

Tisaac wrote: ↑22 February 2021, 22:40 Just escape the ' with a backslash. Any IDE which colors the code should make the issue obvious in principle.

That's what I get for coding tired, though I'm not sure I would have caught that wide awake; with all of the jumping between languages. Thank you.

What IDE would you recommend (preferably free). I'm just using the notepad-like editor that came with winscp.

Hornir91 wrote: ↑23 February 2021, 01:00 I overcame this problem hardcoding css classes with colors corresponding to a number eg.
.piece_color_1 {
background-image: url(piece_yellow.jpg)
}
etc.

You can just mark in a comment which number corresponds to which color and then load it in JS's format_block with 'color: number' variable. For me it works pretty fine.

Then, when a yellow player needs to have yellow pieces, you can just assign proper color with if statement, eg. if (player_color == 'ff0000') {<code>}.

Cheers.

Yeah, the problem is there are a ton of pieces per side and they're not identical from side to side, so needing design all of that in CSS just to basically do the same thing in JS / php wasn't something I was looking at doing. With it in the JS template, I'm cutting out the middleman since I can feed it directly from the gamedata[].

Oh, ok .

From IDE's which you can use I can suggest VS Code. I've been coding in it since the beginning as BGA dev and it's quite handy. If the vanilla version is not enough, you can expand it with multiple extensions.

Thanks for this. VSCode is like night and day with the plain ol' notepad I was using. Even just having multiple files open in tabs instead of trying to find the right window is super helpful.