2019-03-07 10:38:08 +01:00
|
|
|
class Sidebar
|
|
|
|
{
|
2019-03-10 00:29:15 +01:00
|
|
|
constructor(create_game_container, setting_container, control_container, info_container, game_manager)
|
2019-03-07 10:38:08 +01:00
|
|
|
{
|
|
|
|
this.create_game_container = create_game_container;
|
2019-03-10 00:29:15 +01:00
|
|
|
this.setting_container = setting_container;
|
2019-03-07 10:38:08 +01:00
|
|
|
this.control_container = control_container;
|
|
|
|
this.info_container = info_container;
|
|
|
|
|
|
|
|
this.game_manager = game_manager;
|
|
|
|
|
|
|
|
this.fill_containers();
|
|
|
|
this.bind_events();
|
|
|
|
|
|
|
|
this.activate_create_game();
|
2019-03-10 00:29:15 +01:00
|
|
|
this.activate_setting();
|
|
|
|
this.activate_info();
|
2019-03-07 10:38:08 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
create_button(text)
|
|
|
|
{
|
|
|
|
var b = document.createElement("button");
|
|
|
|
b.className = "sidebar-button";
|
|
|
|
b.appendChild(document.createTextNode(text));
|
|
|
|
return b;
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
create_input(text)
|
|
|
|
{
|
|
|
|
var i = document.createElement("input");
|
|
|
|
i.className = "sidebar-input";
|
|
|
|
i.type = "text";
|
|
|
|
i.value = text;
|
|
|
|
return i;
|
|
|
|
}
|
|
|
|
|
2019-03-07 10:38:08 +01:00
|
|
|
create_label(text)
|
|
|
|
{
|
|
|
|
var l = document.createElement("label");
|
|
|
|
l.className = "sidebar-label";
|
|
|
|
l.innerHTML = text;
|
|
|
|
return l;
|
|
|
|
}
|
|
|
|
|
|
|
|
fill_containers()
|
|
|
|
{
|
|
|
|
|
|
|
|
// create new game area:
|
2019-03-10 00:29:15 +01:00
|
|
|
this.create_game_container.appendChild(this.create_label("Choose game type"));
|
2019-03-07 10:38:08 +01:00
|
|
|
this.b_local = this.create_button("local game")
|
|
|
|
this.create_game_container.appendChild(this.b_local);
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
this.b_remote = this.create_button("remote game");
|
|
|
|
this.create_game_container.appendChild(this.b_remote);
|
|
|
|
|
2019-03-07 10:38:08 +01:00
|
|
|
this.create_game_container.style.display = "none";
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
|
|
|
|
// settings area
|
|
|
|
this.setting_container.appendChild(this.create_label("select online name:"));
|
|
|
|
|
|
|
|
this.i_player_name = this.create_input("");
|
|
|
|
this.setting_container.appendChild(this.i_player_name);
|
|
|
|
|
|
|
|
this.setting_container.style.display = "none";
|
|
|
|
|
2019-03-07 10:38:08 +01:00
|
|
|
// control area:
|
2019-03-07 13:07:51 +01:00
|
|
|
|
|
|
|
this.b_end_game = this.create_button("end game");
|
|
|
|
this.control_container.appendChild(this.b_end_game);
|
|
|
|
|
2019-03-07 10:38:08 +01:00
|
|
|
this.control_container.style.display = "none";
|
|
|
|
|
|
|
|
|
|
|
|
// status area:
|
2019-03-10 13:30:18 +01:00
|
|
|
this.status_title = this.create_label("");
|
|
|
|
this.info_container.appendChild(this.status_title);
|
2019-03-07 10:38:08 +01:00
|
|
|
|
2019-03-10 13:30:18 +01:00
|
|
|
this.status_text = this.create_label("select gamemode. <br> <a href=https://en.wikipedia.org/wiki/Ultimate_tic-tac-toe#Rules>here are the rules </a>");
|
2019-03-07 10:38:08 +01:00
|
|
|
this.info_container.appendChild(this.status_text);
|
|
|
|
|
|
|
|
this.info_container.style.display = "none";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
bind_events()
|
|
|
|
{
|
|
|
|
// TODO
|
|
|
|
this.game_manager.register_game_mode_change_listener((c) => this.game_mode_change_listener(c));
|
2019-03-10 13:30:18 +01:00
|
|
|
this.game_manager.register_status_change_listener((c,t=null) => this.status_change_listener(c, t));
|
2019-03-07 10:38:08 +01:00
|
|
|
|
|
|
|
this.b_local.addEventListener("click", () => this.game_manager.start_local_game());
|
2019-03-07 13:07:51 +01:00
|
|
|
this.b_end_game.addEventListener("click", () => this.game_manager.end_game());
|
2019-03-10 00:29:15 +01:00
|
|
|
this.b_remote.addEventListener("click", () => this.game_manager.register_remote_game(this.get_player_name()));
|
2019-03-07 10:38:08 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
set_status(text)
|
|
|
|
{
|
|
|
|
this.status_text.innerHTML = text;
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
get_player_name()
|
|
|
|
{
|
|
|
|
return this.i_player_name.value;
|
|
|
|
}
|
|
|
|
|
2019-03-07 10:38:08 +01:00
|
|
|
activate_create_game()
|
|
|
|
{
|
|
|
|
this.create_game_container.style.display = "inline-block";
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
activate_setting()
|
|
|
|
{
|
|
|
|
this.setting_container.style.display = "inline-block";
|
|
|
|
}
|
|
|
|
|
2019-03-07 10:38:08 +01:00
|
|
|
activate_control()
|
|
|
|
{
|
|
|
|
this.control_container.style.display = "inline-block";
|
|
|
|
}
|
|
|
|
|
|
|
|
activate_info()
|
|
|
|
{
|
|
|
|
this.info_container.style.display = "inline-block";
|
|
|
|
}
|
|
|
|
|
|
|
|
deactivate_create_game()
|
|
|
|
{
|
|
|
|
this.create_game_container.style.display = "none";
|
|
|
|
}
|
|
|
|
|
2019-03-10 00:29:15 +01:00
|
|
|
deactivate_setting()
|
|
|
|
{
|
|
|
|
this.setting_container.style.display = "none";
|
|
|
|
}
|
|
|
|
|
2019-03-07 10:38:08 +01:00
|
|
|
deactivate_control()
|
|
|
|
{
|
|
|
|
this.control_container.style.display = "none";
|
|
|
|
}
|
|
|
|
|
|
|
|
deactivate_info()
|
|
|
|
{
|
|
|
|
this.info_container.style.display = "none";
|
|
|
|
}
|
|
|
|
|
|
|
|
game_mode_change_listener(gamemode)
|
|
|
|
{
|
|
|
|
if (gamemode == "none")
|
|
|
|
{
|
|
|
|
this.activate_create_game();
|
2019-03-10 00:29:15 +01:00
|
|
|
this.activate_setting();
|
2019-03-07 10:38:08 +01:00
|
|
|
this.deactivate_control();
|
2019-03-07 19:14:29 +01:00
|
|
|
this.activate_info();
|
2019-03-07 10:38:08 +01:00
|
|
|
return
|
|
|
|
}
|
|
|
|
if (gamemode == "local")
|
|
|
|
{
|
|
|
|
this.deactivate_create_game();
|
2019-03-10 00:29:15 +01:00
|
|
|
this.deactivate_setting();
|
|
|
|
this.activate_control();
|
|
|
|
this.activate_info();
|
|
|
|
}
|
|
|
|
if (gamemode == "remote")
|
|
|
|
{
|
|
|
|
this.deactivate_create_game();
|
|
|
|
this.deactivate_setting();
|
2019-03-07 10:38:08 +01:00
|
|
|
this.activate_control();
|
|
|
|
this.activate_info();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-10 13:30:18 +01:00
|
|
|
status_change_listener(statustext, title=null)
|
2019-03-07 19:14:29 +01:00
|
|
|
{
|
|
|
|
this.status_text.innerHTML = statustext;
|
2019-03-10 13:30:18 +01:00
|
|
|
if (title != null)
|
|
|
|
{
|
|
|
|
this.status_title.innerHTML = "<p>" + title + "</p>";
|
|
|
|
}
|
2019-03-07 19:14:29 +01:00
|
|
|
}
|
|
|
|
|
2019-03-07 10:38:08 +01:00
|
|
|
}
|