var urlSite = "https://chingplay.fr";
var local = false
//============ Langue


function accueil_changeLangue(ev) {
    if (ui_langue == 'fr') {
        ui_langue = 'en';
    }
    else {
        ui_langue = 'fr'
    }
    cookie_save("langue", ui_langue);
    ev.currentTarget.className = (ui_langue == 'fr' ? 's60 s_a' : 's60 s_b');
    accueil_updateLangue()
}


function accueil_updateLangue() {
    var liste = document.querySelectorAll(".langFR")
    for (var i = 0; i < liste.length; i++) {
        liste[i].style.display = (ui_langue == 'fr' ? "block" : "none")
    }
    var liste = document.querySelectorAll(".langEN")
    for (var i = 0; i < liste.length; i++) {
        liste[i].style.display = (ui_langue == 'en' ? "block" : "none")
    }
    //==== Vidéo
    var video = document.querySelector('#index_video');
    if (ui_langue == "fr") {
        video.innerHTML = '<video muted controls><source src="video-presentation/accueil-fr.mp4" type="video/webm"><source src="video-presentation/accueil-fr.webm" type="video/mp4"></video>';
    }
    else {
        video.innerHTML = '<video muted controls><<source src="video-presentation/accueil-en.webm" type="video/webm"><source src="video-presentation/accueil-en.mp4" type="video/mp4"></video>';
    }

}
function gameErreur(erreur) {
    console.log(erreur.toString())
    document.querySelector("#divError > div").innerHTML = errorNumLine(erreur.toString())
    document.querySelector("#divError > div").style.display = "block"
}


function errorPython(str) {
    console.log("errorPython: " + str);
    document.querySelector("#divError > div").innerHTML = errorNumLine(str)
    document.querySelector("#divError > div").style.display = "block"
    throw new Sk.builtin.MyError(errorNumLine(str), "", "")
}

function errorPythonEvent(err, method) {
    console.log(err.args.v[0].v)
    document.querySelector("#divError > div").innerHTML = err.tp$name + " : " + errorNumLine(err.args.v[0].v) + " <i>(function " + method + ")</i>"
    document.querySelector("#divError > div").style.display = "block"
}

function errorNumLine(str) {
    var reg = /line ([0-9]+)/
    var result;
    if (result = str.match(reg)) {
        num = parseInt(result[1])
        const linesA = (myCodeInit.getValue().match(/\n/g) || '').length + 1
        const linesB = (myCodeLoop.getValue().match(/\n/g) || '').length + 1
        const linesC = (myCodeListener.getValue().match(/\n/g) || '').length + 1
        console.log(num + "-" + linesA + " " + linesB + " " + linesC)
        var section;
        if (num < linesA) {
            section = "(code init)"
        }
        else if (num < linesA + linesB) {
            section = "(code loop)"
            num = num - linesA
        }
        else {
            section = "(code listener)"
            num = num - linesA - linesB
        }
        return str.replace(reg, "line " + num + " " + section)
    }
    else {
        return str
    }
}
/*=================== Gestion des erreurs ===================*/

string_error_entier = {'fr': "le XXX0XXX<sup>e</sup> argument doit être un entier",
    "en": "the XXX0XXX<sup>th</sup> argument must be an integer"};
string_error_string = {"fr": "le XXX0XXX<sup>e</sup> argument doit être une chaîne de caractères",
    "en":"the XXX0XXX<sup>th</sup> argument must be a string"};
string_error_couleurString = {"fr": "le XXX0XXX<sup>e</sup> argument doit être une chaîne de caractères",
    "en": "the XXX0XXX<sup>th</sup> argument must be a string"};
string_error_couleurFormat = { "fr": "le XXX0XXX<sup>e</sup> argument représenté une couleur au format hexadécimal",
    "en": "the  XXX0XXX<sup>th</sup> argument represent a color in hexadécimal format"};
string_error_boolean = { "fr": "le XXX0XXX<sup>e</sup> argument doit être une booléan",
    "en": "the  XXX0XXX<sup>th</sup> argument must to be a boolean"};


function errorEntier(num, pos, nomVariable, nameVariable) {
    if (!Number.isInteger(num)) {
        console.log('La valeur doit être entière : ',num)
        if (pos == 0) {
            var error;
            if (data['langue'] == 'fr') { //??????????? ne marche poas ??? ENLEVER nomVariable et nameVariable à part
                error = "la variable <tt>" + nomVariable + "</tt> doit être un entier";
            }
            else {
                error = "The variable <tt>" + nameVariable + "</tt> must be an integer";
            }
            throw new Sk.builtin.ValueError(error);
        }
        else {
            message_erreur(string_error_entier,pos);
        }
    }
}

function errorString(val, pos) {
    if (typeof val != "string") {
        var error;
        if (pos == 0) {
            if (data['langue'] == 'fr') {
                error = "la variable <tt>" + nomVariable + "</tt> doit être une chaîne de caractères";
            }
            else {
                error = "The variable <tt>" + nameVariable + "</tt> must be a string";
            }
            throw new Sk.builtin.ValueError(error);
        }
        else {
            message_erreur(string_error_string,pos);
        }
    }
}

function errorCouleur(val, pos) {
    var str;
    if (typeof val == "string") {
        var regexp = /^#[0-9A-Fa-f]{6}$/
        if (!regexp.test(val)) {
            message_erreur(string_error_couleurFormat,pos);
        }
    }
    else {
        message_erreur(string_error_couleurString,pos);
    }
}



function errorTableau(val, pos) {
    //==== Vérifie le type Array
    if ((typeof val != "object") || (val.length == null)) {
        if (data['langue'] == 'fr') {
            str = "le " + pos + "<sup>e</sup> argument doit être un tableau";
        }
        else {
            str = "the " + pos + "<sup>th</sup> argument must be an array";
        }
        throw new Sk.builtin.ValueError(str);
        return;
    }
    //==== Vérifie que les éléments existent en conjonction avec l'argument length
    for (var i = 0; i < val.length; i++) {
        if (val[i] == null) {
            if (data['langue'] == 'fr') {
                str = "le " + pos + "<sup>e</sup> argument est un tableau mais ne possède pas d'élément à la position " + i;
            }
            else {
                str = "the " + pos + "<sup>th</sup> argument  is an array but has no element at position " + i;
            }
            throw new Sk.builtin.ValueError(str);
        }
    }
}

function errorTableauLongueur(val, pos, length) {
    if (val.length != length) {
        if (data['langue'] == 'fr') {
            str = "le " + pos + "<sup>e</sup> argument doit être un tableau de dimension " + length + " (trouvé " + val.length + ")";
        }
        else {
            str = "the " + pos + "<sup>th</sup> argument  must be an array of dimension " + length + " (trouvé " + val.length + ")";
        }
        throw new Sk.builtin.ValueError(str);
    }
}

function errorTableauEntier(val, pos) {
    for (var i = 0; i < val.length; i++) {
        if (!Number.isInteger(val[i].v)) {
            if (data['langue'] == 'fr') {
                str = "le " + pos + "<sup>e</sup> argument doit être un tableau d'entiers (erreur à l'index " + i + ")";
            }
            else {
                the = "the " + pos + "<sup>th</sup> argument must be an integer array (error at index " + i + ")";
            }
            throw new Sk.builtin.ValueError(str);
            return;
        }
    }
}

function errorBoolean(val,pos){
    //console.log(val.tp$name)
    if((val.tp$name==null) || (val.tp$name!="bool")){
        message_erreur(string_error_boolean,pos);
    }
}

function message_erreur(...args) {
    console.log()
    //=== récupère la chaine
    var ch = (data['langue']=='fr'?args[0]["fr"]:args[0]['en']);
    //=== prend en compte les autres valeurs
    for(var i=1;i<args.length;i++){
        ch = ch.replace('XXX'+(i-1)+'XXX',args[i]);
    }
    //==== Envoi l'erreur
    throw new Sk.builtin.MyError(ch);
}var gamePassword = null;
var myCodeListe = null;
var readOnly = false;

var data = null;

var myCodeInit;
var myCodeLoop;
var myCodeListener;
var myCodeListe;

var game_loadData_aiScript = false

var game_str_linkCommentA = { 'fr': 'Lien jeu', 'en': 'Game link' };
var game_str_linkCommentB = { 'fr': 'Lien édition', 'en': 'Edit link' };
var game_str_imgLang = { 'fr': 'Français', 'en': 'English' }
var game_str_imgModele = { 'fr': 'Voir le jeu finalisé', 'en': 'See the finalizes game' }
var game_str_imgBackGame = { 'fr': 'Retour au jeu', 'en': 'Back to game' }
var game_str_imgDownload = { 'fr': 'Accueil', 'en': 'Home' }
var game_str_imgDelete = { 'fr': 'Effacer ce projet', 'en': 'Delete project' }

function decodeBase64(base64) {
    const text = atob(base64);
    const length = text.length;
    const bytes = new Uint8Array(length);
    for (let i = 0; i < length; i++) {
        bytes[i] = text.charCodeAt(i);
    }
    const decoder = new TextDecoder(); // default is utf-8
    return decoder.decode(bytes);
}

function gameLoad(ev) {
    console.log("gameLoad")
    num = ev.currentTarget.getAttribute("num")
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status == 200) {
                console.log(xhr.response);
                data = xhr.response
                game_loadData();
                //==== Mise à jour de l'AI
                if(data['modeleNum']==6){
                    document.querySelector('#ai_uploadStatut').innerHTML = data['ai_onglet'].replace('XXX0XXX',formatDate(data['ai_timestamp']*1000));
                }
                return;
            }
        }
    }
    xhr.open("POST", "gameLoad.php");
    xhr.responseType = "json"
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("n=" + num);
}

function modeleLoad(ev) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status == 200) {
                console.log(xhr.response);
                data = xhr.response
                game_loadData();
                return;
            }
        }
    }
    xhr.open("POST", "modeleLoad.php");
    xhr.responseType = "json"
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("m=" + data['modeleNum']);
}

function game_loadData() {
    console.log("game_loadData",data)
    //==== Vide le svg
    svgDelete();
    gameUI_actualiseLangue();
    //==== Données du jeu
    gamePassword = data['gamePassword'];
    //==== Affiche le div des games
    document.querySelector('#divAccueil').style.display = "none";
    document.querySelector('#divGame').style.display = "block";
    //==== title des boutons
    document.querySelector('#imgLang').title = game_str_imgLang[data['langue']]
    document.querySelector('#imgDownload').title = game_str_imgDownload[data['langue']]
    document.querySelector('#imgDelete').title = game_str_imgDelete[data['langue']]
    var eltA = document.querySelector('#imgModele');
    eltA.title = game_str_imgModele[data['langue']];
    var eltB = document.querySelector('#imgBackGame');
    eltB.title = game_str_imgBackGame[data['langue']]
    if (true) {
        eltA.style.display = "inline-block";
        eltB.style.display = "none";
    }
    else {
        eltA.style.display = "none";
        eltB.style.display = "inline-block";
    }
    //==== Titre
    document.querySelector('#gameTitre').innerHTML = data['titre']
    //==== Active le zooom
    actuZoom_init();
    //==== LinkComment
    //console.log(data['langue'])
    document.querySelector('#game_linkCommentA').innerHTML = game_str_linkCommentA[data['langue']];
    document.querySelector('#game_linkCommentB').innerHTML = game_str_linkCommentB[data['langue']];
    //==== code A
    var elt = document.querySelector('#game_codeA');
    elt.innerHTML = data['codeAhex'];
    elt.href = urlSite + '/' + data['codeAhex'];
    //==== code B
    if(gamePassword==''){
        document.querySelector('#game_linkCommentBspan').style.display="none";
    }
    else{
        document.querySelector('#game_linkCommentBspan').style.display="block";
        var elt = document.querySelector('#game_codeB');
        var val = data['codeAhex'] + '-' + data['codeB']
        elt.innerHTML = val;
        elt.href = urlSite + '/' + val;    
    }
    //==== Affichage Canvas/SVG
    if (data['canvas'] == '1') {
        document.querySelector('svg').style.display = "none";
        document.querySelector('canvas').style.display = "block";
    }
    else {
        document.querySelector('svg').style.display = "block";
        document.querySelector('canvas').style.display = "none";
    }
    //=== Efface la console
    document.getElementById("ui_output").innerHTML = '';
    //==== Chargement de l'onglet
    //==== Load code
    myCodeInit = load_codeMirror(0, convert_atob(data['codeInit']), readOnly);
    myCodeLoop = load_codeMirror(1, convert_atob(data['codeLoop']), readOnly);
    myCodeListener = load_codeMirror(2, atob(data['codeListener']), readOnly);
    myCodeListe = [myCodeInit, myCodeLoop, myCodeListener]
    //==== Actualise la taille d'affichage
    updateNavFontSize();
    //==== Onglet projet
    var elt = document.querySelector('#divOnglet5 > #presentation');
    elt.innerHTML = decodeBase64(data['presentation']);
    //==== Onglet ABC du code
    var elt = document.querySelector('#divOnglet3 > #presentation');
    elt.innerHTML = decodeBase64(data['abcCode']);
    //==== Gestion de l'AI
    if ((data['modeleNum'] == '6') && (!game_loadData_aiScript)){
        game_loadData_aiScript = true;
        var elt = document.createElement('script');
        elt.src = urlSite + '/javascript-mod-ai-967687.js';
        elt.async = false
        elt.setAttribute('defer','')
        elt.addEventListener('load',() => {ai_ui_onLoad();});
        document.head.appendChild(elt);
    }
    //===== Cache les onglets inutiles
    for(var i=0;i<6;i++){
        if(data['ongletHidden'].indexOf(i)==-1){
            document.querySelector('#nav'+i).style.display="inline-block"
        }
        else{
            document.querySelector('#nav'+i).style.display="none"
        }
    }
    //===== Affiche de l'onglet par défaut
    ui_ongletAff(data['ongletDefault'])
}



//===================== Model game

function loadModelGameeeeeeeeeeeeeeeeeee(ev) {
    //Charge
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status == 200) {
                //document.location = ""
            }
        }
    }
    xhr.open("POST", "loadGame.php");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("m=1");
}






function delCookieGame(ev) {
    var code = ev.currentTarget.getAttribute("code64")
    console.log("delCookieGame " + code)
    var str;
    if (data['langue'] == 'fr') {
        str = 'Souhaitez-vous effacer le jeu "' + code + '"?';
    }
    else {
        str = 'Wish to delete the game "' + code + '"?';
    }
    if (!confirm(str)) {
        return;
    }
    //==== Efface le cookie
    var str = "game-" + data['langue'] + "-" + data['gameNum'] + "=ee; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;"
    console.log(str)
    document.cookie = str
    //==== Efface la session
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status == 200) {
                document.location = ""
            }
        }
    }
    xhr.open("POST", "deconnexion.php");
    xhr.send();
}var timeoutActiveLoop = null;
var listListener = []

function py_run() {
    console.log("py_run")

    //==== Efface la console d'erreur
    document.querySelector("#divError > div").style.display = "none"
    //==== Efface la console et rétabli le défilé
    var elt = document.querySelector("#ui_output");
    elt.innerHTML = ""
    elt.style.display = "flex"
    //==== Arrete le loop
    gameStopLoop();

    //==== Efface les listeners
    console.log("listener", listListener.length, listListener)
    for (var i = 0; i < listListener.length; i++) {
        a = listListener[i]
        console.log("listener", a)
        a[0].removeEventListener(a[1], a[2])
    }

    //==== Recherche le code
    var prog = myCodeInit.getValue() + "\n" + myCodeLoop.getValue() + "\n" + myCodeListener.getValue();
    //Chache l'erreur
    //document.querySelector('#' + prefix + "Erreur").style.display = "none"
    //document.getElementById(prefix + "Output").innerHTML = ""
    //var mypre = document.getElementById(idResultat); 
    //mypre.innerHTML = '';

    Sk.externalLibraries = {
        "numpy": {
            path: urlSite + '/fichier/python/module-numpy/__init__.js',
            dependencies: [urlSite + '/fichier/python/module-deps/math.js']
        },
        "matplotlib": { path: '/fichier/python/module-matplotlib/__init__.js' },
        "turtle": { path: '/fichier/python/module-turtle/turtle.js' },
        "game": { path: urlSite + '/module/skulpt/module-game/__init__.js' },
        "game.ai": { path: urlSite + '/module/skulpt/module-game/ai/__init__' + timestampJS + '.js' },
        "game.dinosaure": { path: urlSite + '/module/skulpt/module-game/dinosaure/__init__' + timestampJS + '.js' },
        "game.pacman": { path: urlSite + '/module/skulpt/module-game/pacman/__init__' + timestampJS + '.js' },
        "game.pixelart": { path: urlSite + '/module/skulpt/module-game/pixelart/__init__' + timestampJS + '.js' },
        "game.arkanoid": { path: urlSite + '/module/skulpt/module-game/arkanoid/__init__' + timestampJS + '.js' },
        "game.pong": { path: urlSite + '/module/skulpt/module-game/pong/__init__' + timestampJS + '.js' },
        "game.snake": { path: urlSite + '/module/skulpt/module-game/snake/__init__' + timestampJS + '.js' },
        "game.tictactoe": { path: urlSite + '/module/skulpt/module-game/tictactoe/__init__' + timestampJS + '.js' },
        "matplotlib.pyplot": {
            path: urlSite + '/module-matplotlib/pyplot/__init__.js',
            dependencies: [urlSite + '/fichier/python/module-deps/d3.min.js', urlSite + '/fichier/python/module-deps//jquery.js']
        }
    };
    Sk.onAfterImport = function (library) {
        console.log("Nom library : " + library + " / Ideal pour ré-initialiser les variables")
        switch (library) {
            case 'pygal':
                // make charts render instantly
                Highcharts.setOptions({
                    plotOptions: {
                        series: {
                            animation: false
                        }
                    }
                });
                break;
            case 'turtle':
                console.log("onAfterImport Turtle")
                // make turtle draw instantly
                Sk.tg.defaults.animate = false;
                Sk.tg.Turtle.prototype.speed = function () { }
                Sk.tg.Turtle.prototype.delay = function () { }
                break;
            case 'game.pixelart':
                mode = null;
                col = null;
                row = null;
        }
    }

    function builtinRead(x) {
        if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
            throw "File not found: '" + x + "'";
        return Sk.builtinFiles["files"][x];
    }

    Sk.pre = "output";
    Sk.ExternalError = true

    Sk.configure({
        output: (text) => { document.getElementById("ui_output").innerHTML += text; },
        read: builtinRead,
        __future__: Sk.python3,
    });
    Sk.python3 = true
    Sk.canvas = "canvas";
    Sk.svg = document.querySelector('svg');
    //(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = Sk.canvas;
    Sk.GameSvg = "outputSVG";


    var myPromise = Sk.misceval.asyncToPromise(function () {
        //console.log("myPromise myJava-charge", prog)
        //==== Charge le code
        console.log("aaaaaaaaaa100")
        window.mod = Sk.importMainWithBody("<stdin>", false, prog);
        //console.log("aaaaaaaaaa", prog)
        //==== Lance quelques vérifications
        gameBeforeInit();
        console.log("aaaaaaaaaa1")
        //==== Lance le loop
        gameActiveLoop();
        console.log("aaaaaaaaaa2")
        gameAfterInit()
        console.log("aaaaaaaaaa3")
        return window.mod;
    });

    myPromise.then(function (mod) {
        //py_activeCanvas(prefix)
        console.log('success ' + this);
    },
        function (err) {
            console.log("ERREUR myPromise")
            errorPython(err.toString())
            /*
            var eltA = document.querySelector('#' + prefix + "Erreur")
            setTimeout(() => { eltA.style.display = "flex" }, 500)
            var eltB = document.querySelector('#' + prefix + "Erreur > :nth-child(1)")
            eltB.innerText = err.toString();
            */
        });
}





function gameActiveLoop() {
    console.log("A REDEFINIR DANS CHAQUE PACKAGE");
}

function gameStopLoop() {
    console.log("gameStopLoop")
    //=== Looop
    if (timeoutActiveLoop != null) {
        clearTimeout(timeoutActiveLoop);
    }
}



function gameBeforeInit() {
    console.log("gameBeforeInit");
}

function gameAfterInit() {
    console.log("gameAfterInit");
}

function downloadGame() {
    //Charge
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status == 200) {
                if (xhr.responseText.substring(0, 7) == "Erreur:") {
                    console.log("Erreur");
                }
                else {
                    // Crée le blob
                    //var data = Uint8Array.from(atob(xhr.responseText), c => c.charCodeAt(0));
                    var data = xhr.responseText;
                    var blob = new Blob([data], { type: "octet/stream" });
                    //Lance le telechargement
                    var element = document.createElement('a');
                    mime = "text/html";
                    element.setAttribute('href', window.URL.createObjectURL(blob));
                    element.setAttribute('download', 'ChingPlay-blabla.html');
                    element.style.display = 'none';
                    document.body.appendChild(element);
                    element.click();
                    document.body.removeChild(element);
                }
            }
        }
    }
    xhr.open("POST", "downloadGame.php");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("n=" + data['gameNum'] + "&p=" + gamePassword + "&l=" + (local ? 0 : 0));
}
var navFontSize = 15

function load_codeMirror(dest, code, read_only) {
    //===== Efface l'ancien code
    var elt = document.querySelector('#divOnglet' + dest + ' > :nth-child(2)');
    elt.innerHTML = '';
    //===== génère le nouveau
    return CodeMirror(elt, {
        value: code,
        mode: "python",
        lineNumbers: true,
        cursorBlinkRate: 1000,
        indentUnit: 4,
        matchBrackets: true,
        readOnly: false,
        dragDrop: false,
        styleSelectedText: false,
        showCursorWhenSelecting: false,
        extraKeys: { Tab: function (cm) { cm.replaceSelection("    ", "end"); } },
        readOnly: read_only
    })
}

//=========== Gestion du zoom


function changeZoom() {
    var val = document.querySelector("#zoom > input").value
    actuZoom(val)
}

function actuZoom(val) {
    console.log("actuZoom " + val)
    //=== Change la position du curseur
    document.querySelector("#zoom > input").value = parseInt(val)
    //=== Récupère les valeurs
    switch (parseInt(val)) {
        case 0:
            valScale = 0.25;
            cadreWidth = 150
            strZoom = "25%"
            break;
        case 1:
            valScale = 0.5;
            cadreWidth = 300
            strZoom = "50%"
            break;
        case 2:
            valScale = 0.75;
            cadreWidth = 450
            strZoom = "75%"
            break;
        case 3:
            valScale = 1;
            cadreWidth = 600
            strZoom = "100%"
            break;
    }
    //console.log("aaaaaaa "+val+" "+valScale)
    //=== modifie l'affichage du zoom
    document.querySelector("#zoom > span").innerHTML = strZoom
    //=== modifie le div
    document.querySelector("#ui_output").style.width = cadreWidth + "px"
    var elt = document.querySelector("#cadreSvg > :nth-child(2)");
    elt.style.width = cadreWidth + "px";
    elt.style.height = cadreWidth + "px";
    //=== modifie le svg
    var elt = document.querySelector("svg")
    if (elt != null) {
        elt.setAttribute("width", cadreWidth);
        elt.setAttribute("height", cadreWidth);
        var elt = document.querySelector("#cadreSvg");
        elt.style.flexBasis = cadreWidth + "px";
        elt.style.width = cadreWidth + "px";
        elt.style.flex = cadreWidth + "px";
    }
    //=== modifie le canvas
    var elt = document.querySelector("canvas")
    if (elt != null) {
        console.log("ggggg", elt, valScale)
        elt.setAttribute("width", cadreWidth)
        elt.setAttribute("height", cadreWidth)
        var ctx = elt.getContext("2d");
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.scale(valScale, valScale)
    }
    //=== Enregistre dans le cookie
    document.cookie = "zoom=" + val + "; expire=Tue, 12-December-2030 12:10:00 GMT;"
}

function actuZoom_init() {
    document.querySelector("#zoom > input").addEventListener("change", changeZoom);
    var elt = document.cookie.split("; ").find(row => row.startsWith("zoom="));
    if (elt == undefined) {
        zoom = 2;
    }
    else {
        zoom = elt.split("=")[1];
    }
    actuZoom(zoom)
}

function deconnexion() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status == 200) {
                document.location = ""
            }
        }
    }
    xhr.open("POST", "deconnexion.php");
    xhr.send();
}

//==================== Onglet

function ui_ongletClick(ev) {
    var val = ev.currentTarget.getAttribute("num");
    ui_ongletAff(val);
}



function ui_ongletAff(num) {
    for (var i = 0; i < 6; i++) {
        var eltOnglet = document.querySelector('#nav' + i);
        var eltDiv = document.querySelector('#divOnglet' + i);
        if (num == i) {
            // L'onglet sélectionné
            eltOnglet.style.backgroundColor = 'darkorange';
            eltOnglet.style.color = 'beige';
            // Div sélectionné
            eltDiv.style.display = 'block';
            if (myCodeListe[num] != undefined) {
                myCodeListe[num].refresh()
            }
        }
        else {
            // L'onglet sélectionné
            eltOnglet.style.backgroundColor = 'papayawhip';
            eltOnglet.style.color = 'black';
            // Div sélectionné
            eltDiv.style.display = 'none';
        }
    }
}


//==================== Bouton action

function ui_codePlay() {
    console.log("ui_codePlay")
    //== Gestion des boutons
    ui_boutonAction_gray("play");
    //==Création des onblets
    if (data['gameNum'] != 0) {
        var formData = new FormData();
        formData.append("codeInit", myCodeInit.getValue());
        formData.append("codeLoop", myCodeLoop.getValue());
        formData.append("codeListener", myCodeListener.getValue());
        formData.append("gameNum", data['gameNum']);
        formData.append("gamePassword", gamePassword);
        //==== Enregistrement du code
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == XMLHttpRequest.DONE) {
                if (xhr.status == 200) {
                    console.log(xhr.responseText.substr(0, 6))
                    if (xhr.responseText.substring(0, 7) == "Erreur:") {
                        mess = "Erreur enregistrement";
                    }
                    else {
                        mess = "Enregistré!";
                    }
                    var elt = document.querySelector('#messageSave');
                    elt.style.display = "block";
                    elt.innerHTML = mess;
                    setTimeout(() => { document.querySelector('#messageSave').style.display = "none"; }, 2000);
                }
            }
        }
        xhr.open("POST", "gameSave.php");
        xhr.send(formData);
    }
    //=== Lancement du jeu
    py_run();
}

function ui_codeStop() {
    //== Gestion des boutons
    ui_boutonAction_gray("stop");
    //== Arret de la boucle
    gameStopLoop();
}

function ui_boutonAction_gray(action) {
    console.log("ui_boutonAction_gray: " + action)
    var liste = document.querySelectorAll('.ui_boutonAction');
    for (var i = 0; i < liste.length; i++) {
        var val = liste[i].getAttribute('action');
        console.log("ui_boutonAction val:" + val)
        if (action == val) {
            liste[i].style.filter = "grayscale(0)";
        }
        else {
            liste[i].style.filter = "grayscale(1)";
        }
    }
}


//===== Touche Control

var isCtrl = false;
function controlS(ev) {
    if (ev.keyCode == 17) {
        ev.preventDefault();
        isCtrl = true;
    }

    if (ev.keyCode == 83 && isCtrl) {
        ev.preventDefault();
        ui_codePlay();
    }
}

function unControlS(ev) {
    isCtrl = false;
}

//====== Bouton +/- fontSize

function updateNavFontSize() {
    var elt = document.querySelector('#nav');
    elt && (elt.style.fontSize = navFontSize + "px");
    for (var i = 0; i < 6; i++) {
        elt = document.querySelector('#divOnglet' + i);
        elt && (elt.style.fontSize = navFontSize + "px");
    }
    cookie_save('fontSize', navFontSize);
    //myCodeInit.refresh()
}

//======== Actualise la langue
function gameUI_actualiseLangue() {
    console.log("ui_actualiseLangue")
    var elt = document.querySelector('#imgLang');
    if (data['langue'] == 'fr') {
        elt.className = "s30 s_a"
    }
    else if (data['langue'] == 'en') {
        elt.className = "s30 s_b"
    }
}


//========== Gestion de la console / output

function outputClick(ev) {
    console.log("outputClear")
    if (ev.button == 2) {
        ev.stopPropagation();
        ev.preventDefault();
        var elt = document.getElementById("ui_output");
        elt.innerHTML = ""
        elt.style.flexDirection = "column-reversed"
    }
    if (ev.button == 0) {
        ev.stopPropagation();
        ev.preventDefault();
        var elt = document.getElementById("ui_output");
        if (elt.style.display == "block") {
            elt.style.display = "flex";
        }
        else {
            elt.style.display = "block";
        }
    }
}


//========== Fonction sur le SVG

function svgDelete() {
    console.log("svgDelete")
    //==== Efface le svg
    var target = document.querySelector('#game_svg');
    console.log(target.firstChild)
    while (target.firstChild) {
        target.removeChild(target.firstChild);
    }
    var elt = document.createElementNS('http://www.w3.org/2000/svg', "g")
    elt.setAttributeNS(null, "id", "svgOne");
    document.querySelector('#game_svg').appendChild(elt)
    elt = document.createElementNS('http://www.w3.org/2000/svg', "g")
    elt.setAttributeNS(null, "id", "svgTwo");
    document.querySelector('#game_svg').appendChild(elt)
    elt = document.createElementNS('http://www.w3.org/2000/svg', "g")
    elt.setAttributeNS(null, "id", "svgThree");
    document.querySelector('#game_svg').appendChild(elt)
}
ui_langue = "fr";
function global_init() {
    console.log("global_init")
    //======= Acceuil Init
    //==Background des jeux sauvegardés
    var i = 0;
    var elt = document.querySelector('#gridSauvGame')
    if ((elt != null) && (elt.firstChild != null)) {
        elt = elt.firstChild
        do {
            elt.setAttribute('class', 'bg' + i);
            i = (i + 1) % 2;
        } while (elt = elt.nextSibling)
    }

    var liste = document.querySelectorAll("#gridSauvGame > span");
    console.log(liste)
    for (var i = 0; i < liste.length; i++) {
        //liste[i].addEventListener("click", clickSauvGame);
    }

    //== Image et lien des modéles
    var liste = document.querySelectorAll(".gridGame_click")
    for (var i = 0; i < liste.length; i++) {
        liste[i].style.cursor = "pointer"
        liste[i].addEventListener("click", gameLoad)
    }

    //== Image et lien pour les sauvegarde
    /*
    var liste = document.querySelectorAll(".imgDir2")
    for (var i = 0; i < liste.length; i++) {
        liste[i].src = img_direction
        liste[i].addEventListener("click", accessCookieGame)
    }
    */

    //== Recherche de la langue
    var tmp = document.cookie.split("; ").find(row => row.startsWith("langue="));
    if (tmp != undefined) {
        ui_langue = tmp.split('=')[1]
    }
    else {
        ui_langue = 'fr';
        document.cookie = "langue=fr; expire=Tue, 12-December-2030 12:10:00 GMT;"
    }

    //== Flag langue
    var elt = document.querySelector('#accueil_flag');
    elt.className = (ui_langue == 'fr' ? 's60 s_a' : 's60 s_b');
    elt.addEventListener('click', accueil_changeLangue)

    //== Actualise lange dans la page d'acceuil
    accueil_updateLangue();

    //=============== Game init
    var liste = document.querySelectorAll("#nav > span")
    for (var i = 0; i < liste.length; i++) {
        liste[i].addEventListener("click", ui_ongletClick);
    }

    //=== Touche Ctrl, notamment pour save
    window.addEventListener('keydown', controlS);
    window.addEventListener('keyup', unControlS);

    //====== Taille de la police : lecture du cookie
    navFontSize = cookie_load('fontSize',15);
    //====== Taille de la police : Listener
    var elt = document.querySelector('#nav > :nth-child(1)')
    elt.addEventListener('click', () => { navFontSize--; updateNavFontSize() })
    var elt = document.querySelector('#nav > :nth-child(2)')
    elt.addEventListener('click', () => { navFontSize++; updateNavFontSize() })

    //===== Actualise les boutons de la navigation des jeux
    document.querySelector('#imgModele').addEventListener('click', modeleLoad);
    document.querySelector('#imgBackGame').addEventListener('click', (ev) => { document.location = ""; });
    document.querySelector('#imgBackAcceuil').addEventListener('click', global_affHome);
    document.querySelector('#imgDelete').addEventListener('click', delCookieGame);


    var elt = document.querySelector('#imgDownload');
    if (elt != null) {
        elt.style.cursor = "pointer";
        elt.addEventListener('click', downloadGame);
    }

    //===== Click sur le output
    var elt = document.getElementById('ui_output');
    elt.addEventListener('mouseup', outputClick);
    elt.addEventListener('mousedown', outputClick);
    elt.addEventListener('contextmenu', outputClick);

    //===== Chargement via lien externe 
    if(data != null){
        console.log("kkkkkkkkkkkkkkk")
        game_loadData();
    }
}

window.addEventListener('load', global_init);


function global_affHome(){
    //=== Arrete le loop
    gameStopLoop();
    //=== Affiche le div de Home
    document.querySelector('#divAccueil').style.display="block";
    document.querySelector('#divGame').style.display="none";
}


//============= Cookie
function cookie_save(id,val){
    document.cookie=id+"="+val+"; expire=Tue, 12-December-2030 12:10:00 GMT;";
}

function cookie_load(id,val_default){
    var elt = document.cookie.split("; ").find(row => row.startsWith(id+"="));
    if(elt == undefined){
        return val_default;
    }
    else{
        return elt.split("=")[1];  
    }
}



function convert_btoa(ch){
    var tmp = new TextEncoder().encode(ch);
    return btoa(String.fromCodePoint(...tmp));
}

function convert_atob(bArray){
    var tmp = Uint8Array.from(atob(bArray), (m) => m.codePointAt(0));
    return new TextDecoder().decode(tmp)
}

function formatDate(s) {
    var d = new Date(s);
    var liste = []
    //==== Jour de la semaine
    var jourS = [['Dimanche', 'Sunday'], ['Lundi', 'Monday'], ['Mardi', 'Tuesday'], ['Mercredi', 'Wednesday'], ['Jeudi', 'Thursday'], ['Vendredi', 'Friday'], ['Samedi', 'Saturday']];
    var mois = [['Janvier', 'January'], ['Février', 'February'], ['Mars', 'March'], ['Avril', 'April'], ['Mai', 'May'], ['Juin', 'June'], ['Juillet', 'July'], ['Août', 'August'], ['Septembre', 'September'], ['Octobre', 'Octobre'], ['Novembre', 'November'], ['Décembre', 'Decembre']];
    console.log("formatDate",s,d.getDay(),d.getMonth(),mois[d.getMonth()])

    var posLangue = (data['langue']=="fr"?0:1);

    return jourS[d.getDay()][posLangue] + " " + d.getDate() + " " + mois[d.getMonth()][posLangue] + " " + d.getFullYear() + " " + (posLangue == 0 ? "à" : "at") + " " + d.getHours() + ":" + d.getMinutes();
}function issetGlobal(id_fr,id_en){
    if (data['langue'] == 'fr') {
        return (Sk.globals[id_fr] != null)
    }
    else if (data['langue'] == 'en') {
        return (Sk.globals[id_en] != null)
    }
}


function setGlobal(id_fr, id_en, val) {
    //console.log("setGlobal "+id_fr+" "+id_en+" "+val)
    if (data['langue'] == 'fr') {
        //console.log(val)
        Sk.globals[id_fr] = val
    }
    else if (data['langue'] == 'en') {
        Sk.globals[id_en] = val
    }
}



function setDefaultGlobal(id_fr, id_en, val) {
    if (data['langue'] == 'fr') {
        if (Sk.globals[id_fr] == null) {
            Sk.globals[id_fr] = val
        }
    }
    else if (data['langue'] == 'en') {
        if (Sk.globals[id_en] == null) {
            Sk.globals[id_en] = val
        }
    }
}



function getGlobalVal(idFr, idEn) {
    if (data['langue'] == 'fr') {
        if (Sk.globals[idFr] != null) {
            return Sk.globals[idFr].v
        }
        else {
            throw new Sk.builtin.NameError('la variable <tt>' + idFr + '</tt> n\'est pas définie');
            return "";
        }
    }
    else if (data['langue'] == 'en') {
        if (Sk.globals[idEn] != null) {
            return Sk.globals[idEn].v
        }
        else {
            throw new Sk.builtin.NameError('Error: the variable <tt>' + idEn + '</tt> doesn\'t exist');
            return "";
        }
    }
}

function existMethod(name_fr, name_en, nbr) {
    var runM, str;
    if (typeof (runM = window.mod.tp$getattr(name_fr)) == "undefined") {
        if (data['langue'] == 'fr') {
            str = "Erreur: votre programme doit contenir une fonction <tt>" + name_fr + "</tt>";
        }
        else {
            str = "Error: you must have a function named <tt>" + name_en + "</tt>";
        }
        throw new Sk.builtin.MyError(str);
        return;
    }
    if (runM.func_code.length != nbr) {
        if (data['langue'] == 'en') {
            str = "Erreur : la fonction <tt>" + name_fr + "()</tt> doit avoir " + nbr + " argument" + (nbr > 1 ? "s" : "");
        }
        else {
            str = "Error : the function <tt>" + name_en + "()</tt> may have exactly " + nbr + " argument" + (nbr > 1 ? "s" : "");
        }
        throw new Sk.builtin.MyError(str);
        return;
    }
}


function verifNumArg(nomA, nomB, arg, nbr) {
    if (arg.length != nbr) {
        var str;
        if (data['langue'] == 'fr') {
            str = "la fonction <tt>" + nomA + "()</tt> doit avoir " + nbr + " argument" + (nbr < 2 ? "" : "s");
        }
        else {
            str = "the function <tt>" + nomB + "()</tt> must have " + nbr + " argument" + (nbr < 2 ? "" : "s")
        }
        throw new Sk.builtin.ValueError(str);
        return
    }
}

function callMethod(name_fr, name_en) {
    var runM;
    if (data['langue'] == 'fr') {
        if (typeof (runM = window.mod.tp$getattr(name_fr)) == "undefined") {
            throw new Sk.builtin.MyError("Erreur: votre programme doit contenir une fonction <tt>" + name_fr + "</tt>");
            return;
        }
        else {
            try {
                Sk.misceval.callsim(runM)
            }
            catch (e) {
                console.log("ERREUR");
                errorPythonEvent(e, name_fr);
            }
        }
    }
    else if (data['langue'] == 'en') {
        if (typeof (runM = window.mod.tp$getattr(name_en)) == "undefined") {
            throw new Sk.builtin.MyError("Error: you must have a function named <tt>" + name_en + "</tt>");
            return;

        }
        else {
            try {
                Sk.misceval.callsim(runM)
            }
            catch (e) {
                console.log("ERREUR");
                console.log(e)
                errorPythonEvent(e, name_en);
            }
        }
    }
}