Maps are getting loaded correctly. Next comes the units

MartinLesterSynamedia · Oct 18, 2016 · d20a67c · d20a67c
1 parent e91cb47
commit d20a67c
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 104 deletions.
diff --git a/assets/twinkling stars.gif b/assets/twinkling stars.gif
diff --git a/bin2xml.py b/bin2xml.py
@@ -301,31 +301,6 @@ def generateXML(dest):
     return filename
 
 
-def generateJSON(dest):
-    print (("Need to do it"))
-
-
-def common(output):
-    parser = argparse.ArgumentParser()
-    parser.add_argument("-s", "--source", type=str, required=True, help="uniwar map*.bin file. Wild cards permitted")
-    parser.add_argument("-d", "--dest", type=str, default=".", help="Optional output folder")
-
-    args = parser.parse_args()
-    #print (args)
-
-    maps = glob.glob(args.source)
-
-    if maps == 0:
-        print(("No maps found: " + args.source))
-        exit(0)
-
-    for m in maps:
-        if output == "json":
-            return bin2json(m, args.dest)
-        else:
-            return bin2xml(m, args.dest)
-
-
 def openFile(m):
     f = open(m, 'rb')
     file_data = f.read()
@@ -344,14 +319,24 @@ def bin2xml(file, dest="."):
     return generateXML(dest)
 
 
-def bin2json(file, dest="."):
-    openFile(file)
-    return generateJSON(dest)
-
 #################################################################################################
 #################################################################################################
 #################################################################################################
 #################################################################################################
 
 if __name__ == "__main__":
-    common("xml")
+    parser = argparse.ArgumentParser()
+    parser.add_argument("-s", "--source", type=str, required=True, help="uniwar map*.bin file. Wild cards permitted")
+    parser.add_argument("-d", "--dest", type=str, default=".", help="Optional output folder")
+
+    args = parser.parse_args()
+    #print (args)
+
+    maps = glob.glob(args.source)
+
+    if maps == 0:
+        print(("No maps found: " + args.source))
+        exit(0)
+
+    for m in maps:
+        bin2xml(m, args.dest)
diff --git a/fetch_map.py b/fetch_map.py
@@ -13,10 +13,19 @@ def info():
     text += "Use http://url:port/mapid/[map db id] to load a map by an id<br>"
 
 
+@route('/test')
+def test():
+    return static_file("map.html", root='./')
+
+
 @route('/map/<name>')
 def map(name):
-    name = name + ".xml"
-    return static_file(name, root='xml')
+    params = {
+        'js_url': url('/js'),
+        'css_url': url('/css'),
+        'name': name,
+    }
+    return template("map.tpl", params)
 
 
 @route('/mapid/<id:int>')
@@ -28,9 +37,10 @@ def mapid(id):
     return static_file(xmlfile, root='./')
 
 
-@route('/draw')
-def draw():
-    return static_file("map.html", root='./')
+@route('/xml/<name>')
+def xml(name):
+    name = name + ".xml"
+    return static_file(name, root='xml')
 
 
 @route('/css')

diff --git a/map.css b/map.css
@@ -1,9 +1,14 @@
+
 #map_area {
     font-size: 0;
+    background-image:  url("./assets/twinkling stars.gif");
+    background-repeat: repeat;
+    white-space: nowrap;
+    display:     table;
+    margin: auto;
 }
 
 div.map_row {
-    background:     #222244;
 }
 
 div.map_row_odd {
@@ -13,19 +18,11 @@ div.map_row_odd {
 }
 
 div.map_cell {
-    background:      #222244;
-    padding:         40px 40px;
-    border:          none;
-    display:         inline-block;
+    padding:           40px 40px;
+    border:            none;
+    display:           inline-block;
 }
 
 h1 {
-    color:    red;
-}
-
-polygon {
-    fill:            lime;
-    stroke:          black;
-    stroke-width:    2;
-    fill-rule:       evenodd;
+    text-align:    center;
 }
diff --git a/map.html b/map.html
diff --git a/map.js b/map.js
@@ -1,3 +1,5 @@
+var tile_size = 80;
+
 var terrain_lookup = {
     " " : "",
     "_" : "terrain01.png",
@@ -11,8 +13,14 @@ var terrain_lookup = {
     "+" : "terrain09.png",
 };
 
+function debug( message ) {
+    $("#debug").append( message + "<br/>" );
+}
+
 function createMap( map_name ) {
-    var map_url = "./map/" + map_name;
+    var map_url = "../xml/" + map_name;
+
+    $("#title").html( "Loading " + map_name );
 
     $.ajax({
         url : map_url,
@@ -25,54 +33,125 @@ function createMap( map_name ) {
             var $xml = $( xmlDoc );
 
             var title = $xml.find( "title" ).text();
+            $("#title").html( title );
+
             var width = $xml.find( "width" ).text();
             var height = $xml.find( "height" ).text();
-            var tile_set = $xml.find( "tile_set" ).text().toLowerCase();
-
-            // Create a blank map of the correct size
-            var html = "";
-            for (y = 0; y < height; y++) {
-                html = html + '<div class="map_row">';
-                for (x = 0; x < width; x++) {
-                    html = html + '<div class="map_cell" id="cell_' + x + '_' + y + '"></div>';
-                }
-                html = html + '</div>';
-            }
-
-            $("#map_area").append(html);
-            $(".map_row:odd").addClass("map_row_odd");
-
-            // Put the correct images into each of the backgrounds
-            var $map_data = $xml.find( "map_data" );
-            for (row = 0; row < height; row++) {
-                var row_id = "row";
-                if (row<10) {
-                    row_id = row_id + "0";
-                }
-                row_id = row_id + row;
-                var row_data = $xml.find( row_id ).text();
-                var x = 0;
-
-                row_data.split(", ").forEach(function(tile) {
-                    // Strip the single quotes
-                    tile = tile.substring(1, tile.length-1);
-                    var terrain = terrain_lookup[tile];
-                    if (terrain != "") {
-                        var cell = "#cell_" + row + "_" + x;
-                        $(cell).css("background", "url(/assets/tiles80/" + tile_set + "/" + terrain)
-                    }
-                    x = x + 1;
-                });
 
+            drawEmptyMap( width, height );
+            loadTerrain( height, $xml );
 
-            }
+            removeBlankRows();
+            removeBlankCols();
         },
 
         error: function (jqXHR, textStatus, errorThrown)
         {
-            $("#debug").append("failed: " + errorThrown);
+            debug( "failed: " + errorThrown );
         }
     });
 }
 
-//    background:      url("assets/tiles80/terrain0001.png");
+function drawEmptyMap( width, height ) {
+    // Create a blank map of the correct size
+    var html = "";
+    for (y = 0; y < height; y++) {
+        html = html + '<div class="map_row" id="row_' + y + '">';
+        for (x = 0; x < width; x++) {
+            html = html + '<div class="map_cell" id="cell_' + x + '_' + y + '">';
+            html = html + '</div>';
+        }
+        html = html + '</div>';
+    }
+
+    $("#map_area").append(html);
+    $(".map_row:odd").addClass("map_row_odd");
+}
+
+function loadTerrain( rows, $xml ) {
+    // Put the correct images into each of the backgrounds
+    var tile_set = $xml.find( "tile_set" ).text().toLowerCase();
+    var $map_data = $xml.find( "map_data" );
+
+    for (row = 0; row < rows; row++) {
+        var row_id = "row";
+        if (row<10) {
+            row_id = row_id + "0";
+        }
+        row_id = row_id + row;
+        var row_data = $xml.find( row_id ).text();
+        var x = 0;
+
+        row_data.split(", ").forEach(function(tile) {
+            // Strip the single quotes
+            tile = tile.substring(1, tile.length-1);
+            if ($.trim(tile) != "") {
+                var terrain = terrain_lookup[tile];
+                var cellid = "#cell_" + x + "_" + row;
+                var $cell = $( cellid );
+                $cell.css("background-image", "url(/assets/tiles80/" + tile_set + "/" + terrain);
+                $cell.prop('title', cellid + '\ntile = ' + tile + '\nterrain = ' + terrain );
+            }
+            x = x + 1;
+        });
+    }
+}
+
+/* Remove empty rows and columns starting from the edges.
+   Means we don't remove empty rows/columns from the middle as that would change the map */
+function removeBlankRows() {
+    // Starting at the top find all empty rows till we get to a row with a tile and remove them
+    $(".map_row").each( checkCells );
+
+    // Starting at the bottom find all empty rows till we get to a row with a tile and remove them
+    $($(".map_row").get().reverse()).each( checkCells );
+}
+
+function checkCells( i, element ) {
+    $this = $(element);
+    var done = false;
+    $this.children().each( function() {
+        if (hasTerrain( this )) {
+            done = true;
+            return false;
+        }
+    });
+    if (done) {
+        return false;
+    }
+    $this.remove();
+}
+
+function hasTerrain( element ) {
+     return $(element).css("background-image") != "none";
+}
+
+function removeBlankCols() {
+    // Starting at the left find all empty rows till we get to a row with a tile and remove them
+    var done = false;
+    while (!done) {
+        $(".map_cell:first-child").each( function() {
+            if ( hasTerrain( this ) ) {
+                done = true;
+                return false;
+            }
+        });
+        if (!done) {
+            $(".map_cell:first-child").remove();
+        }
+    }
+
+    // Starting at the right find all empty rows till we get to a row with a tile and remove them
+    done = false;
+    while (!done) {
+        $(".map_cell:last-child").each( function() {
+            if ( hasTerrain( this ) ) {
+                done = true;
+                return false;
+            }
+        });
+        if (!done) {
+            $(".map_cell:last-child").remove();
+        }
+    }
+}
diff --git a/map.tpl b/map.tpl
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" type="text/css" href="{{css_url}}">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="{{js_url}}" type="text/javascript"></script>
+</head>
+
+<body onload="createMap('{{name}}')">
+    <h1 id="title">Loading...</h1>
+    <div id="container">
+        <div id="map_area"></div>
+    </div>
+    <div id="debug"></div>
+</body>
+
+</html>