BGA Studio Cookbook - Гісторыя версій

PurplishCat на 01:50, 18 кастрычніка 2020

2020-10-18T01:50:56Z

← Папярэдн. версія		Версія ад 03:50, 18 кастрычніка 2020
Радок 456:		Радок 456:
	=== Using the CSS classes from the state machine ===		=== Using the CSS classes from the state machine ===

	If you need to hide or show stuff depending on the state of your game, you can of course use javascript, but CSS is hand ~~enought~~ for that. The #overall element does change class depending on the game state. For instance, if you are in state ''playerTurn'', it will have the class ''gamestate_playerTurn''.		If you need to hide or show stuff depending on the state of your game, you can of course use javascript, but CSS is hand enough for that. The #overall-content element does change class depending on the game state. For instance, if you are in state ''playerTurn'', it will have the class ''gamestate_playerTurn''.

	So now, if you want to show the discard pile only during player turns, you may use:		So now, if you want to show the discard pile only during player turns, you may use:
Радок 465:		Радок 465:
	</pre>		</pre>

	This can be used if you want to change sizing of elements, position, layout or visual appearance.		This can be used if you want to change sizing of elements, position, layout or visual appearance.


	== Game Model and Database design ==		== Game Model and Database design ==

Victoria La: /* Assorted Stuff */

2020-10-03T23:41:53Z

Assorted Stuff

← Папярэдн. версія		Версія ад 01:41, 4 кастрычніка 2020
Радок 691:		Радок 691:

	== Assorted Stuff ==		== Assorted Stuff ==


			=== Out-of-turn actions: Un-pass ===

			'''Ingredients:''' ggg.js, ggg.game.php, ggg.action.php, states.inc.php

			In multiplayer game sometimes players passes but than they think more and want to un-Pass and redo their choice.
			To re-active a player who passes some trickery required.

			Define a special action that does how and hook it up.

			In states.inc.php add an action to mmultipleactiveplayer state to "unpass", lets call it "actionCancel"

			In ggg.action.php add action hook
			public function actionCancel() {
			self::setAjaxMode();
			$this->game->actionCancel();
			self::ajaxResponse();
			}

			In ggg.game.php add action handler
			function actionCancel() {
			$this->gamestate->checkPossibleAction('actionCancel');
			$this->gamestate->setPlayersMultiactive(array ($this->getCurrentPlayerId() ), 'error', false);
			}

			Finally to call this in client ggg.js you would do something like:
			<pre>
			onUpdateActionButtons: function(stateName, args) {
			if (this.isCurrentPlayerActive()) {
			// ...
			} else if (!this.isSpectator) { // player is NOT active but not spectatoe
			switch (stateName) {
			case 'playerTurnMuliPlayerState':
			this.addActionButton('button_unpass', _('Oh no!'), 'onUnpass');
			break;
			}
			}
			}

			onUnpass: function(e) {
			this.ajaxcall("/" + this.game_name + "/" + this.game_name + "/actionCancel.html", {}, this); // no checkAction!
			}
			</pre>

	=== Multi Step Interactions: Select Worker/Place Worker - Using Selection ===		=== Multi Step Interactions: Select Worker/Place Worker - Using Selection ===

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

2020-08-23T16:09:58Z

Inject images and styled html in the log

@@ Радок 241: / Радок 241: @@
                      text + "</span>";
 </pre>
 === Inject images and styled html in the log ===
@@ Радок 246: / Радок 280: @@
 '''Ingredients:''' ggg.js, ggg.game.php
-So you want nice pictures in the game log, what do you do? First idea that come to mind is to send html from php in notifications.
+So you want nice pictures in the game log, what do you do? First idea that come to mind is to send html from php in notifications (see method above).
 This is bad idea for many reasons
 * Its bad architecture, ui elements leak into server now you have to manage ui in many places
@@ Радок 369: / Радок 403: @@
                   args[key] = this.getTokenDiv('token_id', args);
+              }
 === High-Definition Graphics ===

Victoria La: /* Create all pieces statically */

2020-08-23T16:04:47Z

Create all pieces statically

← Папярэдн. версія		Версія ад 18:04, 23 жніўня 2020
Радок 49:		Радок 49:

	* Create ALL game pieces in html template (.tpl)		* Create ALL game pieces in html template (.tpl)
	* ALL pieces should have unique id, and it should be meaningful, i.e. ~~meeple_red_1d~~		* ALL pieces should have unique id, and it should be meaningful, i.e. meeple_red_1
	* Do not use inline styling		* Do not use inline styling
	* Id of player's specific pieces should use some sort of 'color' identification, since player id cannot be used in static layout, you can use english color name, hex 6 char value, or color "number" (1,2,3...)		* Id of player's specific pieces should use some sort of 'color' identification, since player id cannot be used in static layout, you can use english color name, hex 6 char value, or color "number" (1,2,3...)
	* Pieces should have separated class for its color, type, etc, so it can be easily styled in groups. In example below you now can style all meeples, all red meeples or all red tokens, or all "first" meeples		* Pieces should have separated class for its color, type, etc, so it can be easily styled in groups. In example below you now can style all meeples, all red meeples or all red tokens, or all "first" meeples

	in .tpl ~~file~~:		ggg.tpl:
	<pre>		<pre>
	<div id="home_red" class="home ~~red~~">		<div id="home_red" class="home_red home">
	<div id="meeple_red_1" class="meeple red n1"></div>		<div id="meeple_red_1" class="meeple red n1"></div>
	<div id="meeple_red_2" class="meeple red n2"></div>		<div id="meeple_red_2" class="meeple red n2"></div>
Радок 62:		Радок 62:
	</pre>		</pre>

	in .css ~~file~~:		ggg.css:

	<pre>		<pre>

Victoria La: /* Scale to fit for big boards */

2020-08-23T15:57:36Z

Scale to fit for big boards

← Папярэдн. версія		Версія ад 17:57, 23 жніўня 2020
Радок 204:		Радок 204:
	},		},
	</pre>		</pre>

			Note: this method does not seems to work to retina resolution displays, if you know better way let me know

	=== Dynamic tooltips ===		=== Dynamic tooltips ===

Victoria La: /* Accessing images from js */

2020-08-23T15:54:28Z

Accessing images from js

← Папярэдн. версія		Версія ад 17:54, 23 жніўня 2020
Радок 228:		Радок 228:

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

	<pre>		<pre>
Радок 238:		Радок 238:
	var my_help_img = "<img class='imgtext' src='" + g_themeurl + "img/layout/help_click.png' alt='action' /> <span class='tooltiptext'>" +		var my_help_img = "<img class='imgtext' src='" + g_themeurl + "img/layout/help_click.png' alt='action' /> <span class='tooltiptext'>" +
	text + "</span>";		text + "</span>";
	</pre>		</pre>

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

Victoria La: /* Multi Step Interactions: Select Worker/Place Worker - Using Client States */

2020-08-23T15:52:12Z

Multi Step Interactions: Select Worker/Place Worker - Using Client States

← Папярэдн. версія		Версія ад 17:52, 23 жніўня 2020
Радок 689:		Радок 689:

	== Assorted Stuff ==		== Assorted Stuff ==

			=== Multi Step Interactions: Select Worker/Place Worker - Using Selection ===

			'''Ingredients:''' ggg.js

			Simple way to implement something like that without extra states is to use "selection" mechanism. When user click on worker add some sort of class into that element i.e. 'selected' (which also have to have some indication by css i.e. outline).

			Than user can click on placement zone, you can use dojo.query for "selected" element and use it along with zone id to send data to server. If proper worker is not selected yet can give a error message using this.showMessage(...) function.

			Extra code required to properly cleanup selection between states

	=== Multi Step Interactions: Select Worker/Place Worker - Using Client States ===		=== Multi Step Interactions: Select Worker/Place Worker - Using Client States ===
Радок 732:		Радок 742:

	Code is available here [https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js sharedcode.js] (its using playerTurnPlayCubes and client_selectCubeLocation).		Code is available here [https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js sharedcode.js] (its using playerTurnPlayCubes and client_selectCubeLocation).


	=== Multi Step Interactions: Action Stack - Using Client States ===		=== Multi Step Interactions: Action Stack - Using Client States ===

Een: /* Use thematic fonts */ Font not online details

2020-06-11T14:32:18Z

Use thematic fonts: Font not online details

← Папярэдн. версія		Версія ад 16:32, 11 чэрвеня 2020
Радок 134:		Радок 134:
	</pre>		</pre>

			'''NB:''' if you need to include a font that's not available online, an extra action will be needed from an admin. Please include the font file(s) in your img directory, and mention it to admins when requesting your game to be moved to alpha.

	=== Use player color in template ===		=== Use player color in template ===

Bdrieu: Add CSS tricks

2020-05-12T21:01:16Z

Add CSS tricks

@@ Радок 435: / Радок 435: @@
+             }
 </pre>
 == Game Model and Database design ==

Laszlok: Undo revision 4230 by Laszlok ([[User talk:Laszlok|talk - because the build barfs on this syntax, even though browsers work just fine

2020-05-06T14:34:21Z

Undo revision 4230 by Laszlok ([[User talk:Laszlok|talk - because the build barfs on this syntax, even though browsers work just fine

← Папярэдн. версія		Версія ад 16:34, 6 мая 2020
Радок 274:		Радок 274:


	for (var ~~key of~~ keys) {		for ( var i in keys) {
			var key = keys[i];
	if (typeof args[key] == 'string') {		if (typeof args[key] == 'string') {
	args[key] = this.getTokenDiv(key, args);		args[key] = this.getTokenDiv(key, args);