Scrawl/html/index.html

411 lines
11 KiB
HTML

<!--
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/Scrawl
-->
<html>
<head>
<title>Scrawl</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>Scrawl</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 target="_blank" href="https://git.bitscuit.be/bitscuit/Scrawl">Gitscuit</a></p>
</div>
<!-- Socket.io stuff -->
<script src="/socket.io/socket.io.js"></script>
<script>
// Start socket.io
var socket = io();
// Init vars
var username;
var RANK_ICONS = ["&#129351;","&#129352;","&#129353;"];
// 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'><i class='fas fa-play'></i>&nbsp;&nbsp;&nbsp;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>Scrawl</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
var page = "";
page += "<h1>Get ready!</h1>";
page += "<p>The game is about to begin.</p>";
page += "<p>Scrawl akward stories together with your friends, line by line.</p>";
page += "<p>Every player writes the next line of the story and then gets to vote on their favourite. You gain a point for every vote on your submission. The line with the most votes gets added to the story.</p>";
page += "<button id='button_ok' class='button button-primary' onclick='button_ok()'><i class='fas fa-arrow-right'></i>&nbsp;&nbsp;&nbsp;Let's begin!</button>";
// Show page
document.getElementById("main").innerHTML = page;
});
// WRITE
socket.on("WRITE", function(data){
// Received new question
var page = "";
page += "<p>Line "+data.lineNr+" of "+data.linesTotal+"</p>";
page += "<div class='story'>";
for(var i=0; i<data.lineNr-1; i++){
page += "<h5>"+data.lines[i]+"</h5>";
}
page += "</div>";
page += "<p>Enter the "+(data.lineNr == 1 ? "first" : "next")+" line.</p>";
page += "<input type='text' placeholder='The "+(data.lineNr == 1 ? "First" : "Next")+" Line' id='input_write' style='width: 100%; max-width: 500px;'/><br/>";
page += "<p id='text_write_error' style='display: none; color: #BB2266; '></p>";
page += "<button id='button_ok' class='button button-primary' onclick='button_write()'><i class='fas fa-check'></i>&nbsp;&nbsp;&nbsp;Submit</button>";
// Show page
document.getElementById("main").innerHTML = page;
});
// WRITE button pressed
function button_write(){
// Disable button and input
document.getElementById("button_ok").disabled = true;
document.getElementById("button_ok").classList.remove("button-primary");
document.getElementById("input_write").disabled = true;
// Hide error text
document.getElementById("text_write_error").style.display = "none";
// Send OK to server
socket.emit("WRITE", {write:document.getElementById("input_write").value});
}
socket.on("WRITE_REPLY", function(data){
// When something wrong with write
// Enable button and input
document.getElementById("button_ok").disabled = false;
document.getElementById("button_ok").classList.add("button-primary");
document.getElementById("input_write").disabled = false;
// Show message
document.getElementById("text_write_error").innerHTML = "<i class='fas fa-exclamation-triangle'></i>&nbsp;&nbsp;&nbsp;"+data.error;
document.getElementById("text_write_error").style.display = "block";
});
// PICK
socket.on("PICK", function(data){
// Received all possible answers
var page = "";
page += "<p>Line "+data.lineNr+" of "+data.linesTotal+"</p>";
page += "<div class='story'>";
for(var i=0; i<data.lineNr-1; i++){
page += "<h5>"+data.lines[i]+"</h5>";
}
page += "</div>";
page += "<div id='pick_buttons'>";
page += "<p>Select the line you prefer.</p>";
page += "<p id='text_read_error' style='display: none; color: #BB2266; '></p>";
for(y=0; y<data.submissions.length; y++){
page += "<div class='row'>";
page += "<div class='ten columns'>";
page += "<h5 style='text-align: left;'>";
page += data.submissions[y];
page += "</h5>";
page += "</div>";
page += "<div class='two columns'>";
page += "<button class='button button-primary u-full-width' onclick='button_pick("+(y)+")'>";
page += "<i class='fas fa-check'></i>";
page += "</button>";
page += "</div>";
page += "</div>";
}
page += "</div>";
page += "<div id='pick_ok_button' style='display: none;'>";
page += "</div>";
// Show page
document.getElementById("main").innerHTML = page;
});
// PICK button
function button_pick(id){
// Hide layout and show OK button
document.getElementById("pick_buttons").style.display = "none";
document.getElementById("text_read_error").style.display = "none";
document.getElementById("pick_ok_button").style.display = "block";
document.getElementById("pick_ok_button").innerHTML = "<button class='button' id='button_ok' disabled>Loading...</button>";
// Send to server
socket.emit("PICK", id);
}
// PICK_REPLY
socket.on("PICK_REPLY", function(data){
// When something wrong with pick
// Make layout visible again
document.getElementById("pick_buttons").style.display = "block";
document.getElementById("pick_ok_button").style.display = "none";
// Show message
document.getElementById("text_read_error").innerHTML = "<i class='fas fa-exclamation-triangle'></i>&nbsp;&nbsp;&nbsp;"+data.error;
document.getElementById("text_read_error").style.display = "block";
});
// ANSWER
socket.on("ANSWER", function(data){
// Received answer
var page = "";
page += "<p>Line "+data.lineNr+" of "+data.linesTotal+"</p>";
page += "<div class='story'>";
for(var i=0; i<data.lineNr-1; i++){
page += "<h5>"+data.lines[i]+"</h5>";
}
page += "</div>";
page += "<p>Preferred submission:<br/><b>"+data.submissions[data.bestLine]+"</b></p>";
// Table with results
page += "<table class='u-full-width'>";
page += "<thead>";
page += "<th></th>";
page += "<th></th>";
page += "<th>Picked</th>";
page += "<th>Wrote</th>";
page += "<th>Change</th>";
page += "<th>Points</th>";
page += "</thead>";
page += "<tbody>";
for(i=0; i<data.usernames.length; i++){
page += "<tr>";
page += "<td>"+data.usernames[i]+"</td>";
page += "<td>"+(data.userWrite[i] == data.submissions[data.bestLine] ? "<i class='fas fa-trophy' style='color: #FFD700;'></i>" : "")+"</td>";
page += "<td>"+data.submissions[data.userPick[i]]+"</td>";
page += "<td>"+data.userWrite[i]+"</td>";
page += "<td>+"+data.pointsDiff[i]+"</td>";
page += "<td>"+data.userPoints[i]+"</td>";
page += "</tr>";
}
page += "</tbody>";
page += "</table>";
// Button to continue
page += "<button class='button button-primary' id='button_ok' onclick='button_ok()'><i class='fas fa-arrow-right'></i>&nbsp;&nbsp;&nbsp;Next</button>";
// Show page
document.getElementById("main").innerHTML = page;
});
// STOP
socket.on("STOP", function(data){
// Game ends
// Show page
var page = "";
page += "<h1>We're done!</h1>";
page += "<p>All lines were scrawled. Let's see who's the winner!</p>";
// Scoreboard
page += "<table class='u-full-width'>";
page += "<thead>";
page += "<th>#</th>";
page += "<th>Username</th>";
page += "<th>Points</th>";
page += "</thead>";
page += "<tbody>";
for(i=0; i<data.ranks.length; i++){
page += "<tr>";
page += "<td>"+(data.ranks[i].rank <= 3 ? RANK_ICONS[data.ranks[i].rank-1] : data.ranks[i].rank)+"</td>";
page += "<td>"+data.ranks[i].name+"</td>";
page += "<td>"+data.ranks[i].score+"</td>";
page += "</tr>";
}
page += "</tbody>";
page += "</table>";
page += "<div class='new-section story'>";
page += "<p>The final scrawl:</p>";
for(var i=0; i<data.lineNr-1; i++){
page += "<h5>"+data.lines[i]+"</h5>";
}
page += "</div>";
page += "<button class='button button-primary' onclick='button_restart()'><i class='fas fa-redo'></i>&nbsp;&nbsp;&nbsp;Restart game</button>";
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 = "<i class='fas fa-spinner fa-pulse'></i>&nbsp;&nbsp;&nbsp;";
if(users.length == 1){
text += "Waiting for "+users[0];
}else if(users.length == 2){
text += "Waiting for "+users[0]+" and "+users[1];
}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>