Counter - Revision history

Thoun at 09:31, 14 January 2026

2026-01-14T09:31:53Z

← Older revision		Revision as of 09:31, 14 January 2026
Line 1:		Line 1:
	{{Studio_Framework_Navigation}}		{{Studio_Framework_Navigation}}

	This is very simple control that allow to set/get numeric value from inner html of div/span, and provides animation on from/to value. It is used for the built-in ~~scoreboard element scoreCtrl~~.		This is very simple control that allow to set/get numeric value from inner html of div/span, and provides animation on from/to value. It is used for the built-in score counter of the player panels.

	== Dependency ==		== Dependency ==

Thoun: /* Players panels */

2025-12-19T14:19:44Z

Players panels

← Older revision		Revision as of 14:19, 19 December 2025
Line 75:		Line 75:

	// Setting up players boards if needed		// Setting up players boards if needed
	var player_board_div = this.playerPanels.getElement(player_id);		var player_board_div = this.bga.playerPanels.getElement(player_id);
	player_board_div.insertAdjacentHTML('beforeend', this.getPlayerBoardTemplate(player));		player_board_div.insertAdjacentHTML('beforeend', this.getPlayerBoardTemplate(player));

Thoun: /* Players panels */

2025-12-16T09:54:16Z

Players panels

← Older revision		Revision as of 09:54, 16 December 2025
Line 57:		Line 57:

	<pre>		<pre>
	stone_counters: {},		stone_counters: {};
	getPlayerBoardTemplate~~: function~~(player) {
			getPlayerBoardTemplate(player) {
	return		return
	`<div class="cp_board">		`<div class="cp_board">
Line 64:		Line 65:
	<span id="stonecount_p${player.player_id}">0</span>		<span id="stonecount_p${player.player_id}">0</span>
	</div>`;		</div>`;
	},		}
	</pre>		</pre>

Line 74:		Line 75:

	// Setting up players boards if needed		// Setting up players boards if needed
	var player_board_div = this.~~getPlayerPanelElement~~(player_id);		var player_board_div = this.playerPanels.getElement(player_id);
	player_board_div.insertAdjacentHTML('beforeend', this.getPlayerBoardTemplate(player));		player_board_div.insertAdjacentHTML('beforeend', this.getPlayerBoardTemplate(player));

Line 83:		Line 84:
	</pre>		</pre>

	Often, you have to distinguish between the current player and other players. In this case, create another JS template (ex: getCurrentPlayerBoardTemplate) and use it where "player_id" is different than "this.~~player_id"~~.		Often, you have to distinguish between the current player and other players. In this case, create another JS template (ex: getCurrentPlayerBoardTemplate) and use it where <code>player_id</code> is different than <code>this.players.getCurrentPlayerId</code>.


	[[Category:Studio]]		[[Category:Studio]]

Thoun: /* API */

2025-12-16T09:53:07Z

API

@@ Line 47: / Line 47: @@
 const x = new ebg.counter()
 x.speed = 300; // to make it slower
 == Players panels ==

Thoun: /* Dependency */

2025-12-16T09:52:41Z

Dependency

← Older revision		Revision as of 09:52, 16 December 2025
Line 4:		Line 4:

	== Dependency ==		== Dependency ==
			The counter is loaded by default by BGA, as it is used for the score display, so you don't need to import it.
	~~Don't forget to add '''ebg/~~counter~~'''~~ as ~~a dependency (this should be standard in~~ the ~~new game template):~~

	~~// in your game js~~
	~~define([~~
	~~"dojo","dojo/_base/declare",~~
	~~"ebg/core/gamegui",~~
	~~"ebg/counter" /// <==== HERE]~~,

	== Setup a counter ==		== Setup a counter ==

Thoun at 10:22, 1 October 2025

2025-10-01T10:22:33Z

← Older revision		Revision as of 10:22, 1 October 2025
Line 29:		Line 29:

	== API ==		== API ==
	;create(target)		;create(target, settings?)
	:associate counter with existing target DOM element		:associate counter with existing target DOM element target is the DOM element or element id
			:settings can define:
			:* value: the initial value of the counter (null to disable)
			:* tableCounter: the name of the TableCounter on PHP side, to update automatically on change (see [[PlayerCounter and TableCounter]])
			:* playerCounter and playerId: the name of the PlayerCounter on PHP side, and the playerId it is associated to, to update automatically on change (see [[PlayerCounter and TableCounter]])
	;getValue()		;getValue()
	:return current value		:return current value

Thoun: /* Adding stuff to player's panel */

2025-05-06T12:44:14Z

Adding stuff to player's panel

← Older revision		Revision as of 12:44, 6 May 2025
Line 77:		Line 77:
	<pre>		<pre>
	stone_counters: {},		stone_counters: {},
	~~jstpl_player_board~~: function(player) {		getPlayerBoardTemplate: function(player) {
	return		return
	`<div class="cp_board">		`<div class="cp_board">
Line 94:		Line 94:
	// Setting up players boards if needed		// Setting up players boards if needed
	var player_board_div = this.getPlayerPanelElement(player_id);		var player_board_div = this.getPlayerPanelElement(player_id);
	~~dojo~~.~~place~~( ~~jstpl_player_board~~( player )~~, player_board_div~~ );		player_board_div.insertAdjacentHTML('beforeend', this.getPlayerBoardTemplate(player));

	// create counter per player		// create counter per player
Line 102:		Line 102:
	</pre>		</pre>

	Often, you have to distinguish between the current player and other players. In this case, create another JS template (ex: ~~jstpl_otherplayer_board~~) and use it where "player_id" is different than "this.player_id".		Often, you have to distinguish between the current player and other players. In this case, create another JS template (ex: getCurrentPlayerBoardTemplate) and use it where "player_id" is different than "this.player_id".


	[[Category:Studio]]		[[Category:Studio]]

Vagabond: Update example to avoid use of format_block(), and actually works; use getPlayerPanelElement() instead of using the overall playerboard div.

2024-10-27T16:37:16Z

Update example to avoid use of format_block(), and actually works; use getPlayerPanelElement() instead of using the overall playerboard div.

← Older revision		Revision as of 16:37, 27 October 2024
Line 5:		Line 5:
	== Dependency ==		== Dependency ==

	Don't forget to add '''ebg/counter''' as a dependency:		Don't forget to add '''ebg/counter''' as a dependency (this should be standard in the new game template):

	// in your game js		// in your game js
Line 71:		Line 71:
	=== Adding stuff to player's panel ===		=== Adding stuff to player's panel ===

	First, create a new JS template string in your template (tpl) file.		First, create a new JS template string function and variables to hold your counter(s) in your template (tpl) file.


	~~From the ''Gomoku'' example:~~

	<pre>		<pre>
	~~var~~ jstpl_player_board ~~= '\~~<div class="cp_board">\		stone_counters: {},
	<div id="stoneicon_p${id}" class="gmk_stoneicon gmk_stoneicon_${~~color~~}"></div><span id="stonecount_p${id}">0</span>\		jstpl_player_board: function(player) {
	</div>';		return
			`<div class="cp_board">
			<div id="stoneicon_p${player.player_id}" class="gmk_stoneicon gmk_stoneicon_${player.player_color}"></div>
			<span id="stonecount_p${player.player_id}">0</span>
			</div>`;
			},
	</pre>		</pre>

Line 84:		Line 89:

	<pre>		<pre>
	~~// Setting up player boards~~
	~~this.stone_counters={};~~
	for( var player_id in gamedatas.players ) {		for( var player_id in gamedatas.players ) {
	var player = gamedatas.players[player_id];		var player = gamedatas.players[player_id];

	// Setting up players boards if needed		// Setting up players boards if needed
	var player_board_div = $(~~'player_board_'+~~player_id);		var player_board_div = this.getPlayerPanelElement(player_id);
	dojo.place( ~~this.format_block~~(~~'jstpl_player_board',~~ player ), player_board_div );		dojo.place( jstpl_player_board( player ), player_board_div );

	// create counter per player		// create counter per player
	this.stone_counters[player_id]=new ebg.counter();		this.stone_counters[player_id] = new ebg.counter();
	this.stone_counters[player_id].create('stonecount_p'+player_id);		this.stone_counters[player_id].create( 'stonecount_p'+player_id );
	}		}
	</pre>		</pre>

GTSchemer at 23:02, 20 January 2023

2023-01-20T23:02:55Z

← Older revision		Revision as of 23:02, 20 January 2023
Line 1:		Line 1:
	{{Studio_Framework_Navigation}}		{{Studio_Framework_Navigation}}

	This is very simple control that allow to set/get numeric value from inner html of div/span, and provides animation on from/to value.		This is very simple control that allow to set/get numeric value from inner html of div/span, and provides animation on from/to value. It is used for the built-in scoreboard element scoreCtrl.

	== Dependency ==		== Dependency ==

Victoria La: /* API */

2022-10-09T03:13:56Z

API

← Older revision		Revision as of 03:13, 9 October 2022
Line 46:		Line 46:
	;disable()		;disable()
	:Sets the value to "-". Note it just changes display value once, it does not actually disable it, i.e. if you set it again, it will be shown again		:Sets the value to "-". Note it just changes display value once, it does not actually disable it, i.e. if you set it again, it will be shown again

			;speed
			:Duration of the animation, default is 100
			const x = new ebg.counter()
			x.speed = 300; // to make it slower


Line 51:		Line 56:
	<pre>		<pre>
	declare class Counter {		declare class Counter {
			speed: number; // duration of the animation, default is 100ms

	create(target: string): void; // associate counter with existing target DOM element		create(target: string): void; // associate counter with existing target DOM element
	getValue(): number; // return current value		getValue(): number; // return current value