
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="reset.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <title>Babun Multicharacter</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js"></script>
    <script src="vue.js"></script>
    <script src="swal2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
</head>
<body>
    <v-app data-app>
        <div id="app">
            <div class="container">
                <div class="main-screen">
                    <div class="welcomescreen" v-show="show.loading">
                        <div class="loading-screen">
                            <div class="circle-border">
                                <div class="circle-core"></div>
                            </div>    
                            <div class="textload">
                                <div class="waviy"></div>
                            </div>
                        </div>
                        <div id="loading-screen">
                            <img src="logo.png" alt="" id="loading-logo">
                        </div>
                    </div>
                </html>
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Babun Multicharacter</title>
                </head>
                <body>
                    <head>
                        <audio id="backgroundMusic" loop>
                            <source src="music.mp3" type="audio/mpeg">
                         </audio>                                  
                         <script>
                            window.addEventListener("message", function(event) {
                               const audio = document.getElementById("backgroundMusic");
                               if (event.data.action === "startMusic") {
                                  audio.play();
                               } else if (event.data.action === "stopMusic") {
                                  audio.pause();
                                  audio.currentTime = 0; // Müziği başa sar
                               }
                            });
                         </script>                         
                                                                                             
                    <div class="characters-list" :class="{'slide-top-left-fade-leave-active': show.characters == false, 'slide-top-left-fade-leave-to': show.characters == false}">

                        <div class="characters">
                            <ul class="circles">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                        </ul>
                            <template
                                v-for="index in characterAmount"
                            >
                                <div
                                        v-if="characters[index] == undefined"
                                        class="character"
                                        v-ripple
                                        :class="{'char-selected': selectedCharacter == index}"
                                        data-cid=""
                                        @click="click_character(index, 'empty')"
                                >
                                    <span class="slot-name">{{translations['emptyslot']}}
                                    </span>
                                    <span class="cid"></span>
                                </div>
                                <div
                                        v-if="characters[index] !== undefined"
                                        class="character"
                                        v-ripple
                                        :class="{'char-selected': selectedCharacter == index}"
                                        :data-citizenid="characters[index].citizenid"
                                        @click="click_character(index, 'existing')"
                                >
                                    <span class="slot-name">
                                        {{characters[index].charinfo.firstname}} {{characters[index].charinfo.lastname}}
                                    </span>
                                </div>
                            </template>
                        </div>
                    </div>

                <div class="characters-but" :class="{'slide-top-left-fade-leave-active': show.characters == false, 'slide-top-left-fade-leave-to': show.characters == false}">
                    <div class="character-btns" v-if="selectedCharacter !== -1">
                        <v-btn large class="character-btn" id="play" v-ripple @click="play_character">
                            {{characters[selectedCharacter] !== undefined ? translations['play_button'] : translations['create_button']}}
                        </v-btn>
                        <v-btn large class="character-btn" id="delete" v-if="characters[selectedCharacter] !== undefined && allowDelete == true" v-ripple @click="delete_character">
                            {{translations['delete_button']}}
                        </v-btn>
                    </div>
                </div>

                    <div class="character-register" :class="{'slide-top-fade-leave-active': show.register == false, 'slide-top-fade-leave-to': show.register == false}">
                        <div class="characters-register-block-header">
                            <p>{{translations['chardel_header']}}</p>
                            <span class="material-symbols-outlined" id="close-reg" @click="() => {show.register = false; show.characters = true}">close</span>
                        </div>
                        <div class="char-register-inputs">
                            <v-text-field
                                :placeholder="translations['firstname']"
                                solo
                                hide-details="auto"
                                background-color="#32456759"
                                v-model="registerData.firstname"
                                :disabled="!show.register"
                            ></v-text-field>
                            <v-text-field
                                :placeholder="translations['lastname']"
                                solo
                                hide-details="auto"
                                background-color="#32456759"
                                v-model="registerData.lastname"
                                :disabled="!show.register"
                            ></v-text-field>
                            <v-text-field
                                v-if="customNationality"
                                :placeholder="translations['nationality']"
                                solo
                                hide-details="auto"
                                background-color="#32456759"
                                v-model="registerData.nationality"
                                :disabled="!show.register"
                            ></v-text-field>
                            <v-select
                                v-else
                                solo
                                :placeholder="translations['nationality']"
                                :items="nationalities"
                                hide-details="auto"
                                background-color="#32456759"
                                v-ripple
                                v-model="registerData.nationality"
                                :disabled="!show.register"
                            ></v-select>
                            <v-select
                                solo
                                :placeholder="translations['gender']"
                                :items="[translations['male'], translations['female']]"
                                hide-details="auto"
                                background-color="#32456759"
                                v-ripple
                                v-model="registerData.gender"
                                :disabled="!show.register"
                            ></v-select>
                            <v-dialog
                                ref="dialog"
                                v-model="dataPickerMenu"
                                :return-value.sync="registerData.date"
                                persistent
                                width="290px"
                                :disabled="!show.register"
                            >
                                <template v-slot:activator="{ on, attrs }">
                                    <v-text-field
                                        v-model="registerData.date"
                                        label="translations['birthdate']"
                                        readonly
                                        v-bind="attrs"
                                        v-on="on"
                                        solo
                                        background-color="#32456759"
                                        :disabled="!show.register"
                                    ></v-text-field>
                                </template>
                                <v-date-picker
                                    v-model="registerData.date"
                                    min="1900-01-01"
                                    max="2100-12-31"
                                >
                                    <v-spacer></v-spacer>
                                    <v-btn
                                        text
                                        color="primary"
                                        @click="dataPickerMenu = false"
                                        :disabled="!show.register"
                                    >
                                        {{translations['cancel']}}
                                    </v-btn>
                                    <v-btn
                                        text
                                        color="primary"
                                        @click="$refs.dialog.save(registerData.date)"
                                        :disabled="!show.register"
                                    >
                                        {{translations['confirm']}}
                                    </v-btn>
                                </v-date-picker>
                            </v-dialog>
                        </div>
                        <v-btn :disabled="!show.register" class="character-reg-btn" color="#21d58aa6" v-ripple @click="create_character" large>{{translations['create_button']}}</v-btn>
                    </div>

                    <div class="character-delete" :class="{'slide-top-fade-leave-active': show.delete == false, 'slide-top-fade-leave-to': show.delete == false}">
                        <p class="characters-delete-block-header">
                            {{translations['deletechar_header']}}
                        </p>

                        <p>{{translations['deletechar_description']}}</p>

                        <div class="character-delete-btns">
                            <v-btn :disabled="!show.delete" color="#2f8643" v-ripple class="character-delete-btn" @click="delete_character">{{translations['confirm']}}</v-btn>
                            <v-btn :disabled="!show.delete" color="#90293e" v-ripple class="character-delete-btn" @click="() => {show.characters = true; show.delete = false}">{{translations['cancel']}}</v-btn>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </v-app>

    </body>
    <script type="text/javascript" src="profanity.js"></script>


    <script>
        let re = '(' + profList.join('|') + ')\\b'
        const regTest = new RegExp(re, 'i');

        const viewmodel = new Vue({
            el: "#app",
            vuetify: new Vuetify(),
            data: {
                characters: [],
                chardata: {},
                show: {
                    loading: false,
                    characters: false,
                    register: false,
                    delete: false
                },
                registerData: {
                    date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
                    firstname: undefined,
                    lastname: undefined,
                    nationality: undefined,
                    gender: undefined
                },
                allowDelete: false,
                dataPickerMenu: false,
                characterAmount: 0,
                loadingText: "",
                selectedCharacter: -1,
                dollar: Intl.NumberFormat('en-US'),
                translations: {},
                customNationality:false,
                nationalities: []
            },
            methods: {
                async fetchData() {
                    const response = await fetch('https://countriesnow.space/api/v0.1/countries/');
                    if(response){
                        const data = await response.json();
                        const result = data.data;

                        const selectDrop = document.getElementById('nationality');
                        
                        result.forEach(obj => {
                            viewmodel.nationalities.push(obj.country);
                        });
                    }
                },
                click_character: function(idx, type) {
                    this.selectedCharacter = idx

                    if (this.characters[idx] !== undefined) {
                        axios.post('https://bn-multicharacter/cDataPed', {
                            cData: this.characters[idx]
                        });
                    }
                    else {
                        axios.post('https://bn-multicharacter/cDataPed', {})
                    }
                },

                save: function(date) {
                    this.$refs.menu.save(date)
                },

                delete_character: function() {
                    if (this.show.delete == true) {
                        this.show.delete = false
                        axios.post('https://bn-multicharacter/removeCharacter', {
                            citizenid: this.characters[this.selectedCharacter].citizenid
                        });
                    }
                    else {
                        if (this.show.characters == true && this.show.register == false) {
                            this.show.characters = false
                            this.show.delete = true
                        }
                    }
                },

                play_character: function() {
                    if (this.selectedCharacter && this.selectedCharacter !== -1) {
                        var data = this.characters[this.selectedCharacter]

                        if (data !== undefined) {
                            axios.post('https://bn-multicharacter/selectCharacter', {
                                cData: data
                            });
                            setTimeout(function() {
                                viewmodel.show.characters = false
                            }, 500)
                        }
                        else {
                            this.registerData.firstname = undefined
                            this.registerData.lastname = undefined
                            this.registerData.nationality = undefined
                            this.registerData.gender = undefined
                            this.registerData.date = (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10)

                            this.show.characters = false
                            this.show.register = true
                        }
                    }

                },

                create_character: function() {
                    const registerData = this.registerData
                    var profanityTest = (!regTest.test(registerData.firstname) && !regTest.test(registerData.nationality) && !regTest.test(registerData.lastname))

                    if (profanityTest && registerData.firstname !== undefined && registerData.firstname !== "" && registerData.lastname !== undefined && registerData.lastname !== "" && registerData.gender !== undefined && registerData.nationality !== undefined && registerData.nationality !== "" && registerData.date !== undefined) {
                        this.show.register = false

                        axios.post('https://bn-multicharacter/createNewCharacter', {
                            firstname: registerData.firstname,
                            lastname: registerData.lastname,
                            nationality: registerData.nationality,
                            birthdate: registerData.date,
                            gender: registerData.gender,
                            cid: this.selectedCharacter,
                        });
                    }
                    else {
                        if (!profanityTest) {
                            Swal.fire({
                                icon: 'error',
                                title: this.translate('ran_into_issue'),
                                text: this.translate('profanity'),
                                timer: 5000,
                                timerProgressBar: true,
                                showConfirmButton: false
                            })
                        }
                        else {
                            Swal.fire({
                                icon: 'error',
                                title: this.translate('ran_into_issue'),
                                text: this.translate('forgotten_field'),
                                timer: 5000,
                                timerProgressBar: true,
                                showConfirmButton: false
                            })
                        }
                    }
                },

                translate(phrase) {
                    return this.translations[phrase] || phrase;
                }
            },
            mounted () {
                this.fetchData()
                var loadingProgress = 0;
                var loadingDots = 0;
                window.addEventListener('message', function (event) {
                    var data = event.data;
                    switch(data.action) {
                        case "ui":
                            viewmodel.customNationality = event.data.customNationality
                            viewmodel.translations = event.data.translations
                            viewmodel.characterAmount = data.nChar;
                            viewmodel.selectedCharacter = -1
                            viewmodel.show.register = false
                            viewmodel.show.delete = false
                            viewmodel.show.characters = false
                            viewmodel.allowDelete = event.data.enableDeleteButton
                            EnableDeleteButton = data.enableDeleteButton;
                            if (data.toggle) {
                                viewmodel.show.loading = true

                                viewmodel.loadingText = viewmodel.translate('retrieving_playerdata');
                                var DotsInterval = setInterval(function () {
                                    loadingDots++;
                                    loadingProgress++;
                                    if (loadingProgress == 3) {
                                        viewmodel.loadingText = viewmodel.translate('validating_playerdata')
                                    }
                                    if (loadingProgress == 4) {
                                        viewmodel.loadingText = viewmodel.translate('retrieving_characters')
                                    }
                                    if (loadingProgress == 6) {
                                        viewmodel.loadingText = viewmodel.translate('validating_characters')
                                    }
                                    if (loadingDots == 4) {
                                        loadingDots = 0;
                                    }
                                }, 500);

                                setTimeout(function () {
                                    axios.post('https://bn-multicharacter/setupCharacters');
                                    setTimeout(function () {
                                        clearInterval(DotsInterval);
                                        loadingProgress = 0;
                                        viewmodel.loadingText = viewmodel.translate('retrieving_playerdata');
                                        viewmodel.show.loading = false
                                        viewmodel.show.characters = true
                                        axios.post('https://bn-multicharacter/removeBlur');
                                    }, 2000);
                                }, 2000);
                            }
                            break;
                        case "setupCharacters":
                            var newChars = []
                            for (var i = 0; i < event.data.characters.length; i++) {
                                newChars[event.data.characters[i].cid] = event.data.characters[i]
                            }
                            viewmodel.characters = newChars
                            break;
                        case "setupCharInfo":
                            viewmodel.chardata = event.data.chardata
                            break;
                    }
                });
            }
            
        });
    
        </script>
</html>