(Specifically, each piece will have a number from 0 to 999 on it.)
Adding text strings to a piece on a gameboard
Adding text strings to a piece on a gameboard
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.)
(Specifically, each piece will have a number from 0 to 999 on it.)
- RicardoRix
- Posts: 2117
- Joined: 29 April 2012, 23:43
Re: Adding text strings to a piece on a gameboard
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.
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.
Re: Adding text strings to a piece on a gameboard
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
https://en.doc.boardgamearena.com/Stock ... Appearance
Re: Adding text strings to a piece on a gameboard
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?RicardoRix wrote: ↑19 March 2024, 10:40 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.
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.
Re: Adding text strings to a piece on a gameboard
Let's define a simple div with the id "myImage" showing the token image as background
You should be able to do
Code: Select all
<div id="myImage"></div>
Code: Select all
$("myImage").innerText="123";
Re: Adding text strings to a piece on a gameboard
So I'm working with the Reversi tutorial, here: https://en.doc.boardgamearena.com/Tutorial_reversiLeSteffen wrote: ↑21 March 2024, 15:49 Let's define a simple div with the id "myImage" showing the token image as backgroundYou should be able to doCode: Select all
<div id="myImage"></div>
Code: Select all
$("myImage").innerText="123";
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();
},
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";
},
- RicardoRix
- Posts: 2117
- Joined: 29 April 2012, 23:43
Re: Adding text strings to a piece on a gameboard
nobody said this.innerText = 123; would work. You've come up with that somewhere...
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.
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).
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.
Things like jstpl_token are normally defined in the .tpl file.
Here is a couple of mine:
Code: Select all
$("myImage").innerText="123";
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>
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>'
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' );
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>';
Re: Adding text strings to a piece on a gameboard
RicardoRix wrote: ↑22 March 2024, 01:11
From your example, you would put an additional 'text' placeholder variable inside the jstpl_token, (the similar way 'color' is done in your example).where you'd pass 'text' as a parameter with 123. text: 123Code: Select all
jstpl_text_token = '<div id="myImage">${text}</div>'
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.Things like jstpl_token are normally defined in the .tpl file.Code: Select all
dojo.place( this.format_block( 'jstpl_token', { x_y: x+'_'+y, color: this.gamedatas.players[ player ].color, text: 123, } ) , 'tokens' );
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>';
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>';
Re: Adding text strings to a piece on a gameboard
For top and left to work, the element should also have
defined inside the CSS class
Code: Select all
position: absolute
- RicardoRix
- Posts: 2117
- Joined: 29 April 2012, 23:43
Re: Adding text strings to a piece on a gameboard
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.
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.