1
window.addEventListener('load', () => {
4
let game_id = $('#game_id').val()
5
let user_id = $('#user_id').val()
8
let is_answered = false;
11
let notificationSocket = new WebSocket (
12
'ws://' + window.location.host + '/ws/game/' + game_id
16
notificationSocket.onopen = (e) => {
22
url: "/games/start_game/",
32
notificationSocket.onmessage = (e) => {
34
const data = JSON.parse(e.data)['message'];
35
let action = data['action'];
38
if(action == 'get_question') {
39
chosen_answer = undefined;
41
$('.game_question').html(data.question);
43
for(let answer of data.answers) {
44
html_string += `<p class='game_answer' id='answer_${answer.id}'>${answer.answer}</p>`;
46
$('.game_answers_block').html(html_string);
48
} else if(action == 'get_answer') {
50
for(let [pk, score] of Object.entries(data['score'])) {
51
$(`#score_${pk} > .game_score`).html(score);
54
$('.chosen_answer').css('border', '1px solid red');
55
$(`#answer_${data.correct_answer.id}`).css('border', '1px solid green');
56
$('.game_answer_button').css('visibility', '');
58
} else if(action == 'show_results') {
59
window.location.href = data['url'];
60
} else if (action == 'chat_message') {
61
let message = JSON.parse(data['message'])[0];
62
let message_sender = data['sender'];
63
let text = message.fields.text;
64
let date = message.fields.created_at.slice(0, 10);
65
let time = message.fields.created_at.slice(11, 16);
66
if($('.game_chat_messages > .chat_date').length == 0 || $('.game_chat_messages > .chat_date')[0].outerText != date) {
67
$('.game_chat_messages').prepend(`<span class='chat_date'>${date}</span>`)
69
if (message.fields.sender == parseInt(user_id)) {
70
$('.game_chat_messages').prepend(`<div class='chat_sent'><span class='chat_message_sender'>${message_sender}</span>
71
<span class='chat_message_text'>${text}<span class='chat_message_time'>${time}</span></span></div>`);
73
$('.game_chat_messages').prepend(`<div class='chat_received'><span class='chat_message_sender'>${message_sender}</span>
74
<span class='chat_message_text'>${text}<span class='chat_message_time'>${time}</span></span></div>`);
80
notificationSocket.onclose = (e) => {
86
notificationSocket.onerror = (e) => {
92
function send_answer() {
95
url: "/games/check_answer/",
96
data: {answer: chosen_answer},
105
$(document).on('click', '.game_answer', (event) => {
108
$('.game_answer_button').css('visibility', 'visible');
109
$('.chosen_answer').css('border', '');
110
$('.chosen_answer').removeClass('chosen_answer');
111
event.target.style.border = '1px solid black';
112
event.target.classList.add('chosen_answer');
113
chosen_answer = event.target.id.replace('answer_', '');
118
$(document).on('click', '.game_answer_button', (event) => {
120
if(chosen_answer && !is_answered) {
128
window.addEventListener('beforeunload', () => {
129
notificationSocket.close();
132
$('.game_chat_close').on('click', () => {
133
$('.game_chat_block').css('display', '');
136
$('.game_chat_open').on('click', () => {
137
$('.game_chat_block').css('display', 'flex');
140
url: "/chat/load_messages/",
141
data: {type: 'game'},
143
let messages = data['messages'];
144
if (messages.length > 0) {
145
let date = messages[0].created_at.slice(0, 10);
146
let html_string = '';
147
for (let message of messages) {
148
let message_date = message.created_at.slice(0, 10);
149
if(date != message_date) {
150
html_string += `<span class='chat_date'>${date}</span>`;
153
let time = message.created_at.slice(11, 16);
154
let message_sender = data['players'][message.sender_id];
155
if (message.sender_id == parseInt(user_id)) {
156
html_string += `<div class='chat_sent'><span class='chat_message_sender'>${message_sender}</span>
157
<span class='chat_message_text'>${message.text}<span class='chat_message_time'>${time}</span></span></div>`;
159
html_string += `<div class='chat_received'><span class='chat_message_sender'>${message_sender}</span>
160
<span class='chat_message_text'>${message.text}<span class='chat_message_time'>${time}</span></span></div>`;
163
html_string += `<span class='chat_date'>${date}</span>`;
164
$('.game_chat_messages').html(html_string);
172
$('.game_chat_textarea').on('keydown', (event) => {
174
if (event.keyCode == 13) {
175
event.preventDefault();
176
let chat_message = event.target.value;
177
event.target.value = '';
180
url: "/chat/create_messages/",
181
data: {message: chat_message, type: 'game'},