44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
|
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
|
||
|
}
|
||
|
}
|