How to use this.rp method in Cypress

1/*2* Title                   : DOP Prototypes (JavaScript class)3* Version                 : 1.0.34* File                    : dop-prototypes.js5* File Version            : 1.0.36* Created / Last Modified : 29 March 20167* Author                  : Dot on Paper8* Copyright               : © 2014 Dot on Paper9* Website                 : http://www.dotonpaper.net10* Description             : List of general functions that we use at Dot on Paper.11* Licence                 : MIT12*/13var DOPPrototypes = new function(){14    /*15     * Private variables16     */17    var $ = jQuery.noConflict();18    /*19     * Public variables20     */21        22    /*23     * Constructor24     */25    this.__construct = function(){26    };27    28// Actions           29    /*30     * Make all parents & current item visible.31     * 32     * @param item (element): item for which all parens are going to be made visible33     * 34     * @return list of parents35     */36    this.doHiddenBuster = function(item){37        var parent = item.parent(),38        items = new Array();39        if (item.prop('tagName') !== undefined 40                && item.prop('tagName').toLowerCase() !== 'body'){41            items = this.doHiddenBuster(parent);42        }43        if (item.css('display') === 'none'){44            item.css('display', 'block');45            items.push(item);46        }47        return items;48    };49    50    /*51     * Hide all items from list. The list is returned by function doHiddenBuster().52     * 53     * @param items (Array): list of items to be hidden54     */55    this.undoHiddenBuster = function(items){    56        var i;57        for (i=0; i<items.length; i++){58            items[i].css('display', 'none');59        }60    };61    62    /*63     * Open a link.64     * 65     * @param url (String): link URL66     * @param target (String): link target (_blank, _parent, _self, _top)67     */68    this.openLink = function(url,69                             target){70        switch (target.toLowerCase()){71            case '_blank':72                window.open(url);73                break;74            case '_parent':75                parent.location.href = url;76                break;77            case '_top':78                top.location.href = url;79                break;80            default:    81                window.location = url;82        }83    };84    85    /*86     * Randomize the items of an array.87     * 88     * @param theArray (Array): the array to be mixed89     * 90     * return array with mixed items91     */92    this.randomizeArray = function(theArray){93        theArray.sort(function(){94            return 0.5-Math.random();95        });96        return theArray;97    };98    /*99     * Scroll vertically to position.100     * 101     * @param position (Number): position to scroll to102     * @param speed (Number): scroll speed 103     */  104    this.scrollToY = function(position,105                              speed){106        speed = speed !== undefined ? speed: 300;107        108        $('html').stop(true, true)109                 .animate({'scrollTop': position}, 110                          speed);111        $('body').stop(true, true)112                 .animate({'scrollTop': position}, 113                          speed);114    };115    116    /*117     * One finger navigation for touchscreen devices.118     * 119     * @param parent (element): parent item120     * @param child (element): child item121     */122    this.touchNavigation = function(parent,123                                    child){124        var prevX, 125        prevY, 126        currX, 127        currY, 128        touch, 129        childX, 130        childY;131        parent.bind('touchstart', function(e){132            touch = e.originalEvent.touches[0];133            prevX = touch.clientX;134            prevY = touch.clientY;135        });136        parent.bind('touchmove', function(e){                                137            touch = e.originalEvent.touches[0];138            currX = touch.clientX;139            currY = touch.clientY;140            childX = currX>prevX ? parseInt(child.css('margin-left'))+(currX-prevX):parseInt(child.css('margin-left'))-(prevX-currX);141            childY = currY>prevY ? parseInt(child.css('margin-top'))+(currY-prevY):parseInt(child.css('margin-top'))-(prevY-currY);142            if (childX < (-1)*(child.width()-parent.width())){143                childX = (-1)*(child.width()-parent.width());144            }145            else if (childX > 0){146                childX = 0;147            }148            else{                                    149                e.preventDefault();150            }151            if (childY < (-1)*(child.height()-parent.height())){152                childY = (-1)*(child.height()-parent.height());153            }154            else if (childY > 0){155                childY = 0;156            }157            else{                                    158                e.preventDefault();159            }160            prevX = currX;161            prevY = currY;162            if (parent.width() < child.width()){163                child.css('margin-left', childX);164            }165            if (parent.height() < child.height()){166                child.css('margin-top', childY);167            }168        });169        parent.bind('touchend', function(e){170            if (!this.isChromeMobileBrowser()){171                e.preventDefault();172            }173        });174    };175// Browsers & devices176    /*177     * Check if operating system is Android.178     * 179     * @return true/false180     */181    this.isAndroid = function(){182        var isAndroid = false,183        agent = navigator.userAgent.toLowerCase();184        if (agent.indexOf('android') !== -1){185            isAndroid = true;186        }187        return isAndroid;188    };189    190    /*191     * Check if browser is Chrome on mobile..192     * 193     * @return true/false194     */195    this.isChromeMobileBrowser = function(){196        var isChromeMobile = false,197        agent = navigator.userAgent.toLowerCase();198        if ((agent.indexOf('chrome') !== -1 199                        || agent.indexOf('crios') !== -1) 200                && this.isTouchDevice()){201            isChromeMobile = true;202        }203        return isChromeMobile;204    };205    206    /*207     * Check if browser is IE8.208     * 209     * @return true/false210     */211    this.isIE8Browser = function(){212        var isIE8 = false,213        agent = navigator.userAgent.toLowerCase();214        if (agent.indexOf('msie 8') !== -1){215            isIE8 = true;216        }217        return isIE8;218    };219    220    /*221     * Check if browser is IE..222     * 223     * @return true/false224     */225    this.isIEBrowser = function(){226        var isIE = false,227        agent = navigator.userAgent.toLowerCase();228        if (agent.indexOf('msie') !== -1){229            isIE = true;230        }231        return isIE;232    };233    234    /*235     * Detect touchscreen devices.236     * 237     * @return true/false238     */239    this.isTouchDevice = function(){240        var os = navigator.platform;241        if (os.toLowerCase().indexOf('win') !== -1){242            return window.navigator.msMaxTouchPoints;243        }244        else {245            return 'ontouchstart' in document;246        }247    },248// Cookies249    250    /*251     * Delete cookie.252     * 253     * @param name (String): cookie name254     * @param path (String): cookie path255     * @param domain (String): cookie domain256     */257    this.deleteCookie = function(name,258                                 path,259                                 domain){260        if (this.getCookie(name)){261            document.cookie = name+'='+((path) ? ';path='+path:'')+((domain) ? ';domain='+domain:'')+';expires=Thu, 01-Jan-1970 00:00:01 GMT';262        }263    };264    265    /*266     * Get cookie.267     * 268     * @param name (String): cookie name269     */  270    this.getCookie = function(name){  271        var namePiece = name+"=",272        cookie = document.cookie.split(";"),273        i;274        for (i=0; i<cookie.length; i++){275            var cookiePiece = cookie[i];276            while (cookiePiece.charAt(0) === ' '){277                cookiePiece = cookiePiece.substring(1,cookiePiece .length);            278            } 279            if (cookiePiece.indexOf(namePiece) === 0){280                return unescape(cookiePiece.substring(namePiece.length, cookiePiece.length));281            } 282        }283        return null;284    };285    286    /*287     * Set cookie.288     * 289     * @param name (String): cookie name290     * @param value (String): cookie value291     * @param expire (String): the number of days after which the cookie will expire292     */293    this.setCookie = function(name,294                              value,295                              expire){296        var expirationDate = new Date();297        expirationDate.setDate(expirationDate.getDate()+expire);298        document.cookie = name+'='+escape(value)+((expire === null) ? '': ';expires='+expirationDate.toUTCString())+';javahere=yes;path=/';299    };300// Date & time301    302    /*303     * Converts time to AM/PM format.304     *305     * @param time (String): the time that will be converted (HH:MM)306     *307     * @return time to AM/PM format308     */309    this.getAMPM = function(time){310        var hour = parseInt(time.split(':')[0], 10),311        minutes = time.split(':')[1],312        result = '';313        if (hour === 0){314            result = '12';315        }316        else if (hour > 12){317            result = this.getLeadingZero(hour-12);318        }319        else{320            result = this.getLeadingZero(hour);321        }322        result += ':'+minutes+' '+(hour < 12 ? 'AM':'PM');323        return result;324    };325    326    /*327     * Returns difference between 2 dates.328     * 329     * @param date1 (Date): first date (JavaScript date)330     * @param date2 (Date): second date (JavaScript date)331     * @param type (String): diference type332     *                       "seconds"333     *                       "minutes"334     *                       "hours"335     *                       "days"336     * @param valueType (String): type of number returned337     *                            "float"338     *                            "integer"339     * @param noDecimals (Number): number of decimals returned with the float value (-1 to display all decimals)340     * 341     * @return dates diference342     */343    this.getDatesDifference = function(date1,344                                       date2,345                                       type,346                                       valueType,347                                       noDecimals){348        var y1 = date1.split('-')[0],349        m1 = date1.split('-')[1],350        d1 = date1.split('-')[2],351        y2 = date2.split('-')[0],352        m2 = date2.split('-')[1],353        d2 = date2.split('-')[2],354        time1 = (new Date(y1, m1-1, d1)).getTime(),355        time2 = (new Date(y2, m2-1, d2)).getTime(),356        diff = Math.abs(time1-time2);357        if (type === undefined){358            type = 'seconds';359        }360        if (valueType === undefined){361            valueType = 'float';362        }363        if (noDecimals === undefined){364            noDecimals = -1;365        }366        switch (type){367            case 'days':368                diff = diff/(1000*60*60*24);369                break;370            case 'hours':371                diff = diff/(1000*60*60);372                break;373            case 'minutes':374                diff = diff/(1000*60);375                break;376            default:377                diff = diff/(1000);378        }379        if (valueType === 'float'){380            return noDecimals === -1 ? diff:DOPPrototypes.getWithDecimals(diff, noDecimals);381        }382        else{383            return Math.ceil(diff);384        }385    };386    387    /*388     * Returns difference between 2 hours.389     * 390     * @param hour1 (Date): first hour (HH:MM, HH:MM:SS)391     * @param hour2 (Date): second hour (HH:MM, HH:MM:SS)392     * @param type (String): diference type393     *                       "seconds"394     *                       "minutes"395     *                       "hours"396     * @param valueType (String): type of number returned397     *                            "float"398     *                            "integer"399     * @param noDecimals (Number): number of decimals returned with the float value (-1 to display all decimals)400     * 401     * @return hours difference402     */403    this.getHoursDifference = function(hour1,404                                       hour2,405                                       type,406                                       valueType,407                                       noDecimals){408        var hours1 = parseInt(hour1.split(':')[0], 10),409        minutes1 = parseInt(hour1.split(':')[1], 10),410        seconds1 = hour1.split(':')[2] !== undefined ? parseInt(hour1.split(':')[2], 10):0,411        hours2 = parseInt(hour2.split(':')[0], 10),412        minutes2 = parseInt(hour2.split(':')[1], 10),413        seconds2 = hour2.split(':')[2] !== undefined ? parseInt(hour2.split(':')[2], 10):0,414        time1,415        time2,416        diff;417        if (type === undefined){418            type = 'seconds';419        }420        if (valueType === undefined){421            valueType = 'float';422        }423        if (noDecimals === undefined){424            noDecimals = -1;425        }426        switch (type){427            case 'hours':428                time1 = hours1+minutes1/60+seconds1/60/60;429                time2 = hours2+minutes2/60+seconds2/60/60;430                break;431            case 'minutes':432                time1 = hours1*60+minutes1+seconds1/60;433                time2 = hours2*60+minutes2+seconds2/60;434                break;435            default:436                time1 = hours1*60*60+minutes1*60+seconds1;437                time2 = hours2*60*60+minutes2*60+seconds2;438        }439        diff = Math.abs(time1-time2);440        if (valueType === 'float'){441            return noDecimals === -1 ? diff:DOPPrototypes.getWithDecimals(diff, noDecimals);442        }443        else{444            return Math.ceil(diff);445        }446    };447    448    /*449     * Returns next day.450     * 451     * @param date (Date): current date (YYYY-MM-DD)452     * 453     * @return next day (YYYY-MM-DD)454     */455    this.getNextDay = function(date){456        var nextDay = new Date(),457        parts = date.split('-');458        nextDay.setFullYear(parts[0], parts[1], parts[2]);459        nextDay.setTime(nextDay.getTime()+86400000);460        return nextDay.getFullYear()+'-'+DOPPrototypes.getLeadingZero(nextDay.getMonth())+'-'+DOPPrototypes.getLeadingZero(nextDay.getDate());461    };462    463    /*464     * Returns number of days between 2 dates.465     * 466     * @param date1 (Date): first date (YYYY-MM-DD)467     * @param date2 (Date): second date (YYYY-MM-DD)468     * 469     * @return number of days470     */471    this.getNoDays = function(date1,472                              date2){473        var y1 = date1.split('-')[0],474        m1 = date1.split('-')[1],475        d1 = date1.split('-')[2],476        y2 = date2.split('-')[0],477        m2 = date2.split('-')[1],478        d2 = date2.split('-')[2],479        time1 = (new Date(y1, m1-1, d1)).getTime(),480        time2 = (new Date(y2, m2-1, d2)).getTime(),481        diff = Math.abs(time1-time2);482        return Math.round(diff/(1000*60*60*24))+1;483    };484    485            /*486             * Returns the number of months between 2 dates.487             * 488             * @param date1 (Date): first date (YYYY-MM-DD)489             * @param date2 (Date): second date (YYYY-MM-DD)490             * 491             * @return the number of months 492             */493     this.getNoMonths = function(date1,494                                 date2){495        var firstMonth,496        lastMonth,497        m,498        month1,499        month2,500        noMonths = 0,501        y,502        year1,503        year2;504        date1 = date1 <= date2 ? date1:date2;505        month1 = parseInt(date1.split('-')[1], 10);506        year1 = parseInt(date1.split('-')[0], 10);507        month2 = parseInt(date2.split('-')[1], 10);508        year2 = parseInt(date2.split('-')[0], 10);509        for (y=year1; y<=year2; y++){510            firstMonth = y === year1 ? month1:1;511            lastMonth = y === year2 ? month2:12;512            for (m=firstMonth; m<=lastMonth; m++){513                noMonths++;514            }515        }516        return noMonths;517    };518                    519    /*520     * Returns previous day.521     * 522     * @param date (Date): current date (YYYY-MM-DD)523     * 524     * @return previous day (YYYY-MM-DD)525     */526    this.getPrevDay = function(date){527        var previousDay = new Date(),528        parts = date.split('-');529        previousDay.setFullYear(parts[0], parseInt(parts[1])-1, parts[2]);530        previousDay.setTime(previousDay.getTime()-86400000);531        return previousDay.getFullYear()+'-'+DOPPrototypes.getLeadingZero(previousDay.getMonth()+1)+'-'+DOPPrototypes.getLeadingZero(previousDay.getDate());                        532    };533                        534    /*535     * Returns previous time by hours, minutes, seconds.536     * 537     * @param time (String): time (HH, HH:MM, HH:MM:SS)538     * @param diff (Number): diference for previous time539     * @param diffBy (Number): diference by 540     *                         "hours"541     *                         "minutes"542     *                         "seconds"543     * 544     * @return previus hour (HH, HH:MM, HH:MM:SS)545     */546    this.getPrevTime = function(time,547                                diff,548                                diffBy){549        var timePieces = time.split(':'),550        hours = parseInt(timePieces[0], 10),551        minutes = timePieces[1] === undefined ? 0:parseInt(timePieces[1], 10),552        seconds = timePieces[2] === undefined ? 0:parseInt(timePieces[2], 10);553        switch (diffBy){554            case 'seconds':555                seconds = seconds-diff;556                if (seconds < 0){557                    seconds = 60+seconds;558                    minutes = minutes-1;559                    if (minutes < 0){560                        minutes = 60+minutes;561                        hours = hours-1 < 0 ? 0:hours-1;562                    }563                }564                break;565            case 'minutes':566                    minutes = minutes-diff;567                    if (minutes < 0){568                        minutes = 60+minutes;569                        hours = hours-1 < 0 ? 0:hours-1;570                    }571                break;572            default:573                hours = hours-diff < 0 ? 0:hours-diff;574        }575        return this.getLeadingZero(hours)+(timePieces[1] === undefined ? '':':'+this.getLeadingZero(minutes)+(timePieces[2] === undefined ? '':':'+this.getLeadingZero(seconds)));576    };577    578    /*579     * Returns today date.580     * 581     * @return today (YYYY-MM-DD)582     */583    this.getToday = function(){    584        var today = new Date();585        return today.getFullYear()+'-'+DOPPrototypes.getLeadingZero(today.getMonth()+1)+'-'+DOPPrototypes.getLeadingZero(today.getDate());586    };587    /*588     * Returns week day.589     * 590     * @param date (String): date for which the function get day of the week (YYYY-MM-DD)591     * 592     * @return week day index (0 for Sunday)593     */594    this.getWeekDay = function(date){    595        var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],596        year = date.split('-')[0],597        month = date.split('-')[1],598        day = date.split('-')[2],599        newDate = new Date(eval('"'+day+' '+months[parseInt(month, 10)-1]+', '+year+'"'));600        return newDate.getDay();601    };602    603// Domains & URLs                        604    605    /*606     * Parse a $_GET variable.607     * 608     * @param name (String): variable name609     * 610     * @return variable vaue or "undefined" if it doesn't exist611     */612    this.$_GET = function(name){613        var url = window.location.href.split('?')[1],614        variables = url !== undefined ? url.split('&'):[],615        i; 616        for (i=0; i<variables.length; i++){617            if (variables[i].indexOf(name) !== -1){618                return variables[i].split('=')[1];619                break;620            }621        }622        return undefined;623    };624    625    /*626     * Access-Control-Allow-Origin buster. Modifies URL to be the same as browser URL.627     * 628     * @param url (String): URL629     * 630     * @return modified URL631     */632    this.acaoBuster = function(url){633        var browserURL = window.location.href,634        pathPiece1 = '', pathPiece2 = '';635        if (this.getDomain(browserURL) === this.getDomain(url)){636            if (url.indexOf('https') !== -1 637                    || url.indexOf('http') !== -1){638                if (browserURL.indexOf('http://www.') !== -1){639                    pathPiece1 = 'http://www.';640                }641                else if (browserURL.indexOf('http://') !== -1){642                    pathPiece1 = 'http://';643                }644                else if (browserURL.indexOf('https://www.') !== -1){645                    pathPiece1 = 'https://www.';646                }647                else if (browserURL.indexOf('https://') !== -1){648                    pathPiece1 = 'https://';649                }650                if (url.indexOf('http://www.') !== -1){651                    pathPiece2 = url.split('http://www.')[1];652                }653                else if (url.indexOf('http://') !== -1){654                    pathPiece2 = url.split('http://')[1];655                }656                else if (url.indexOf('https://www.') !== -1){657                    pathPiece2 = url.split('https://www.')[1];658                }659                else if (url.indexOf('https://') !== -1){660                    pathPiece2 = url.split('https://')[1];661                }662                return pathPiece1+pathPiece2;663            }664            else{665                return url;666            }667        }668        else{669            return url;670        }671    };672    673    /*674     * Get current domain.675     *676     * @param url (String): the URL from which the domain will be extracted677     *678     * @return current domain679     */ 680    this.getDomain = function(url){681        var domain = url;682        /*683         * Remove white spaces from the begining of the URL.684         */685        domain = domain.replace(new RegExp(/^\s+/),"");686        /*687         * Remove white spaces from the end of the URL.688         */689        domain = domain.replace(new RegExp(/\s+$/),"");690        /*691         * If found , convert back slashes to forward slashes.692         */693        domain = domain.replace(new RegExp(/\\/g),"/");694        /*695         * If there, removes "http://", "https://" or "ftp://" from the begining.696         */697        domain = domain.replace(new RegExp(/^http\:\/\/|^https\:\/\/|^ftp\:\/\//i),"");698        /*699         * If there, removes 'www.' from the begining.700         */701        domain = domain.replace(new RegExp(/^www\./i),"");702        /*703         * Remove complete string from first forward slash on.704         */705        domain = domain.replace(new RegExp(/\/(.*)/),"");706        return domain;707    };708    709    /*710     * Check if current URL has a subdomain.711     *712     * @param url (String): URL that will be checked713     *714     * @return true/false715     */ 716    this.hasSubdomain = function(url){717        var subdomain;718        /*719         * Remove white spaces from the begining of the URL.720         */721        url = url.replace(new RegExp(/^\s+/),"");722        /*723         * Remove white spaces from the end of the URL.724         */725        url = url.replace(new RegExp(/\s+$/),"");726        /*727         * If found , convert back slashes to forward slashes.728         */729        url = url.replace(new RegExp(/\\/g),"/");730        /*731         * If there, removes 'http://', 'https://' or 'ftp://' from the begining.732         */733        url = url.replace(new RegExp(/^http\:\/\/|^https\:\/\/|^ftp\:\/\//i),"");734        /*735         * If there, removes 'www.' from the begining.736         */737        url = url.replace(new RegExp(/^www\./i),"");738        /*739         * Remove complete string from first forward slaash on.740         */741        url = url.replace(new RegExp(/\/(.*)/),""); // 742        if (url.match(new RegExp(/\.[a-z]{2,3}\.[a-z]{2}$/i))){743            /*744             * Remove ".??.??" or ".???.??" from end - e.g. ".CO.UK", ".COM.AU"745             */746            url = url.replace(new RegExp(/\.[a-z]{2,3}\.[a-z]{2}$/i),"");747        }748        else if (url.match(new RegExp(/\.[a-z]{2,4}$/i))){749            /*750             * Removes ".??" or ".???" or ".????" from end - e.g. ".US", ".COM", ".INFO"751             */752            url = url.replace(new RegExp(/\.[a-z]{2,4}$/i),"");753        }754        /*755         * Check to see if there is a dot "." left in the string.756         */757        subdomain = (url.match(new RegExp(/\./g))) ? true : false;758        return(subdomain);759    };760// Resize & position                        761    762    /*763     * Resize & position an item inside a parent.764     * 765     * @param parent (element): parent item766     * @param child (element): child item767     * @param pw (Number): parent width768     * @param ph (Number): parent height769     * @param cw (Number): child width770     * @param ch (Number): child height771     * @param pos (String): set child position in parent (bottom, bottom-center, bottom-left, bottom-right, center, left, horizontal-center, middle-left, middle-right, right, top, top-center, top-left, top-right, vertical-center)772     * @param type (String): resize type773     *                       "fill" fill parent (child will be cropped)774     *                       "fit" child resize to fit in parent775     */776    this.rp = function(parent,777                       child,778                       pw,779                       ph,780                       cw,781                       ch,782                       pos,783                       type){784        var newW = 0,785        newH = 0;786        /*787         * Resize child.788         */789        if (cw <= pw 790                && ch <= ph){791            newW = cw;792            newH = ch;793        }794        else{795            switch (type){796                case 'fill':797                    newH = ph;798                    newW = (cw*ph)/ch;799                    if (newW < pw){800                        newW = pw;801                        newH = (ch*pw)/cw;802                    }803                    break;804                default:805                    newH = ph;806                    newW = (cw*ph)/ch;807                    if (newW > pw){808                        newW = pw;809                        newH = (ch*pw)/cw;810                    }811                    break;812            }813        }814        child.width(newW);815        child.height(newH);816        /*817         * Position child.818         */819        switch(pos.toLowerCase()){820            case 'bottom':821                this.rpBottom(parent, 822                              child, 823                              ph);824                break;825            case 'bottom-center':826                this.rpBottomCenter(parent, 827                                    child, 828                                    pw, 829                                    ph);830                break;831            case 'bottom-left':832                this.rpBottomLeft(parent, 833                                  child, 834                                  pw, 835                                  ph);836                break;837            case 'bottom-right':838                this.rpBottomRight(parent, 839                                   child, 840                                   pw, 841                                   ph);842                break;843            case 'center':844                this.rpCenter(parent, 845                              child, 846                              pw, 847                              ph);848                break;849            case 'left':850                this.rpLeft(parent, 851                            child, 852                            pw);853                break;854            case 'horizontal-center':855                this.rpCenterHorizontally(parent, 856                                          child, 857                                          pw);858                break;859            case 'middle-left':860                this.rpMiddleLeft(parent, 861                                  child, 862                                  pw, 863                                  ph);864                break;865            case 'middle-right':866                this.rpMiddleRight(parent, 867                                   child, 868                                   pw, 869                                   ph);870                break;871            case 'right':872                this.rpRight(parent, 873                             child, 874                             pw);875                break;876            case 'top':877                this.rpTop(parent, 878                           child, 879                           ph);880                break;881            case 'top-center':882                this.rpTopCenter(parent, 883                                 child, 884                                 pw, 885                                 ph);886                break;887            case 'top-left':888                this.rpTopLeft(parent, 889                               child, 890                               pw, 891                               ph);892                break;893            case 'top-right':894                this.rpTopRight(parent, 895                                child, 896                                pw, 897                                ph);898                break;899            case 'vertical-center':900                this.rpCenterVertically(parent, 901                                        child, 902                                        ph);903                break;904        }905    };906    907    /*908     * Position item on bottom.909     * 910     * @param parent (element): parent item911     * @param child (element): child item912     * @param ph (Number): height to which the parent is going to be set913     */914    this.rpBottom = function(parent,915                             child,916                             ph){917        if (ph !== undefined){918            parent.height(ph);919        }920        child.css('margin-top', parent.height()-child.height());921    };922    923    /*924     * Position item on bottom-left.925     * 926     * @param parent (element): parent item927     * @param child (element): child item928     * @param pw (Number): width to which the parent is going to be set929     * @param ph (Number): height to which the parent is going to be set930     */931    this.rpBottomCenter = function(parent,932                                   child,933                                   pw,934                                   ph){935        this.rpBottom(parent, 936                      child, 937                      ph);938        this.rpCenterHorizontally(parent, 939                                  child, 940                                  pw);941    };942    943    /*944     * Position item on bottom-left.945     * 946     * @param parent (element): parent item947     * @param child (element): child item948     * @param pw (Number): width to which the parent is going to be set949     * @param ph (Number): height to which the parent is going to be set950     */951    this.rpBottomLeft = function(parent,952                                 child,953                                 pw,954                                 ph){955        this.rpBottom(parent, 956                      child, 957                      ph);958        this.rpLeft(parent, 959                    child, 960                    pw);961    };962    963    /*964     * Position item on bottom-left.965     * 966     * @param parent (element): parent item967     * @param child (element): child item968     * @param pw (Number): width to which the parent is going to be set969     * @param ph (Number): height to which the parent is going to be set970     */971    this.rpBottomRight = function(parent,972                                  child,973                                  pw,974                                  ph){975        this.rpBottom(parent, 976                      child, 977                      ph);978        this.rpRight(parent, 979                     child, 980                     pw);981    };982    983    /*984     * Position item on center.985     * 986     * @param parent (element): parent item987     * @param child (element): child item988     * @param pw (Number): width to which the parent is going to be set989     * @param ph (Number): height to which the parent is going to be set990     */991    this.rpCenter = function(parent,992                             child,993                             pw,994                             ph){995        this.rpCenterHorizontally(parent,996                                  child,997                                  pw);998        this.rpCenterVertically(parent, 999                                child, 1000                                ph);1001    };1002    1003    /*1004     * Center item horizontally.1005     * 1006     * @param parent (element): parent item1007     * @param child (element): child item1008     * @param pw (Number): width to which the parent is going to be set1009     */1010    this.rpCenterHorizontally = function(parent,1011                                         child,1012                                         pw){1013        if (pw !== undefined){1014            parent.width(pw);1015        }1016        child.css('margin-left', (parent.width()-child.width())/2);1017    };1018    1019    /*1020     * Center item vertically.1021     * 1022     * @param parent (element): parent item1023     * @param child (element): child item1024     * @param ph (Number): height to which the parent is going to be set1025     */1026    this.rpCenterVertically = function(parent,1027                                       child,1028                                       ph){1029        if (ph !== undefined){1030            parent.height(ph);1031        }1032        child.css('margin-top', (parent.height()-child.height())/2);1033    };1034    1035    /*1036     * Position item on left.1037     * 1038     * @param parent (element): parent item1039     * @param child (element): child item1040     * @param pw (Number): width to which the parent is going to be set1041     */1042    this.rpLeft = function(parent,1043                           child,1044                           pw){1045        if (pw !== undefined){1046            parent.width(pw);1047        }1048        child.css('margin-left', 0);1049    };1050    1051    /*1052     * Position item on middle-left.1053     * 1054     * @param parent (element): parent item1055     * @param child (element): child item1056     * @param pw (Number): width to which the parent is going to be set1057     * @param ph (Number): height to which the parent is going to be set1058     */1059    this.rpMiddleLeft = function(parent,1060                                 child,1061                                 pw,1062                                 ph){1063        this.rpCenterVertically(parent, 1064                                child, 1065                                ph);1066        this.rpLeft(parent, 1067                    child, 1068                    pw);1069    };1070    1071    /*1072     * Position item on middle-right.1073     * 1074     * @param parent (element): parent item1075     * @param child (element): child item1076     * @param pw (Number): width to which the parent is going to be set1077     * @param ph (Number): height to which the parent is going to be set1078     */1079    this.rpMiddleRight = function(parent,1080                                  child,1081                                  pw,1082                                  ph){1083        this.rpCenterVertically(parent, 1084                                child, 1085                                ph);1086        this.rpRight(parent, 1087                     child, 1088                     pw);1089    };1090    1091    /*1092     * Position item on right.1093     * 1094     * @param parent (element): parent item1095     * @param child (element): child item1096     * @param pw (Number): width to which the parent is going to be set1097     */1098    this.rpRight = function(parent,1099                            child,1100                            pw){1101        if (pw !== undefined){1102            parent.width(pw);1103        }1104        child.css('margin-left', parent.width()-child.width());1105    };1106    1107    /*1108     * Position item on top.1109     * 1110     * @param parent (element): parent item1111     * @param child (element): child item1112     * @param ph (Number): height to which the parent is going to be set1113     */1114    this.rpTop = function(parent,1115                          child,1116                          ph){1117        if (ph !== undefined){1118            parent.height(ph);1119        }1120        child.css('margin-top', 0);1121    };1122    1123    /*1124     * Position item on top-center.1125     * 1126     * @param parent (element): parent item1127     * @param child (element): child item1128     * @param pw (Number): width to which the parent is going to be set1129     * @param ph (Number): height to which the parent is going to be set1130     */1131    this.rpTopCenter = function(parent,1132                                child,1133                                pw,1134                                ph){1135        this.rpTop(parent, 1136                   child, 1137                   ph);1138        this.rpCenterHorizontally(parent, 1139                                  child, 1140                                  pw);1141    };1142    1143    /*1144     * Position item on top-left.1145     * 1146     * @param parent (element): parent item1147     * @param child (element): child item1148     * @param pw (Number): width to which the parent is going to be set1149     * @param ph (Number): height to which the parent is going to be set1150     */1151    this.rpTopLeft = function(parent,1152                              child,1153                              pw,1154                              ph){1155        this.rpTop(parent, 1156                   child, 1157                   ph);1158        this.rpLeft(parent, 1159                    child, 1160                    pw);1161    };1162          1163    /*1164     * Position item on top-right.1165     * 1166     * @param parent (element): parent item1167     * @param child (element): child item1168     * @param pw (Number): width to which the parent is going to be set1169     * @param ph (Number): height to which the parent is going to be set1170     */  1171    this.rpTopRight = function(parent,1172                               child,1173                               pw,1174                               ph){1175        this.rpTop(parent, 1176                   child, 1177                   ph);1178        this.rpRight(parent, 1179                     child, 1180                     pw);1181    };1182// Strings & numbers1183    1184    /*1185     * Clean an input from unwanted characters.1186     * 1187     * @param input (element): the input to be checked1188     * @param allowedCharacters (String): the string of allowed characters1189     * @param firstNotAllowed (String): the character which can't be on the first position1190     * @param min (Number/String): the minimum value that is allowed in the input1191     * 1192     * @return clean string1193     */ 1194    this.cleanInput = function(input,1195                               allowedCharacters,1196                               firstNotAllowed,1197                               min){1198        var characters = input.val().split(''),1199        returnStr = '', 1200        i, 1201        startIndex = 0;1202        /*1203         * Check first character.1204         */1205        if (characters.length > 1 1206                && characters[0] === firstNotAllowed){1207            startIndex = 1;1208        }1209        /*1210         * Check characters.1211         */1212        for (i=startIndex; i<characters.length; i++){1213            if (allowedCharacters.indexOf(characters[i]) !== -1){1214                returnStr += characters[i];1215            }1216        }1217        /*1218         * Check the minimum value.1219         */1220        if (min > returnStr){1221            returnStr = min;1222        }1223        input.val(returnStr);1224    };1225    1226    /*1227     * Adds a leading 0 if number smaller than 10.1228     * 1229     * @param no (Number): the number1230     * 1231     * @return number with leading 0 if needed1232     */1233    this.getLeadingZero = function(no){1234        if (no < 10){1235            return '0'+no;1236        }1237        else{1238            return no;1239        }1240    };1241    1242    /*1243     * Creates a string with random characters.1244     * 1245     * @param stringLength (Number): the length of the returned string1246     * @param allowedCharacters (String): the string of allowed characters1247     * 1248     * @return random string1249     */1250    this.getRandomString = function(stringLength,1251                                    allowedCharacters){1252        var randomString = '',1253        charactersPosition,1254        i;1255        allowedCharacters = allowedCharacters !== undefined ? allowedCharacters:'0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';1256        for (i=0; i<stringLength; i++){1257            charactersPosition = Math.floor(Math.random()*allowedCharacters.length);1258            randomString += allowedCharacters.substring(charactersPosition, charactersPosition+1);1259        }1260        return randomString;1261    };1262    1263    /*1264     * Returns a part of a string followed by 3 dots.1265     * 1266     * @param str (String): the string1267     * @param size (Number): the number of characters that will be displayed minus 3 dots1268     * 1269     * @return short string ...1270     */1271    this.getShortString = function(str,1272                                   size){1273        var newStr = new Array(),1274        pieces = str.split(''), 1275        i;1276        if (pieces.length <= size){1277            newStr.push(str);1278        }1279        else{1280            for (i=0; i<size-3; i++){1281                newStr.push(pieces[i]);1282            }1283            newStr.push('...');1284        }1285        return newStr.join('');1286    };1287    1288    /*1289     * Returns a number with a predefined number of decimals.1290     * 1291     * @param number (Number): the number1292     * @param no (Number): the number of decimals1293     * 1294     * @return string with number and decimals1295     */1296    this.getWithDecimals = function(number,1297                                    no){1298        no = no === undefined ? 2:no;1299        return parseInt(number) === number ? String(number):parseFloat(number).toFixed(no);1300    };1301    1302    /*1303     * Verify if a string contains allowed characters.1304     * 1305     * @param str (String): string to be checked1306     * @param allowedCharacters (String): the string of allowed characters1307     * 1308     * @return true/false1309     */1310    this.validateCharacters = function(str,1311                                       allowedCharacters){1312        var characters = str.split(''), 1313        i;1314        for (i=0; i<characters.length; i++){1315            if (allowedCharacters.indexOf(characters[i]) === -1){1316                return false;1317            }1318        }1319        return true;1320    };1321    1322    /*1323     * Email validation.1324     * 1325     * @param email (String): email to be checked1326     * 1327     * @return true/false1328     */1329    this.validEmail = function(email){1330        var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;1331        if (filter.test(email)){1332            return true;1333        }1334        return false;1335    };1336    1337    /*1338     * Remove slashes from string.1339     * 1340     * @param str (String): the string1341     * 1342     * @return string without slashes1343     */1344    this.stripSlashes = function(str){1345        return (str + '').replace(/\\(.?)/g, function (s, n1){1346            switch (n1){1347                case '\\':1348                    return '\\';1349                case '0':1350                    return '\u0000';1351                case '':1352                    return '';1353                default:1354                    return n1;1355            }1356        });1357    };1358// Styles1359    1360    /*1361     * Convert RGB color to HEX.1362     * 1363     * @param rgb (String): RGB color1364     * 1365     * @return color HEX1366     */1367    this.getHEXfromRGB = function(rgb){1368        var hexDigits = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');1369        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);1370        return (isNaN(rgb[1]) ? '00':hexDigits[(rgb[1]-rgb[1]%16)/16]+hexDigits[rgb[1]%16])+1371               (isNaN(rgb[2]) ? '00':hexDigits[(rgb[2]-rgb[2]%16)/16]+hexDigits[rgb[2]%16])+1372               (isNaN(rgb[3]) ? '00':hexDigits[(rgb[3]-rgb[3]%16)/16]+hexDigits[rgb[3]%16]);1373    };1374    /*1375     * Set text color depending on the background color.1376     * 1377     * @param bgColor(String): background color1378     * 1379     * return white/black1380     */1381    this.getIdealTextColor = function(bgColor){1382        var rgb = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(bgColor);1383        if (rgb !== null){1384            return parseInt(rgb[1], 10)+parseInt(rgb[2], 10)+parseInt(rgb[3], 10) < 3*256/2 ? 'white' : 'black';1385        }1386        else{1387            return parseInt(bgColor.substring(0, 2), 16)+parseInt(bgColor.substring(2, 4), 16)+parseInt(bgColor.substring(4, 6), 16) < 3*256/2 ? 'white' : 'black';1388        }1389    };1390    1391    return this.__construct();...

1/*2 * File:    render.js3 *4 * Rendering class renders world to canvas according to player's viewport.5 *6 * Author:  Karl Kangur <karl.kangur@gmail.com>7 * Licence: WTFPL 2.0 (http://en.wikipedia.org/wiki/WTFPL)8*/9// render chunks inside the world10function Renderer(canvas, world, player)11{12	// local references13	this.canvas = canvas;14	this.world = world;15	this.player = player;16	this.camera = false;17	18	this.context = this.canvas.getContext("2d");19	this.vertex = {};20	21	// define canvas size according to window size22	this.canvas.width  = window.innerWidth-200;23	this.canvas.height = window.innerHeight;24	25	// half canvas size for math later on26	this.w2 = (this.canvas.width/2)|0;27	this.h2 = (this.canvas.height/2)|0;28	29	this.focalLength = 500;30	31	// render distance, the higher the slower32	this.nodeRenderDist = 100;33	this.chunkRenderDist = 420;34	this.workingFace = false;35	this.workingNode = false;36	this.renderNodes = [];37	this.chunkCount = 0;38	this.nodeCount = 0;39	this.faceCount = 0;40	this.vertexCount = 0;41	// default starting render mode (0: plain color, 1: textured)42	this.renderMode = 1;43	this.graph = false;44	this.map = false;45	this.hud = true;46	this.mouselock = false;47	this.fps = 0;48	this.frames = 0;49	this.time = new Date().getTime();50	this.frustrum = [];51	this.lowResChunks = [];52	53	// normal look at vector in 3 and 2 dimention54	this.n3d = {}55	this.n2d = {}56	57	// define texture (takes a couple of milliseconds to load)58	this.texture = new Image();59	this.texture.src = "media/texture.png";60	this.textureSize;61    	this.texture.onload = function(){62        	renderer.textureSize = this.width/16;63    	}64	65	this.crosshair = new Image();66	this.crosshair.src = "media/crosshair.png";67	68	// mouse click interface69	this.mouseClick = false;70	this.clickedNode = false;71	this.clickedFace = false;72	73	// make parent reference74	var renderer = this;75	this.canvas.onmousedown = function(event)76	{77		if(renderer.mouselock)78		{79			// when mouse is locked the click is always at the origin80			renderer.mouseClick = {81				x: 0,82				y: 0,83				button: event.button84			};85		}86		else87		{88			renderer.mouseClick = {89				x: event.pageX-renderer.w2,90				y: event.pageY-renderer.h2,91				button: event.button92			};93		}94	}95	96	// update canvas size97	window.onresize = function()98	{99		renderer.canvas.width  = window.innerWidth-200;100		renderer.canvas.height = window.innerHeight;101		renderer.w2 = (renderer.canvas.width/2)|0;102		renderer.h2 = (renderer.canvas.height/2)|0;103	}104	105	// disable right click menu106	this.canvas.oncontextmenu = function(event)107	{108		return false;109	}110	111	// canvas always in focus112	this.canvas.onblur = function()113	{114		this.focus();115	}116	this.canvas.focus();117	118	// needed for mouse lock119	document.renderer = this;120	121	this.render();122}123window.requestFrame = (function()124{125	return window.requestAnimationFrame ||126		window.webkitRequestAnimationFrame ||127		window.mozRequestAnimationFrame ||128		window.oRequestAnimationFrame ||129		window.msRequestAnimationFrame ||130		function(callback, element)131		{132			window.setTimeout(callback, 10);133		}134})();135Renderer.prototype.lockPointer = function()136{137	// detect feature138	if(139		!('pointerLockElement' in document) &&140		!('mozPointerLockElement' in document) &&141		!('webkitPointerLockElement' in document)142	)143	{144		alert("Pointer lock unavailable in this browser.");145		return;146	}147	148	// firefox can only lock pointer when in full screen mode, this "program" should never run in full screen149	if('mozPointerLockElement' in document)150	{151		alert("Firefox needs full screen to lock mouse. Use Chrome for the time being.");152		return;153	}154	155	// when mouse us locked/unlocked callback156	document.addEventListener('pointerlockchange', this.mouseLockChangeCallback, false);157	document.addEventListener('mozpointerlockchange', this.mouseLockChangeCallback, false);158	document.addEventListener('mozpointerchange', this.mouseLockChangeCallback, false);159	document.addEventListener('webkitpointerlockchange', this.mouseLockChangeCallback, false);160	161	this.canvas.requestPointerLock = this.canvas.requestPointerLock || this.canvas.mozRequestPointerLock || this.canvas.webkitRequestPointerLock;162	// actually lock the mouse163	this.canvas.requestPointerLock();164}165// called when mouse lock state changes166Renderer.prototype.mouseLockChangeCallback = function()167{168	// called from document169	if(170		document.pointerLockElement === this.renderer.canvas ||171		document.mozPointerLockElement === this.renderer.canvas ||172		document.webkitPointerLockElement === this.renderer.canvas173	)174	{175		document.addEventListener('mousemove', this.renderer.mouseMoveCallback, false);176		this.renderer.mouselock = true;177	}178	else179	{180		document.removeEventListener('mousemove', this.renderer.mouseMoveCallback, false);181		this.renderer.mouselock = false;182	}183}184// mouse move event callback185Renderer.prototype.mouseMoveCallback = function(event)186{187	var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;188	var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;189	// this is document here190	this.renderer.player.rotation.x -= movementY/100;191	this.renderer.player.rotation.y -= movementX/100;192}193Renderer.prototype.changeRenderDist = function(value)194{195	this.nodeRenderDist = parseInt(value);196	this.chunkRenderDist = parseInt(value)+320;197}198// prerender canvas element (http://kaioa.com/node/103)199Renderer.prototype.prerender = function(width, height, renderFunction)200{201	var buffer = document.createElement("canvas");202	buffer.width = width;203	buffer.height = height;204	renderFunction(buffer.getContext('2d'));205	return buffer;206}207// ############################################################ FRUSTRUM208Renderer.prototype.getFrustrumPlanes = function()209{210	// http://en.wikipedia.org/wiki/Rotation_matrix211	212	// vectors   corners   system    planes213	// vy|/n3d   0-----1     y       +--0--+214	// --+-> vx  |     |   --+->x    3     1215	//   |       3-----2     |       +--2--+216	217	// get the player x axis rotation unit vector218	var vx = {219		x: this.n2d.z,220		//y: 0,221		z: -this.n2d.x222	};223	224	// get the player y axis rotation unit vector (cross product with vx.y == 0)225	var vy = {226		x: this.n3d.y*vx.z,227		y: this.n3d.z*vx.x-this.n3d.x*vx.z,228		z: -this.n3d.y*vx.x229	};230	231	var vectors = [232		{233			x: this.n3d.x*this.focalLength-vx.x*this.w2+vy.x*this.h2,234			y: this.n3d.y*this.focalLength+vy.y*this.h2,235			z: this.n3d.z*this.focalLength-vx.z*this.w2+vy.z*this.h2236		},237		{238			x: this.n3d.x*this.focalLength+vx.x*this.w2+vy.x*this.h2,239			y: this.n3d.y*this.focalLength+vy.y*this.h2,240			z: this.n3d.z*this.focalLength+vx.z*this.w2+vy.z*this.h2241		},242		{243			x: this.n3d.x*this.focalLength+vx.x*this.w2-vy.x*this.h2,244			y: this.n3d.y*this.focalLength-vy.y*this.h2,245			z: this.n3d.z*this.focalLength+vx.z*this.w2-vy.z*this.h2246		},247		{248			x: this.n3d.x*this.focalLength-vx.x*this.w2-vy.x*this.h2,249			y: this.n3d.y*this.focalLength-vy.y*this.h2,250			z: this.n3d.z*this.focalLength-vx.z*this.w2-vy.z*this.h2251		}252	];253	254	var v1, v2, length;255	for(var i=0; i<4; i++)256	{257		// get planes with a cross product258		v1 = vectors[i];259		v2 = vectors[(i+1)%4];260		261		this.frustrum[i] = {262			x: v1.y*v2.z-v1.z*v2.y,263			y: v1.z*v2.x-v1.x*v2.z,264			z: v1.x*v2.y-v1.y*v2.x265		}266		267		// normalize vector (same length for all)268		if(!length)269		{270			length = 1/Math.sqrt(this.frustrum[i].x*this.frustrum[i].x+this.frustrum[i].y*this.frustrum[i].y+this.frustrum[i].z*this.frustrum[i].z);271		}272		273		this.frustrum[i].x *= length;274		this.frustrum[i].y *= length;275		this.frustrum[i].z *= length;276	}277}278// ############################################################ WORLD RENDERING279Renderer.prototype.render = function()280{281	this.player.update();282	283	// 3d look-at vector284	this.n3d = {285		x: -this.player.rotTrig.cosx*this.player.rotTrig.siny,286		y: this.player.rotTrig.sinx,287		z: this.player.rotTrig.cosy*this.player.rotTrig.cosx288	};289	290	// 2d look-at vector (XZ plane)291	this.n2d = {292		x: -this.player.rotTrig.siny,293		z: this.player.rotTrig.cosy294	};295	296	this.camera = {297		x: this.player.position.x,298		y: this.player.position.y+this.player.height,299		z: this.player.position.z300	}301	302	this.chunkCount = 0;303	this.nodeCount = 0;304	this.faceCount = 0;305	this.vertexCount = 0;306	307	// reset vertices308	this.vertex = {};309	310	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);311	312	this.getFrustrumPlanes();313	314	// empty renderable node array from last render and low resolution chunks315	this.renderNodes = [];316	//this.lowResChunks = [];317	318	// relative chunk position319	var rcp, distance;320	for(var i in this.world.chunks)321	{322		rcp = {323			x: this.world.chunks[i].x*16+8-this.camera.x,324			z: this.world.chunks[i].z*16+8-this.camera.z325		};326		327		// chunk is behind player (bounding cylinder radius: sqrt(8^2) = 11.31+margin = 13)328		if(this.n2d.x*rcp.x+this.n2d.z*rcp.z < -13)329		{330			continue;331		}332		333		// chunk too far334		/*distance = rcp.x*rcp.x+rcp.z*rcp.z;335		if(distance > this.chunkRenderDist)336		{337			this.lowResChunks.push({338				chunk: this.world.chunks[i],339				distance: distance340			});341			continue;342		}*/343		344		// get renderable nodes from each chunk inside this.renderNodes345		this.getChunkNodes(this.world.chunks[i]);346	}347	348	// first fog layer from furthest nodes349	var fogDistance = 50;350	351	// render low resolution chunks according to their distance to player352	/*this.lowResChunks.sort(function(a, b)353	{354		return b.distance-a.distance;355	});356	357	for(var i in this.lowResChunks)358	{359		this.renderLowResChunk(this.lowResChunks[i].chunk);360		fogDistance = this.fogLayer(fogDistance, this.lowResChunks[i].distance);361	}*/362	363	// render nodes according to their distance to player364	this.renderNodes.sort(function(a, b)365	{366		return b.distance-a.distance;367	});368	369	for(var i in this.renderNodes)370	{371		this.renderNode(this.renderNodes[i].node);372		fogDistance = this.fogLayer(fogDistance, this.renderNodes[i].distance);373	}374	375	// mouse interface376	if(this.mouseClick)377	{378		// left click = add new node379		if(this.clickedNode && this.mouseClick.button == 0)380		{381			var selectedType = document.getElementById("type").value;382			383			var newNode = {x: this.clickedNode.x, y: this.clickedNode.y, z: this.clickedNode.z};384				385			switch(this.clickedFace)386			{387				case FACE.FRONT:  newNode.z++; break;388				case FACE.BACK:   newNode.z--; break;389				case FACE.RIGHT:  newNode.x++; break;390				case FACE.LEFT:   newNode.x--; break;391				case FACE.TOP:    newNode.y++; break;392				case FACE.BOTTOM: newNode.y--; break;393			}394			395			if(!this.player.nodeCollision(newNode))396			{397				// get node type from DOM398				this.world.addNode(newNode.x, newNode.y, newNode.z, selectedType);399			}400		}401		// right click = remove node402		else if(this.clickedNode && this.mouseClick.button == 2)403		{404			this.world.removeNode(this.clickedNode);405		}406		this.clickedNode = false;407		this.clickedFace = false;408		this.mouseClick = false;409	}410	411	if(this.mouselock)412	{413		// render crosshair414		this.context.drawImage(this.crosshair, this.w2-8, this.h2-8);415	}416	417	if(this.hud)418	{		419		this.displayHud();420	}421	422	if(this.graph)423	{424		this.displayPerformanceGraph();425	}426	427	if(this.map)428	{429		this.displayHeightMap();430	}431	432	// frames per second counter433	if(new Date().getTime()-this.time >= 1000)434	{435		this.fps = this.frames;436		this.frames = 0;437		this.time = new Date().getTime();438	}439	this.frames++;440	441	window.requestFrame(this.render.bind(this));442}443// pseudo fog filter renders a semi-transparent gray square over everything444Renderer.prototype.fogLayer = function(fogDistance, currentDistance)445{446	if(fogDistance < 80 && currentDistance < this.nodeRenderDist-fogDistance)447	{448		this.context.globalAlpha = 0.5;449		this.context.fillStyle = "#eeeeee";450		this.context.beginPath();451		this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);452		this.context.closePath();453		this.context.fill();454		this.context.globalAlpha = 1;455		456		// next fog layer at457		return fogDistance+20;458	}459	460	return fogDistance;461}462Renderer.prototype.renderLowResChunk = function(chunk)463{464	// you read it, now complete it!465	return;466}467Renderer.prototype.getChunkNodes = function(chunk)468{469	// relative node position470	var rnp, distance;471	472	addSortNode:473	for(var i in chunk.renderNodes)474	{475		rnp = {476			x: chunk.renderNodes[i].x+0.5-this.camera.x,477			y: chunk.renderNodes[i].y+0.5-this.camera.y,478			z: chunk.renderNodes[i].z+0.5-this.camera.z479		};480		481		distance = rnp.x*rnp.x+rnp.y*rnp.y+rnp.z*rnp.z;482		483		// node is too far or behind player (bounding sphere radius: sqrt(3*(0.5)^2) = 0.866)484		if(distance > this.nodeRenderDist || this.n3d.x*rnp.x+this.n3d.y*rnp.y+this.n3d.z*rnp.z < -0.866)485		{486			continue;487		}488		489		// check node bounding sphere against all 4 frustrum planes490		for(var j = 0; j < 4; j++)491		{492			if(this.frustrum[j].x*rnp.x+this.frustrum[j].y*rnp.y+this.frustrum[j].z*rnp.z > 0.866)493			{494				continue addSortNode;495			}496		}497		498		this.nodeCount++;499		500		this.renderNodes.push({501			node: chunk.renderNodes[i],502			distance: distance503		});504	}505}506Renderer.prototype.renderNode = function(node)507{508	this.workingNode = node;509	510	// translate511	this.rx = node.x-this.camera.x;512	this.ry = node.y-this.camera.y;513	this.rz = node.z-this.camera.z;514	515	// projected points array516	this.rp = [];517	518	// node519	//    3-----7520	//   /|    /|521	//  2-+---6 |522	//  | 1---|-5523	//  |/    |/524	//  0-----4525	526	// draw visible faces527	if(node.sides & FACE.FRONT && node.z+1 < this.camera.z)528	{529		this.workingFace = FACE.FRONT;530		this.drawRect(VERTEX.FRONT);531	}532	533	if(node.sides & FACE.BACK && node.z > this.camera.z)534	{535		this.workingFace = FACE.BACK;536		this.drawRect(VERTEX.BACK);537	}538	539	if(node.sides & FACE.RIGHT && node.x+1 < this.camera.x)540	{541		this.workingFace = FACE.RIGHT;542		this.drawRect(VERTEX.RIGHT);543	}544	545	if(node.sides & FACE.LEFT && node.x > this.camera.x)546	{547		this.workingFace = FACE.LEFT;548		this.drawRect(VERTEX.LEFT);549	}550	551	if(node.sides & FACE.TOP && node.y+1 < this.camera.y)552	{553		this.workingFace = FACE.TOP;554		this.drawRect(VERTEX.TOP);555	}556	557	if(node.sides & FACE.BOTTOM && node.y > this.camera.y)558	{559		this.workingFace = FACE.BOTTOM;560		this.drawRect(VERTEX.BOTTOM);561	}562}563Renderer.prototype.drawRect = function(p)564{565	// process each vertex566	var index, x, y, z, xx, yy, zz;567	568	var offset = OFFSET;569	570	for(var i = 0; i < 4; i++)571	{572		index = (this.workingNode.x+offset[p[i]].x)+'_'+(this.workingNode.y+offset[p[i]].y)+'_'+(this.workingNode.z+offset[p[i]].z);573		574		// vertex already processed for this frame575		if((this.rp[p[i]] = this.vertex[index]) !== undefined)576		{577			continue;578		}579		580		// translate vertices581		x = this.rx+offset[p[i]].x;582		y = this.ry+offset[p[i]].y;583		z = this.rz+offset[p[i]].z;584		585		// clip point if behind player586		if(x*this.n3d.x+y*this.n3d.y+z*this.n3d.z < 0)587		{588			this.rp[p[i]] = false;589			this.vertex[index] = false;590			continue;591		}592		593		// rotatate vertices (http://en.wikipedia.org/wiki/Rotation_matrix)594		xx = this.player.rotTrig.cosy*x+this.player.rotTrig.siny*z;595		yy = this.player.rotTrig.sinx*this.player.rotTrig.siny*x+this.player.rotTrig.cosx*y-this.player.rotTrig.sinx*this.player.rotTrig.cosy*z;596		zz = -this.player.rotTrig.siny*this.player.rotTrig.cosx*x+this.player.rotTrig.sinx*y+this.player.rotTrig.cosx*this.player.rotTrig.cosy*z;597		598		// project 3d point to 2d screen (http://en.wikipedia.org/wiki/3D_projection)599		zz = this.focalLength/zz;600		601		// save relative point602		this.rp[p[i]] = {x: xx*zz, y: -yy*zz};603		604		// save processed vertex605		this.vertex[index] = this.rp[p[i]];606		this.vertexCount++;607	}608	609	// corner clipping to viewport610	/*if(611		(!this.rp[p[0]] || (this.rp[p[0]].x < -this.w2 || this.rp[p[0]].x > this.w2) || (this.rp[p[0]].y < -this.h2 || this.rp[p[0]].y > this.h2)) &&612		(!this.rp[p[1]] || (this.rp[p[1]].x < -this.w2 || this.rp[p[1]].x > this.w2) || (this.rp[p[1]].y < -this.h2 || this.rp[p[1]].y > this.h2)) &&613		(!this.rp[p[2]] || (this.rp[p[2]].x < -this.w2 || this.rp[p[2]].x > this.w2) || (this.rp[p[2]].y < -this.h2 || this.rp[p[2]].y > this.h2)) &&614		(!this.rp[p[3]] || (this.rp[p[3]].x < -this.w2 || this.rp[p[3]].x > this.w2) || (this.rp[p[3]].y < -this.h2 || this.rp[p[3]].y > this.h2))615	)616	{617		return;618	}*/619	620	// check for click (http://paulbourke.net/geometry/insidepoly/)621	if(this.mouseClick)622	{623		if(624			(this.mouseClick.y-this.rp[p[0]].y)*(this.rp[p[1]].x-this.rp[p[0]].x)-(this.mouseClick.x-this.rp[p[0]].x)*(this.rp[p[1]].y-this.rp[p[0]].y) < 0 &&625			(this.mouseClick.y-this.rp[p[2]].y)*(this.rp[p[3]].x-this.rp[p[2]].x)-(this.mouseClick.x-this.rp[p[2]].x)*(this.rp[p[3]].y-this.rp[p[2]].y) < 0 &&626			(this.mouseClick.y-this.rp[p[1]].y)*(this.rp[p[2]].x-this.rp[p[1]].x)-(this.mouseClick.x-this.rp[p[1]].x)*(this.rp[p[2]].y-this.rp[p[1]].y) < 0 &&627			(this.mouseClick.y-this.rp[p[3]].y)*(this.rp[p[0]].x-this.rp[p[3]].x)-(this.mouseClick.x-this.rp[p[3]].x)*(this.rp[p[0]].y-this.rp[p[3]].y) < 0628		)629		{630			this.clickedNode = this.workingNode;631			this.clickedFace = this.workingFace;632		}633	}634	635	if(this.renderMode == 0)636	{637		this.drawMonochrome(p);638	}639	else if(this.renderMode == 1)640	{641		this.drawTextured(p);642	}643	644	this.faceCount++;645}646Renderer.prototype.drawMonochrome = function(p)647{	648	var points = [];649	650	if(this.rp[p[0]])651	{652		points.push(this.rp[p[0]]);653	}654	if(this.rp[p[1]])655	{656		points.push(this.rp[p[1]]);657	}658	if(this.rp[p[2]])659	{660		points.push(this.rp[p[2]]);661	}662	if(this.rp[p[3]])663	{664		points.push(this.rp[p[3]]);665	}666	667	if(points.length > 1)668	{669		// reset drawing settings670		this.context.strokeStyle = "#000000";671		this.context.lineWidth = 1;672		this.context.fillStyle = this.workingNode.type.color;673		674		// set transparency675		if(this.workingNode.type.transparent)676		{677			this.context.globalAlpha = 0.5;678		}679		680		// start drawing polygon681		this.context.beginPath();682		683		// move to first point684		this.context.moveTo(points[0].x+this.w2, points[0].y+this.h2);685		for(var i = 1; i < points.length; i++)686		{687			this.context.lineTo(points[i].x+this.w2, points[i].y+this.h2);688		}689		// line back to first point (not needed)690		//this.context.lineTo(points[0].x+this.w2, points[0].y+this.h2);691		692		this.context.closePath();693		694		// fill doesn't work properly in Chrome 20.0.1132.57695		this.context.fill();696		this.context.stroke();697		this.context.globalAlpha = 1;698	}699}700Renderer.prototype.drawTextured = function(p)701{702	// affine texture mapping code by Andrea Griffini (http://stackoverflow.com/a/4774298/176269)703	var texture = this.workingNode.type.texture(this.workingFace);704	705	// 0---3 texture map corner order706	// |   |707	// 1---2708	709	var size = this.textureSize;710	var pts = [711		{x: this.rp[p[0]].x, y: this.rp[p[0]].y, u: size*texture[0], v: size*texture[1]},712		{x: this.rp[p[1]].x, y: this.rp[p[1]].y, u: size*texture[0], v: size*texture[1]+size},713		{x: this.rp[p[2]].x, y: this.rp[p[2]].y, u: size*texture[0]+size, v: size*texture[1]+size},714		{x: this.rp[p[3]].x, y: this.rp[p[3]].y, u: size*texture[0]+size, v: size*texture[1]}715	];716	717	// triangle subdivision718	var tris = [];719	720	if(this.rp[p[0]] && this.rp[p[1]] && this.rp[p[2]])721	{722		tris.push([0, 1, 2]);723	}724	else if(this.rp[p[1]] && this.rp[p[2]] && this.rp[p[3]])725	{726		tris.push([1, 2, 3]);727	}728	729	if(this.rp[p[2]] && this.rp[p[3]] && this.rp[p[0]])730	{731		tris.push([2, 3, 0]);732	}733	else if(this.rp[p[0]] && this.rp[p[1]] && this.rp[p[3]])734	{735		tris.push([0, 1, 3]);736	}737	738	for(var t=0; t<tris.length; t++)739	{740		var pp = tris[t];741		var x0 = pts[pp[0]].x+this.w2, x1 = pts[pp[1]].x+this.w2, x2 = pts[pp[2]].x+this.w2;742		var y0 = pts[pp[0]].y+this.h2, y1 = pts[pp[1]].y+this.h2, y2 = pts[pp[2]].y+this.h2;743		var u0 = pts[pp[0]].u, u1 = pts[pp[1]].u, u2 = pts[pp[2]].u;744		var v0 = pts[pp[0]].v, v1 = pts[pp[1]].v, v2 = pts[pp[2]].v;745		// set clipping area so that only pixels inside the triangle will be affected by the image drawing operation746		this.context.save();747		this.context.beginPath();748		this.context.moveTo(x0, y0);749		this.context.lineTo(x1, y1);750		this.context.lineTo(x2, y2);751		this.context.closePath();752		this.context.clip();753		// compute matrix transform754		var delta = u0*v1+v0*u2+u1*v2-v1*u2-v0*u1-u0*v2;755		var delta_a = x0*v1+v0*x2+x1*v2-v1*x2-v0*x1-x0*v2;756		var delta_b = u0*x1+x0*u2+u1*x2-x1*u2-x0*u1-u0*x2;757		var delta_c = u0*v1*x2+v0*x1*u2+x0*u1*v2-x0*v1*u2-v0*u1*x2-u0*x1*v2;758		var delta_d = y0*v1+v0*y2+y1*v2-v1*y2-v0*y1-y0*v2;759		var delta_e = u0*y1+y0*u2+u1*y2-y1*u2-y0*u1-u0*y2;760		var delta_f = u0*v1*y2+v0*y1*u2+y0*u1*v2-y0*v1*u2-v0*u1*y2-u0*y1*v2;761		// draw the transformed image762		this.context.transform(delta_a/delta, delta_d/delta, delta_b/delta, delta_e/delta, delta_c/delta, delta_f/delta);763		this.context.drawImage(this.texture, 0, 0);764		this.context.restore();765	}766}767// ############################################################ ADDITIONAL INFORMATION768Renderer.prototype.displayHud = function()769{770	this.context.save();771	this.context.textBaseline = "top";772	this.context.textAlign = "left";773	this.context.fillStyle = "#000000";774	this.context.font = "12px sans-serif";775	this.context.fillText("FPS: "+this.fps, 0, 0);776	this.context.fillText("Chunks: "+this.chunkCount, 0, 12);777	this.context.fillText("Nodes: "+this.nodeCount, 0, 24);778	this.context.fillText("Faces: "+this.faceCount, 0, 36);779	this.context.fillText("Vertices: "+this.vertexCount, 0, 48);780	this.context.fillText("X: "+this.player.position.x.toFixed(2), 0, 60);781	this.context.fillText("Y: "+this.player.position.y.toFixed(2), 0, 72);782	this.context.fillText("Z: "+this.player.position.z.toFixed(2), 0, 84);783	this.context.restore();784}785Renderer.prototype.displayPerformanceGraph = function()786{787	if(typeof this.graph != 'object')788	{789		this.graph = {790			fps: [],791			width: 300,792			height: 100,793			dataPoints: 20794		};795		796		this.graph.interval = this.graph.width/this.graph.dataPoints;797		798		// prerender graph base799		var graph = this.graph;800		this.graph.base = this.prerender(this.graph.width, this.graph.height, function(ctx)801		{802			ctx.fillStyle = "#EEEEEE";803			ctx.beginPath();804			ctx.rect(0, 0, graph.width, graph.height);805			ctx.fill();806			ctx.closePath();807			808			ctx.strokeStyle = '#CCCCCC';809			ctx.lineWidth = 1;810			ctx.beginPath();811			for(var i=0; i<graph.dataPoints; i++)812			{813				ctx.moveTo(i*graph.interval, 0);814				ctx.lineTo(i*graph.interval, graph.height);815			}816			ctx.stroke();817			ctx.closePath();818		});819	}820	821	// update graph every second822	if(!this.graph.time || new Date().getTime()-this.graph.time >= 1000)823	{824		this.graph.time = new Date().getTime();825		826		// data stack827		if(this.graph.fps.length > this.graph.dataPoints)828		{829			this.graph.fps.shift();830		}831		this.graph.fps.push(this.fps);832		833		// prerender graph834		var graph = this.graph;835		this.graph.image = this.prerender(this.graph.width, this.graph.height+20, function(ctx)836		{837			ctx.drawImage(graph.base, 0, 0);838			839			// draw fps line and text840			ctx.strokeStyle = "#000000";841			ctx.lineWidth = 2;842			ctx.fillStyle = "#000000";843			ctx.textBaseline = "bottom";844			ctx.textAlign = "right";845			ctx.font = "10px sans-serif";846			847			ctx.beginPath();848			ctx.moveTo(0, graph.height-graph.fps[0]*graph.height/60);849			for(var i=1; i<graph.fps.length; i++)850			{851				var y = graph.height-graph.fps[i]*graph.height/60;852				ctx.fillText(graph.fps[i], i*graph.interval, y);853				ctx.lineTo(i*graph.interval, y);854			}855			ctx.stroke();856			ctx.closePath();857			858			// average frames per second859			var avgFps = 0;860			for(var i in graph.fps)861			{862				avgFps += graph.fps[i];863			}864			avgFps /= graph.fps.length;865			866			ctx.textBaseline = "top";867			ctx.textAlign = "left";868			ctx.font = "12px sans-serif";869			ctx.fillText("Avg. FPS: "+(avgFps|0), 0, graph.height);870		});871	}872	873	this.context.drawImage(this.graph.image, this.canvas.width-this.graph.width, 0);874}875Renderer.prototype.displayHeightMap = function()876{877	var mapsize = 64;878	879	// current chunk coordinates880	var x = Math.floor(this.camera.x/16);881	var z = Math.floor(this.camera.z/16);882	883	// no map, player changed chunks or map seed changed884	if(typeof this.map != 'object' || this.map.x != x || this.map.z != z || this.world.map.seed != this.map.seed)885	{886		this.map = {887			x: x,888			z: z,889			offset: mapsize*2,890			step: mapsize/16,891			size: mapsize*4,892			seed: this.world.map.seed893		}894		895		this.map.position = new Image();896		this.map.position.src = "media/pos.png";897		898		// prerender 16 chunks worth of heightmap899		var renderer = this;900		var map = this.map;901		this.map.heightmap = this.prerender(64, 64, function(ctx)902		{903			var hmap = renderer.context.createImageData(64, 64);904			var index, color, cx, cz;905			906			for(var mz=0; mz<4; mz++)907			{908				for(var mx=0; mx<4; mx++)909				{910					cx = map.x+mx-2;911					cz = map.z+mz-2;912					913					// draw one chunck of 16 by 16 nodes (reverse z coordinate)914					for(var z=0; z<16; z++)915					{916						for(var x=0; x<16; x++)917						{918							index = 4*(16*mx+x)+256*(16*(3-mz)+16-z);919							color = 16*(renderer.world.map.getHeight(16*cx+x, 16*cz+z)*16|0);920							921							// red, green, blue, alpha922							hmap.data[index] = color;923							hmap.data[index+1] = color;924							hmap.data[index+2] = color;925							hmap.data[index+3] = 255;926						}927					}928				}929			}930			ctx.putImageData(hmap, 0, 0);931		});932	}933	934	this.context.save();935	this.context.translate(this.canvas.width-mapsize, this.canvas.height-mapsize);936	this.context.rotate(this.player.rotation.y);937	938	// clipping mask939	this.context.beginPath();940	// 6.28 = 2*pi941	this.context.arc(0, 0, mapsize, 0, 6.28, false);942	this.context.closePath();943	this.context.clip();944	945	// context.drawImage(canvas element, sx, sy, sw, sh, dx, dy, dw, dh)946	this.context.drawImage(this.map.heightmap, 0, 0, 64, 64, -this.map.step*(((this.camera.x%16)+16)%16)-this.map.offset, this.map.step*(((this.camera.z%16)+16)%16)-this.map.offset, this.map.size, this.map.size);947	948	this.context.restore();949	950	this.context.drawImage(this.map.position, this.canvas.width-mapsize-8, this.canvas.height-mapsize-8);...