Board Game Arena

Posted: **21 December 2021, 20:46**

Hi.

For my page layout, I thought I would try to have a fixed width display, say 2048px and then scale that to the available screen width.
While I don't know how it's done, I noticed Terrra Mystica has this effect.

So I would have a page containing div for everything and then scale that accordingly with transform: scale.

Code: Select all

	    
	        onScreenWidthChange: function()
		{
			var width = $('game_play_area').offsetWidth;
			var factor = width / 2048;	
		        dojo.setStyle('background', 'transform', 'scale(' + factor+ ')');	
		        //dojo.setStyle('background', 'zoom', factor);
             },

While this works, unfortunately has the side-effect of ruining the animation effects with the stock component. Like when moving from one stock to the other using the 'from' argument.

BUT if I use the 'zoom' style (commented out line above instead of the transform) then it works AND the stock component animation effects are OK.
This is the same effect that BGA uses when the screen width is too small.

Code: Select all

// Game interface width range (pixels)
// Note: game interface = space on the left side, without the column on the right
'game_interface_width' => array(

    // Minimum width
    //  default: 740
    //  maximum possible value: 740 (ie: your game interface should fit with a 740px width (correspond to a 1024px screen)
    //  minimum possible value: 320 (the lowest value you specify, the better the display is on mobile)
    'min' => 740,

This ends up with a page element and a zoom attribute being dynamically changed when the screen width is <740.

The only problem is, that 'zoom' is depreciated, and suggests to use transform. At least I feel mildly safe, given BGA use it themselves,
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

Anyone have any tricks or suggestions?

Posted: **22 December 2021, 12:06**

Indeed transform scale messes up the coordinates grabbed by the framework animation functions.

Workaround is to disable the transform, trigger the animation, then reapply the transform immediately. As it's very quick, it's not perceptible by the user, and in this case correct coordinates are used so the animation works. This has been applied for example for the zooming function in the Cubirds project.

There is a quick note about this in the Animation section of the documentation https://en.doc.boardgamearena.com/Game_ ... amename.js

(fyi as you mentioned it, TM implementation dynamicaly recomputes and reapplies sizes on all elements in javascript, but I wouldn't advise this method as it was a lot of work)

Posted: **22 December 2021, 20:53**

OK, thanks that works

Code: Select all

				
	dojo.setStyle('background', 'transform', 'scale(1.0)');
	this.stPlayerAction.addToStockWithId( item.type, item.id, 'phand' + this.player_id +'_item_' + item.id ); 
	this.stPlayerHand.removeFromStockById( item.id );					
	dojo.setStyle('background', 'transform', 'scale(' + ($('game_play_area').offsetWidth / 2048) + ')');

Board Game Arena

stock component and transform: scale / zoom

stock component and transform: scale / zoom

Re: stock component and transform: scale / zoom

Re: stock component and transform: scale / zoom