BGA Studio Cookbook - Revizyon geçmişi

Amadannabriona: /* Dynamic tooltips */

2018-09-16T02:38:27Z

Dynamic tooltips

← Önceki sürüm		04.38, 16 Eylül 2018 tarihindeki hâli
204. satır:		204. satır:
	=== 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({
214. satır:		214. satır:


	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

← Önceki sürüm		04.17, 19 Haziran 2018 tarihindeki hâli
220. satır:		220. satır:
	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 23.44, 8 Mayıs 2018 tarihinde

2018-05-08T23:44:45Z

@@ 201. satır: / 201. satır: @@
      },
 </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

← Önceki sürüm		23.24, 3 Mayıs 2018 tarihindeki hâli
229. satır:		229. satır:
	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

← Önceki sürüm		02.01, 22 Mart 2018 tarihindeki hâli
158. satır:		158. satır:
	</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

← Önceki sürüm		20.57, 17 Mart 2018 tarihindeki hâli
305. satır:		305. satır:
	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
340. satır:		340. satır:
	\|}		\|}

			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` (
382. satır:		377. satır:
	\|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

← Önceki sürüm		18.51, 7 Ocak 2018 tarihindeki hâli
618. satır:		618. satır:

	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 16.48, 7 Ocak 2018 tarihinde

2018-01-07T16:48:05Z

← Önceki sürüm		18.48, 7 Ocak 2018 tarihindeki hâli
618. satır:		618. satır:

	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

← Önceki sürüm		02.03, 6 Ocak 2018 tarihindeki hâli
607. satır:		607. satır:
	}		}
	}		}
	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

← Önceki sürüm		02.04, 4 Ocak 2018 tarihindeki hâli
254. satır:		254. satır:
	},		},
	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>