#StackBounty: #javascript #jquery #asp.net #clientpeoplepicker PeoplePicker not loading in a ASP.net page – SharePoint

Bounty: 50

I am able to load the peoplepicker control in a page created within SharePoint using the code below but the same when i try to load in a .net application, integrated in SharePoint then i am unable to get the desired result.

After checking multiple blogs I finally ended up using the below references :

http://../includes/js/modernizr-1.6.min.js
http://../includes/js/jquery-1.4.4.min.js
http://../includes/js/jquery.ui.all.js
/_layouts/1033/init.js
http://../includes/js/MicrosoftAjax.js
/_layouts/sp.core.js
/_layouts/15/sp.runtime.js
/_layouts/15/sp.js
/_layouts/15/clientforms.js
/_layouts/15/clientpeoplepicker.js
/_layouts/15/autofill.js
/_layouts/15/1033/initstrings.js
/_layouts/15/clienttemplates.js
/_layouts/15/1033/strings.js

and the code i use is :

function initializePeoplePicker() {

    // Create a schema to store picker properties, and set the properties.
    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = true;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '220px';

   this.SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerDiv', null, schema);
}

I am able to see the desired results in a SharePoint webpart page as shown below :
Working

but the moment i try to do the same in a asp.net project which is deployed as an app in SharePoint server then the code stops working.

NOT Working

I believe the issue is with the references but i tried numerous combinations but nothing worked. Kindly help.


Get this bounty!!!

#StackBounty: #javascript #jquery #jquery-ui #datepicker #jquery-ui-datepicker Jquery Datepicker select multiple date ranges in one cal…

Bounty: 50

My requirement is to allow user to select multiple date ranges in a single calendar, also previous date selections should not be allowed to change. How is this possible? Below is the code and link to fiddle

HTML

<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

SCRIPT

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#sproid-bookingcondition-datefrom" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#sproid-bookingcondition-dateto" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }

      return date;
    }
  } );


Get this bounty!!!

#StackBounty: #javascript #layout #golden-layout Proper way to catch resize events for a pane in GoldenLayout

Bounty: 100

I want to taken an action in one pane (i.e. a container content item) when a resize event occurs (whether resizing the panes, the whole browser, or zoom). The below works, but… if I then drag around the panes, even go from left-right, to right-left, or top-bottom, it stops working.

I’m assuming re-arranging panes resets something, and there is a proper way to get a persistent event handler. But I cannot work it out from the docs.

myLayout.on('initialised',initPanes);

function initPanes(){
myLayout.root.contentItems[0].contentItems[0].on('resize',function(){
    console.log("First pane resized");  //TEMP
    });
myLayout.root.contentItems[0].contentItems[1].on('resize',function(){
    console.log("Second pane resized");  //TEMP
    });
//...
}


Get this bounty!!!

#StackBounty: #javascript #d3.js d3.js chemical tube bar chart

Bounty: 50

enter image description here

I am interested in creating this liquid bar chart of sorts. With the pointers/dotted markers pulling off to the side like shown.

latest bar chart code
http://jsfiddle.net/NYEaX/1827/

latest cleaned up water wave code
http://jsfiddle.net/Qh9X5/10331/


//I want to strip down this waterwave code
http://jsfiddle.net/Qh9X5/10091/

//progress chart
http://jsfiddle.net/NYEaX/1740/


latest base code for this bar chart.
http://jsfiddle.net/NYEaX/1822/

var $this = $("#checmicalbars");


var data = [{
  "label": "Rendering",
  "value": 90,      
  "startcolor": "#c3da54",
  "endcolor": "#c1e500"
},
{
  "label": "Character Design",
  "value": 95,      
  "startcolor": "#e94adc",
  "endcolor": "#aae3dd"
},
{
  "label": "Sketching",
  "value": 80,      
  "startcolor": "#c3da54",
  "endcolor": "#fa5283"
},
{
  "label": "Story Boarding",
  "value": 90,      
  "startcolor": "#e94adc",
  "endcolor": "#f83b03"
},
{
  "label": "Drawing",
  "value": 82,      
  "startcolor": "#c3da54",
  "endcolor": "#f88504"
},
{
  "label": "Painting",
  "value": 90,      
  "startcolor": "#e94adc",
  "endcolor": "#f7d200"
}];


var h = 150;
var w = 300;

    var options = {
  minlimit: 0,
  maxlimit: 100
}


// setup scales
var x = d3.scale.ordinal()
  .rangeRoundBands([0, w], .1);

var y = d3.scale.linear()
  .range([h, 0]);

var xAxis = d3.svg.axis()
  .scale(this.x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(this.y)
  .orient("left");
// setup scales


// chart container
var progresschart = d3.select($this[0]).append("svg")
  .attr("width", w)
  .attr("height", h)
  .append("g")
  .attr("transform", "translate(0,5)");

var barrectsholder = progresschart.append("g")
  .attr("class", "chart")
  .attr("transform", "translate(15,0)");
// chart container


y.domain([options["minlimit"], options["maxlimit"]]);


//__ bars
var bar = barrectsholder.selectAll("rect")
  .data(data);

//__ enter
bar.enter()
  .append("rect")
  .attr("class", "bar")
  .attr("y", h);

//__ update   
bar
  .attr("y", h)
  .attr("height", 0)
  .style("fill", function(d){
    return d.startcolor;
  })
  .transition()
  .duration(2500)
  .style("fill", function(d){
    return d.endcolor;
  })
  .attr("width", 20)
  .attr("x", function(d, i) {
    return 30 * i;
  })
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return h - y(d.value);
  })

//__ exit
bar.exit()
  .transition()
  .duration(250)
  .attr("y", 0)
  .attr("height", 0)
  .remove();
//__ bars


Get this bounty!!!

#StackBounty: #javascript #google-chrome #dom #javascript-events Find out what code triggered a change in input

Bounty: 50

I have Chrome auto password filling disabled.

In one particular login page of a website, right after the load event, the password input goes from being empty to have a string as its value (not reflected in the DOM). If I take a look through console.dir() I can read its value, and is a password I’ve never use or would use, so I never typed that. Nothing I’ve searched or asked has been of any help.

I’ve debugged the page and with an eventListener I can pinpoint the exact moment that value is introduced, just listening for the change event. But that is not really useful, I just see the input changed with that weird password but know nothing about why it’s appearing there. AFAIK the event object doesn’t have a clue of who’s behind the change.

I want to know what function or snippet or code is acting on that input and inserting that useless string.

How can I accomplish that?

EDIT: I appreciate the side help but I’m only really interested in the answer to the question asked


Get this bounty!!!

#StackBounty: #javascript #jquery Regex comma seperating thousands and keeping two decimals

Bounty: 50

I recently came up with this code while answering another StackOverflow question. Basically, on blur, this code will properly comma separate by thousands and leave the decimal at two digits (like how USD is written [7,745.56]).

I was wondering, is there a way to update the regex to accommodate for decimals as well as thousands, without doing the messy .toFixed(2). Especially, because I don’t need to display the decimals if no decimals are specified. Additionally, I would like to knock off any decimals passed 2 (even if that means ’rounding down’).

Input -> Target Output

7456 -> 7,456
45345 -> 45,345
25.23523534 -> 25.23
3333.239 -> 3,333.23
234.99 -> 234.99
2300.99 -> 2,300.99
23123123123.22 -> 23,123,123,123.22

Current Regex

var format = function (num) {
    return parseFloat(num).toFixed(2).replace(/B(?=(d{3})+(?!d))/g, ",")
}
$(function () {
    $("#principalAmtOut").blur(function (e) {
        $(this).val(format($(this).val()));
    });
});
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<input id="principalAmtOut" type="text" />


Get this bounty!!!

#StackBounty: #magento2 #javascript #performance #knockoutjs Magento 2: javascript elements load slowly

Bounty: 150

Checkout forms, gallery on product pages, and more elements loaded by javascript take up to 4 seconds to load.

What can be done to make javascript elements load faster?

Update:

I’m using a custom theme which inherits from Blank theme. I’ve not added additional JS files, only made minor changes to them for translation purposes.
All caches are enabled.
It is a live site in production mode.

Pages loading times:

Category and product pages: 5 to 6 seconds.
Cart and checkout: 9 to 10 seconds. (is it normal?)

On product pages, product images are the last to load. This can be annoying for the user. Is it possible to make them load faster / before other elements on the page?

product page
category page


Get this bounty!!!

#StackBounty: #magento2 #javascript #uicomponent #knockoutjs #requirejs Magento 2 : How to Detect Checkout Step Change

Bounty: 50

I am trying to figure out the best method of detecting a step change in Magento 2’s checkout. For example going from shipping details to payment, or vice versa.

I have done some digging and in vendor/magento/module-checkout/view/frontend/web/js/model/step-navigator.js I can use next() which fires on the continue button, and navigateTo() which fires when a user clicks on the checkoutstep directly – but both methods seem rather hacky, there must be a cleaner way to detect a step change regardless of how and which step.

I was hoping for a stepChange() function or something similar that fires whenever a checkout step change happens.

My question:

What is the best method to trigger my custom JS when a checkout step change occurs?


Get this bounty!!!

#StackBounty: #javascript #jquery #html #css #twitter-bootstrap-3 JQUERY.COUNTO.JS: On Scroll Count Numbers NOT OnLoad

Bounty: 50

I’m working with one page website and I want to add a counting numbers with it, so I use javascript.countTo.js. I created every section to group related data and I put the section counter <section id="counters"> below my portfolio section <section class="justaddheight portfolio">. Everytime the page load the number count and when I scroll I always see that numbers stop or ended it’s counting. Now, I want the number counts when I scroll and get into the section counter <section id="counters">. In addition, I used WOW.js and easingJS with my site, it’s the best if you combined the code with it, but it also acceptable if not. The code are the following below:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"><!--The Viewport-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--Character Set-->
        <meta http-equiv="Cache-control" content="no-cache"> <!--The No-Cache-->

        <!--///////////////////////////////////////////////////////
                            CSS 
        ///////////////////////////////////////////////////////-->
        <link rel="stylesheet" href="css/animate.min.css">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Font-Awesome -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- Icomoon-->
        <link rel="stylesheet" href="css/icomoon.css">
        <!-- Simple Line Icons -->
        <link rel="stylesheet" href="css/simple-line-icons.css">     
        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


        <!--///////////////////////////////////////////////////////
                            JAVASCRIPT 
        ///////////////////////////////////////////////////////-->

        <!-- jQuery -->
        http://js/jquery.js
        <!-- Bootstrap -->
        http://js/bootstrap.min.js
        <!-- Wow -->
        http://js/wow.min.js
        <!-- Counter -->
        http://js/jquery.countTo.js
        <!--Easing-->
        http://js/jquery.easing.1.3.js        
        <!--Custom JS-->
        http://js/custom.js
    </head>
    <body id="top">
        <section class="justaddheight text-center about" >
            <h1>SCROLL DOWN</h1>
            <p>First, Scroll Now</p>
            <p>Second, try Again but wait for few seconds before scroll to identify.</p>
        </section>
         <section class="justaddheight service">

        </section>
         <section class="justaddheight portfolio">

        </section>
        <section id="counters">
            
89 Finished projects
</div>
2343409 Templates
</div>
1302 Cup of coffees
</div>
52 Happy clients
</div> </div> </div> </section> </body> </html> <style type="text/css"> /* USE JUST TO ADJUST HEIGHT*/ .justaddheight{ height: 500px; } .text-center{ text-align: center; } </style> $('.counter-number').countTo();


Get this bounty!!!

#StackBounty: #javascript #performance #animation #canvas #raycasting Hoc462 – A Raycaster

Bounty: 50

For the past week, I’ve been making a raycaster in JS and if you want a live demo, you can try it here. It ran smoothly before I added variable height walls but now it is very slow (~15 FPS) so I want to know how to make it run faster.

I’d also like it if somebody would review the code normally so that I can improve it further.

var ctx = c.getContext("2d");
var mapCtx = minimap.getContext("2d");
var MINI_MAP_SCALE = 8;
var OUTSIDE_THE_MAP = -1;
var NO_HIT = 0;
var IS_HIT = 1;
var X_HIT = 0;
var Y_HIT = 1;
var UP = 1;
var DOWN = -1;
var LEFT = -1;
var RIGHT = 1;
var TEXTURED_WALL = 10;
var COLORED_WALL = 11;
var SPRITE = 12;
var SORT_BY_DISTANCE = (a, b) => {return b.distance - a.distance};
function drawMiniMap() {
    if (minimap.width !== player.map.width * MINI_MAP_SCALE || minimap.height !== player.map.height * MINI_MAP_SCALE) {
        minimap.width = player.map.width * MINI_MAP_SCALE;
        minimap.height = player.map.height * MINI_MAP_SCALE;
    }
    mapCtx.fillStyle = "white";
    mapCtx.fillRect(0, 0, minimap.width, minimap.height);
    for (var y = 0; y < player.map.height; y++)
        for (var x = 0; x < player.map.width; x++)
            if (player.map.get(x, y) > 0) {
                mapCtx.fillStyle = "rgb(200, 200, 200)";
                mapCtx.fillRect(
                    x * MINI_MAP_SCALE,
                    y * MINI_MAP_SCALE,
                    MINI_MAP_SCALE, MINI_MAP_SCALE
                );
            }
    updateMiniMap();
}
function updateMiniMap() {
    player.map.sprites.forEach(sprite => {
        mapCtx.fillStyle = "rgb(0, 200, 200)";
        mapCtx.fillRect(
            sprite.x * MINI_MAP_SCALE,
            sprite.z * MINI_MAP_SCALE,
            MINI_MAP_SCALE, MINI_MAP_SCALE
        );
        mapCtx.fillStyle = "black";
        mapCtx.fillRect(
            player.x * MINI_MAP_SCALE - 2,
            player.y * MINI_MAP_SCALE - 2,
            4, 4
        );
    });
    mapCtx.beginPath();
    mapCtx.moveTo(player.x * MINI_MAP_SCALE, player.y * MINI_MAP_SCALE);
    mapCtx.lineTo(
        (player.x + Math.cos(player.rot) * 4) * MINI_MAP_SCALE,
        (player.y + Math.sin(player.rot) * 4) * MINI_MAP_SCALE
    );
    mapCtx.stroke();
}
class Player {
    constructor() {
        this.x = 0;
        this.y = 0;
        this.dirX = 1
        this.dirY = 0; 
        this.planeX = 0;
        this.planeY = 0.66;
        this.dir = 0;
        this.rot = 0;
        this.speed = 0;
        this.moveSpeed = 0.4;
        this.rotSpeed = 6 * Math.PI / 180;
        this.map = null;
        return this;
    }
    move() {
        var moveStep = this.speed * this.moveSpeed;
        this.rot += this.dir * this.rotSpeed;
        var newX = this.x + Math.cos(player.rot) * moveStep;
        var newY = this.y + Math.sin(player.rot) * moveStep;
        var currentMapBlock = this.map.get(newX|0, newY|0);
        if (currentMapBlock === OUTSIDE_THE_MAP || currentMapBlock > 0) {
            this.stopMoving();
            return;
        };
        this.x = newX;
        this.y = newY;
        this.rotateDirectionAndPlane(this.dir * this.rotSpeed);
        return this;
    }
    rotateDirectionAndPlane(angle) {
        var oldDirX = this.dirX;
        this.dirX = this.dirX * Math.cos(angle) - this.dirY * Math.sin(angle);
        this.dirY = oldDirX * Math.sin(angle) + this.dirY * Math.cos(angle);
        var oldPlaneX = this.planeX;
        this.planeX = this.planeX * Math.cos(angle) - this.planeY * Math.sin(angle);
        this.planeY = oldPlaneX * Math.sin(angle) + this.planeY * Math.cos(angle);
        this.stopMoving();
    }
    setXY(x, y) {
        this.x = x;
        this.y = y;
        return this;
    }
    setRot(angle) {
        var difference = angle - this.rot;
        this.rot = angle;
        this.rotateDirectionAndPlane(difference);
        return this;
    }
    startMoving(direction) {
        switch (direction) {
            case "up":
                this.speed = UP; break;
            case "down":
                this.speed = DOWN; break;
            case "left":
                this.dir = LEFT; break;
            case "right":
                this.dir = RIGHT; break;
        }
        return this;
    }
    stopMoving() {
        this.speed = 0;
        this.dir = 0;
        return this;
    }
    castRays() {
        this.move();
        var visibleSprites = [];
        var zBuffer = [];
        Object.keys(this.map.wallTypes).forEach(typeID => {
            this.castRaysToSpecifiedWallType(this.map.wallTypes[typeID], zBuffer);
        });
        this.map.sprites.forEach(sprite => {
            var spriteX = sprite.x - this.x;
            var spriteY = sprite.z - this.y;
            var invDet = 1 / (this.planeX * this.dirY - this.dirX * this.planeY);
            var transformX = invDet * (this.dirY * spriteX - this.dirX * spriteY);
            var transformY = invDet * (-this.planeY * spriteX + this.planeX * spriteY);
            if (transformY > 0) {
                var spriteScreenX = (c.width / 2) * (1 + transformX / transformY);
                var spriteHeight = Math.abs(c.height / transformY);
                var imaginedHeight = sprite.y * spriteHeight;
                var drawStartY = -imaginedHeight / 2 + c.height / 2 - imaginedHeight;
                var drawEndY = imaginedHeight / 2 + c.height / 2 - imaginedHeight;
                var spriteWidth = Math.abs(c.height / transformY);
                var drawStartX = -spriteWidth / 2 + spriteScreenX;
                var drawEndX = spriteWidth / 2 + spriteScreenX;
                var spriteImage = sprite.texture;
                var texHeight = spriteImage.image.height;
                var texWidth = spriteImage.image.width;
                zBuffer.push({
                    type: SPRITE,
                    drawX: drawStartX,
                    drawY: drawStartY,
                    texture: spriteImage,
                    width: spriteWidth,
                    height: spriteHeight,
                    distance: transformY
                });
            }
        });
        return zBuffer.sort(SORT_BY_DISTANCE);
    }
    castRaysToSpecifiedWallType(wallType, zBuffer) {
        for (var x = 0; x < c.width; x++) {
            var cameraX = 2 * x / c.width - 1;
            var rayPosX = this.x;
            var rayPosY = this.y;
            var rayDirX = this.dirX + this.planeX * cameraX;
            var rayDirY = this.dirY + this.planeY * cameraX;
            var mapX = rayPosX | 0;
            var mapY = rayPosY | 0;
            var deltaDistX = Math.sqrt(1 + (rayDirY * rayDirY) / (rayDirX * rayDirX));
            var deltaDistY = Math.sqrt(1 + (rayDirX * rayDirX) / (rayDirY * rayDirY));
            var stepX = 0;
            var stepY = 0;
            var sideDistX = 0;
            var sideDistY = 0;
            var wallDistance = 0;
            var giveUp = false;
            if (rayDirX < 0) {
                stepX = -1;
                sideDistX = (rayPosX - mapX) * deltaDistX;
            } else {
                stepX = 1;
                sideDistX = (mapX + 1 - rayPosX) * deltaDistX;
            }
            if (rayDirY < 0) {
                stepY = -1;
                sideDistY = (rayPosY - mapY) * deltaDistY;
            } else {
                stepY = 1;
                sideDistY = (mapY + 1 - rayPosY) * deltaDistY;
            }
            var hit = NO_HIT;
            var side = X_HIT;
            while (hit === NO_HIT) {
                if (sideDistX < sideDistY) {
                    sideDistX += deltaDistX;
                    mapX += stepX;
                    side = X_HIT;
                } else {
                    sideDistY += deltaDistY;
                    mapY += stepY;
                    side = Y_HIT;   
                }
                var currentMapBlock = this.map.get(mapX, mapY);
                if (currentMapBlock === OUTSIDE_THE_MAP || this.map.wallTypes[currentMapBlock] === wallType) {
                    hit = IS_HIT;
                    if (currentMapBlock === OUTSIDE_THE_MAP) {
                        giveUp = true;
                    }
                }
            }
            if (giveUp) {continue;}
            if (side === X_HIT) {
                wallDistance = (mapX - rayPosX + (1 - stepX) / 2) / rayDirX;
            } else {
                wallDistance = (mapY - rayPosY + (1 - stepY) / 2) / rayDirY;
            }
            var color = wallType.color;
            var wallHeight = wallType.height;
            var lineHeight = c.height / wallDistance;
            var drawEnd = lineHeight / 2 + c.height / 2;
            lineHeight *= wallHeight < 0 ? 0 : wallHeight;
            var drawStart = drawEnd - lineHeight;
            var exactHitPositionX = rayPosY + wallDistance * rayDirY;
            var exactHitPositionY = rayPosX + wallDistance * rayDirX;
            if (side === X_HIT) {
                var wallX = exactHitPositionX;
            } else {
                var wallX = exactHitPositionY;
            }
            var currentBuffer = {};
            zBuffer.push(currentBuffer);
            currentBuffer.side = side;
            currentBuffer.start = drawStart;
            currentBuffer.end = drawEnd;
            currentBuffer.x = x; 
            currentBuffer.distance = wallDistance;
            if (color instanceof Texture) {
                currentBuffer.type = TEXTURED_WALL;
                var texture = color;
                currentBuffer.texture = texture;
                wallX -= wallX | 0;
                var textureX = wallX * texture.image.width;
                if ((side === X_HIT && rayDirX > 0) || (side === Y_HIT && rayDirY < 0)) {
                    textureX = texture.image.width - textureX - 1;
                }
                currentBuffer.textureX = textureX;
            } else {
                currentBuffer.type = COLORED_WALL;
                currentBuffer.color = color;
            }
        }

    }
    render(zBuffer) {
        zBuffer.forEach(currentBuffer => {
            var side = currentBuffer.side;
            var drawStart = currentBuffer.start;
            var drawEnd = currentBuffer.end;
            var {
                side,
                texture,
                textureX,
                color,
                x,
                drawX,
                drawY,
                width,
                height,
                start: drawStart,
                end: drawEnd
            } = currentBuffer;
            var lineHeight = drawEnd - drawStart;
            if (currentBuffer.type === TEXTURED_WALL) {
                ctx.globalAlpha = 1;
                ctx.fillStyle = "black";
                ctx.fillRect(x, drawStart, 1, lineHeight);
                if (side === Y_HIT) {
                    ctx.globalAlpha = .7;
                } else {
                    ctx.globalAlpha = 1;
                }
                ctx.drawImage(texture.image, textureX, 0, 1, texture.image.height, x, drawStart, 1, lineHeight);
            } else if (currentBuffer.type === COLORED_WALL) {
                ctx.globalAlpha = 1;
                ctx.fillStyle = "black";
                ctx.fillRect(x, drawStart, 1, lineHeight);
                if (side === Y_HIT) {
                    ctx.globalAlpha = .7;
                } else {
                    ctx.globalAlpha = 1;
                }
                ctx.fillStyle = "rgb("+color[0]+", "+color[1]+", "+color[2]+")";
                ctx.fillRect(x, drawStart, 1, lineHeight);
            } else if (currentBuffer.type === SPRITE) {
                ctx.globalAlpha = 1;
                ctx.drawImage(texture.image, 0, 0, texture.image.width, texture.image.height, drawX, drawY, width, height);
            }
        });

    }
}
class Grid {
    constructor(wallGrid, wallTextures, sprites) {
        this.wallGrid = wallGrid;
        this.height = wallGrid.length;
        this.width = this.height === 0 ? 0 : wallGrid[0].length;
        this.wallTypes = wallTextures || {};
        this.sprites = sprites || [];
        return this;
    }
    get(x, y) {
        x = x | 0;
        y = y | 0;
        var currentMapBlock = this.wallGrid[y];
        if (currentMapBlock === undefined) return OUTSIDE_THE_MAP;
        currentMapBlock = currentMapBlock[x];
        if (currentMapBlock === undefined) return OUTSIDE_THE_MAP;
        return currentMapBlock;
    }

}
class Texture {
    constructor(src, width, height) {
        this.image = new Image();
        this.image.src = src;
        width ? this.image.width = width : 0;
        height ? this.image.height = height : 0;
    }
}
class Sprite {
    constructor(texture, x, y, z){
        this.texture = texture;
        this.x = x;
        this.y = y;
        this.z = z;
    }
}

class Wall {
    constructor(height, color) {
        this.height = height;
        this.color = color;
    }
}
var player = new Player();
player.x = player.y = 3;
player.map = new Grid([
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,1,1,1,1,1,0,0,0,0,1,0,1,0,1,0,0,0,1],
    [1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0,1,0,0,0,1],
    [1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,1,1,2,1,1,0,0,0,0,1,0,1,0,1,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,0,0,0,0,0,0,0,1],
    [1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,1,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,1,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,1,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,1,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
], {'1': new Wall(2, new Texture('walls.png')), '2': new Wall(4, [255, 0, 0]) }, [new Sprite(new Texture('walls.png'), 4, 1, 4)]);
var keyCodes = {
    "38": "up",
    "40": "down",
    "37": "left",
    "39": "right"
}
document.addEventListener("keydown", function(e) {
    player.startMoving(keyCodes[e.keyCode]);
});
document.addEventListener("keyup", function(e) {
    player.stopMoving(keyCodes[e.keyCode]);
});
var isDragging = false;
c.addEventListener("mousedown", startDragging);
window.addEventListener("mouseup", endDragging);
c.addEventListener("touchstart", startDragging);
c.addEventListener("touchend", endDragging);
c.addEventListener("mousemove", whileDragging);
c.addEventListener("touchmove", whileDragging);
var mouseX = 0;
var pmouseX = 0;
var mouseY = 0;
var pmouseY = 0;
function whileDragging(e) {
    var event;
    e.preventDefault();
    if (e.touches) {
        event = e.touches[0];
    } else {
        event = e;
    }
    pmouseX = mouseX;
    pmouseY = mouseY;
    mouseX = event.pageX - c.offsetLeft;
    mouseY = event.pageY - c.offsetTop;
    if (isDragging) {
        player.setRot(player.rot + (mouseX - pmouseX) / c.width * 2);
        player.speed = -(mouseY - pmouseY) / c.height * 15;
    }
}
function startDragging(e) {
    var event;
    e.preventDefault();
    if (e.touches) {
        event = e.touches[0];
    } else {
        event = e;
    }
    mouseX = event.pageX - c.offsetLeft;
    mouseY = event.pageY - c.offsetTop;
    isDragging = true;
}
function endDragging(e) {
    e.preventDefault();
    isDragging = false;
}
function renderLoop() {
    ctx.clearRect(0, 0, c.width, c.height);
    player.render(player.castRays());
}
requestAnimationFrame(function animate() {
    if (c.clientWidth !== c.width || c.clientHeight !== c.height) {
        c.width = c.clientWidth;
        c.height = c.clientHeight;
    }
    renderLoop();
    drawMiniMap();
    requestAnimationFrame(animate);
});


Get this bounty!!!