var $ = jQuery;
const getElement = (id) => document.getElementById(id);
const ws = new WebSocket('ws://bwc.ryanpandya.com/socket');
var username = "unnamed";
var pId = 0;
var cards = [];
var lastCard = false;
var players = [];
var gameMode = "draw";
const timeFormat = 'h:mm a [PDT]';
const notification_pos = "top-right";
function range(size, startAt = 0) {
return [...Array(size).keys()].map(i => i + startAt);
}
function heartbeat() {
clearTimeout(this.pingTimeout);
console.log("Ping");
this.pingTimeout = setTimeout(() => {
this.terminate();
}, 30000 + 1000);
}
ws.onopen = (moot) => {
heartbeat;
var urlParams = new URLSearchParams(window.location.search);
console.log('Connected to websocket.');
username = urlParams.get('username');
UIkit.notification({
message: 'Connected!',
status: 'success',
pos: notification_pos,
timeout: 1000
});
if(username == null || username == ""){
window.location = "/";
}
else{
}
};
const addMessage = (e) => {
var self_marker = "";
if(e.pId == pId){
self_marker = "self";
}
$("ul#chatbox").append(
'\
\
'+e.timestamp+' \
'+e.username+' \
'+e.message+'
\
\
'
);
}
const addUser = (newPlayer) => {
var picker = "";
var existing = false;
players.forEach(function(p){ // Check if we already know about this player (is this a reconnection attempt)
if(p.pId == newPlayer.pId){ // Looks like it is
existing = true; console.log("Hit on " + newPlayer.username); // Make note
}
});
if(existing){
// What to do if this is a duplicate
}else{
// Otherwise
notice(newPlayer.username + " has joined the game.");
players.push(newPlayer);
if(newPlayer.username == username){ // This user is actually us, so make the username editable
picker = '
';
u = ''+picker+'
'+u+'
Game over, thanks for playing! "
);
break;
case 'message':
console.log(">> Got a message.");
addMessage(event);
break;
case 'changeProfilePic':
updateProfPic(event.player, event.href);
break;
case 'vote':
addVote(event.pId);
if(firstPlayerPicked){
notice("First turn starting!");
$("#draw_mode").html("");
}
break;
case 'revealCard':
viewRevealedCard(event.card);
break;
case 'pulledCard':
if(event.last){
notice("Last card!");
lastCard = true;
}
pullCard(event.card);
break;
case 'nextTurn':
changeActivePlayer(event.playerTurn, null);
break;
case 'newPlayer':
var player = event.player;
if(player.pId != pId){
addUser(player);
}
break;
default:
console.log('Unknown event. Pasting:');
console.log(event);
}
};
const changeUsername = (name) => {
packet = {
"type": "changeUsername",
"pId": pId,
"username": name
}
console.log("Changing username to: '"+name+"'");
username = name;
ws.send(JSON.stringify(packet));
};
const notice = (message) => {
UIkit.notification({
message: message,
status: 'primary',
pos: notification_pos,
timeout: 2000
});
}
const error = (message) => {
UIkit.notification({
message: message,
status: 'danger',
pos: notification_pos,
timeout: 2000
});
}
const urlify = (text) => {
var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
//var urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, function(url,b,c) {
var url2 = (c == 'www.') ? 'http://' +url : url;
return '' + url + ' ';
})
};
const submitMessage = () => {
message = $("#message").val();
if(message.trim()){
const timestamp = new Date();
packet = {
"type": "message",
"pId": pId,
"username": username,
"message": urlify(message.trim()),
"timestamp": new Date()
}
console.log("Sending message.");
ws.send(JSON.stringify(packet));
$("#message").val("");
}};
const chooseGiphy = (url) => {
$("img.card-picture").attr("src", url);
$(".uk-close").click();
}
const chooseProfile = (url) => {
packet = {
'type': 'changeProfilePic',
'player': {
'pId': pId,
'username': username
},
'href': url
}
$(".change-profile > svg").hide();
$(".uk-close").click();
ws.send(JSON.stringify(packet));
}
const updateProfPic = (player, url) => {
$("img[data-pId="+player.pId+"]").attr('src',url);
}
const giphySearch = () => {
var query = $("#giphySearch").val().trim().replace(/ /g, "+");
const api_url = "https://api.giphy.com/v1/gifs/search?api_key=GUHvLYHRcNgPAIKt4PNZcjYw5FBeBX0F&q="+query+"&limit=25&offset=0&rating=R&lang=en";
$.ajax({url: api_url, method: 'GET'}).done(function(response){
// This is the API response data. It's a JSON object of 25 gifs
console.log(response.data);
$("#giphySearchResults").html("");
response.data.forEach(function(i){
var giphyURL = i.images.fixed_height.url;
$("#giphySearchResults").append(
" ![]("+giphyURL+")
"
);
});
});
};
const voteForPlayer = (i) => {
console.log("Sending in a vote.");
packet = {
'type': "vote",
'pId': i
}
ws.send(JSON.stringify(packet));
}
const playModeChangeUsername = (e) => {
if(e.keyCode === 13){
changeUsername($(".player-username > input").val());
};
}
$().ready(function() {
$("#toggle_chat").on('click', function(e){
$(this).closest("li").toggleClass("uk-active");
});
$(".input-username").keydown(function(e){
if(e.keyCode === 13){
changeUsername(this.value);
};
});
$(".input-username").focusout(function(e){
changeUsername(this.value);
});
$("#message").keyup(function(e){
if(e.keyCode === 13){
submitMessage();
};
});
$("a#toggle_draw").on('click', function(e){
if(gameMode == "play"){
// Switch tabs
$("#play_mode").hide();$("a#toggle_play").closest("li").removeClass("uk-active");
$("#draw_mode").show();$("a#toggle_draw").closest("li").addClass("uk-active")
}
});
$("a#toggle_play").on('click', function(e){
if(gameMode == "play"){
// Switch tabs
$("#draw_mode").hide();$("a#toggle_draw").closest("li").removeClass("uk-active");
$("#play_mode").css({"display":"flex"});$("a#toggle_play").closest("li").addClass("uk-active")
}
else{
// Request server to start game
console.log("Asking server to start game...");
packet = {
"type": "startPlayMode",
"player": username
}
ws.send(JSON.stringify(packet));
setTimeout(function(e){
if(gameMode == "play"){
// Switch tabs
console.log("Switching tabs");
$("#draw_mode").hide();$("a#toggle_draw").closest("li").removeClass("uk-active");
$("#play_mode").css({"display":"flex"});$("a#toggle_play").closest("li").addClass("uk-active")
}
}, 500);
}
});
$("#submitCard").on('click', function(e){
submitCard();
clearCard();
});
$("#newCard").on('click', function(e) {
clearCard();
});
$("#giphySearch").keyup(function(e){
if(e.keyCode == "13"){
giphySearch();
}
});
$("#giphySearchButton").click(function(e){
giphySearch();
});
$("#imageInsta").click(function(e){
notice("TODO: Add insta feature");
});
$("#imageUpload").click(function(e){
notice("TODO: Add upload feature");
});
$("#imageDraw").click(function(e){
notice("TODO: Add draw feature");
});
range(22).forEach(function(e){
var profURL = "/img/profiles/"+e+".jpg";
$("#profile-options").append(
"