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 `
` }
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)
}
}
}
}