-
Notifications
You must be signed in to change notification settings - Fork 0
/
GamePanel.js
106 lines (89 loc) · 2.96 KB
/
GamePanel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { GameNetLogic } from "./GameNetLogic.js";
import { LobbyPanel } from "./LobbyPanel.js";
import { LoginPanel } from "./LoginPanel.js";
import { RoomPanel } from "./RoomPanel.js";
// GamePanel is a wrapper for the different displays
export class GamePanel {
lobbyPanel;
loginPanel;
roomPanel;
playingPanel;
gameNetLogic;
constructor() {
// lobby panel
// playing panel (for the game)
// connection between the logic and the display
this.gameNetLogic = new GameNetLogic(this);
// display for login and lobby
this.loginPanel = new LoginPanel(this);
this.lobbyPanel = new LobbyPanel(this);
this.roomPanel = new RoomPanel(this);
this.showLogin();
}
showLogin() {
// add the loginPanel div to the html
let loginPanelDiv = document.getElementById("loginPanelDiv");
if (loginPanelDiv != undefined) {
loginPanelDiv.hidden = false;
} else {
loginPanelDiv = this.loginPanel.toHtml();
document.body.appendChild(loginPanelDiv);
loginPanelDiv.hidden = false;
}
}
showLobby() {
// show the lobby
// draw user area in upper left
// User: USERNAME
// button - Instructions & Tips
// button - Missions Clans
// button - Sign Up! Logout
// clear the page
// need to wait until the
// hide the lobby and the room panel
const loginPanelDiv = document.getElementById("loginPanelDiv");
const roomPanelDiv = document.getElementById("roomPanelDiv");
if (loginPanelDiv != undefined) {
loginPanelDiv.hidden = true;
}
if (roomPanelDiv != undefined) {
roomPanelDiv.hidden = true;
// remove so we don't error out when trying to redraw
// delete this.roomPanel.game;
// roomPanelDiv.remove();
}
let lobbyPanelDiv = document.getElementById("lobbyPanelDiv");
if (lobbyPanelDiv != undefined) {
lobbyPanelDiv.hidden = false;
} else {
lobbyPanelDiv = this.lobbyPanel.toHtml();
document.body.appendChild(lobbyPanelDiv);
}
}
showRoom() {
// shows a room with users inside
// allows selecting a ship
// shows the users name and bar across the top
// chat panel on the left of the screen for the game
// <!-- <main>
// <canvas id="GameCanvas"></canvas>
// </main> -->
// hide the lobby and the login panel
const loginPanelDiv = document.getElementById("loginPanelDiv");
const lobbyPanelDiv = document.getElementById("lobbyPanelDiv");
let roomPanelDiv = document.getElementById("roomPanelDiv");
if (loginPanelDiv != undefined || loginPanelDiv != null) {
loginPanelDiv.hidden = true;
}
// TODO - does not appear to hide the lobby Panel
if (lobbyPanelDiv != undefined || lobbyPanelDiv != null) {
lobbyPanelDiv.hidden = true;
}
if (roomPanelDiv != undefined || roomPanelDiv != null) {
roomPanelDiv.hidden = false;
} else {
roomPanelDiv = this.roomPanel.toHtml();
document.body.appendChild(roomPanelDiv);
}
}
}