ultimate_tictactoe/sidebar.js

181 lines
4.5 KiB
JavaScript
Raw Normal View History

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 00:29:15 +01:00
this.info_container.appendChild(this.create_label("status:"));
2019-03-07 10:38:08 +01:00
2019-03-07 19:14:29 +01:00
this.status_text = this.create_label("select gamemode");
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-07 19:14:29 +01:00
this.game_manager.register_status_change_listener((c) => this.status_change_listener(c));
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-07 19:14:29 +01:00
status_change_listener(statustext)
{
this.status_text.innerHTML = statustext;
}
2019-03-07 10:38:08 +01:00
}