improved tile move, added more tiles

resources/css/style.css

@@ -7,6 +7,7 @@ html{
 }
 body{
   min-height: 100%;
+  background: #c6dbd2;
 }
 
 .tile{
@@ -14,11 +15,19 @@ body{
 	width: 30px;
 	height: 30px;
 	position: absolute;
+	background: white;
+}
+
+.crossH{
+	width: 60px;
+}
+.crossV{
+	height: 60px !important;
 }
 
 svg polygon,
 svg rect{
-	fill:rgb(0,255,255);
+	fill:#617de4;
 	stroke-width:5;
 	stroke:rgb(0,0,0);
 }
@@ -45,6 +54,7 @@ svg text{
 	text-align: center;
 }
 
+.Shadow,
 .menu .list{
 	display: none;
 }
@@ -67,6 +77,7 @@ svg text{
 	min-width: 30px;
 	text-align: center;
 	float: left;
+	background: #ecffa2;
 }
 
 #messages{

resources/js/plan.js

@@ -110,13 +110,17 @@ function moveTile(x,y){
 		method: POST,
 		data : {action:mode,direction:selected.id,x:x,y:y},
 		success: function(resp){
-			$(resp).each(function(){
-				if (this.id != undefined){
-					$('#'+this.id).remove();
-					$(BODY).append($(this));
-				}				
-			});
-			$('#tile-'+x+'-'+y).remove();
+			if (resp.startsWith('<')){
+				$(resp).each(function(){
+					if (this.id != undefined){
+						$('#'+this.id).remove();
+						$(BODY).append($(this));
+					}
+				});
+				$('#tile-'+x+'-'+y).remove();
+			} else {
+				addMessage(resp);
+			}
 		}
 	});
 }

resources/svg/CrossH.svg

@@ -0,0 +1,4 @@
+<svg width="200" height="100" viewbox="0 0 200 100">
+	<polygon points="35,0 135,100 165,100 65,0" />
+	<polygon points="35,100 135,00 165,00 65,100" />
+</svg>

resources/svg/CrossV.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="200" viewbox="0 0 100 200">
+	<polygon points="0,35 100,135 100,165 0,65" />
+	<polygon points="100,35 0,135 0,165 100,65" />
+</svg>

resources/svg/EndN.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewbox="0 0 100 100">
+	<rect x="35" y="40" width="30" height="60" />	
+</svg>

resources/svg/EndS.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewbox="0 0 100 100">
+	<rect x="35" y="0" width="30" height="60" />	
+</svg>

resources/svg/StraightV.svg

@@ -1,3 +1,3 @@
 <svg width="100" height="100" viewbox="0 0 100 100">
-	<rect x="35" y="0" width="35" height="100" />	
+	<rect x="35" y="0" width="30" height="100" />	
 </svg>

resources/svg/TurnoutNE.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewbox="0 0 100 100">
+	<rect x="35" y="0" width="30" height="100" />
+	<polygon points="65,0 100,35 100,65 35,0" />
+</svg>

resources/svg/TurnoutNW.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewbox="0 0 100 100">
+	<rect x="35" y="0" width="30" height="100" />
+	<polygon points="65,0 0,65 0,35 35,0" />
+</svg>