2021-03-07 15:45:11 +00:00
<!--
2021-03-07 17:52:47 +00:00
Copyright (C) 2021 Thomas Van Acker
2021-03-07 15:45:11 +00:00
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" >
2021-03-07 15:50:19 +00:00
< p > Copyright © 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 ? " 🔑 " : " 💣 ")) : "")+"< / 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 ? " 🔑 " : " 💣 "))+"< / 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 >
