more general frontend stuff

This commit is contained in:
Jonas Weinz 2019-03-07 10:38:08 +01:00
parent 4696421923
commit 7dd0857083
8 changed files with 284 additions and 8 deletions

View File

@ -7,5 +7,35 @@ class GameManager
this.dummy_player = new Player("test_player", "rgb(0,128,0)");
this.grid.player_change_listener(this.dummy_player);
// possible modes:
// -- none
// -- local
// -- remote //TODO
this.game_mode = "none";
}
register_game_mode_change_listener(func)
{
this.game_mode_change_listener = func;
}
set_game_mode(mode)
{
this.game_mode = mode;
this.game_mode_change_listener(mode);
console.log("changed gamemode to " + mode);
}
start_local_game()
{
this.set_game_mode("local");
this.grid.unblock_all();
}
end_game()
{
this.set_game_mode("none");
}
}

14
grid.js
View File

@ -83,7 +83,7 @@ class Grid
}
}
block()
block_all()
{
var x,y;
for (y = 0; y < this.n; y++)
@ -95,7 +95,7 @@ class Grid
}
}
unblock()
unblock_all()
{
var x,y;
for (y = 0; y < this.n; y++)
@ -107,6 +107,16 @@ class Grid
}
}
block(x,y)
{
this.subgrids[y][x].block();
}
unblock(x,y)
{
this.subgrids[y][x].unblock();
}
on_screen_orientation_change(tile_w,tile_h)
{
this.tile_width = tile_w;

View File

@ -9,11 +9,12 @@
</head>
<body>
<div id="main-container" class="main-container">
<!-- <div id="sidebar-container" class="sidebar-container"> -->
<!-- <div id="control-container" class="control-container"></div> -->
<!-- <div id="info-container" class="info-container"></div> -->
<!-- </div> -->
<div id="grid-container" class="grid-container"></div>
<div id="sidebar-container" class="sidebar-container">
<div id="create-game-container" class="create-game-container"></div>
<div id="control-container" class="control-container"></div>
<div id="info-container" class="info-container"></div>
</div>
</div>
<script src="player.js"></script>
<script src="tile.js"></script>

View File

@ -4,8 +4,13 @@ var tilesize = style.getPropertyValue("--tile-size");
var default_opacity = style.getPropertyValue("--opacity");
var ground_color = style.getPropertyValue("--ground-color");
var create_game_container = document.getElementById("create-game-container");
var control_container = document.getElementById("control-container");
var info_container = document.getElementById("info-container");
var grid = new Grid(n, document.getElementById("grid-container"), tilesize, tilesize, ground_color);
var game_manager = new GameManager(grid);
var sidebar = new Sidebar(create_game_container, control_container, info_container, game_manager);
window.addEventListener("resize", function() {
var tilesize = getComputedStyle(document.body).getPropertyValue("--tile-size");

View File

@ -0,0 +1,122 @@
class Sidebar
{
constructor(create_game_container, control_container, info_container, game_manager)
{
this.create_game_container = create_game_container;
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();
}
create_button(text)
{
var b = document.createElement("button");
b.className = "sidebar-button";
b.appendChild(document.createTextNode(text));
return b;
}
create_label(text)
{
var l = document.createElement("label");
l.className = "sidebar-label";
l.innerHTML = text;
return l;
}
fill_containers()
{
// create new game area:
this.create_game_container.appendChild(this.create_label("Start new game"));
this.b_local = this.create_button("local game")
this.create_game_container.appendChild(this.b_local);
this.create_game_container.style.display = "none";
// control area:
this.control_container.appendChild(this.create_button("confirm move"));
this.control_container.style.display = "none";
// status area:
this.info_container.appendChild(this.create_label("status"));
this.status_text = this.create_label("...");
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));
this.b_local.addEventListener("click", () => this.game_manager.start_local_game());
}
set_status(text)
{
this.status_text.innerHTML = text;
}
activate_create_game()
{
this.create_game_container.style.display = "inline-block";
}
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";
}
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();
this.deactivate_control();
this.deactivate_info();
return
}
if (gamemode == "local")
{
this.deactivate_create_game();
this.activate_control();
this.activate_info();
}
}
}

View File

@ -45,7 +45,7 @@ body {
.main-container {
white-space: normal;
padding-top: calc(50vh - 0.5 * (var(--grid-height) * var(--tile-size) + 2 * var(--sidebar-height)) - 2 * var(--border-radius));
padding-top: calc(50vh - var(--board-size) / 2);
}
}
@ -93,3 +93,99 @@ body {
display: inline-block;
transition-duration: 0.5s;
}
.subgrid-container-activated {
border-radius: var(--border-radius);
padding: var(--border-radius);
margin: auto;
width: calc(var(--tictactoe_n) * var(--tile-size));
height: calc(var(--tictactoe_n) * var(--tile-size));
background: rgba(0,25,64,var(--opacity));
display: inline-block;
transition-duration: 0.5s;
}
.sidebar-container {
border-radius: var(--border-radius);
padding: var(--border-radius);
vertical-align: top;
background: rgba(0, 0, 0, var(--opacity));
display: inline-flex;
justify-content: space-between;
flex-direction:column;
min-height: var(--board-size);
position: relative;
transition-duration: 0.5s;
}
/* override settings on portrait mode: */
@media (orientation: portrait) {
.sidebar-container {
display: inline-flex;
justify-content: space-between;
flex-direction:row;
min-height: var(--sidebar-height);
min-width: var(--board-size);
}
}
.create-game-container {
border-radius: var(--border-radius);
padding: var(--border-radius);
top: 0;
background: none;
display: inline-block;
vertical-align: middle;
}
.control-container {
border-radius: var(--border-radius);
padding: var(--border-radius);
top: 0;
background: none;
display: inline-block;
vertical-align: middle;
}
.info-container {
border-radius: var(--border-radius);
padding: var(--border-radius);
bottom: 0;
display: inline-block;
vertical-align: middle;
text-align: center;
background: none;
white-space: normal;
}
.sidebar-label {
color: white;
display: flex;
flex-direction: column;
}
.sidebar-button {
border-radius: var(--border-radius);
margin: var(--border-radius);
border: none;
outline: 0;
transition-duration: 0.3s;
background: rgba(0, 0, 0, var(--opacity));
color: rgb(255, 255, 255);
font-size: calc(3 * var(--border-radius));
width: var(--sidebar-width);
height: calc(5 * var(--border-radius));
vertical-align: middle;
display: flex;
flex-direction: column;
}
.sidebar-button:hover {
background: rgba(255, 255, 255, var(--opacity));
}
.sidebar-button:active {
background: rgba(255, 255, 255, calc(var(--opacity) * 2));
}

View File

@ -15,6 +15,7 @@ class Subgrid
this.ground_color = ground_color;
this.create();
this.block();
console.log("new subgrid created");
}
@ -113,6 +114,7 @@ class Subgrid
this.cells[y][x].lock();
}
}
this.subgrid_container_div.className = "subgrid-container";
}
unblock()
@ -125,6 +127,7 @@ class Subgrid
this.cells[y][x].unlock();
}
}
this.subgrid_container_div.className = "subgrid-container-activated";
}
on_screen_orientation_change(tile_w,tile_h)

11
tile.js
View File

@ -64,11 +64,13 @@ class Tile
lock()
{
this.locked = true;
this.elem.style.opacity = 0.3;
}
unlock()
{
this.locked = false;
this.elem.style.opacity = 0.5;
}
deactivate()
@ -101,7 +103,14 @@ class Tile
if (!this.is_activated && !this.locked)
{
this.elem.style.background = this.ground_color;
this.elem.style.opacity = 0.3;
if (this.locked)
{
this.elem.style.opacity = 0.3;
}
else
{
this.elem.style.opacity = 0.5;
}
this.elem.style.border = "none";
}
}