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}}% |
`
export default class ScoreBoardComponent extends Component {
static get selector() { return 'app-scoreboard' }
static get template() { return template }
static get props() { return [] }
player_one_score = 0
player_two_score = 0
player_one_progress = 0
player_two_progress = 0
current_player = undefined
winning_player = undefined
Player = Player
async vue_on_create() {
game_service.on_state_change(() => {
this.update()
})
this.update()
}
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()
}
}
}