Board Game Arena • showing image in tooltip?

Page 1 of 1

showing image in tooltip?

Posted: 01 September 2024, 19:08

by Ditto11

Hi, I'm having trouble learning how to show an image in a tooltip within my game.

The game I'm working on is "dragonchess", and is a pretty close copy of the "chess" game on bga. So for most purposes we can reference the chess game - it'll answer my questions all the same

I have been able to add a very basic tooltip, text only, showing the piece name. I did this by adding the "title" property to the definition in the .tpl file:

-- Before

Code: Select all

var jstpl_piece = '<div id="piece_${piece_id}" class="clickable dragonchess_piece ${piece_color}_piece ${piece_type}_symbol"></div>';

-- After

Code: Select all

var jstpl_piece = '<div id="piece_${piece_id}" class="clickable dragonchess_piece ${piece_color}_piece ${piece_type}_symbol" title="${piece_name}"></div>';

and in the .js file, this is "populated" via loop/substitution using this:

-- Before

Code: Select all

                dojo.place( this.format_block('jstpl_piece', {
                    piece_id:piece.piece_id,
                    piece_color:piece.piece_color,
                    piece_type:piece.piece_type
                } ), $ ( $board ) );

-- After

Code: Select all

               // capitalize the name of the piece
               var piece_name = piece.piece_type.charAt(0).toUpperCase() + piece.piece_type.substring(1).toLowerCase();
               
                dojo.place( this.format_block('jstpl_piece', {
                    piece_id:piece.piece_id,
                    piece_color:piece.piece_color,
                    piece_type:piece.piece_type,
                    piece_name:piece_name
                } ), $ ( $board ) );

And that works great ... nice, simple, basic.

However, I would like to add an image. That is, an image showing how that piece moves. However, for now . just an image , ANY image .. I've been unable to get working.

I've tried looking at how other games do it, but can't quite figure out how to get it working.

I've tried adding a div/img element within the .tpl line:

Code: Select all

var jstpl_piece = '<div id="piece_${piece_id}" class="${piece_color}_${piece_type}_piece" style="background-image: url('img/game_icon.png');"></div>';

or

Code: Select all

var jstpl_piece = '<div id="piece_${piece_id}" class="${piece_color}_${piece_type}_piece"><span class="tooltip"><img src=url('img/game_icon.png')></span></div>';

(gathered from looking at this site:
https://www.geeksforgeeks.org/how-to-ma ... -an-image/
)

I tried to mimic what Burgle Bros does ...

-- Burgle Bros

Code: Select all

var jstpl_patrol_tooltip = '<div id="patrol_tooltip_${patrol_floor}" class="card tooltip" style="background-image: url(${bg_image}); background-position: ${bg_position}; background-size: 1440px;">${patrol_discards}</div>';

var jstpl_patrol_tooltip_discard = '<div class="patrol-discard" style="left: ${discard_left}px; top: ${discard_top}px; background-image: url(${bg_image});"></div>';

        patrolCardHtml: function(card, bg_id, discards) {
        ...
                discardHtml = '<div class="patrol-discard-container">';
                for(var discardId in discards) {
                    if (discardId != card.id) {   
                        var discard = discards[discardId];
                        var discardIndex = parseInt(discard.type_arg, 10) - 1;
                        var discard_top = Math.floor(discardIndex / 4) * 62;
                        var discard_left = (discardIndex % 4) * 62;
                        discardHtml += this.format_block('jstpl_patrol_tooltip_discard', {
                            discard_left: discard_left,
                            discard_top: discard_top,
                            bg_image: g_gamethemeurl + 'img/patrol.jpg',
                        });
                    }
                }
                discardHtml += '</div>';
                        
            return this.format_block('jstpl_patrol_tooltip', {
                patrol_floor: card['location'][5],
                patrol_discards: discardHtml,
                bg_image: g_gamethemeurl + 'img/patrol.jpg',
                bg_position: bg_col.toString() + '% ' + bg_row.toString() + '%'
            });

But no matter how much I try, I can't quite get that nesting to work.

What am I missing? I am kind of new to this, so learning as I go, but I can't seem to figure out the basics of this.

What's the "simplest" way to display an image as a tooltip in BGA games ? (or specifically, looking at the "Chess" game?)

Re: showing image in tooltip?

Posted: 01 September 2024, 20:07

by thoun

Did you check addTooltipHtml in the doc ?
https://en.doc.boardgamearena.com/Game_ ... s#Tooltips

Re: showing image in tooltip?

Posted: 01 September 2024, 21:35

by Ditto11

Yes, I did see addTooltip (and addTooltipHtml)

Tried both, again .. I"m missing something basic, I think ... they either get ignored, or cause game to crash.

Tried this:

Code: Select all

  this.addTooltip( $('piece_'+piece.piece_id), 'Sample tooltip', '' );

and also tried this:

Code: Select all

 var html = `<div class="piece_tooltip" style="height: 140px; width: 140px; background-position: -300% -500%; position: static;" ><img src=url('img/game_icon.png')></div>`;
 this.addTooltipHtml ( $('piece_'+piece.piece_id), html, 0 );

No errors on either .. they just "do" anything.

Re: showing image in tooltip?

Posted: 02 September 2024, 10:04

by vurtan

In your variable "html" the img-tag has a wrong value in the src-attribute. There should the URL to the image directly and not wrapped into url('').

Try this line for the html variable as a start:

Code: Select all

var html = `<div class="piece_tooltip" style="height: 140px; width: 140px; background-position: -300% -500%; position: static; background-image: url('https://studio.boardgamearena.com:8084/data/themereleases/current/games/dragonchess/999999-9999/img/pieces.png')" > </div>`;

This shows the image in the tooltip (verified in your project). Of course the display position must be set correctly.

From there remove the fixed part "https://studio.boardgamearena.com:8084/ ... 9999-9999/" and replace it with the g_gamethemeurl variable (which has the same value).

The example of Burgle Bros uses this variable to generate the correct URL and inject/replace this in the template.

Code: Select all

bg_image: g_gamethemeurl + 'img/patrol.jpg',

Re: showing image in tooltip?

Posted: 02 September 2024, 16:46

by c12h22o11_

Code: Select all

 
 getTooltipForGoal(card) {
            var tt = document.createElement("tooltip_goal_" + card.uid);
            const xBack = ((card.card_id - 140) %  10) * 183;
            const yBack = Math.floor((card.card_id-140) / 10) * 285;

            var image = document.createElement("image_" + card.uid);
            var text = this.goal_text[card.card_id - 140]

            image.innerHTML = `
                <div class="tooltipContainer">
                    <div class="gcard2" 
                         style="background-position-x: -${xBack}px; background-position-y: -${yBack}px;"> 
                    </div>
                    <div>
                        <div> 
                            ${_(card.name)}
                        </div>
                        <br/>
                        <div style="text-align: left">
                            ${_(text)}
                        </div>
                    </div>
                </div>
            `
            tt.appendChild(image);

            return tt.innerHTML;
        },
        addTooltipForGoal( card , div) {
            var html = this.getTooltipForGoal(card)
            this.addTooltipHtml(div.id, html, 1000)
        },

This is the code for distilled. My variable names ended up being bad, as "image' ended up being an image and some text in two separate divs. Nevertheless, I hope this helps. Also, the appendChild / innerHTML can be done much more cleanly to create a div element from a div string, but it works.

Re: showing image in tooltip?

Posted: 02 September 2024, 19:00

by Ditto11

Ok, I had seen both methods, ie using url("") and with the g_gamethemeurl

but I'm a bit confused by what you wrote:

vurtan wrote: ↑02 September 2024, 10:04 the URL to the image directly and not wrapped into url('').

and yet, in your example you put:

url('https://studio.boardgamearena.com:8084/ ... pieces.png')

.. using the url function to wrap it ??

So .. should I be using the url function or not??

In any case I tried the following :

I removed this piece from the .tlp file first:
just so it doesn't interfere.

Code: Select all

      title="${piece_name}"

and I tried this: (ie url + g_gamethemeurl )

Code: Select all

      var html = `<div class="piece_tooltip" style="height: 140px; width: 140px; background-position: -300% -500%; position: static; background-image: url( g_gamethemeurl  + 'img/game_icon.png')" > </div>`;
      this.addTooltipHtml ( $('piece_'+piece.piece_id), html, 0 );

Nothing .. no error, no tooltip.

I then tried this: no url .. only g_gamethemeurl

Code: Select all

      var html = `<div class="piece_tooltip" style="height: 140px; width: 140px; background-position: -300% -500%; position: static; background-image: g_gamethemeurl  + 'img/game_icon.png'" > </div>`;
      this.addTooltipHtml ( $('piece_'+piece.piece_id), html, 0 );

also nothing .. no error, no tooltip.

I also tried to reference the img/pieces.png you indicated ... doesn't seem to matter, no effect regardless of which .png file I try to point to.

Re: showing image in tooltip?

Posted: 02 September 2024, 19:14

by Ditto11

c12h22o11_ wrote: ↑02 September 2024, 16:46 This is the code for distilled. My variable names ended up being bad, as "image' ended up being an image and some text in two separate divs. Nevertheless, I hope this helps. Also, the appendChild / innerHTML can be done much more cleanly to create a div element from a div string, but it works.

Sorry, no, I'm not able to make any sense of that .. I can see elements I recognize, but there's too much dynamic code in there for me to be able to understand the core principles (at this time ... )

Just way too new at this, I definitely need a much simpler example in order to bash the concept into my brain

Re: showing image in tooltip?

Posted: 02 September 2024, 19:26

by Ditto11

Ok .. so found this after some more digging around:

viewtopic.php?t=16805

based on that thread, I tried this:

Code: Select all

var  eid = document.getElementById ( 'piece_' + piece.piece_id );

var html = `<div class="piece_tooltip" style="height: 140px; width: 140px; background-position: center; position: static; background-image: g_gamethemeurl  + 'img/game_icon.png' " > </div>`;
this.addTooltipHtml ( eid.id, html );

Using getElementById first .. then using that id passed into the addTooltipHtml .. seems to help .. "a bit" ..
I get a empty "box" .. no text, no pic . but it's "trying" to display something.

https://imgur.com/kGqdo75

Re: showing image in tooltip?

Posted: 02 September 2024, 19:37

by Ditto11

OK .., so this finally worked ... although I cannot explain why ,really

Code: Select all

            var  eid = document.getElementById ( 'piece_' + piece.piece_id );
      
               var html = '<div class="piece_tooltip">' + _("Piece") + '<hr />' + _("Piece Details") + '<div class="some_background_image"><img src="' + g_gamethemeurl + 'img/game_icon.png")></div></div>';
               this.addTooltipHtml ( eid.id, html );

This gives me some text/header that I can mess with which is fine .. and a means to attach the image.

https://imgur.com/e6hbuts

Re: showing image in tooltip?

Posted: 02 September 2024, 21:15

by Ditto11

Ok .. I think I have something workable .. I just need to build the new spritesheets with the helper info on them I want (ie moves).

However, I managed to get it working by showing the piece icon itself via the spritesheet already defined in the .css file in the tooltip:

in tpl file:

Code: Select all

// Javascript HTML templates
var jstpl_piece = '<div id="piece_${piece_id}" class="clickable dragonchess_piece ${piece_color}_piece ${piece_type}_symbol" ></div>';
var jstpl_piece_tooltip = '<div class="tooltip_${piece_id}" style="height: 140px; width: 120px;"> <b>${piece_name}</b> <hr /> <div class="dragonchess_piece ${piece_color}_piece ${piece_type}_symbol" style="height: 100px; width: 100px;" ></div></div>';

and used this code in the .js file after I create the piece.

Code: Select all

               var  eid = document.getElementById ( 'piece_' + piece.piece_id );
               var html = this.format_block ( 'jstpl_piece_tooltip', {
                                 piece_id:piece.piece_id,
                                 piece_color:piece.piece_color,
                                 piece_type:piece.piece_type,
                                 piece_name:piece_name,
                                 piece_url:g_gamethemeurl
                                 } );
               this.addTooltipHtml ( eid.id, html );

Seems to work fine .. however ..
because the piece is defined inside that 2nd <div> element, I had to manually resize the parent tooltip div element to accomodate.
I'll keep playing with it to learn, however, is there a better way so that the parent <div> element "sees" the full content of what's inside, and sizes the tooltip popup window properly - automatically ?