Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
in Dom eingefügter Code wird nicht auf Webseite richtig dargestellt
#5
Ich habe mein Programm etwas weiter bearbeitet und das write.js (das für die eigentlichen veränderungen auf der Webseite/in der DOM Struktur zuständig ist) sieht nun so aus:

Code:
(function(xhr) {

    var XHR = XMLHttpRequest.prototype;

    var open = XHR.open;
    var send = XHR.send;
    var setRequestHeader = XHR.setRequestHeader;

    XHR.open = function(method, url) {
        this._method = method;
        this._url = url;
        this._requestHeaders = {};
        this._startTime = (new Date()).toISOString();

        return open.apply(this, arguments);
    };

    XHR.setRequestHeader = function(header, value) {
        this._requestHeaders[header] = value;
        return setRequestHeader.apply(this, arguments);
    };

    XHR.send = function(postData) {

        this.addEventListener('load', function() {
            var endTime = (new Date()).toISOString();

            var myUrl = this._url ? this._url.toLowerCase() : this._url;
            if(myUrl) {

                if (postData) {
                    if (typeof postData === 'string') {
                        try {
                            // here you get the REQUEST HEADERS, in JSON format, so you can also use JSON.parse
                            this._requestHeaders = postData;   
                        } catch(err) {
                            console.log('Request Header JSON decode failed, transfer_encoding field could be base64');
                            console.log(err);
                        }
                    } else if (typeof postData === 'object' || typeof postData === 'array' || typeof postData === 'number' || typeof postData === 'boolean') {
                            // do something if you need
                    }
                }

                // here you get the RESPONSE HEADERS
                var responseHeaders = this.getAllResponseHeaders();

                                                console.log(this.responseType);
                if ( this.responseType != 'blob') {
                    // responseText is string or null
                    try {

                        // here you get RESPONSE TEXT (BODY), in JSON format, so you can use JSON.parse
                        var arr = this.response;

                        // printing url, request headers, response headers, response body, to console
                                                //console.log(" ");
                        //console.log(this._url);
                        //console.log(JSON-parse(this._requestHeaders));
                        //console.log(responseHeaders);
                                                
                                                
                                                
                                                
                                                if(arr.includes("numbers=")){
                                                    
                                                    //second box
                                                    const test21 = document.getElementById("insertedDiv21");
                                                    if(test21!=null){
                                                        test21.remove();
                                                    }
                                                    const div21=document.createElement("div");
                                                    div21.setAttribute("id","insertedDiv21");
                                                    div21.setAttribute("style","position:fixed; top: 40px; left: 0px; width:20px; height:20px;");
                                                    div21.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(255, 255, 255);'></p>";
                                                    document.body.appendChild(div21);
                                                                                                        
                                                }
//*************************************************************************************************************************                                                
                                                if(arr.includes("gameServerVersion")){
                                                    
                                                    
                                                    //get result
                                                    var wintext=arr.match(/&winnumber=[0-9]+/g);
                                                    let result = arr.match(/&winnumber=[0-9]+/)[0].substring(11, (arr.length-1));
                                                    console.log(result);
                                                    let rot=["1","3","5","7","9","12","14","16","18","19","21","23","25","27","30","32","34","36"];
                                                    
                                                    
                                                    //first box
                                                    const test11 = document.getElementById("insertedDiv11");
                                                    if(test11!=null){
                                                        test11.remove();
                                                    }
                                                    const div11=document.createElement("div");
                                                    div11.setAttribute("id","insertedDiv11");
                                                    div11.setAttribute("style","position:fixed; top: 0px; left: 0px; width:20px; height:20px;");
                                                    if(rot.includes(result)){
                                                        div11.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(255, 0, 0);'></p>";}
                                                    else if((result=="0")){
                                                        div11.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(0, 255, 0);'></p>";}
                                                    else{
                                                    div11.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(0, 0, 0);'></p>";}
                                                    document.body.appendChild(div11);


                                                    //second box
                                                    const test21 = document.getElementById("insertedDiv21");
                                                    if(test21!=null){
                                                        test21.remove();
                                                    }
                                                    const div21=document.createElement("div");
                                                    div21.setAttribute("id","insertedDiv21");
                                                    div21.setAttribute("style","position:fixed; top: 40px; left: 0px; width:20px; height:20px;");
                                                    div21.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(0, 0, 0);'></p>";
                                                    document.body.appendChild(div21);


                                                    console.log(result);           
                                                    
                                                }
//***************************************************************************************************************************************************                                                

                    } catch(err) {
                        //console.log("Error in responseType try catch");
                        //console.log(err);
                    }
                }

            }
        });

        return send.apply(this, arguments);
    };

})(XMLHttpRequest);



Was es nun mittlerweile tut:
Es gibt oben links untereinander 2 Boxen.
Die obere zeigt (insofern shcon ein Drehergebnis vorliegt) das Drehergebnis farblich an (rote zahl erdreht-> rot, schwarze zahl erdreht schwarz, 0 gedreht->grün).

die untere zeigt grob gesagt an ob das Spiel stillsteht und wir Einsätze platzieren können, auf drehen klicken können und so.
Ist es weiß, passiert spieltechnisch gerade nichts und wir können Einsätze platzieren und Co.
Ist es schwarz, dann ist das Spiel gerade am laufen und wir müssen abwarten bis die "Chekcbox" wieder weiß wird.
Ampelprinzip halt :-)
Einziger kleienr Makel ist:
wenn man auf Drehen klickt, ist ja sofort nichts mehr machbar. Die Bosx braucht allerdings etwas bis sie von weiß auf shcwarz wechselt und das so wiederspiegelt.
Später hingegen geht die "Ampel" von schwarz auf weiß ein paar momente nahcdem eigentlich shcon eingaben wieder möglich sind, also da ist man dann auf der sicheren Seite :-)


Kurzum: eine Box zeigt die zuletzt gezogene Farbe an, die Andere gibt an, ob das Spiel gerade bedienbar ist (Einsätze platzieren, buttons klickbar, etc.).

Hat übrigens auch den netten Seiteneffekt, das ja anfangs erst mal der Roulettetishc aufgemacht werden muss und sobald er (erstmals) voll bedoinbar ist, wird auh dies mittels weißer Box angezeigt :-)
Zitieren


Nachrichten in diesem Thema
RE: in Dom eingefügter Code wird nicht auf Webseite richtig dargestellt - von bernd - 24.09.2022, 09:53

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste