BoxEscape/html/index.html

318 lines
8.4 KiB
HTML
Raw Normal View History

<!--
Copyright (C) 2021 Thomas Van Acker
This program is free software: you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later
version.
This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
this program. If not, see <https://www.gnu.org/licenses/>.
This project is hosted on https://git.bitscuit.be/bitscuit/BoxEscape
-->
2021-03-07 15:38:50 +00:00
<html>
<head>
<title>Box Escape</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">
<link href="css/extra.css" rel="stylesheet">
<link href="css/fontawesome/css/all.css" rel="stylesheet">
</head>
<body style="padding-top: 10px;">
<div id="main" class="container" style="text-align:center;">
<h1>Box Escape</h1>
<p>Please enter a username to get started with the game.</p>
<input id="input_username" type="text" placeholder="Your username" />
<button id="button_username" class="button button-primary"><i class="fas fa-check"></i></button>
</div>
<div class="footer">
<p>Copyright &copy; 2021 Thomas Van Acker<br/>Project hosted on <a href="https://git.bitscuit.be/bitscuit/BoxEscape">Gitscuit</a></p>
2021-03-07 15:38:50 +00:00
</div>
<!-- Socket.io stuff -->
<script src="/socket.io/socket.io.js"></script>
<script>
// Start socket.io
var socket = io();
// Init vars
var username;
var guard; //If this player is the guard
// Init listeners
// Username submit
document.getElementById("button_username").onclick = function(){
// Submit username
username = document.getElementById("input_username").value;
socket.emit("JOIN", username);
// Show loading page
document.getElementById("main").innerHTML = "<p>Loading, please wait.</p>";
}
// Lobby change
socket.on("LOBBY", function(users){
var page = "<h1>Waiting for other players...</h1><button id='button_lobby_start' class='button button-primary'>Start game!</button><p>Currently in lobby:</p><ol>";
for(var i=0; i<users.length; i++){
page += "<li>"+users[i]+"</li>";
}
page += "</ol>";
document.getElementById("main").innerHTML = page;
// Lobby start button listener (can only be set when element is added to page
document.getElementById("button_lobby_start").onclick = function(){
// Send START to server
socket.emit("START");
// Show loading page
document.getElementById("main").innerHTML = "<p>Loading, please wait.</p>";
}
// Disable button if not enough players
if(users.length < 3){
document.getElementById("button_lobby_start").style.display = "none";
}
});
// LOBBY_CLOSED
socket.on("LOBBY_CLOSED", function(){
// When game busy
var page = "";
page += "<h1>Box Escape</h1><p>The lobby is currently closed. Please come back in a few moments.</p>";
document.getElementById("main").innerHTML = page;
});
// LOADING
socket.on("LOADING", function(){
// Show loading screen
document.getElementById("main").innerHTML = "<p>Loading, please wait.</p>";
});
// START
socket.on("START", function(data){
// Parse game data and show to user
guard = data.guard;
var page = "";
if(guard){
// When this player is the guard
page += "<h1>Get ready!</h1>";
page += "<p>You're the <b>guard</b>.</p>";
page += "<p>You win if the prisoners open a box with a bomb.<br/>You lose if the prisoners manage to escape by finding the box with the key.</p>";
page += "<button id='button_ok' class='button button-primary' onclick='button_ok()'>Let's begin!</button>";
}else{
// When player is not the guard
page += "<h1>Get ready!</h1>";
page += "<p>You're a <b>prisoner</b>.</p>";
page += "<p>You win if a prisoner finds the box with the key.<br/>You lose if a prisoner opens a box with a bomb.</p>";
page += "<p>The guard will try to deceive you to pick a box with a bomb.</p>";
page += "<button id='button_ok' class='button button-primary' onclick='button_ok()'>Let's begin!</button>";
}
// Show page
document.getElementById("main").innerHTML = page;
});
// PICK
socket.on("PICK", (data) => {
// When user needs to select a box to open
var page = "";
// Page title
if(data.myTurn){
page += "<h3>It's your turn!</h3>";
page += "<p>Pick a box to open.</p>";
}else{
page += "<h3>It's "+data.currentUser+"'s turn!</h3>";
page += "<p id='text_state'>"+data.currentUser+" is picking a box to open.</p>";
}
// Board
page += "<div id='board'>";
for(y=0; y<6; y++){
page += "<div class='row'>";
for(x=0; x<6; x++){
page += "<div class='two columns'>";
page += "<button class='button "+(data.myTurn ? "button-primary" : "")+" u-full-width' onclick='button_pick("+data.board[y][x].code+")' "+(data.myTurn ? "" : "disabled")+" "+(guard ? (data.board[y][x].type == 0 ? "" : (data.board[y][x].type == 1 ? "style='border-color: #02f416;'" : "style='border-color: red;'")) : "")+">"+data.board[y][x].code+""+(guard ? (data.board[y][x].type == 0 ? "" : (data.board[y][x].type == 1 ? " &#128273;" : " &#128163;")) : "")+"</button>";
page += "</div>";
}
page += "</div>";
}
page += "</div>";
// Set page
document.getElementById("main").innerHTML = page;
});
// Pick button clicked
function button_pick(code){
// When picked box
socket.emit("PICK_REPLY", code);
// Hide board
document.getElementById("board").style.display = "none";
}
// TIP
socket.on("TIP", (data) => {
// When received tip or other player is viewing tip
if(data.myTurn){
// When my turn
var page = "";
page += "<h3>It's your turn!</h3>";
page += "<p>You opened a box and found this tip:</p>";
page += "<p><b>";
page += data.tip;
page += "</b></p>";
page += "<button class='button button-primary' onclick='button_tip()'>Okay</button>";
document.getElementById("main").innerHTML = page;
}else{
// When not my turn
document.getElementById("text_state").innerHTML = data.currentUser+" is reading a tip.";
}
});
// Tip button clicked
function button_tip(){
// Send message to server
socket.emit("TIP_REPLY");
}
// STOP
socket.on("STOP", function(data){
// Game ends
// Show page
var page = "";
if(data.win){
page += "<h1>You win!</h1>";
page += "<p>"+data.reason+"</p>";
page += "<button class='button button-primary' onclick='button_restart()'>Restart game</button>";
page += "<p>"+data.guard+" was the guard.</p>";
}else{
page += "<h1>You lose!</h1>";
page += "<p>"+data.reason+"</p>";
page += "<button class='button button-primary' onclick='button_restart()'>Restart game</button>";
page += "<p>"+data.guard+" was the guard.</p>";
}
// Board
page += "<div id='board'>";
for(y=0; y<6; y++){
page += "<div class='row'>";
for(x=0; x<6; x++){
page += "<div class='two columns'>";
page += "<button class='button u-full-width' onclick='button_pick("+data.board[y][x].code+")' disabled "+(true ? (data.board[y][x].type == 0 ? "" : (data.board[y][x].type == 1 ? "style='border-color: #02f416;'" : "style='border-color: red;'")) : "")+">"+data.board[y][x].code+""+(data.board[y][x].type == 0 ? "" : (data.board[y][x].type == 1 ? " &#128273;" : " &#128163;"))+"</button>";
page += "</div>";
}
page += "</div>";
}
page += "</div>";
document.getElementById("main").innerHTML = page;
});
// Restart button clicked
function button_restart(){
// Join the lobby
socket.emit("JOIN", username);
}
// OK button pressed
function button_ok(){
// Disable button
document.getElementById("button_ok").disabled = true;
document.getElementById("button_ok").classList.remove("button-primary");
// Send OK to server
socket.emit("OK");
}
// OK_REPLY
socket.on("OK_REPLY", (data) => {
// Check if already sent OK
if(document.getElementById("button_ok").disabled){
// Parse data and set ok button text
users = data.users;
var text = "";
if(users.length == 1){
text = "Waiting for "+users[0];
}else{
text = "Waiting for "+users.length+" players";
}
document.getElementById("button_ok").innerHTML = text;
}
});
// DISCONNECT
socket.on("DISCONNECT", function(name){
// When player disconnected
alert(name+" left the game");
});
</script>
</body>
</html>