1
window.addEventListener('load', () => {
4
userSocket = new WebSocket (
5
'ws://' + window.location.host + '/ws/user/' + user_id
9
userSocket.onopen = (e) => {
15
userSocket.onmessage = (e) => {
17
const data = JSON.parse(e.data)['message'];
18
let action = data['action'];
19
if(action == 'invitation') {
20
sender = data['sender'];
21
$('.lobby_invitation_nickname').html(`Принять приглашение от ${sender['nickname']}`);
22
$('.lobby_invitation_block').css('display', 'flex');
23
} else if(action == 'queue') {
25
$('.lobby_start_game_span').html('Отменить поиск');
26
$('.lobby_start_game_span').addClass('lobby_cancel_queue_button');
27
$('.lobby_start_game_span').removeClass('lobby_start_game_span');
30
create_queue_socket(data['queue_id']);
31
} else if(action == 'cancel_queue') {
33
} else if(action == 'player_quit') {
35
$(`#user_${data['quitter_pk']}`).remove();
36
$(`#invite_friend_${data['quitter_pk']}`).addClass('header_friend_invite');
37
$(`#invite_friend_${data['quitter_pk']}`).removeClass('header_friend_invited');
38
$('.header_friend_invite').css('display', '');
39
let blank_string = '<div class="lobby_player_blank"></div>';
40
if(current_players % 2 == 1) {
41
$('.lobby_the_player').before(blank_string);
43
$('.lobby_the_player').after(blank_string);
45
if(data['lobby_leader'] && data['new_leader_pk'] == user_id) {
46
$('.lobby_start_game_span').addClass('lobby_start_game_button');
47
$('.lobby_start_game_span').removeClass('lobby_start_game_span');
48
$('.lobby_change_mode').css('display', '');
49
$('.lobby_change_mode').val(data['current_mode']).change();
51
if(data['u_r_alone']) {
52
$('#mode_ranked').css('display', '');
54
} else if(action == 'player_join') {
56
$(`#invite_friend_${data['quitter_pk']}`).removeClass('header_friend_invite');
57
$(`#invite_friend_${data['quitter_pk']}`).addClass('header_friend_invited');
58
let player_string = `<div id='user_${data["joiner_pk"]}' class="lobby_player_block">${data['joiner_nickname']}</div>`;
59
if(current_players % 2 == 1) {
60
$('.lobby_players_block>div:first-child').remove();
61
$('.lobby_the_player').before(player_string);
63
$('.lobby_players_block>div:last-child').remove();
64
$('.lobby_the_player').after(player_string);
66
$('#mode_ranked').css('display', 'none');
67
if(data['last_place']) {
68
$('.header_friend_invite').css('display', 'none');
70
} else if(action == 'add_theme') {
71
let html_string = '<span>Выберите тему для игры:</span><select class="lobby_theme">';
72
for (let theme of data['themes']) {
73
html_string += `<option value='${theme[0]}'>${theme[0]}</option>`
75
html_string += '</select>';
76
$('.lobby_mode').append(html_string);
77
} else if(action == 'delete_theme') {
78
$('.lobby_theme').remove();
79
} else if(action == 'chat_message') {
80
let message = JSON.parse(data['message'])[0];
81
let message_sender = data['sender'];
82
let text = message.fields.text;
83
let date = message.fields.created_at.slice(0, 10);
84
let time = message.fields.created_at.slice(11, 16);
85
if (data['type'] == 'friend') {
86
if($('.friend_chat_messages > .chat_date').length == 0 || $('.friend_chat_messages > .chat_date')[0].outerText != date) {
87
$('.friend_chat_messages').prepend(`<span class='chat_date'>${date}</span>`)
89
if (message.fields.sender == parseInt(user_id)) {
90
$('.friend_chat_messages').prepend(`<div class='chat_sent'><span class='chat_message_sender'>${message_sender}</span>
91
<span class='chat_message_text'>${text}<span class='chat_message_time'>${time}</span></span></div>`);
93
if($('.friend_chat_block').css('display') == 'none' || $('.friend_chat_name').html != data['sender']) {
94
$(`#chat_friend_${message.fields.sender}`).click();
96
$('.friend_chat_messages').prepend(`<div class='chat_received'><span class='chat_message_sender'>${message_sender}</span>
97
<span class='chat_message_text'>${text}<span class='chat_message_time'>${time}</span></span></div>`);
100
} else if (data['type'] == 'lobby'){
101
if($('.lobby_chat_messages > .chat_date').length == 0 || $('.lobby_chat_messages > .chat_date')[0].outerText != date) {
102
$('.lobby_chat_messages').prepend(`<span class='chat_date'>${date}</span>`)
104
if (message.fields.sender == parseInt(user_id)) {
105
$('.lobby_chat_messages').prepend(`<div class='chat_sent'><span class='chat_message_sender'>${message_sender}</span>
106
<span class='chat_message_text'>${text}<span class='chat_message_time'>${time}</span></span></div>`);
108
$('.lobby_chat_messages').prepend(`<div class='chat_received'><span class='chat_message_sender'>${message_sender}</span>
109
<span class='chat_message_text'>${text}<span class='chat_message_time'>${time}</span></span></div>`);
116
userSocket.onclose = (e) => {
122
userSocket.onerror = (e) => {
127
$(document).on('click', '.header_friends_button', (event) => {
128
if ($('.header_friends_block').css('display') == 'none') {
129
$('.header_friends_block').css('display', 'flex');
130
} else if (event.target.classList[0] == 'header_friends_button') {
131
$('.header_friends_block').css('display', '');
135
$(document).on('click', '.lobby_invitation_accept', () => {
138
url: "/games/join_lobby_ajax/",
139
data: {sender_id: sender['pk']},
142
JSON.stringify({'message': {'action': 'accept'}})
145
window.location.href = data['url'];
148
$('.lobby_invitation_nickname').html('');
149
$('.lobby_invitation_block').css('display', 'none');
157
$(document).on('click', '.lobby_invitation_reject', () => {
159
$('.lobby_invitation_nickname').html('');
160
$('.lobby_invitation_block').css('display', '');
162
JSON.stringify({'message': {'action': 'reject'}})
166
$('.friend_chat_close').on('click', () => {
167
$('.friend_chat_block').css('display', '');
170
$('.header_friend_chat').on('click', (event) => {
171
$('.friend_chat_block').css('display', 'flex');
172
let friend_pk = parseInt(event.target.id.replace('chat_friend_', ''));
175
url: "/chat/load_messages/",
176
data: {friend_pk: friend_pk, type: 'friend'},
178
let messages = data['messages'];
179
if (messages.length > 0) {
180
let date = messages[0].created_at.slice(0, 10);
181
let html_string = '';
182
for (let message of messages) {
183
let message_date = message.created_at.slice(0, 10);
184
if(date != message_date) {
185
html_string += `<span class='chat_date'>${date}</span>`;
188
let time = message.created_at.slice(11, 16);
189
if (message.sender_id == parseInt(user_id)) {
190
let message_sender = data['user_nickname'];
191
html_string += `<div class='chat_sent'><span class='chat_message_sender'>${message_sender}</span>
192
<span class='chat_message_text'>${message.text}<span class='chat_message_time'>${time}</span></span></div>`;
194
let message_sender = data['friend_nickname'];
195
html_string += `<div class='chat_received'><span class='chat_message_sender'>${message_sender}</span>
196
<span class='chat_message_text'>${message.text}<span class='chat_message_time'>${time}</span></span></div>`;
199
html_string += `<span class='chat_date'>${date}</span>`;
200
$('.friend_chat_messages').html(html_string);
202
$('.friend_chat_name').html(data['friend_nickname']);
203
$('.friend_chat_textarea').attr('id', `textarea_${friend_pk}`);
211
$('.friend_chat_textarea').on('keydown', (event) => {
213
if (event.keyCode == 13) {
214
event.preventDefault();
215
let reciever_pk = parseInt(event.target.id.replace('textarea_', ''));
216
let chat_message = event.target.value;
217
event.target.value = '';
220
url: "/chat/create_messages/",
221
data: {sender: user_id, receiver: reciever_pk, message: chat_message, type: 'friend'},