import {Component} from '../../lib/vues6.js'
import game_service from '../services/GameState.service.js'
import {Player, GameState} from '../module/util.js'
const template = `
|
{{ current_player === Player.One ? '➜ ' : '' }}Player 1{{ winning_player === Player.One ? ' ★' : '' }} |
{{player_one_score}} |
{{player_one_progress * 100}}% |
{{ current_player === Player.Two ? '➜ ' : '' }}Player 2{{ winning_player === Player.Two ? ' ★' : '' }} |
{{player_two_score}} |
{{player_two_progress * 100}}% |
`
/**
* A component which represents the programmable scoreboard.
* @extends Component
*/
class ScoreBoardComponent extends Component {
static get selector() { return 'app-scoreboard' }
static get template() { return template }
static get props() { return [] }
/**
* The score of player one.
* @type {number}
*/
player_one_score = 0
/**
* The score of player two.
* @type {number}
*/
player_two_score = 0
/**
* The progress of player one, as a decimal.
* @type {number}
*/
player_one_progress = 0
/**
* The progress of player two, as a decimal.
* @type {number}
*/
player_two_progress = 0
/**
* The current player.
* @type {string|undefined}
*/
current_player = undefined
/**
* The winning player.
* @type {string|undefined}
*/
winning_player = undefined
Player = Player
/**
* Called when the component is initialized.
* @return {Promise}
*/
async vue_on_create() {
game_service.on_state_change(() => {
this.update()
})
this.update()
}
/**
* Fetch new data from the game service.
*/
update() {
// here is where you should fetch the data from the game service and update variables on the class
this.player_one_score = game_service.get_player_score(Player.One)
this.player_two_score = game_service.get_player_score(Player.Two)
this.player_one_progress = game_service.get_progress(Player.One)
this.player_two_progress = game_service.get_progress(Player.Two)
if ( game_service.get_game_state() !== GameState.PlayerVictory )
this.current_player = game_service.get_current_player()
else {
this.current_player = undefined
this.winning_player = game_service.get_current_player()
}
}
}
export default ScoreBoardComponent