Render shadows with proper depth sorting

assets/index.html

@@ -164,7 +164,7 @@
             heightMap[t.x + ',' + t.y] = t.h;
         }
 
-        var shadows = [];
+        var renderList = [];
 
         for (var i = 0; i < tiles.length; i++) {
             var t = tiles[i];
@@ -172,9 +172,6 @@
 
             var water = isWater(h);
 
-            var hLeftNeighbor = heightMap[(wx - TILE) + ',' + wy] || 0;
-            var hFrontNeighbor = heightMap[wx + ',' + (wy + TILE)] || 0;
-
             for (var level = 1; level <= h; level++) {
                 var hRight;
                 if (level > (heightMap[(wx + TILE) + ',' + wy] || 0)) {
@@ -189,7 +186,12 @@
                     hBack = level;
                 }
 
-                drawTile(wx, wy, level, true, hRight, hBack, false);
+                renderList.push({
+                    type: 'tile',
+                    wx: wx, wy: wy, level: level,
+                    hRight: hRight, hBack: hBack,
+                    depth: wx + wy + level * 0.001
+                });
             }
 
             if (h > 0) {
@@ -207,14 +209,15 @@
                     var topA = project(wx + TILE - GAP/2 - (TILE - GAP) * tt, wy + TILE - GAP/2, h * HEIGHT_UNIT);
                     var topB = project(wx + TILE - GAP/2 - (TILE - GAP) * tt, wy + GAP/2, h * HEIGHT_UNIT);
 
-                    shadows.push({
+                    renderList.push({
+                        type: 'shadow',
                         points: [
                             { x: top2[0], y: top2[1] },
                             { x: topA[0], y: topA[1] },
                             { x: topB[0], y: topB[1] },
                             { x: top3[0], y: top3[1] }
                         ],
-                        depth: (wx + wy) + 1
+                        depth: wx + wy + 0.0005
                     });
                 }
 
@@ -226,33 +229,38 @@
                     var topA = project(wx + GAP/2, wy + TILE - GAP/2 - (TILE - GAP) * tt, h * HEIGHT_UNIT);
                     var topB = project(wx + GAP/2, wy + GAP/2 - (TILE - GAP) * tt, h * HEIGHT_UNIT);
 
-                    shadows.push({
+                    renderList.push({
+                        type: 'shadow',
                         points: [
                             { x: top1[0], y: top1[1] },
                             { x: topA[0], y: topA[1] },
                             { x: topB[0], y: topB[1] },
                             { x: top4[0], y: top4[1] }
                         ],
-                        depth: (wx + wy) + 1
+                        depth: wx + wy + 0.0005
                     });
                 }
             }
         }
 
-        shadows.sort(function(a, b) { return a.depth - b.depth; });
+        renderList.sort(function(a, b) { return a.depth - b.depth; });
 
-        for (var i = 0; i < shadows.length; i++) {
-            var s = shadows[i];
+        for (var i = 0; i < renderList.length; i++) {
+            var item = renderList[i];
+            if (item.type === 'tile') {
+                drawTile(item.wx, item.wy, item.level, true, item.hRight, item.hBack, false);
+            } else {
                 ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
                 ctx.beginPath();
-            ctx.moveTo(s.points[0].x, s.points[0].y);
-            ctx.lineTo(s.points[1].x, s.points[1].y);
-            ctx.lineTo(s.points[2].x, s.points[2].y);
-            ctx.lineTo(s.points[3].x, s.points[3].y);
+                ctx.moveTo(item.points[0].x, item.points[0].y);
+                ctx.lineTo(item.points[1].x, item.points[1].y);
+                ctx.lineTo(item.points[2].x, item.points[2].y);
+                ctx.lineTo(item.points[3].x, item.points[3].y);
                 ctx.closePath();
                 ctx.fill();
             }
         }
+    }
 
     function applyLighting(color, factor) {
         var r = parseInt(color.substr(1, 2), 16);