Quiz

1
window.addEventListener('load', () => {
2

3
    // получение id из скрытых инпутов на странице
4
    let game_id = $('#game_id').val()
5
    let user_id = $('#user_id').val()
6

7
    let chosen_answer;
8
    let is_answered = false;
9

10
    // запуск сокета
11
    let notificationSocket = new WebSocket (
12
        'ws://' + window.location.host + '/ws/game/' + game_id
13
    );
14

15
    // метод при открытии сокета
16
    notificationSocket.onopen = (e) => {
17
        console.log('open')
18
        console.log(e)
19
        // запуск игры на серверной части
20
        $.ajax({
21
            method: "get",
22
            url: "/games/start_game/",
23
            data: {},
24
            success: (data) => {
25
            },
26
            error: (data) => {
27
            }
28
        });
29
    }
30

31
    // метод при получении сообщения
32
    notificationSocket.onmessage = (e) => {
33
        // получение объекта сообщения и действия из него
34
        const data = JSON.parse(e.data)['message'];
35
        let action = data['action'];
36

37
        // получение вопроса и добавление его на страницу
38
        if(action == 'get_question') {
39
            chosen_answer = undefined;
40
            is_answered = false;
41
            $('.game_question').html(data.question);
42
            let html_string = '';
43
            for(let answer of data.answers) {
44
                html_string += `<p class='game_answer' id='answer_${answer.id}'>${answer.answer}</p>`;
45
            }
46
            $('.game_answers_block').html(html_string);
47
        // получение правильного ответа и добавление его на страницу
48
        } else if(action == 'get_answer') {
49
            // обновление таблицы баллов
50
            for(let [pk, score] of Object.entries(data['score'])) {
51
                $(`#score_${pk} > .game_score`).html(score);
52
            };
53
            // обводка правильного ответа и ответа пользователя, если он не правильный, зелёным и красным соответственно
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', '');
57
        // переход на страницу с результатами
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>`)
68
            }
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>`);
72
            } else {
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>`);
75
            }
76
        }
77
    };
78

79
    // метод при закрытии сокета (пусто)
80
    notificationSocket.onclose = (e) => {
81
        console.log('close')
82
        console.log(e);
83
    }
84

85
    // метод при ошибке у сокета (пусто)
86
    notificationSocket.onerror = (e) => {
87
        console.log('error')
88
        console.log(e)
89
    }
90

91
    // функция отправки выбранного пользователем ответа на сервер для проверки
92
    function send_answer() {
93
        $.ajax({
94
            method: "get",
95
            url: "/games/check_answer/",
96
            data: {answer: chosen_answer},
97
            success: (data) => {
98
            },
99
            error: (data) => {
100
            }
101
        });
102
    }
103

104
    // обработчик события нажатия на ответ
105
    $(document).on('click', '.game_answer', (event) => {
106
        // если ответ уже отправлен, ничего не происходит
107
        if(!is_answered) {
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_', '');
114
        }
115
    });
116

117
    // обработчик события нажатия на кнопку отправки ответа
118
    $(document).on('click', '.game_answer_button', (event) => {
119
        // если ответ уже отправлен или не выбран, ничего не происходит
120
        if(chosen_answer && !is_answered) {
121
            is_answered = true;
122
            send_answer();
123
        }
124
    })
125

126
    // обработчик события закрытия окна, перехода на другую страницу или обновления страницы (скорее всего не нужен,
127
    // создан для решения ошибки, в процессе)
128
    window.addEventListener('beforeunload', () => {
129
        notificationSocket.close();
130
    });
131

132
    $('.game_chat_close').on('click', () => {
133
        $('.game_chat_block').css('display', '');
134
    });
135

136
    $('.game_chat_open').on('click', () => {
137
        $('.game_chat_block').css('display', 'flex');
138
        $.ajax({
139
            method: "get",
140
            url: "/chat/load_messages/",
141
            data: {type: 'game'},
142
            success: (data) => {
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>`;
151
                            date = message_date;
152
                        }
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>`;
158
                        }else{
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>`;
161
                        }
162
                    };
163
                    html_string += `<span class='chat_date'>${date}</span>`;
164
                    $('.game_chat_messages').html(html_string);
165
                };
166
            },
167
            error: (data) => {
168
            }
169
        })
170
    });
171

172
    $('.game_chat_textarea').on('keydown', (event) => {
173

174
        if (event.keyCode == 13) {
175
            event.preventDefault();
176
            let chat_message = event.target.value;
177
            event.target.value = '';
178
            $.ajax({
179
                method: "get",
180
                url: "/chat/create_messages/",
181
                data: {message: chat_message, type: 'game'},
182
                success: (data) => {
183

184
                },
185
                error: (data) => {
186
                }
187
            })
188
        }
189
    })
190

191
});