Adding text strings to a piece on a gameboard

[catwillow]

I'd like to be able to add text to a piece on a gameboard - what's the best way to do that?

(Specifically, each piece will have a number from 0 to 999 on it.)

[RicardoRix]

Is it a simple answer like use positioning (top and left)? are these pieces already just on a large board image?
https://developer.mozilla.org/en-US/doc ... S/position

Otherwise...
Have you gone through the tutorials, and perhaps looked at some example code? BGA's standard approach is to use dojo.place.

Use JS, you would likely just already make a placeholder for it with the game board piece div. Do you add the piece already with dojo.place() ?
otherwise dojo.place - add a div to the div of the game board piece. innerText is 123.

There are also native, non-dojo ways to do it. insertElement, createElement, appendChild, ... other things like this that will add dynamically created html to the DOM.

[LeSteffen]

If the pieces are inside of stock components, you can use the stock's "onItemCreate" event to add anything to the item:
https://en.doc.boardgamearena.com/Stock ... Appearance

[catwillow]

Is it a simple answer like use positioning (top and left)? are these pieces already just on a large board image?
https://developer.mozilla.org/en-US/doc ... S/position

Otherwise...
Have you gone through the tutorials, and perhaps looked at some example code? BGA's standard approach is to use dojo.place.

Use JS, you would likely just already make a placeholder for it with the game board piece div. Do you add the piece already with dojo.place() ?
otherwise dojo.place - add a div to the div of the game board piece. innerText is 123.

There are also native, non-dojo ways to do it. insertElement, createElement, appendChild, ... other things like this that will add dynamically created html to the DOM.

Thank you! Yes, placed on a large board image with dojo.place. What do you mean by innerText is 123? I tried adding that into the format block along with color, but it was not a recognized property. How do I set innerText?

I also tried

this.innerText = "123";

which didn't give me any error, but it didn't display the text on top of the token jpg image.

[LeSteffen]

Let's define a simple div with the id "myImage" showing the token image as background

Code: Select all

<div id="myImage"></div>

You should be able to do

Code: Select all

$("myImage").innerText="123";

[catwillow]

Let's define a simple div with the id "myImage" showing the token image as background

Code: Select all

<div id="myImage"></div>

You should be able to do

Code: Select all

$("myImage").innerText="123";

So I'm working with the Reversi tutorial, here: https://en.doc.boardgamearena.com/Tutorial_reversi

That tutorial adds the following utility method:

Code: Select all

 addTokenOnBoard: function( x, y, player )
            {
                dojo.place( this.format_block( 'jstpl_token', {
                    x_y: x+'_'+y,
                    color: this.gamedatas.players[ player ].color
                } ) , 'tokens' );
                this.placeOnObject( 'token_'+x+'_'+y, 'overall_player_board_'+player );
                this.slideToObject( 'token_'+x+'_'+y, 'square_'+x+'_'+y ).play();
            },

When I try adding "this.innerText = "123"; I don't get any text added to the token.

Code: Select all

 addTokenOnBoard: function( x, y, player )
            {
                dojo.place( this.format_block( 'jstpl_token', {
                    x_y: x+'_'+y,
                    color: this.gamedatas.players[ player ].color
                } ) , 'tokens' );
                this.innerText = "123";
                this.placeOnObject( 'token_'+x+'_'+y, 'overall_player_board_'+player );
                this.slideToObject( 'token_'+x+'_'+y, 'square_'+x+'_'+y ).play();
                this.innerText = "123";
            },

how do I get text on it?

[RicardoRix]

nobody said this.innerText = 123; would work. You've come up with that somewhere...

Code: Select all

$("myImage").innerText="123";

By doing the above, the ${} notation allows direct access to that DOM element with the id specified.

Alternatively, with the dojo.place/format_block you can also directly just insert the innerText, that looks like this instead.

Code: Select all

<div id="myImage">123</div>

Either way will end up being like this if you inspect the element in the browser.

From your example, you would put an additional 'text' placeholder variable inside the jstpl_token, (the similar way 'color' is done in your example).

Code: Select all

jstpl_text_token = '<div id="myImage">${text}</div>'

where you'd pass 'text' as a parameter with 123. text: 123
You'd obviously want to combine the color, text, x_y all at the same time, but I don't actually know exactly what jstpl_token looks like from your example.

Code: Select all

   dojo.place( this.format_block( 'jstpl_token', {
                    x_y: x+'_'+y,
                    color: this.gamedatas.players[ player ].color,
                    text: 123,
                } ) , 'tokens' );

Things like jstpl_token are normally defined in the .tpl file.

Here is a couple of mine:

Code: Select all

var jstpl_token_txt = '<div style="top: ${y}px; left: ${x}px;" class="${class}" id="${id}">${text}</div>';
var jstpl_token = '<div style="top: ${y}px; left: ${x}px;" class="${class}" id="${id}"></div>';

[catwillow]

From your example, you would put an additional 'text' placeholder variable inside the jstpl_token, (the similar way 'color' is done in your example).

Code: Select all

jstpl_text_token = '<div id="myImage">${text}</div>'

where you'd pass 'text' as a parameter with 123. text: 123
You'd obviously want to combine the color, text, x_y all at the same time, but I don't actually know exactly what jstpl_token looks like from your example.

Code: Select all

   dojo.place( this.format_block( 'jstpl_token', {
                    x_y: x+'_'+y,
                    color: this.gamedatas.players[ player ].color,
                    text: 123,
                } ) , 'tokens' );

Things like jstpl_token are normally defined in the .tpl file.

Here is a couple of mine:

Code: Select all

var jstpl_token_txt = '<div style="top: ${y}px; left: ${x}px;" class="${class}" id="${id}">${text}</div>';
var jstpl_token = '<div style="top: ${y}px; left: ${x}px;" class="${class}" id="${id}"></div>';

Amazing, thank you! This gave me the text:

Code: Select all

                dojo.place( this.format_block( 'jstpl_token', {
                    x_y: x+'_'+y,
                    color: this.gamedatas.players[ player ].color,
                    text: 123,
                } ) , 'tokens' );

var jstpl_token='<div class="token tokencolor_${color}" id="token_${x_y}">${text}</div>';

The only problem is that I can't seem to get top and left to work. I tried this:

Code: Select all

                dojo.place( this.format_block( 'jstpl_token', {
                    x_y: x+'_'+y,
                    color: this.gamedatas.players[ player ].color,
                    t: 20,
                    l: 20,
                    text: 123,
                } ) , 'tokens' );

var jstpl_token='<div style="top: ${t}px; left: ${l}px;" class="token tokencolor_${color}" id="token_${x_y}">${text}</div>';

but it did not seem to move the text. What am I doing wrong?

[LeSteffen]

For top and left to work, the element should also have

Code: Select all

position: absolute

defined inside the CSS class

[RicardoRix]

https://developer.mozilla.org/en-US/doc ... S/position
yes absolute or relative position should do the trick.

The browser F12 developer has an inspect element function and is great for dabbling with css and styling requirements. As well as seeing how your dojo.place functions worked.
Don't forget to a do a hard page reset (Cntrl-F5) after any css changes.