2019-03-10 00:29:15 +01:00
|
|
|
class Subgrid {
|
|
|
|
constructor(n, sub_x, sub_y, subgrid_container_div, tile_width, tile_height, ground_color) {
|
2019-03-06 12:11:43 +01:00
|
|
|
this.n = n;
|
|
|
|
this.subgrid_container_div = subgrid_container_div;
|
|
|
|
this.tile_height = tile_height;
|
|
|
|
this.tile_width = tile_width;
|
|
|
|
|
|
|
|
this.cells = [];
|
2019-03-07 17:51:19 +01:00
|
|
|
this.won_player = null;
|
2019-03-10 00:29:15 +01:00
|
|
|
this.draw = false;
|
|
|
|
this.clicked_fields = 0;
|
2019-03-06 12:11:43 +01:00
|
|
|
|
|
|
|
this.sub_x = sub_x;
|
|
|
|
this.sub_y = sub_y;
|
|
|
|
|
|
|
|
this.ground_color = ground_color;
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
this.bgcolor = null;
|
|
|
|
|
2019-03-06 12:11:43 +01:00
|
|
|
this.create();
|
2019-03-07 10:38:08 +01:00
|
|
|
this.block();
|
2019-03-06 12:11:43 +01:00
|
|
|
|
|
|
|
console.log("new subgrid created");
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
create() {
|
|
|
|
var x, y;
|
|
|
|
for (y = 0; y < this.n; y++) {
|
2019-03-06 12:11:43 +01:00
|
|
|
var div_row = this.subgrid_container_div.appendChild(document.createElement("div"));
|
|
|
|
var row = [];
|
2019-03-10 00:29:15 +01:00
|
|
|
for (x = 0; x < this.n; x++) {
|
2019-03-06 12:11:43 +01:00
|
|
|
var div_button = div_row.appendChild(document.createElement("div"));
|
|
|
|
div_button.className = "grid-tile";
|
|
|
|
var button = document.createElement("button");
|
|
|
|
button.className = "grid-button";
|
|
|
|
div_button.appendChild(button);
|
|
|
|
|
|
|
|
var b_x = x;
|
|
|
|
var b_y = y;
|
|
|
|
var b_w = this.tile_width;
|
|
|
|
var b_h = this.tile_height;
|
|
|
|
|
|
|
|
row.push(new Tile(b_x, b_y, b_w, b_h, button, this.ground_color, div_button));
|
2019-03-10 00:29:15 +01:00
|
|
|
|
|
|
|
row[x].register_click_callback((i, j) => this.click_listener(i, j));
|
|
|
|
row[x].register_unlock_request_callback((i, j) => this.unlock_request_listener(i, j));
|
|
|
|
|
2019-03-06 12:11:43 +01:00
|
|
|
}
|
|
|
|
this.cells.push(row);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
register_click_callback(func) {
|
2019-03-06 12:11:43 +01:00
|
|
|
this.click_callback = func;
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
click_listener(x, y) {
|
|
|
|
|
|
|
|
this.check_win(x, y);
|
|
|
|
this.clicked_fields++;
|
|
|
|
this.check_draw();
|
2019-03-07 19:14:29 +01:00
|
|
|
|
|
|
|
this.click_callback(this.sub_x, this.sub_y, x, y);
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
player_change_listener(player) {
|
|
|
|
var x, y;
|
|
|
|
for (y = 0; y < this.n; y++) {
|
|
|
|
for (x = 0; x < this.n; x++) {
|
2019-03-07 19:14:29 +01:00
|
|
|
this.cells[y][x].player_change_listener(player);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
unlock_request_listener(x, y) {
|
2019-03-07 19:14:29 +01:00
|
|
|
// TODO: unused so far
|
|
|
|
|
|
|
|
//return this.unlock_request_callback(x,y);
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
is_won() {
|
2019-03-07 19:14:29 +01:00
|
|
|
return this.won_player != null;
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
is_draw() {
|
|
|
|
return this.draw;
|
|
|
|
}
|
|
|
|
|
|
|
|
get_won_player() {
|
2019-03-07 19:14:29 +01:00
|
|
|
return this.won_player;
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
check_win(x, y) {
|
2019-03-07 17:51:19 +01:00
|
|
|
// check whether this subfield is won
|
2019-03-10 00:29:15 +01:00
|
|
|
|
|
|
|
if (this.won_player == null) {
|
2019-03-07 17:51:19 +01:00
|
|
|
var i;
|
|
|
|
var player = this.cells[y][x].get_activated_player();
|
|
|
|
|
|
|
|
// check column
|
|
|
|
var is_col = true;
|
2019-03-10 00:29:15 +01:00
|
|
|
for (i = 0; i < this.n; i++) {
|
|
|
|
if (!this.cells[i][x].get_is_activated() || player.get_id() != this.cells[i][x].get_activated_player().get_id()) {
|
2019-03-07 17:51:19 +01:00
|
|
|
is_col = false;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// check row
|
|
|
|
var is_row = true;
|
2019-03-10 00:29:15 +01:00
|
|
|
for (i = 0; i < this.n; i++) {
|
|
|
|
if (!this.cells[y][i].get_is_activated() || player.get_id() != this.cells[y][i].get_activated_player().get_id()) {
|
2019-03-07 17:51:19 +01:00
|
|
|
is_row = false;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// check diag:
|
|
|
|
|
|
|
|
// main diag
|
|
|
|
var is_main_diag = false;
|
2019-03-10 00:29:15 +01:00
|
|
|
if (x == y) {
|
2019-03-07 17:51:19 +01:00
|
|
|
is_main_diag = true;
|
2019-03-10 00:29:15 +01:00
|
|
|
for (i = 0; i < this.n; i++) {
|
|
|
|
if (!this.cells[i][i].get_is_activated() || player.get_id() != this.cells[i][i].get_activated_player().get_id()) {
|
2019-03-07 17:51:19 +01:00
|
|
|
is_main_diag = false;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// secundary diag
|
|
|
|
var is_sec_diag = false;
|
2019-03-10 00:29:15 +01:00
|
|
|
if (x + y == this.n - 1) {
|
2019-03-07 17:51:19 +01:00
|
|
|
is_sec_diag = true;
|
2019-03-10 00:29:15 +01:00
|
|
|
for (i = 0; i < this.n; i++) {
|
|
|
|
if (!this.cells[i][this.n - i - 1].get_is_activated() || player.get_id() != this.cells[i][this.n - i - 1].get_activated_player().get_id()) {
|
2019-03-07 17:51:19 +01:00
|
|
|
is_sec_diag = false;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
if (is_row || is_col || is_main_diag || is_sec_diag) {
|
2019-03-07 17:51:19 +01:00
|
|
|
this.won_player = player;
|
2019-03-10 00:29:15 +01:00
|
|
|
this.bgcolor = player.get_color_values();
|
2019-03-07 17:51:19 +01:00
|
|
|
}
|
|
|
|
}
|
2019-03-06 12:11:43 +01:00
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
check_draw() {
|
|
|
|
this.draw = (!(this.clicked_fields < this.n * this.n));
|
|
|
|
}
|
|
|
|
|
|
|
|
activate_all() {
|
|
|
|
var x, y;
|
|
|
|
for (y = 0; y < this.n; y++) {
|
|
|
|
for (x = 0; x < this.n; x++) {
|
2019-03-06 12:11:43 +01:00
|
|
|
this.cells[y][x].activate();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
deactivate_all() {
|
|
|
|
var x, y;
|
|
|
|
for (y = 0; y < this.n; y++) {
|
|
|
|
for (x = 0; x < this.n; x++) {
|
2019-03-06 12:11:43 +01:00
|
|
|
this.cells[y][x].deactivate();
|
|
|
|
}
|
|
|
|
}
|
2019-03-07 19:14:29 +01:00
|
|
|
this.won_player = null;
|
2019-03-10 00:29:15 +01:00
|
|
|
this.draw = false;
|
|
|
|
this.clicked_fields = 0;
|
2019-03-07 17:51:19 +01:00
|
|
|
this.subgrid_container_div.style.backgroundColor = ""; // reset to css color
|
2019-03-06 12:11:43 +01:00
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
block() {
|
|
|
|
var x, y;
|
|
|
|
for (y = 0; y < this.n; y++) {
|
|
|
|
for (x = 0; x < this.n; x++) {
|
2019-03-06 12:11:43 +01:00
|
|
|
this.cells[y][x].lock();
|
|
|
|
}
|
|
|
|
}
|
2019-03-07 10:38:08 +01:00
|
|
|
this.subgrid_container_div.className = "subgrid-container";
|
2019-03-10 00:29:15 +01:00
|
|
|
if (this.is_won())
|
|
|
|
{
|
|
|
|
var c = this.bgcolor;
|
|
|
|
this.subgrid_container_div.style.backgroundColor = "rgba(" + c.r + "," + c.g + "," + c.b + ", 0.2)";
|
|
|
|
}
|
2019-03-06 12:11:43 +01:00
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
unblock() {
|
|
|
|
var x, y;
|
|
|
|
for (y = 0; y < this.n; y++) {
|
|
|
|
for (x = 0; x < this.n; x++) {
|
2019-03-06 12:11:43 +01:00
|
|
|
this.cells[y][x].unlock();
|
|
|
|
}
|
|
|
|
}
|
2019-03-07 10:38:08 +01:00
|
|
|
this.subgrid_container_div.className = "subgrid-container-activated";
|
2019-03-10 00:29:15 +01:00
|
|
|
if (this.is_won())
|
|
|
|
{
|
|
|
|
var c = this.bgcolor;
|
|
|
|
this.subgrid_container_div.style.backgroundColor = "rgba(" + c.r + "," + c.g + "," + c.b + ", 0.4)";
|
|
|
|
}
|
2019-03-06 12:11:43 +01:00
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
on_screen_orientation_change(tile_w, tile_h) {
|
2019-03-06 12:11:43 +01:00
|
|
|
this.tile_width = tile_w;
|
|
|
|
this.tile_h = tile_h;
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
var x, y;
|
|
|
|
for (y = 0; y < this.n; y++) {
|
|
|
|
for (x = 0; x < this.n; x++) {
|
2019-03-06 12:11:43 +01:00
|
|
|
this.cells[y][x].update_css_transform(tile_w, tile_h);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|