more general frontend stuff
This commit is contained in:
Jonas Weinz
parent
4696421923
commit
7dd0857083
@ -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
14
grid.js
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
5
main.js
5
main.js
@ -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");
|
||||
|
||||
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 {
|
||||
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));
|
||||
}
|
||||
@ -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
11
tile.js
@ -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";
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user