336 lines
15 KiB
JavaScript
336 lines
15 KiB
JavaScript
var isPollingActive = true;
|
|
|
|
var last_chat_id = 0;
|
|
var rids = [];
|
|
var fids = [];
|
|
|
|
function createRoom() {
|
|
let isprivate = $("#flexSwitchCheckDefault").is(':checked');
|
|
let playerscnt = $("#players-count-range").val();
|
|
$.ajax({
|
|
url: "/api/v1/rooms/create/",
|
|
data: {
|
|
is_private: isprivate,
|
|
players_count: playerscnt
|
|
},
|
|
method: "POST"
|
|
}).done(function(data) {
|
|
$("#game-creation-menu-modal").modal('hide');
|
|
});
|
|
}
|
|
|
|
function sendInviteMessage(uid) {
|
|
$.ajax({
|
|
url: "/api/v1/rooms/invite/",
|
|
method: "POST",
|
|
data: {
|
|
friend_id: uid
|
|
},
|
|
statusCode: {
|
|
400: function() {
|
|
$(".toast-container").append('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="/static/images/favicon.ico" width="16" height="16" class="rounded me-2" alt="Nosedive"><strong class="me-auto">Nosedive</strong><small class="text-body-secondary">just now</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">Can\'t send invite.</div></div>');
|
|
bootstrap.Toast.getOrCreateInstance($(".toast").last()).show();
|
|
},
|
|
200: function() {
|
|
$(".toast-container").append('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="/static/images/favicon.ico" width="16" height="16" class="rounded me-2" alt="Nosedive"><strong class="me-auto">Nosedive</strong><small class="text-body-secondary">just now</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">Successfully sent invite.</div></div>');
|
|
bootstrap.Toast.getOrCreateInstance($(".toast").last()).show();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function joinRoom(obj) {
|
|
let roomId = $(obj).attr("data-room-id");
|
|
$.ajax({
|
|
url: "/api/v1/rooms/join/",
|
|
data: {
|
|
room_id: roomId
|
|
},
|
|
method: "POST"
|
|
});
|
|
}
|
|
|
|
function takeInviteMessage(obj) {
|
|
let roomId = $(obj).attr("data-roomId");
|
|
$.ajax({
|
|
url: "/api/v1/rooms/join/",
|
|
data: {
|
|
room_id: roomId
|
|
},
|
|
method: "POST"
|
|
});
|
|
}
|
|
|
|
function takeRedirect(reds) {
|
|
for( let i = 0; i < reds.length; i++ ) {
|
|
window.location.assign("/game?id=" + reds[i].roomId);
|
|
}
|
|
}
|
|
|
|
function successPolling(data) {
|
|
console.log(data);
|
|
data = data.result;
|
|
|
|
let onlineCount = 0;
|
|
let messages = [];
|
|
let friends = [];
|
|
let rooms = [];
|
|
let invites = [];
|
|
|
|
for(let i = 0; i < data.length; i++ ) {
|
|
let res = data[i];
|
|
switch(res.type) {
|
|
case "OnlineUsers":
|
|
onlineCount = res.array[0];
|
|
break;
|
|
case "ChatResult":
|
|
messages = res.array;
|
|
break;
|
|
case "FriendResult":
|
|
friends = res.array;
|
|
break;
|
|
case "RoomResult":
|
|
rooms = res.array;
|
|
break;
|
|
case "InviteResult":
|
|
invites = res.array;
|
|
break;
|
|
case "Redirect":
|
|
takeRedirect(res.array);
|
|
break;
|
|
}
|
|
}
|
|
|
|
$(".chat-title").find("span").html(onlineCount + " online");
|
|
if( messages.length > 0 ) {
|
|
last_chat_id = messages[0].id;
|
|
}
|
|
for( let i = 0; i < messages.length; i++ ) {
|
|
let obj = messages[i].message;
|
|
let time = parseTime(obj.createdAt);
|
|
let username = messages[i].user.username;
|
|
let userid = obj.userId;
|
|
let msgtext = obj.message;
|
|
let html = '<div class="chat-history-one"><div class="chat-history-info"><span class="time">'+time+'</span><ion-icon name="arrow-undo-outline" class="reply-button" data-userid="'+userid+'" data-username="'+username+'" onClick="replyButtonClicked(this)"></ion-icon></div><span><span class="chat-history-text chat-history-content-message"><span class="formatter"><a href="/profile/'+userid+'" class="chat-history-user"><span class="_nick">'+username+'</span></a><ion-icon name="remove-outline"></ion-icon><span>'+msgtext+'</span></span></span></span></div>';
|
|
$(".chat-history").append(html);
|
|
}
|
|
for( let i = 0; i < rooms.length; i++ ) {
|
|
let room = rooms[i];
|
|
if( room.action == 'ADD_CHANGE' ) {
|
|
for( let u = 0; u < rids.length; u++ ) {
|
|
if( rids[u].id == room.id ) {
|
|
rids.splice(u, 1);
|
|
break;
|
|
}
|
|
}
|
|
rids.push({id: room.id, playerCount: room.playerCount, players: room.players});
|
|
let room_p_html = '';
|
|
for( let u = 0; u < room.players.length; u++ ) {
|
|
let room_player = room.players[u];
|
|
room_p_html += '<div class="games-room-one-body-members-one"><div class="games-room-one-body-members-one-avatar" data-avatar-id="'+room_player.avatarId+'"><a href="/profile/'+room_player.id+'"></a><div class="_online"></div></div><div class="games-room-one-body-members-one-nick"><a href="/profile/'+room_player.id+'">'+room_player.username+'</a></div></div>';
|
|
}
|
|
for( let u = 0; u < (room.playerCount - room.players.length); u++ ) {
|
|
room_p_html += '<div data-room-id="'+room.id+'" onclick="joinRoom(this)" class="games-room-one-body-members-one _slot_join"><div class="games-room-one-body-members-one-avatar"><ion-icon name="add-outline" style="color: #656d78;"></ion-icon></div><div class="games-room-one-body-members-one-nick"><span>Join</span></div></div>';
|
|
}
|
|
let room_html = '<div class="games-room-one" data-room-id="'+room.id+'"><div class="games-room-one-body"><div class="games-room-one-body-head"><div class="games-room-one-body-head-info"><div class="_type"><div>Game</div></div></div><div class="games-room-one-body-head-actions"></div></div><div class="games-room-one-body-members">'+room_p_html+'</div></div></div>';
|
|
let has_element = false;
|
|
$(".games-room-one").each(function() {
|
|
if( $(this).attr("data-room-id") == room.id ) {
|
|
$(this).replaceWith(room_html);
|
|
has_element = true;
|
|
}
|
|
});
|
|
if( !has_element ) {
|
|
$(".rooms-list").append(room_html);
|
|
}
|
|
} else if( room.action == 'REMOVE' ) {
|
|
for( let u = 0; u < rids.length; u++ ) {
|
|
if( rids[u].id == room.id ) {
|
|
rids.splice(u, 1);
|
|
break;
|
|
}
|
|
}
|
|
$(".games-room-one").each(function() {
|
|
if( $(this).attr("data-room-id") == room.id ) {
|
|
$(this).remove();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
$(".games-room-one-body-members-one-avatar").each(function() {
|
|
if($(this).attr("data-avatar-id") != undefined) {
|
|
$(this).css("background-image", "url('/image/store/"+$(this).attr("data-avatar-id")+"')");
|
|
}
|
|
});
|
|
for( let i = 0; i < friends.length; i++ ) {
|
|
let friend = friends[i];
|
|
if( friend.action == 'ADD' ) {
|
|
for( let u = 0; u < fids.length; u++ ) {
|
|
if( fids[u].id == friend.id ) {
|
|
fids.splice(u, 1);
|
|
break;
|
|
}
|
|
}
|
|
fids.push({id: friend.id, username: friend.username});
|
|
let fr_html = '<div class="friend-one" data-friend-id="'+friend.id+'"><a href="/profile/'+friend.id+'" class="navbar-btn"><img class="navbar-profile-img" src="/image/store/'+friend.avatarId+'"></a><span>'+friend.username+'</span><ion-icon onClick="sendInviteMessage('+friend.id+')" name="person-add" role="img" class="md hydrated"></ion-icon></div>';
|
|
$(".friends-online-list").append(fr_html);
|
|
} else if( friend.action == 'REMOVE' ) {
|
|
for( let u = 0; u < fids.length; u++ ) {
|
|
if( fids[u].id == friend.id ) {
|
|
fids.splice(u, 1);
|
|
break;
|
|
}
|
|
}
|
|
$(".friend-one").each(function() {
|
|
if( $(this).attr("data-friend-id") == friend.id ) {
|
|
$(this).remove();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
for( let i = 0; i < invites.length; i++ ) {
|
|
let _i = invites[i];
|
|
$(".toast-container").append('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="/static/images/favicon.ico" width="16" height="16" class="rounded me-2" alt="Nosedive"><strong class="me-auto">Nosedive</strong><small class="text-body-secondary">just now</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">'+_i.username+' invites you into Nosedive room.<div class="mt-2 pt-2 border-top"><button type="button" class="btn btn-primary btn-sm" data-roomId="'+_i.roomId+'" onclick="takeInviteMessage(this)">Take invite</button><button style="margin-left: 5px;" type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button></div></div></div>');
|
|
bootstrap.Toast.getOrCreateInstance($(".toast").last()).show();
|
|
}
|
|
|
|
if( friends.length > 0 ) {
|
|
$(".friends-online-list").css("display", "");
|
|
$("#friends_list").find(".block-content").css("display", "none");
|
|
}
|
|
|
|
if( messages.length > 0 ) {
|
|
var clh = $('#chat_list').find(".chat-history");
|
|
clh.scrollTop(clh.prop("scrollHeight"));
|
|
$("#chat_list").find(".chat-history").css("display", "");
|
|
}
|
|
|
|
$("#chat_list").find(".message-input").css("display", "");
|
|
$("#chat_list").find(".block-content").css("display", "none");
|
|
}
|
|
|
|
function pollServer() {
|
|
let accessToken = $("api-tag").attr("data-access-token");
|
|
let uid = $("api-tag").attr("data-uid");
|
|
let poll_token = $("api-tag").attr("data-poll-token");
|
|
if (isPollingActive) {
|
|
window.setTimeout(function () {
|
|
$.ajax({
|
|
url: "/async/notify/get/",
|
|
data: {
|
|
last_chat_id: last_chat_id,
|
|
accessToken: accessToken,
|
|
poll_token: poll_token,
|
|
rids: JSON.stringify(rids),
|
|
fids: JSON.stringify(fids),
|
|
uid: uid
|
|
},
|
|
method: "POST"
|
|
}).done(function(data) {
|
|
successPolling(data);
|
|
//SUCCESS LOGIC
|
|
pollServer();
|
|
});
|
|
}, 1500);
|
|
}
|
|
}
|
|
|
|
$.fn.pressEnter = function(fn) {
|
|
return this.each(function() {
|
|
$(this).bind('enterPress', fn);
|
|
$(this).keyup(function(e) {
|
|
if(e.keyCode == 13) {
|
|
$(this).trigger("enterPress");
|
|
}
|
|
})
|
|
});
|
|
};
|
|
|
|
function parseTime(unix_timestamp) {
|
|
var date = new Date(unix_timestamp * 1000);
|
|
var hours = "0" + date.getHours();
|
|
var minutes = "0" + date.getMinutes();
|
|
return hours.substr(-2) + ':' + minutes.substr(-2);
|
|
}
|
|
|
|
function replyButtonClicked(obj) {
|
|
let userid = $(obj).attr('data-userid');
|
|
let username = $(obj).attr('data-username');
|
|
$('#chat-message-input').val($('#chat-message-input').val() + " @" + username + "");
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$("#players-count-range").on("input", function() {
|
|
$("label[for='players-count-range']").find("span").text($(this).val());
|
|
});
|
|
|
|
$('#chat-message-input').pressEnter(function() {
|
|
let txt = $(this).val();
|
|
$(this).val("");
|
|
if( txt != "" ) {
|
|
$.ajax({
|
|
url: "/api/v1/chat/send",
|
|
method: "POST",
|
|
data: txt
|
|
});
|
|
}
|
|
});
|
|
|
|
// block-content
|
|
|
|
$.ajax({
|
|
url: "/api/v1/chat/history/100/",
|
|
method: "GET"
|
|
}).done(function(data) {
|
|
console.log(data);
|
|
let messages = data;
|
|
if( messages.length > 0 ) {
|
|
last_chat_id = messages[0].message.id;
|
|
}
|
|
for( let i = messages.length-1; i >= 0; i-- ) {
|
|
let obj = messages[i].message;
|
|
let time = parseTime(obj.createdAt);
|
|
let username = messages[i].user.username;
|
|
let userid = obj.userId;
|
|
let msgtext = obj.message;
|
|
let html = '<div class="chat-history-one"><div class="chat-history-info"><span class="time">'+time+'</span><ion-icon name="arrow-undo-outline" class="reply-button" data-userid="'+userid+'" data-username="'+username+'" onClick="replyButtonClicked(this)"></ion-icon></div><span><span class="chat-history-text chat-history-content-message"><span class="formatter"><a href="/profile/'+userid+'" class="chat-history-user"><span class="_nick">'+username+'</span></a><ion-icon name="remove-outline"></ion-icon><span>'+msgtext+'</span></span></span></span></div>';
|
|
$(".chat-history").append(html);
|
|
}
|
|
var clh = $('#chat_list').find(".chat-history");
|
|
clh.scrollTop(clh.prop("scrollHeight"));
|
|
$("#chat_list").find(".chat-history").css("display", "");
|
|
$("#chat_list").find(".message-input").css("display", "");
|
|
$("#chat_list").find(".block-content").css("display", "none");
|
|
});
|
|
|
|
$.ajax({
|
|
url: "/api/v1/market/banners/en/",
|
|
method: "GET"
|
|
}).done(function(data) {
|
|
console.log(data);
|
|
for( var i = 0; i < data.length; i++ ) {
|
|
let obj = data[i];
|
|
let tag = '';
|
|
if( i != 0 ) {
|
|
let html = '<button type="button" data-bs-target="#market-carousel" data-bs-slide-to="'+i+'" aria-label="Slide '+(i+1)+'"></button>';
|
|
$("#market-carousel").find(".carousel-indicators").append(html);
|
|
} else {
|
|
tag = 'active';
|
|
}
|
|
let _ihtml = '<div class="carousel-item '+tag+'"><div class="carousel-item-background w-100 rounded" style="background: '+obj.gradientInfo+'; min-height: 160px"><div class="carousel-item-body"><div class="carousel-title-text">'+obj.title+'</div><div class="carousel-body-text">'+obj.description+'</div></div></div></div>';
|
|
$("#market-carousel").find(".carousel-inner").append(_ihtml);
|
|
}
|
|
$(".market").find(".spinner-grow").css("display", "none");
|
|
$(".market").find("#market-carousel").css("display", "");
|
|
});
|
|
|
|
pollServer();
|
|
|
|
$(".rooms-list").css("display", "");
|
|
$("#waiting_list").find(".block-content").css("display", "none");
|
|
|
|
var clh = $('#chat_list').find(".chat-history");
|
|
clh.scrollTop(clh.prop("scrollHeight"));
|
|
$("#chat_list").find(".chat-history").css("display", "");
|
|
}); |