Merge pull request #184 from ckcz123/v2.0

V2.0

README.md

@@ -295,7 +295,7 @@ HTML5魔塔交流群群号： `539113091`
 
 [@zhaouv](https://github.com/zhaouv) V2.0的推动者，可视化地图编辑器和事件编辑器的制作者，手机端魔塔制作界面的编写者。现在我们能在V2.0用到方便快捷的可视化地图编辑器，以及通过拖动图块来编写事件，能在手机端造塔等，都需要归功于zhaouv的贡献。
 
-[@iEcho](https://github.com/iEcho) V2.0的推动者，可视化地图编辑器的制作者，游戏界面自适应匹配的编写者。和zhaouv一起推动和开发了V2.0的制作。
+[@i2Echo](https://github.com/i2Echo) V2.0的推动者，可视化地图编辑器的制作者，游戏界面自适应匹配的编写者。和zhaouv一起推动和开发了V2.0的制作。
 
 [@wadxm](https://github.com/wadxm) iOS平台的APP（因为苹果政策无法上架）和启动服务mac版的开发者。我们现在能在mac上制作魔塔得归功于他。
 

_server/css/editor_mobile.css

@@ -247,20 +247,21 @@ body {
     line-height: 1.2em;
 }
 
-td {
+td, .coltd, .rowtd {
     border: 0.230vw solid #fff;
     color: #fff;
     cursor: crosshair;
 }
 
-table.col {
+table.col, div.col {
     position: relative;
 
     text-align: center;
     border-collapse: collapse;
 }
 
-table.col td {
+table.col td,
+div.col .coltd {
     background-color: #4DB6AC;
 }
 
@@ -277,6 +278,7 @@ table.col td {
 }
 
 #mapColMark {
+    position: absolute;
     top: 0;
     left: 4vw;
     width: 96vw;
@@ -285,8 +287,12 @@ table.col td {
 }
 
 
-#mapColMark td {
+#mapColMark .coltd,
+#mapColMark .coltd .coltext {
+    position: absolute;
     width: 7.15vw;
+    height: 4vw;
+    line-height: 4vw;
     padding: 0;
     border-bottom-width: 0px;
     border-top-width: 0px;
@@ -294,23 +300,27 @@ table.col td {
     border-right-width: 0.117307vw;
 }
 
-#mapColMark td:hover .colBlock {
+#mapColMark .coltd:hover .colBlock {
     position: absolute;
     top: 4vw;
+    left:0;
     height: 96vw;
     width: 7.384615vw;
     z-index: 100;
     background-color: rgba(38, 166, 154, .5);
 }
 
-table.row {
+table.row,div.row,
+table.row,div.row .rowtext {
+    width:4vw;
     position: relative;
     text-align: right;
     vertical-align: middle;
     border-collapse: collapse;
 }
 
-table.row td {
+table.row td,
+div.row .rowtd .rowtext{
     background-color: #4C221B;
 }
 
@@ -323,15 +333,22 @@ table.row td {
 }
 
 #mapRowMark {
-    top: 0;
+    position: absolute;
+    top: 4vw;
     left: 0;
     width: 4vw;
     height: 96vw;
     font-size: 3vw;
 }
 
-#mapRowMark td {
+#mapRowMark .rowtd{
+    position: absolute;
+}
+
+#mapRowMark .rowtd,
+#mapRowMark .rowtd .rowtext{
     height: 7.15vw;
+    line-height: 7.15vw;
     padding: 0;
     border-left-width: 0px;
     border-right-width: 0px;
@@ -339,9 +356,10 @@ table.row td {
     border-bottom-width: 0.117397vw;
 }
 
-#mapRowMark td:hover .rowBlock {
+#mapRowMark .rowtd:hover .rowBlock {
     position: absolute;
     left: 4vw;
+    top: 0;
     height: 7.384615vw;
     width: 96vw;
     z-index: 100;

editor-mobile.html

@@ -201,8 +201,8 @@
         </div>
     </div>
     <div id="mid">
-        <table class="col" id='mapColMark'></table>
-        <table class="row" id='mapRowMark'></table>
+        <div class="col" id='mapColMark'></div>
+        <div class="row" id='mapRowMark'></div>
         <div class="map" id="mapEdit">
             <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
             <canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
@@ -403,17 +403,31 @@
     (function () {
         var colNum = ' ';
         for (var i = 0; i < 13; i++) {
-            var tpl = '<td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="colBlock" style="left:' + (i * 96/13 ) + 'vmin;"></div></td>';
+            var tpl = '<td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="colBlock" style="left:' + (i * 96/13 ) + 'vw;"></div></td>';
             colNum += tpl;
         }
         arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
-        mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
+        //mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
         var rowNum = ' ';
         for (var i = 0; i < 13; i++) {
-            var tpl = '<tr><td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="rowBlock" style="top:' + (i * 96/13 ) + 'vmin;"></div></td></tr>';
+            var tpl = '<tr><td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="rowBlock" style="top:' + (i * 96/13 ) + 'vw;"></div></td></tr>';
             rowNum += tpl;
         }
         arrRowMark.innerHTML = rowNum;
+        //mapRowMark.innerHTML = rowNum;
+    })();
+    (function () {
+        var colNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<div class="coltd" style="left:' + (i * 96/13 ) + 'vw;"><div class="coltext">' + (' '+i).slice(-2).replace(' ','&nbsp;') + '</div><div class="colBlock"></div></div>';
+            colNum += tpl;
+        }
+        mapColMark.innerHTML = '<div class="coltr">' + colNum + '</div>';
+        var rowNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<div class="rowtr"><div class="rowtd"  style="top:' + (i * 96/13 ) + 'vw;"><div class="rowtext">' + (' '+i).slice(-2).replace(' ','&nbsp;') + '</div><div class="rowBlock"></div></div></div>';
+            rowNum += tpl;
+        }
         mapRowMark.innerHTML = rowNum;
     })();
 </script>