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.
42 lines
1.0 KiB
42 lines
1.0 KiB
import Component from '../../rivets/Component.js'
|
|
import { bindable } from '../../rivets/helpers.js'
|
|
|
|
// Component for the slots at the top of the Connect-4 grid
|
|
export default class GridSlots extends Component {
|
|
static selector() { return 'app-grid-slots' }
|
|
static template() { return `
|
|
<div class="grid-slots-container">
|
|
<div class="grid-slot-outer" rv-each-column="columns" rv-on-click="column.on_click">
|
|
<div class="grid-slot-inner"></div>
|
|
</div>
|
|
</div>
|
|
` }
|
|
|
|
columns = []
|
|
|
|
constructor(el, data) {
|
|
const { nColumns, parentGrid } = data
|
|
super(el, data)
|
|
|
|
this.parent_grid = parentGrid
|
|
|
|
// Populate the columns in this object
|
|
this.columns = Array(8).fill().map((x,i) => this.column_state(i));
|
|
}
|
|
|
|
// Called when a column is clicked - pass the event up
|
|
on_column_clicked(column_number) {
|
|
if ( this.parent_grid.allow_drop )
|
|
this.parent_grid.on_drop(column_number)
|
|
}
|
|
|
|
// Get the state object for a single column
|
|
column_state(column_number) {
|
|
return {
|
|
on_click: () => {
|
|
this.on_column_clicked(column_number)
|
|
}
|
|
}
|
|
}
|
|
}
|