2021-03-13 07:00:55 +00:00
<!--
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 / > .
2021-03-13 09:02:53 +00:00
This project is hosted on https://git.bitscuit.be/bitscuit/Scrawl
2021-03-13 07:00:55 +00:00
-->
< html >
< head >
2021-03-13 09:02:53 +00:00
< title > Scrawl< / title >
2021-03-13 07:00:55 +00:00
< 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;" >
2021-03-13 09:02:53 +00:00
< h1 > Scrawl< / h1 >
2021-03-13 07:00:55 +00:00
< 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-13 19:12:38 +00:00
< p > Copyright © 2021 Thomas Van Acker< br / > Project hosted on < a target = "_blank" href = "https://git.bitscuit.be/bitscuit/Scrawl" > Gitscuit< / a > < / p >
2021-03-13 07:00:55 +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 RANK_ICONS = ["🥇 ","🥈 ","🥉 "];
// 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 > 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
2021-03-13 09:02:53 +00:00
if(users.length < 3 ) {
2021-03-13 07:00:55 +00:00
document.getElementById("button_lobby_start").style.display = "none";
}
});
// LOBBY_CLOSED
socket.on("LOBBY_CLOSED", function(){
// When game busy
var page = "";
2021-03-13 09:02:53 +00:00
page += "< h1 > Scrawl< / h1 > < p > The lobby is currently closed. Please come back in a few moments.< / p > ";
2021-03-13 07:00:55 +00:00
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 > ";
2021-03-13 09:28:13 +00:00
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 > ";
2021-03-13 07:00:55 +00:00
page += "< button id = 'button_ok' class = 'button button-primary' onclick = 'button_ok()' > < i class = 'fas fa-arrow-right' > < / i > Let's begin!< / button > ";
// Show page
document.getElementById("main").innerHTML = page;
});
// WRITE
socket.on("WRITE", function(data){
// Received new question
var page = "";
2021-03-13 09:02:53 +00:00
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 > ";
2021-03-13 09:18:27 +00:00
page += "< p > Enter the "+(data.lineNr == 1 ? "first" : "next")+" line.< / p > ";
2021-03-13 18:23:18 +00:00
page += "< input type = 'text' placeholder = 'The "+(data.lineNr == 1 ? "First" : "Next")+" Line' id = 'input_write' style = 'width: 100%; max-width: 500px;' / > < br / > ";
2021-03-13 07:00:55 +00:00
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 > 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 > "+data.error;
document.getElementById("text_write_error").style.display = "block";
});
// PICK
socket.on("PICK", function(data){
// Received all possible answers
var page = "";
2021-03-13 09:02:53 +00:00
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 > ";
2021-03-13 07:00:55 +00:00
page += "< div id = 'pick_buttons' > ";
2021-03-13 09:02:53 +00:00
page += "< p > Select the line you prefer.< / p > ";
2021-03-13 19:10:51 +00:00
page += "< p id = 'text_read_error' style = 'display: none; color: #BB2266; ' > < / p > ";
2021-03-13 18:23:18 +00:00
for(y=0; y< data.submissions.length ; y + + ) {
2021-03-13 07:00:55 +00:00
page += "< div class = 'row' > ";
2021-03-13 18:23:18 +00:00
page += "< div class = 'ten columns' > ";
2021-03-13 07:00:55 +00:00
2021-03-13 18:23:18 +00:00
page += "< h5 style = 'text-align: left;' > ";
page += data.submissions[y];
page += "< / h5 > ";
2021-03-13 07:00:55 +00:00
2021-03-13 18:23:18 +00:00
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 > ";
2021-03-13 07:00:55 +00:00
page += "< / div > ";
}
page += "< / div > ";
2021-03-13 19:10:51 +00:00
page += "< div id = 'pick_ok_button' style = 'display: none;' > ";
page += "< / div > ";
2021-03-13 07:00:55 +00:00
// Show page
document.getElementById("main").innerHTML = page;
});
// PICK button
function button_pick(id){
2021-03-13 19:10:51 +00:00
// 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 > ";
2021-03-13 07:00:55 +00:00
// Send to server
socket.emit("PICK", id);
}
2021-03-13 19:10:51 +00:00
// 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 > "+data.error;
document.getElementById("text_read_error").style.display = "block";
});
2021-03-13 07:00:55 +00:00
// ANSWER
socket.on("ANSWER", function(data){
// Received answer
var page = "";
2021-03-13 09:02:53 +00:00
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 > ";
2021-03-13 07:00:55 +00:00
// Table with results
page += "< table class = 'u-full-width' > ";
page += "< thead > ";
page += "< th > < / th > ";
page += "< th > < / th > ";
2021-03-13 09:02:53 +00:00
page += "< th > Picked< / th > ";
2021-03-13 07:00:55 +00:00
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 > ";
2021-03-13 09:02:53 +00:00
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 > ";
2021-03-13 07:00:55 +00:00
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 > 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 > ";
2021-03-13 09:02:53 +00:00
page += "< p > All lines were scrawled. Let's see who's the winner!< / p > ";
2021-03-13 07:00:55 +00:00
// 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 > ";
2021-03-13 09:02:53 +00:00
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 > ";
2021-03-13 07:00:55 +00:00
page += "< button class = 'button button-primary' onclick = 'button_restart()' > < i class = 'fas fa-redo' > < / i > 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 > ";
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 >
