You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.1 KiB
44 lines
1.1 KiB
import Component from '../../rivets/Component.js'
|
|
import { COLORS, PLAYER } from './grid.component.js'
|
|
|
|
// A single cell in the Connect-4 grid
|
|
export default class GridCell extends Component {
|
|
static selector() { return 'app-grid-cell' }
|
|
static template() { return `
|
|
<div class="cell-outer">
|
|
<div class="cell-inner" rv-background="color"></div>
|
|
</div>
|
|
` }
|
|
|
|
constructor(el, data) {
|
|
super(el, data)
|
|
|
|
// This cell's column number
|
|
this.column_number = data.columnNumber;
|
|
|
|
// The player occupying this cell
|
|
this.player = PLAYER.none;
|
|
|
|
// True if a player occupies this cell
|
|
this.occupied = false;
|
|
|
|
// The color of this cell
|
|
this.color = COLORS.empty;
|
|
|
|
this.parent_row = data.parentRow;
|
|
this.parent_row.register_cell(this, this.column_number)
|
|
}
|
|
|
|
// Change the player that occupies this cell - default none
|
|
set_player(player = PLAYER.none) {
|
|
this.player = player;
|
|
this.occupied = player !== PLAYER.none;
|
|
this.color = (player === PLAYER.one ? COLORS.player_1 : (player === PLAYER.two ? COLORS.player_2 : COLORS.empty))
|
|
}
|
|
|
|
// Returns true if this cell is empty
|
|
is_available() {
|
|
return !this.occupied
|
|
}
|
|
}
|