BGA Studio Cookbook - Historial de revisións

Amadannabriona: /* Dynamic tooltips */

2018-09-16T02:38:27Z

Dynamic tooltips

← Revisión máis antiga		Revisión como estaba o 16 de setembro de 2018 ás 04:38
Liña 204:		Liña 204:
	=== Dynamic tooltips ===		=== Dynamic tooltips ===

	If you really need dynamic tooltip you can use this technique (~~only~~ use it if static tooltips provided by ~~bga~~ framework are not sufficient).		If you really need a dynamic tooltip you can use this technique. (Only use it if the static tooltips provided by the BGA framework are not sufficient.)

	new dijit.Tooltip({		new dijit.Tooltip({
Liña 214:		Liña 214:


	This is out of the box djit.Tooltip~~, it~~ has getContent method which is called ~~dinamically,~~		This is an out-of-the-box djit.Tooltip. It has a ''getContent'' method which is called dynamically.
	the string function return becomes innherHTML of tooltip so can be anything, matchedNode in this case dojo node representing dom object with id of "divItemId" but there are more parameters which I am not posting here which allows more sophisticated subnode queries
	~~https://dojotoolkit.org/reference-guide/1.10/dijit/Tooltip~~.~~html~~

	~~Its not part~~ of ~~bga API~~ so ~~use on your own risk~~ I ~~would say~~.		The string function return becomes the innerHTML of the tooltip, so it can be anything (matchedNode in this case) dojo node representing dom object with id of "divItemId" but there are more parameters which I am not posting here which allows more sophisticated subnode queries.

			[https://dojotoolkit.org/reference-guide/1.10/dijit/Tooltip.html dijit.Tooltip]

			It's not part of the BGA API so use at your own risk.

	=== Accessing images from js ===		=== Accessing images from js ===

Victoria la: /* Inject images and styled html in the log */

2018-06-19T02:17:20Z

Inject images and styled html in the log

← Revisión máis antiga		Revisión como estaba o 19 de xuño de 2018 ás 04:17
Liña 220:		Liña 220:
	Its not part of bga API so use on your own risk I would say.		Its not part of bga API so use on your own risk I would say.


			=== Accessing images from js ===

			'''Ingredients:''' ggg.js
			ggg.js

			<pre>
			// your game resources

			var my_img = '<img src="'+g_gamethemeurl+'img/cards.jpg"/>';

			// shared resources
			var my_help_img = "<img class='imgtext' src='" + g_themeurl + "img/layout/help_click.png' alt='action' /> <span class='tooltiptext'>" +
			text + "</span>";
			</pre>

	=== Inject images and styled html in the log ===		=== Inject images and styled html in the log ===

Victoria la o 8 de maio de 2018 ás 23:44

2018-05-08T23:44:45Z

@@ Liña 201: / Liña 201: @@
      },
 </pre>
 === Inject images and styled html in the log ===

Vincentt: /* Inject images and styled html in the log */

2018-05-03T21:24:41Z

Inject images and styled html in the log

← Revisión máis antiga		Revisión como estaba o 3 de maio de 2018 ás 23:24
Liña 229:		Liña 229:
	if (log && args && !args.processed) {		if (log && args && !args.processed) {
	args.processed = true;		args.processed = true;
	args.You = this.divYou(); // will replace ${You} with colored version
			if (!this.isSpectator)
			args.You = this.divYou(); // will replace ${You} with colored version

	// list of other known variables		// list of other known variables

Victoria la: /* Use player color in template */

2018-03-22T00:01:40Z

Use player color in template

← Revisión máis antiga		Revisión como estaba o 22 de marzo de 2018 ás 02:01
Liña 158:		Liña 158:
	</pre>		</pre>

			=== Scale to fit for big boards ===

			'''Ingredients:''' ggg_ggg.tpl, ggg.js

			Lets say you have huge game board, and lets say you want it to be 1400px wide. Besides the board there will be side bar which is 240 and trim.
			My display is 1920 wide so it fits, but there is big chance other people won't have that width. What do you do?
			Easiest thing I came up with is to scale whole content to fit (everything you declare in .tpl file). Tested or firefox and chrome.

			ggg_ggg.tpl:
			<pre>
			<div id="thething" class="thething" style="width: 1400px;">
			... everything else you declare ...
			</div>
			</pre>

			ggg.js:
			<pre>
			setup : function(gamedatas) {
			console.log("Starting game setup");
			...
			this.interface_min_width = 740;
			this.interface_max_width = 1400;
			dojo.connect(window, "onresize", this, dojo.hitch(this, "adaptViewportSize"));
			},

			adaptViewportSize : function() {
			var pageid = "page-content";
			var nodeid = "thething";

			var bodycoords = dojo.marginBox(pageid);
			var contentWidth = bodycoords.w;

			var browserZoomLevel = window.devicePixelRatio;
			//console.log("zoom",browserZoomLevel);
			if (contentWidth >= this.interface_max_width \|\| browserZoomLevel >1 \|\| this.control3dmode3d) {
			dojo.style(nodeid,'transform','');
			return;
			}

			var percentageOn1 = contentWidth / this.interface_max_width;
			dojo.style(nodeid, "transform", "scale(" + percentageOn1 + ")");
			},
			</pre>

	=== Inject images and styled html in the log ===		=== Inject images and styled html in the log ===

Victoria la: /* Database for The euro game */

2018-03-17T18:57:29Z

Database for The euro game

← Revisión máis antiga		Revisión como estaba o 17 de marzo de 2018 ás 20:57
Liña 305:		Liña 305:
	Now when we get to encode it we can see that everything can be encoded as (object,zone,state) form, where object and zone is string and state is integer. The resource mapping is slightly different semantically so you can go with two table, or counting using same table with state been used as count for resources.		Now when we get to encode it we can see that everything can be encoded as (object,zone,state) form, where object and zone is string and state is integer. The resource mapping is slightly different semantically so you can go with two table, or counting using same table with state been used as count for resources.

	So the piece mapping for non-grid based games can be in most case represented by (string: token_key, string: location, int: state), example of such database schema can be found here: dbmodel.sql and class implementing access to it here table.game.php.		So the piece mapping for non-grid based games can be in most case represented by (string: token_key, string: location, int: state), example of such database schema can be found here: [https://github.com/elaskavaia/bga-sharedcode/blob/master/dbmodel.sql dbmodel.sql] and class implementing access to it here [https://github.com/elaskavaia/bga-sharedcode/blob/master/modules/tokens.php table.game.php].

	Variant 1: Minimalistic		Variant 1: Minimalistic
Liña 340:		Liña 340:
	\|}		\|}

			Now how we represent resource counters such as bread?
	~~Variant 2.1: Additional resource~~ table~~, using same location as~~ token ~~table~~		Using same table from we simply add special counter token for bread and use state to indicate the count. Note to keep first column unique we have to add player identification for that counter, i.e. ff0000 is red player.

	~~CREATE TABLE IF NOT EXISTS `resource` (~~
	~~`resource_type` varchar(32) NOT NULL~~,
	~~`resource_location` varchar(32) NOT NULL,~~
	~~`resource_count` int(10) signed NOT NULL,~~
	~~PRIMARY KEY (`resource_type`,`resource_location`)~~
	~~) ENGINE=InnoDB DEFAULT CHARSET=utf8;~~

	{\| class="wikitable"		{\| class="wikitable"
	\|+~~resource~~		\|+token
	! ~~resource_type~~		! token_key
	! ~~resource_location~~		! token_location
	! ~~resource_count~~		! token_state
	\|-		\|-
	\|~~bread~~		\|bread_ff0000
	\|~~home_red~~		\|tableau_ff0000
	\|5		\|5
	\|}		\|}

	Variant 2.2: Additional resource table, resource count for each player id

			Variant 2: Additional resource table, resource count for each player id

	CREATE TABLE IF NOT EXISTS `resource` (		CREATE TABLE IF NOT EXISTS `resource` (
Liña 382:		Liña 377:
	\|5		\|5
	\|}		\|}



	Variant 3: More normalised		Variant 3: More normalised

Victoria la: /* Using Named Constants for States */

2018-01-07T16:51:37Z

Using Named Constants for States

← Revisión máis antiga		Revisión como estaba o 7 de xaneiro de 2018 ás 18:51
Liña 618:		Liña 618:

	The only disadvantage of this method is you have to implement a lot of functionality two times - on server and client.		The only disadvantage of this method is you have to implement a lot of functionality two times - on server and client.

	~~=== Using Named Constants for States ===~~

	~~states.inc.php:~~

	~~<pre>~~
	~~// define contants for state ids~~
	~~if (!defined('STATE_END_GAME')) { // guard since this included multiple times~~
	~~define("STATE_PLAYER_TURN", 2);~~
	~~define("STATE_GAME_TURN", 3);~~
	~~define("STATE_PLAYER_TURN_CUBES", 4);~~
	~~define("STATE_END_GAME", 99);~~
	}

	~~$machinestates = array(~~

	~~...~~

	~~STATE_PLAYER_TURN => array(~~
	~~"name" => "playerTurn",~~
	~~"description" => clienttranslate('${actplayer} must select an Action Space or Pass'),~~
	~~"descriptionmyturn" => clienttranslate('${you} must select an Action Space or Pass'),~~
	~~"type" => "activeplayer",~~
	~~"args" => 'arg_playerTurn',~~
	~~"possibleactions" => array( "selectWorkerAction", "pass" ),~~
	~~"transitions" => array(~~
	~~"loopback" => STATE_PLAYER_TURN,~~
	~~"playCubes" => STATE_PLAYER_TURN_CUBES,~~
	~~"pass" => STATE_GAME_TURN )~~
	),
	~~</pre>~~

Victoria la o 7 de xaneiro de 2018 ás 16:48

2018-01-07T16:48:05Z

← Revisión máis antiga		Revisión como estaba o 7 de xaneiro de 2018 ás 18:48
Liña 618:		Liña 618:

	The only disadvantage of this method is you have to implement a lot of functionality two times - on server and client.		The only disadvantage of this method is you have to implement a lot of functionality two times - on server and client.

			=== Using Named Constants for States ===

			states.inc.php:

			<pre>
			// define contants for state ids
			if (!defined('STATE_END_GAME')) { // guard since this included multiple times
			define("STATE_PLAYER_TURN", 2);
			define("STATE_GAME_TURN", 3);
			define("STATE_PLAYER_TURN_CUBES", 4);
			define("STATE_END_GAME", 99);
			}

			$machinestates = array(

			...

			STATE_PLAYER_TURN => array(
			"name" => "playerTurn",
			"description" => clienttranslate('${actplayer} must select an Action Space or Pass'),
			"descriptionmyturn" => clienttranslate('${you} must select an Action Space or Pass'),
			"type" => "activeplayer",
			"args" => 'arg_playerTurn',
			"possibleactions" => array( "selectWorkerAction", "pass" ),
			"transitions" => array(
			"loopback" => STATE_PLAYER_TURN,
			"playCubes" => STATE_PLAYER_TURN_CUBES,
			"pass" => STATE_GAME_TURN )
			),
			</pre>

Victoria la: /* Multi Step Interactions: Action Stack - Using Client States */

2018-01-06T00:03:58Z

Multi Step Interactions: Action Stack - Using Client States

← Revisión máis antiga		Revisión como estaba o 6 de xaneiro de 2018 ás 02:03
Liña 607:		Liña 607:
	}		}
	}		}
	During client states data is collected and pushed into client array of performed operations, we also do client side animation and alter ~~server~~ model, since we don't send intermediate steps to server/		During client states data is collected and pushed into client array of performed operations, we also do client side animation and alter model, since we don't send intermediate steps to server.
	In example above we check if we client on industry marker, we will "commit" "i" operation with selected id of the marker and place_id, the commit is just pushing this data into an array, the data will be encoded
	~~for server to read, i~~.~~e. i__ind2__indslot15, means move industry marker number 2 into slot 15 of industry track~~

	~~When user usually clicks Done~~, ~~since it was a lot~~ of ~~stuff it require explicit confirmation,~~ and ~~all~~ this ~~stuff~~ send to server in a ~~big array~~ of operations ~~with their arguments, you~~ can ~~separate operations with~~ space and		In example above we check if we client on industry marker, we will "commit" "i" operation with selected id of the marker and place_id. The commit is just pushing this data into an array.
	~~arguments with __ (double underscore)~~.
	~~tbd~~		All this operations later are send to server, usually when user clicks Done.
			The data will be encoded for server to read into a string, i.e. i__ind2__indslot15, means move industry marker number 2 into slot 15 of industry track. And multiple operations
			can be separated by a space for example.

			At anytime during client states user can click Cancel which will restore last server state and undo all client animation back to last stored state.

			The only disadvantage of this method is you have to implement a lot of functionality two times - on server and client.

Victoria la: /* Inject images and styled html in the log */

2018-01-04T00:04:10Z

Inject images and styled html in the log

← Revisión máis antiga		Revisión como estaba o 4 de xaneiro de 2018 ás 02:04
Liña 254:		Liña 254:
	},		},
	getTokenName : function(key) {		getTokenName : function(key) {
	return key; // get name for the key, from static table for example		return this.gamedatas.token_types[key].name; // get name for the key, from static table for example
	},		},
	</pre>		</pre>