<commit_before>const container = document.querySelector('#app');

const kJoinScreen = 0;
const kGameScreen = 1;

class Connect4 {
    constructor() {
        this.screen = kJoinScreen;
        this.boardname = undefined;
        this.tilesprepared = false;
        this.color = 1;
        this.stateCheckInterval = undefined;
    }

    setupStateCheckInterval() {
        this.stateCheckInterval = setInterval(() => {
            if (this.screen === kGameScreen) {
                this.render();
            }
        }, 500);
    }

    render() {
        switch (this.screen) {
        case kJoinScreen: {
            container.className = '';

            this.clearScreen();
            const inputfield_container = document.createElement('form');
            const name_inputfield = document.createElement('input');
            const name_submit = document.createElement('input');
            const color_selector = document.createElement('select');

            inputfield_container.id = 'inputfield_container';
            name_inputfield.id = 'name_inputfield';
            name_inputfield.type = 'text';
            name_inputfield.className += 'loginscreen_inputs';
            name_inputfield.placeholder = 'Board name';
            name_submit.id = 'name_submit';
            name_submit.type = 'submit';
            name_submit.className += 'loginscreen_inputs';
            color_selector.id = 'color_selector';
            color_selector.className += 'loginscreen_inputs';

            color_selector.appendChild((() => {
                const option = document.createElement('option');
                option.value = 1;
                option.innerText = 'Red';
                option.selected = true;
                return option;
            })());

            color_selector.appendChild((() => {
                const option = document.createElement('option');
                option.value = 2;
                option.innerText = 'Black';
                return option;
            })());

            inputfield_container.onsubmit = (event) => {
                event.preventDefault();
                this.joinGame(name_inputfield.value, color_selector.selectedIndex + 1);
            };

            inputfield_container.appendChild(name_inputfield);
            inputfield_container.appendChild(color_selector);
            inputfield_container.appendChild(name_submit);
            container.appendChild(inputfield_container);
            break;
        }

        case kGameScreen: {
            if (!this.tilesprepared) {
                this.clearScreen();
                this.buildTiles();
                this.tilesprepared = true;
            }

            if (this.color === 1) container.className = 'primary_color';
            if (this.color === 2) container.className = 'secondary_color';

            const gamefield = document.querySelector('#gamefield');

            this.requestServer('state', [this.boardname], (response) => {

                if (response.data.lastPlacedColor !== this.color) {
                    document.title = '**YOUR TURN**';
                } else {
                    document.title = 'Connect 4';
                }

                response.data.board.map((row, y) => {
                    y = parseInt(y, 10);
                    row.map((column, x) => {
                        x = parseInt(x, 10);
                        const tile = gamefield.children[y].children[x].children[0];

                        if (column === 0) tile.className = 'tile empty_tile';
                        if (column === 1) tile.className = 'tile primary_tile';
                        if (column === 2) tile.className = 'tile secondary_tile';
                    });
                });

                if (response.won !== 0) {
                    clearInterval(this.stateCheckInterval);
                    this.stateCheckInterval = undefined;
                    alert('Player number #' + response.won + ' has won the game!');
                }
            });<commit_msg>Play a sound when it's your turn<commit_after>const container = document.querySelector('#app');
const audio = new Audio('https://notificationsounds.com/soundfiles/5b69b9cb83065d403869739ae7f0995e/file-sounds-937-job-done.mp3');

const kJoinScreen = 0;
const kGameScreen = 1;

class Connect4 {
    constructor() {
        this.screen = kJoinScreen;
        this.boardname = undefined;
        this.tilesprepared = false;
        this.color = 1;
        this.stateCheckInterval = undefined;
    }

    setupStateCheckInterval() {
        this.stateCheckInterval = setInterval(() => {
            if (this.screen === kGameScreen) {
                this.render();
            }
        }, 500);
    }

    render() {
        switch (this.screen) {
        case kJoinScreen: {
            container.className = '';

            this.clearScreen();
            const inputfield_container = document.createElement('form');
            const name_inputfield = document.createElement('input');
            const name_submit = document.createElement('input');
            const color_selector = document.createElement('select');

            inputfield_container.id = 'inputfield_container';
            name_inputfield.id = 'name_inputfield';
            name_inputfield.type = 'text';
            name_inputfield.className += 'loginscreen_inputs';
            name_inputfield.placeholder = 'Board name';
            name_submit.id = 'name_submit';
            name_submit.type = 'submit';
            name_submit.className += 'loginscreen_inputs';
            color_selector.id = 'color_selector';
            color_selector.className += 'loginscreen_inputs';

            color_selector.appendChild((() => {
                const option = document.createElement('option');
                option.value = 1;
                option.innerText = 'Red';
                option.selected = true;
                return option;
            })());

            color_selector.appendChild((() => {
                const option = document.createElement('option');
                option.value = 2;
                option.innerText = 'Black';
                return option;
            })());

            inputfield_container.onsubmit = (event) => {
                event.preventDefault();
                this.joinGame(name_inputfield.value, color_selector.selectedIndex + 1);
            };

            inputfield_container.appendChild(name_inputfield);
            inputfield_container.appendChild(color_selector);
            inputfield_container.appendChild(name_submit);
            container.appendChild(inputfield_container);
            break;
        }

        case kGameScreen: {
            if (!this.tilesprepared) {
                this.clearScreen();
                this.buildTiles();
                this.tilesprepared = true;
            }

            if (this.color === 1) container.className = 'primary_color';
            if (this.color === 2) container.className = 'secondary_color';

            const gamefield = document.querySelector('#gamefield');

            this.requestServer('state', [this.boardname], (response) => {

                if (response.data.lastPlacedColor !== this.color) {

                  if (document.title === 'Connect 4') {
                    audio.play();
                  }

                    document.title = '**YOUR TURN**';
                } else {
                    document.title = 'Connect 4';
                }

                response.data.board.map((row, y) => {
                    y = parseInt(y, 10);
                    row.map((column, x) => {
                        x = parseInt(x, 10);
                        const tile = gamefield.children[y].children[x].children[0];

                        if (column === 0) tile.className = 'tile empty_tile';
                        if (column === 1) tile.className = 'tile primary_tile';
                        if (column === 2) tile.className = 'tile secondary_tile';
                    });
                });

                if (response.won !== 0) {
                    clearInterval(this.stateCheckInterval);
                    this.stateCheckInterval = undefined;
                    alert('Player number #' + response.won + ' has won the game!');
                }
            });
{'fraction_non_alphanumeric': 0.1139666146271166, 'fraction_numerical': 0.008646571394259638, 'mean_word_length': 1.619691726958163, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 17, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2485310', 'n_tokens_mistral': 2126, 'n_tokens_neox': 1971, 'n_words': 377}