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