This is a documentation for Board Game Arena: play board games online !
BgaScoreSheet: Difference between revisions
Jump to navigation
Jump to search
(Created page with "{{Studio_Framework_Navigation}} '''[https://x.boardgamearena.net/data/game-libs/bga-score-sheet/1.x/demo/index.html Demo] [https://x.boardgamearena.net/data/game-libs/bga-score-sheet/1.x/docs/index.html Doc]''' == Overview == '''bga-score-sheet''' is a javascript component to help you display an animated score sheet at the end of the game. == Usage == Load the lib: <pre> define([ "dojo","dojo/_base/declare", "ebg/core/gamegui", "ebg/counter", getLibUr...") |
No edit summary |
||
| Line 77: | Line 77: | ||
The endScores object sent on the notification should look like this : | The endScores object sent on the notification should look like this : | ||
<pre> | <pre> | ||
{ | function getEndScores(): array { | ||
156463 | // this would be filled dynamically on your game, but should have the shape of this static example | ||
$endScores = [ | |||
156463 => [ // key is player id | |||
'conquest-cards' => 18, // the score code must match the entry name | |||
'politics-cards' => 4, | |||
'diplomacy-cards' => 12, | |||
'total' => 34 | |||
], | |||
278971 => [ | |||
'conquest-cards' => 31, | |||
'politics-cards' => 7, | |||
}, | 'diplomacy-cards' => 5, | ||
'total': 41 | |||
], | |||
]; | |||
return $endScores; | |||
} | |||
// on your end score state | |||
function stEndScore(): void { | |||
$this->notify->all('endScores', '', [ 'endScores' => $this->getEndScores() ]); | |||
} | |||
// to display the end scores on refresh, when the game is already over | |||
function getAllDatas(): array { | |||
// all your setup here | |||
$isEndScore = intval($this->gamestate->state_id()) >= ST_END_SCORE; | |||
$result['endScores'] = $isEndScore ? $this->getEndScores() : null; | |||
} | } | ||
</pre> | </pre> | ||
Revision as of 08:30, 19 June 2025
Overview
bga-score-sheet is a javascript component to help you display an animated score sheet at the end of the game.
Usage
Load the lib:
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
getLibUrl('bga-score-sheet', '1.x'),
],
function (dojo, declare, gamegui, counter, BgaScoreSheet) { // note that the index of `BgaScoreSheet` must match the index of the define array
At the end of your game setup:
this.scoreSheet = new BgaScoreSheet.ScoreSheet(
document.getElementById(`my-score-sheet`), // an empty div on your template to place the score sheet on
{
animationsActive: () => game.bgaAnimationsActive(), // so the animation doesn't trigger on replay fast mode
playerNameWidth: 80,
playerNameHeight: 30,
entryLabelWidth: 120,
entryLabelHeight: 20,
classes: 'score-sheet-background',
players: gamedatas.players,
entries: [
{
property: 'conquest-cards',
label: _('Conquest cards'),
labelClasses: 'entries-label',
},
{
property: 'politics-cards',
label: _('Politics cards'),
labelClasses: 'entries-label',
},
{
property: 'diplomacy-cards',
label: _('Diplomacy cards'),
labelClasses: 'entries-label',
},
{
property: 'total',
label: _('Total'),
labelClasses: 'entries-label',
scoresClasses: 'total',
width: 80,
height: 40,
},
],
scores: gamedatas.scores, // to defined if the game state is 99, else null, so the score displays directly on reload when the game is ended. If unset, the score sheet will be hidden by default.
onScoreDisplayed: (property, playerId, score) => { // if you want to do something when a score is revealed
if (property === 'total') {
this.scoreCtrl[playerId].setValue(score);
}
},
}
);
On the notification sending the end score details (supposing you use bgaSetupPromiseNotifications for async notifs) :
async notif_endScores(args: NotifEndScoresArgs) {
// setting scores will make the score sheet visible if it isn't already
await this.scoreSheet.setScores(args.endScores, {
startBy: this.getPlayerId()
});
}
The endScores object sent on the notification should look like this :
function getEndScores(): array {
// this would be filled dynamically on your game, but should have the shape of this static example
$endScores = [
156463 => [ // key is player id
'conquest-cards' => 18, // the score code must match the entry name
'politics-cards' => 4,
'diplomacy-cards' => 12,
'total' => 34
],
278971 => [
'conquest-cards' => 31,
'politics-cards' => 7,
'diplomacy-cards' => 5,
'total': 41
],
];
return $endScores;
}
// on your end score state
function stEndScore(): void {
$this->notify->all('endScores', '', [ 'endScores' => $this->getEndScores() ]);
}
// to display the end scores on refresh, when the game is already over
function getAllDatas(): array {
// all your setup here
$isEndScore = intval($this->gamestate->state_id()) >= ST_END_SCORE;
$result['endScores'] = $isEndScore ? $this->getEndScores() : null;
}
Versioning
The lib is using semver, so you can require 1.x to be sure to have the last fixes without risking a breaking change. Any breaking change will be noted on the Changelog section.
Changelog
1.0.0: Initial version