Board Game Arena

Posted: **30 March 2020, 22:06**

Hello,

In Dungeon Twister, map consists of 4x2 tiles of 25 squares. Each tile can rotate around itself.

During games, tokens are moving in the dungeon.

When mouse is over a token, a Pop up appears, displaying information about this token.
But the token is hiding what's behind.

Do you think there is a way to add a picture of the square behind the token in the pop up ?

Posted: **31 March 2020, 11:10**

Hi,
I don't know this game, so I'm not sure I understand what you're asking for.

tchobello wrote: ↑When mouse is over a token, a Pop up appears, displaying information about this token.
But the token is hiding what's behind.

Do you mean, the token on the map is hiding the background on the map (which has useful information), completely independently of the tooltip beeing displayed or not? (and you're speaking about the tooltip because it could be a good place to show the background?)
Or do you mean that the tooltip (not the token) is hiding the map?

Posted: **31 March 2020, 17:06**

hi, sorry, I don't how to display a snapshot here...

the token on the map is hiding the background on the map (which has useful information), completely independently of the tooltip beeing displayed.

I want to know if there is a way to display the hidden background in the tooltip.

Posted: **31 March 2020, 20:40**

Hi,

Maybe you can override the CSS class of the tooltip to display the background?
Try to put an imgur link, to show us the issue

Vincent

Posted: **31 March 2020, 20:48**

Yes of course, you just have to display a div (with width and height) with the map tiles image (background-image css property), and ajust the background-position depending on the position (on the sprites image) of the square you want to display. For background-position, you can use px or % values, they function diffferently. You also need to set background-size (since you have 25 squares in a column, you can set background-size: auto 2500%;)

Don't know if you need an explanation on how to use background-position values in %, but anyway it can help others.
Example: you want to display a square on the third row of the first tile in your tile image. What value must be used for the vertical value of background-position?
Since you have five rows of tiles and five squares in a tile, you have 25 rows in your sprites image. A background-position value of 0% 0% will display the first square of the first column, and a background-position value of 0% 100% will display the last (25th) square of the first column, and intermediate values will display intermediate positions of the background image (that's how background-position works when you use % and not px values). Since you have 24 steps (25 - 1 = 24) to go from the 1st square (0%) to the last (25th) square (100%), each next square will be 100/24% (4.17%) further. So the 1st square of the 3rd row will be displayed by background-position: 0% 8.33%; and the 2nd square of the 3rd row by background-position: 4.17% 8.33%; and so on.

(You can also use background-position with px units instead of %, but the advantage of % is that you can change the display size of the square without having to change the percentage value.)

Posted: **31 March 2020, 21:58**

here is the imgur : https://imgur.com/a/4dPbeKP
So, I'd like to display the background behind the thief, somewhere in the Tooltip.

By now, it works like this
in JS:

Code: Select all

        getTooltipTokenContent: function( type, color )
        {
               var tokentype = this.gamedatas.token_types[ type ];
                var html = '<div class="tooltip_content">';

                html += "<span class='tooltip_title'>"+_( tokentype.name )+"</span><hr/>";
 
                if( tokentype.category == 'character' )
                {
                    html +="<span class='tooltip_capacity'>"+_('Speed')+': '+tokentype.speed+"</span><br/>";
                    html +="<span class='tooltip_capacity'>"+_('Strength')+': '+tokentype.strength+"</span><hr/>";
                }
                if( color != 0)
                {                
                    html +=   '<div class="tooltip_content_icon"><div class="token" id="token">';
                    html +=   '<div class="token_art token_'+type+'_'+color+'" id=token_art style="position: static;"></div></div></div>';
                }

                html += "<div class='tooltip_content_desc'><span class='tooltip_text'>"+_( this.gamedatas.token_types[ type ].description )+"</span></div>";
                html += '</div>';

               return html;
        },

There's only that in the CSS about the tooltip :

Code: Select all

.tooltip_content {
}

.tooltip_content_icon {
	padding: 5px 10px 5px 5px;
}

.tooltip_content_desc {
    min-height: 85px;
	max-width: 450px;
	padding: 5px 5px 5px 5px;
	[b]margin-left: 90px;[/b]
}

I had to add this because picture was in the text I might have missed something about how float works.

tiles are big squares of 368px in a file of 5 lines and 10 columns :
A tile consists of 25 squares (5x5) but for now I had no need to use a small square of 73.6px.
If it wasn't hard enough, tiles can rotate...

Code: Select all

.tile_art, .tile_selection_art {
    background-image: url('img/tiles.jpg');
    background-size: 1000% 500%;

div square is used to place tokens and several decorations to show possible moves for instance.
TPL

Code: Select all

        <div id="squares">
            <!-- BEGIN square --><div id="square_{X}_{Y}" class="square {ADDITIONAL_CLASS}"></div><!-- END square -->
        </div>

JS

Code: Select all

.square {
    position:relative;
    width: 75px;
    height: 75px;
    display:inline-block;
    margin: 0;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.possible_dest_under {
    background-color: rgba( 255,255,255,0.4 );
    cursor: pointer;
}

Posted: **31 March 2020, 23:40**

You could try something like this:
in getTooltipTokenContent(), at the end just before html += '</div>'; you can add a line with something like

Code: Select all

html += '<div class="square_tooltip" ____ to be completed with style background-position, depending on the location on the map of your token ____></div>';

It'll look better if you also add a <hr/> at the end of the html += "<div class='tooltip_content_desc'> ... line, just between </div> and ";

In CSS:
.square_tooltip {
background-image: url('img/tiles.jpg');
background-size: auto 2500%;
width: 75px; /* You can choose a smaller size if you want */
height: 75px; /* You can choose a smaller size if you want */
}

I don't remember (and don't have time to check now, maybe in 2 days) if tooltips are generated each time a client needs to display one (when hovering with the mouse), or if they're generated only in setup, when (re)loading the page.
In the latter case, the difficult thing is that the tokens are moving during the game, so you need to update the background position of your square_tooltip div (so you must give it an id including the token id).

tchobello wrote: ↑ If it wasn't hard enough, tiles can rotate...

Do you need the square displayed in the tooltip to be in the same orientation?

tchobello wrote: ↑ div square is used to place tokens and several decorations to show possible moves for instance.

Are the decorations visible? (above the tokens) Or do you need to also display them in the tooltip, not only the background image?

If things become difficult, you could try another approach, like adding a button in your interface that temporarily hides all tokens (style visibility: hidden)

Posted: **01 April 2020, 09:29**

thanks for the explanations.

sometimes a token is modified and i call this.addTooltipHtml in order to update its display. Perhaps it's not good to call this several times...

the square needs to have the same orientation.
I only need the background image.

Well, thinking of it, there can be 2 or 3 tokens in a square and it could be great to display background and all tokens.

Posted: **04 April 2020, 21:35**

after reading your advices, I've tried another approach..

When mouse is over the upper border #border_up, all tokens and markers should disappear.
I've thought of increasing #board_tiles ( which includes all tiles ) z_index in order to get them in front but it doesn't work.
So, I've switched to visibility: hidden; selected all elements to disappear and it works using the General Sibling Selector ~ !

CSS

Code: Select all

#border_up:hover ~ #board_tokens {
	visibility: hidden;
}
#border_up:hover ~ #tokens {
	visibility: hidden;
}

Board Game Arena

Part of map onTooltip

Part of map onTooltip

Re: Part of map onTooltip

Re: Part of map onTooltip

Re: Part of map onTooltip

Re: Part of map onTooltip

Re: Part of map onTooltip

Re: Part of map onTooltip

Re: Part of map onTooltip

Re: Part of map onTooltip