Game interface logic: Game.js - Revision history

Thoun: /* User preferences */

2026-10-12T09:02:36Z

User preferences

← Older revision		Revision as of 11:02, 12 October 2026
Line 1,858:		Line 1,858:
	;'''this.bga.statusBar.removeActionButtons()'''		;'''this.bga.statusBar.removeActionButtons()'''
	Removes all buttons from title bar		Removes all buttons from title bar

			==Table options ==
			'''this.bga.tableOptions.get(pref_id)'''

			Return the value of a table option.

	==User preferences ==		==User preferences ==

N e s s u n o: added parameters to getPlayerNoById and getPlayerIdByNo

2026-07-17T09:14:57Z

added parameters to getPlayerNoById and getPlayerIdByNo

← Older revision		Revision as of 11:14, 17 July 2026
Line 262:		Line 262:
	Return the player avatar url. The size of the avatar can be 32, 50, 92 or 184 (default). Set playerId 0 to get the default avatar.		Return the player avatar url. The size of the avatar can be 32, 50, 92 or 184 (default). Set playerId 0 to get the default avatar.

	'''this.bga.players.getPlayerNoById(): number \| null'''		'''this.bga.players.getPlayerNoById(playerId): number \| null'''
	Return the no of the player, by id		Return the no of the player, by id

	'''this.bga.players.getPlayerIdByNo(): number'''		'''this.bga.players.getPlayerIdByNo(playerNo): number'''
	Return the id of the player, by no		Return the id of the player, by no

Thoun: /* Other useful stuff */

2026-07-07T12:34:24Z

Other useful stuff

← Older revision		Revision as of 14:34, 7 July 2026
Line 1,909:		Line 1,909:
	==Other useful stuff ==		==Other useful stuff ==

	;'''this.bga.gameui.onScreenWidthChange()'''		;'''this.bga.gameui.onScreenWidthChange = () => this.myWidthChangeCallback()'''
	:This function can be overridden in your game to manage some resizing on the client side when the browser window is resized. This function is also triggered at load time, so it can be used to adapt to the :viewport size at the start of the game too.		:This function can be overridden in your game to manage some resizing on the client side when the browser window is resized. This function is also triggered at load time, so it can be used to adapt to the :viewport size at the start of the game too.

Thoun: /* Accessing Players Information */

2026-06-24T09:32:50Z

Accessing Players Information

← Older revision		Revision as of 11:32, 24 June 2026
Line 236:		Line 236:

	'''this.bga.players.getFormattedPlayerName(playerId, params?): string'''		'''this.bga.players.getFormattedPlayerName(playerId, params?): string'''
	Get the HTML code to display the player name, in bold, with color ~~(and color_back if needed)~~		Get the HTML code to display the player name, in bold, with color.
	params is optional, { replaceByYou: true } will display a colored "You" instead of the colored player name.		params is optional, { replaceByYou: true } will display a colored "You" instead of the colored player name.

Thoun: /* Generic Dialogs */

2026-05-29T08:00:56Z

Generic Dialogs

Thoun: /* Generic Dialogs */

2026-05-29T07:58:37Z

Generic Dialogs

← Older revision		Revision as of 09:58, 29 May 2026
Line 1,359:		Line 1,359:

	// Create the HTML of my dialog.		// Create the HTML of my dialog.
	~~// The best practice here is to use [[Game_layout:_view_and_template:_yourgamename.view.php_and_yourgamename_yourgamename.tpl#Javascript_templates\|Javascript templates]]~~		const html = `My template with ${arg1}
	~~var html~~ = ~~this.gameui.format_block~~( '~~jstpl_myDialogTemplate~~'~~, {~~		<button type="button" id="ok-btn" class="bgabutton bgabutton_blue">${_('OK')}</button>
	~~arg1: myArg1,~~		`;
	~~arg2: myArg2,~~
	~~...~~
	~~} )~~;

	// Show the dialog		// Show the dialog
Line 1,372:		Line 1,369:
	// Now that the dialog has been displayed, you can connect your method to some dialog elements		// Now that the dialog has been displayed, you can connect your method to some dialog elements
	// Example, if you have an "OK" button in the HTML of your dialog:		// Example, if you have an "OK" button in the HTML of your dialog:
	~~dojo~~.~~connect($~~('~~my_ok_button~~'), '~~onclick~~'~~, this~~, (~~event~~) => {		document.getElementById('ok-btn').addEventListener('click', () => this.myDlg.destroy());
	~~event.preventDefault();~~
	this.myDlg.destroy();
	});

	If necessary, you can remove the default top right corner 'close' icon, or replace the function called when it is clicked:		If necessary, you can remove the default top right corner 'close' icon, or replace the function called when it is clicked:

Thoun at 08:43, 20 May 2026

2026-05-20T08:43:11Z

← Older revision		Revision as of 10:43, 20 May 2026
Line 1,558:		Line 1,558:

	Very often, you have to distinguish current player and others players. In this case, you just have to change the content of the <code>html</code> variable when "player_id" is different than "this.bga.players.getCurrentPlayerId()".		Very often, you have to distinguish current player and others players. In this case, you just have to change the content of the <code>html</code> variable when "player_id" is different than "this.bga.players.getCurrentPlayerId()".

			'''this.bga.playerPanels.getElementByNo(playerNo: number): HTMLElement'''

			Same as getElement but using playerNo instead of playerId.

	=== Adding a player panel for an automata ===		=== Adding a player panel for an automata ===
Line 1,615:		Line 1,619:

	To create other counters on the player panel, please use the "ebg/counter" library, documented at [[Counter]].		To create other counters on the player panel, please use the "ebg/counter" library, documented at [[Counter]].

			'''this.bga.playerPanels.getScoreCounterByNo(playerNo: number): Counter'''

			Same as getScoreCounter but using playerNo instead of playerId.

	== BGA GUI components ==		== BGA GUI components ==

Thoun at 08:59, 29 April 2026

2026-04-29T08:59:52Z

← Older revision		Revision as of 10:59, 29 April 2026
Line 205:		Line 205:
	'''this.bga.players.getCurrentPlayerId(): number'''		'''this.bga.players.getCurrentPlayerId(): number'''
	id of the player who is looking at the game. The player may not be part of the game (i.e. spectator)		id of the player who is looking at the game. The player may not be part of the game (i.e. spectator)

			'''this.bga.players.getCurrentPlayerNo(): number \| null'''
			no of the player who is looking at the game. The player may not be part of the game (i.e. spectator), in this case the result is null.

	'''this.bga.players.isCurrentPlayerSpectator(): boolean'''		'''this.bga.players.isCurrentPlayerSpectator(): boolean'''
Line 222:		Line 225:
	if (this.bga.players.isCurrentPlayerActive()) ...		if (this.bga.players.isCurrentPlayerActive()) ...

	'''this.bga.players.getActivePlayerId(): number'''		'''this.bga.players.getActivePlayerId(): number \| null;'''
	Return the ID of the active player, or null if we are not in an ACTIVE_PLAYER type state.		Return the ID of the active player, or null if we are not in an ACTIVE_PLAYER type state.
	if (args.player_id == this.bga.players.getActivePlayerId()) ...		if (args.player_id == this.bga.players.getActivePlayerId()) ...

			'''this.bga.players.getActivePlayerNo(): number \| null;'''
			Return the no of the active player, or null if we are not in an ACTIVE_PLAYER type state.

	'''this.bga.players.getActivePlayerIds(): number[]'''		'''this.bga.players.getActivePlayerIds(): number[]'''
Line 241:		Line 247:
	Note: be careful when you update this data structurally, many framework functions expect data to be certain way and they will break if they see something else.		Note: be careful when you update this data structurally, many framework functions expect data to be certain way and they will break if they see something else.

	'''this.bga.players.~~getPlayer~~(playerId): object'''		'''this.bga.players.getPlayerById(playerId): object'''
	Return the player data stored in gamedatas.players. Can be undefined, if the player isn't at this table (spectator).		Return the player data stored in gamedatas.players. Can be undefined, if the player isn't at this table (spectator).

			'''this.bga.players.getPlayerByNo(playerNo): object'''
			Return the player data stored in gamedatas.players.

	'''this.bga.players.getActivePlayer(): object'''		'''this.bga.players.getActivePlayer(): object'''
Line 252:		Line 261:
	'''this.bga.players.getPlayerAvatarUrl(playerId, size): string'''		'''this.bga.players.getPlayerAvatarUrl(playerId, size): string'''
	Return the player avatar url. The size of the avatar can be 32, 50, 92 or 184 (default). Set playerId 0 to get the default avatar.		Return the player avatar url. The size of the avatar can be 32, 50, 92 or 184 (default). Set playerId 0 to get the default avatar.

			'''this.bga.players.getPlayerNoById(): number \| null'''
			Return the no of the player, by id

			'''this.bga.players.getPlayerIdByNo(): number'''
			Return the id of the player, by no

	== Accessing and manipulating the DOM ==		== Accessing and manipulating the DOM ==

Thoun: /* Accessing Players Information */

2026-04-15T12:35:16Z

Accessing Players Information

← Older revision		Revision as of 14:35, 15 April 2026
Line 229:		Line 229:
	Return an array with the IDs of players who are currently active (or an empty array if there are none).		Return an array with the IDs of players who are currently active (or an empty array if there are none).

	'''this.bga.players.getFormattedPlayerName(playerId): string'''		'''this.bga.players.getFormattedPlayerName(playerId, params?): string'''
	Get the HTML code to display the player name, in bold, with color (and color_back if needed)		Get the HTML code to display the player name, in bold, with color (and color_back if needed)
			params is optional, { replaceByYou: true } will display a colored "You" instead of the colored player name.

	'''this.gamedatas: object'''		'''this.gamedatas: object'''

Epsilon Theta: /* Notifications */ Removed comma and added line break for readability.

2026-04-04T21:20:12Z

Notifications: Removed comma and added line break for readability.

← Older revision		Revision as of 23:20, 4 April 2026
Line 885:		Line 885:
	setupNotifications: function() {		setupNotifications: function() {
	this.bga.notifications.setupPromiseNotifications();		this.bga.notifications.setupPromiseNotifications();
	},		}

	notif_playedCard: async function(args) {		notif_playedCard: async function(args) {
	await this.getPlayerTable(args.playerId).playCard(args.card);		await this.getPlayerTable(args.playerId).playCard(args.card);

← Older revision		Revision as of 10:00, 29 May 2026
Line 1,353:		Line 1,353:

	// Create the new dialog over the play zone. You should store the handler in a member variable to access it later		// Create the new dialog over the play zone. You should store the handler in a member variable to access it later
	~~this.~~myDlg = new ebg.popindialog();		const myDlg = new ebg.popindialog();
	~~this.~~myDlg.create( 'myDialogUniqueId' );		myDlg.create( 'myDialogUniqueId' );
	~~this.~~myDlg.setTitle( _("my dialog title to translate") );		myDlg.setTitle( _("my dialog title to translate") );
	~~this.~~myDlg.setMaxWidth( 500 ); // Optional		myDlg.setMaxWidth( 500 ); // Optional

	// Create the HTML of my dialog.		// Create the HTML of my dialog.
Line 1,364:		Line 1,364:

	// Show the dialog		// Show the dialog
	~~this.~~myDlg.setContent( html ); // Must be set before calling show() so that the size of the content is defined before positioning the dialog		myDlg.setContent( html ); // Must be set before calling show() so that the size of the content is defined before positioning the dialog
	~~this.~~myDlg.show();		myDlg.show();

	// Now that the dialog has been displayed, you can connect your method to some dialog elements		// Now that the dialog has been displayed, you can connect your method to some dialog elements
	// Example, if you have an "OK" button in the HTML of your dialog:		// Example, if you have an "OK" button in the HTML of your dialog:
	document.getElementById('ok-btn').addEventListener('click', () => ~~this.~~myDlg.destroy());		document.getElementById('ok-btn').addEventListener('click', () => myDlg.destroy());

	If necessary, you can remove the default top right corner 'close' icon, or replace the function called when it is clicked:		If necessary, you can remove the default top right corner 'close' icon, or replace the function called when it is clicked:
	// Removes the default close icon		// Removes the default close icon
	~~this.~~myDlg.hideCloseIcon();		myDlg.hideCloseIcon();

	// Replace the function call when it's clicked		// Replace the function call when it's clicked
	~~this.~~myDlg.replaceCloseCallback((event) => { ... });		myDlg.replaceCloseCallback((event) => { ... });

	=== Scoring dialogs ===		=== Scoring dialogs ===