more general frontend stuff
This commit is contained in:
parent
4696421923
commit
7dd0857083
@ -7,5 +7,35 @@ class GameManager
|
|||||||
this.dummy_player = new Player("test_player", "rgb(0,128,0)");
|
this.dummy_player = new Player("test_player", "rgb(0,128,0)");
|
||||||
|
|
||||||
this.grid.player_change_listener(this.dummy_player);
|
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
14
grid.js
@ -83,7 +83,7 @@ class Grid
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
block()
|
block_all()
|
||||||
{
|
{
|
||||||
var x,y;
|
var x,y;
|
||||||
for (y = 0; y < this.n; y++)
|
for (y = 0; y < this.n; y++)
|
||||||
@ -95,7 +95,7 @@ class Grid
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
unblock()
|
unblock_all()
|
||||||
{
|
{
|
||||||
var x,y;
|
var x,y;
|
||||||
for (y = 0; y < this.n; 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)
|
on_screen_orientation_change(tile_w,tile_h)
|
||||||
{
|
{
|
||||||
this.tile_width = tile_w;
|
this.tile_width = tile_w;
|
||||||
|
@ -9,11 +9,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main-container" class="main-container">
|
<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="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>
|
</div>
|
||||||
<script src="player.js"></script>
|
<script src="player.js"></script>
|
||||||
<script src="tile.js"></script>
|
<script src="tile.js"></script>
|
||||||
|
5
main.js
5
main.js
@ -4,8 +4,13 @@ var tilesize = style.getPropertyValue("--tile-size");
|
|||||||
var default_opacity = style.getPropertyValue("--opacity");
|
var default_opacity = style.getPropertyValue("--opacity");
|
||||||
var ground_color = style.getPropertyValue("--ground-color");
|
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 grid = new Grid(n, document.getElementById("grid-container"), tilesize, tilesize, ground_color);
|
||||||
var game_manager = new GameManager(grid);
|
var game_manager = new GameManager(grid);
|
||||||
|
var sidebar = new Sidebar(create_game_container, control_container, info_container, game_manager);
|
||||||
|
|
||||||
window.addEventListener("resize", function() {
|
window.addEventListener("resize", function() {
|
||||||
var tilesize = getComputedStyle(document.body).getPropertyValue("--tile-size");
|
var tilesize = getComputedStyle(document.body).getPropertyValue("--tile-size");
|
||||||
|
122
sidebar.js
122
sidebar.js
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
98
style.css
98
style.css
@ -45,7 +45,7 @@ body {
|
|||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
white-space: normal;
|
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;
|
display: inline-block;
|
||||||
transition-duration: 0.5s;
|
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));
|
||||||
|
}
|
@ -15,6 +15,7 @@ class Subgrid
|
|||||||
this.ground_color = ground_color;
|
this.ground_color = ground_color;
|
||||||
|
|
||||||
this.create();
|
this.create();
|
||||||
|
this.block();
|
||||||
|
|
||||||
console.log("new subgrid created");
|
console.log("new subgrid created");
|
||||||
}
|
}
|
||||||
@ -113,6 +114,7 @@ class Subgrid
|
|||||||
this.cells[y][x].lock();
|
this.cells[y][x].lock();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.subgrid_container_div.className = "subgrid-container";
|
||||||
}
|
}
|
||||||
|
|
||||||
unblock()
|
unblock()
|
||||||
@ -125,6 +127,7 @@ class Subgrid
|
|||||||
this.cells[y][x].unlock();
|
this.cells[y][x].unlock();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.subgrid_container_div.className = "subgrid-container-activated";
|
||||||
}
|
}
|
||||||
|
|
||||||
on_screen_orientation_change(tile_w,tile_h)
|
on_screen_orientation_change(tile_w,tile_h)
|
||||||
|
11
tile.js
11
tile.js
@ -64,11 +64,13 @@ class Tile
|
|||||||
lock()
|
lock()
|
||||||
{
|
{
|
||||||
this.locked = true;
|
this.locked = true;
|
||||||
|
this.elem.style.opacity = 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
unlock()
|
unlock()
|
||||||
{
|
{
|
||||||
this.locked = false;
|
this.locked = false;
|
||||||
|
this.elem.style.opacity = 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
deactivate()
|
deactivate()
|
||||||
@ -101,7 +103,14 @@ class Tile
|
|||||||
if (!this.is_activated && !this.locked)
|
if (!this.is_activated && !this.locked)
|
||||||
{
|
{
|
||||||
this.elem.style.background = this.ground_color;
|
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";
|
this.elem.style.border = "none";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user