Quiz

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

3
    $(document).on('change', '.lobby_change_mode', (event) => {
4
        let mode = event.target.value;
5
        $.ajax({
6
            method: "get",
7
            url: "/games/change_game_mode/",
8
            data: {mode: mode},
9
            success: (data) => {
10
                console.log(data)
11
            },
12
            error: (data) => {
13
            }
14
        });
15
    });
16

17
    $(document).on('click', '.header_friend_invite', (event) => {
18
        let friend_id = event.target.id.replace('invite_friend_', '');
19
        let friend_name = event.target.innerHTML;
20

21
        // запуск сокета
22
        friendSocket = new WebSocket (
23
            'ws://' + window.location.host + '/ws/user/' + friend_id
24
        );
25

26
        // метод при открытии сокета (пусто)
27
        friendSocket.onopen = (e) => {
28
            console.log('open')
29
            console.log(e)
30
            friendSocket.send(
31
                JSON.stringify({'message': {'action': 'invitation', 'sender': {'pk': user_id, 'nickname': $('.lobby_the_player>span:first-child').html()}}})
32
            )
33
        }
34

35
        // метод при получении сообщения
36
        friendSocket.onmessage = (e) => {
37
            // получение объекта сообщения и действия из него
38
            const data = JSON.parse(e.data)['message'];
39
            let action = data['action'];
40
            if(action == 'reject') {
41
                $('.lobby_invitation_rejected').css('display', 'inline');
42
                window.setTimeout(() => {
43
                    $('.lobby_invitation_rejected').css('display', 'none');
44
                }, 2000)
45
                friendSocket.close();
46
            } else if(action == 'accept') {
47
                friendSocket.close();
48
            };
49
        };
50

51
        // метод при закрытии сокета (пусто)
52
        friendSocket.onclose = (e) => {
53
            console.log('close')
54
            console.log(e);
55
        }
56

57
        // метод при ошибке у сокета (пусто)
58
        friendSocket.onerror = (e) => {
59
            console.log('error')
60
            console.log(e)
61
        }
62
    });
63

64
    // обработчик события нажатия на кнопку поиска игры
65
    $(document).on('click', '.lobby_start_game_button', (event) => {
66
        // необходимые изменения интерфейса
67
        event.target.innerHTML = 'Отменить поиск';
68
        event.target.classList.add('lobby_cancel_queue_button');
69
        event.target.classList.remove('lobby_start_game_button');
70

71
        // запуск отсчёта
72
        start_count();
73

74
        // запуск соответствующих действий на серверной части
75
        $.ajax({
76
            method: "get",
77
            url: "/games/queue/",
78
            data: {},
79
            success: (data) => {
80
                // получение необходимых переменных с серверной части
81
                queue_id = data.queue_id;
82

83
                // создание сокета очереди
84
                create_queue_socket(queue_id);
85

86
                // если пользователь - последний в очереди, запуска процесса подтверждений
87
                if(data.result == 'start') {
88
                    is_last_player = true;
89
                    connection_check();
90
                }
91
            },
92
            error: (data) => {
93
            }
94
        });
95
    });
96

97
    // обработчик события нажатия на кнопку для подтверждения игры
98
    $(document).on('click', '.lobby_accept_request_button', () => {
99
        accepted = true;
100
        data = {'action': 'accept_count'};
101
        if($('.lobby_theme').length) {
102
            data['theme'] = $('.lobby_theme').val();
103
        }
104
        // отправка другим пользователям в очереди сообщения о том, что запрос подтверждён
105
        queueSocket.send(
106
            JSON.stringify({'message': data})
107
        );
108
    });
109

110
    // обработчик события нажатия на кнопку отмены поиска игры
111
    $(document).on('click', '.lobby_cancel_queue_button', () => {
112
        cancel_queue(true);
113
    });
114

115
    // обработчик события закрытия окна, перехода на другую страницу или обновления страницы
116
    window.addEventListener('beforeunload', () => {
117
        quit_lobby();
118
    });
119

120
    $('.lobby_chat_close').on('click', () => {
121
        $('.lobby_chat_block').css('display', '');
122
    });
123

124
    $('.lobby_chat_open').on('click', () => {
125
        $('.lobby_chat_block').css('display', 'flex');
126
        $.ajax({
127
            method: "get",
128
            url: "/chat/load_messages/",
129
            data: {type: 'lobby'},
130
            success: (data) => {
131
                let messages = data['messages'];
132
                if (messages.length > 0) {
133
                    let date = messages[0].created_at.slice(0, 10);
134
                    let html_string = '';
135
                    for (let message of messages) {
136
                        let message_date = message.created_at.slice(0, 10);
137
                        if(date != message_date) {
138
                            html_string += `<span class='chat_date'>${date}</span>`;
139
                            date = message_date;
140
                        }
141
                        let time = message.created_at.slice(11, 16);
142
                        let message_sender = data['players'][message.sender_id];
143
                        if (message.sender_id == parseInt(user_id)) {
144
                            html_string += `<div class='chat_sent'><span class='chat_message_sender'>${message_sender}</span>
145
                            <span class='chat_message_text'>${message.text}<span class='chat_message_time'>${time}</span></span></div>`;
146
                        }else{
147
                            html_string += `<div class='chat_received'><span class='chat_message_sender'>${message_sender}</span>
148
                            <span class='chat_message_text'>${message.text}<span class='chat_message_time'>${time}</span></span></div>`;
149
                        }
150
                    };
151
                    html_string += `<span class='chat_date'>${date}</span>`;
152
                    $('.lobby_chat_messages').html(html_string);
153
                };
154
            },
155
            error: (data) => {
156
            }
157
        })
158
    });
159

160
    $('.lobby_chat_textarea').on('keydown', (event) => {
161

162
        if (event.keyCode == 13) {
163
            event.preventDefault();
164
            let chat_message = event.target.value;
165
            event.target.value = '';
166
            $.ajax({
167
                method: "get",
168
                url: "/chat/create_messages/",
169
                data: {message: chat_message, type: 'lobby'},
170
                success: (data) => {
171

172
                },
173
                error: (data) => {
174
                }
175
            })
176
        }
177
    })
178

179
});