Civ3 Show-And-Tell

Puppeteer · Apr 25, 2013

When I spill the contents of my brain it helps me organize it, but clearly I mislead people in the process.

Surprisingly I have had one Linux box or another running for nearly 20 years now; in 1994 I wanted to learn Unix to qualify for a job, and after looking at expensive options and a cheap training book with a rudimentary Unix emulator (just a simple preprogrammed response to certain inputs) I stumbled across a free Unix clone that worked amazingly well. I had been toying with OS/2 2.1 and was jazzed about the 32-bit command line, and here was a free one downloaded as a stack of Slackware floppy disk images over my 28.8kps modem. (Or maybe it was 9600bps or even 1200bps back then; I don't recall.) I got the job, but the need for Unix was kind of a sham because the only thing I ever did with HP UX was to tell the person on the phone what was happening on the screen. Well, we did do some scripted updates on an Irix video training system later. Mainly my career has been Windows desktops and servers, but I always have a Linux box around for my ad-hoc and tinkering needs.

Python, however, I have not used for 20 years. In fact I'm not sure I've actually written in Python before, although I know I've poked at it here and there when looking at Zope, Plone and Civ 4. More recently I have interest in it for Gstreamer and Twisted, but I got sidetracked onto this project. I'm really not a developer; I did some programming back in college and occasionally dabbled in this or that and have used various scripting languages for work. But I know some of the basics of programming and can read Google and Stack Overflow, and I seem to have clicked with Python so far.

I see two uses for my game save parser and HTML viewer:

A website that will let you quickly and easily view the map and info for a save game somebody has posted to the internet, for example here on the forum in a help request ("help I'm losing this game what's wrong?") or succession game.
A turn-by-turn assistant/enhancer that runs on the game PC and displays info in a same-machine web browser or a same-LAN web browser such as a tablet or smart phone.

Since I have both of those visions I tend to dump ideas for either of them in this thread.

The project I would post back to the top of this thread would be the Civ3 Show-And-Tell and would work somewhat like this:

[Web Browser] <--> [My Web Server or someone else who wants to use my program]
|
-------> [ Python App Server ] <----> [Anywhere a .SAV is web-reachable]
|
--------> [ Possible secondary data source for annotation ]

So, in one case say I've got the project working and up, and you're reading an SG that sounds interesting, but nobody has posted a screenshot in weeks. You could copy the URL of the save file posted to the SG thread, paste into the map browser, and it would then ask (via AJAX) the Python app server which would look at the URL, decide if it's already seen and cached this URL before, fetch and parse the save game file if needed and return the desired non-spoiling game and map data to the browser which would turn it into a map and summary of the game. (Difficulty level, map size, barb settings, random seed, etc.) This would not require any login or ID of any sort.

In another case, somebody is posting a story thread with a save and includes the link to
open the save using my program ( http://example.tld/getmap?url=http://forums.civfanatics.com/attachments?id=12345 ) so that viewers can look at his situation with a simple click.

It is my vision--although I don't yet know if I can pull it off--that the story teller or SG participant could mark the generated map with proposed city sites or other callouts and annotations which would require additional data storage. This is the part where I was babbling about IDs and logins. My original thought was to provide a file they could upload, but that's just not going to work as I wouldn't expect to depend on an average user getting the links, urls and data files all lined up online to work like I want. To pull this off I would have to store the annotation on the app server, and I don't like the idea of unauthenticated creation of data on the app server, but I don't want to maintain a userbase, so that's why I thought of the API logins like OpenID, Twitter and Facebook. Using one of those I wouldn't have to maintain a user database, but users could create annotations in their own scope without fear of conflicting with another user, and if there were abuse (such as a script building garbage data on my server) I could lock out by ID.

The enhancer/helper/analyzer program wouldn't necessarily need internet connectivity (or a login). However one of my ideas for the helper would be the ability to launch enhanced content. For example, you mod a new Great Wonder, make a video to play when the player build the wonder and then post it to YouTube (or wherever). I would like the helper/enhancer program to be able to launch enhanced content upon noticing that a wonder was just built by the player, a new tech age was just entered, and any other game events (as witnessed via the latest save file) that might be useful for mod scenarios. Naturally if you're putting enhanced game content on YouTube you would need the internet while playing. But there would be no logins or anything for this.

I know it's confusing for me to mix talk about the two (or more) visions for completed products, but where I'm working now (reading save files) is applicable to bringing each vision to fruition.

Puppeteer · Apr 25, 2013

Today I managed to draw SVG isometric tiles on the map grid, but there is a lot of work to do. The first picture looks good because I sized the window carefully. I'm using a table structure (I've alternated between HTML <table> elements and CSS-styled <div> elements with "display: table;" and so forth), and it's auto-sizing its width to the window size, so as you can see if the window is too thin or too wide the tiles overlap or separate.

Also while I colored them in script I don't yet have the ability to change them individually. I want to figure out how I'm going to lay out these tiles before I code how to alter them individually because it may affect how it's done.

I was hoping to make an interactive map where you could click buttons to make the map show blue water / green land or color the tiles by terrain (white tundra, etc.) to give an idea of the interactivity, but again I need to figure out some structural stuff, this time on the output side. I'm wondering if there are alternatives to using a tabular layout...could I make the whole map one big SVG?

Edit: I just typed grid of svg tiles into search and the first result is interesting. It's been in the back of my mind that I'll need to have some sort of zoomable map window for the final PC browser and figure something out for mobile browsers where probably the map is the whole screen and the controls pop from the edges or something. And here is a project that draws and erases tiles on demand as they need to be viewed.

Puppeteer · May 3, 2013

I burned out a bit and had some carpal tunnel fun, but I am back to hacking on this (with a brace on my right hand).

However, I recently learned that Microsoft .NET framework includes a command-line C# compiler, so I don't need Visual Studio or any fancy setup to try my hand at C#. Although I found Python quite intuitive I think I personally benefit more from learning C#, especially if I tap into ASP.NET for caching and serving up the map data. Also, I do some neat things (non-Civ-related) in Powershell, and a lot of the things I use are .NET objects that I can also use from C#.

I think all the libraries I'm using are duplicated in Mono, so if I have a reason to run the parser on a non-Windows system I expect it to run on Mono.

Anyway, I'm close to getting the C# version to the point I had the Python version. Actually it just parsed my test file from the beginning of the file to the last tile, so in one way it's ahead, but it's not outputting HTML or JSON yet.

As for the interface side, I think I'm going to use the "isometbrick" layout for testing and decoding the meaning of the tile data but toy around with several JS frameworks that may help with displaying an SVG-tiled map to move towards a final product.

I haven't published any C# code yet, but I am starting to flesh out a document for the save file format. This is what I have so far (in Markdown format but easily readable in text):

Spoiler :

This is based on my test save file and decoding results. Compressed save games are compressed with PKWare DCL (Data Compression Library) "implode" and can be decompressed with a compatible "explode" algorithm. There are various Windows and Linux binaries out there. Note this is not the same as PKWare's ZIP format implode/explode and familiar zip/unzip programs cannot decompress the save. The save file appears to be a binary dump of data sectioned with 4-char header names often followed by an int length in bytes or subrecords/subsections. I suspect there is padding in some places, or perhaps they are stray variables tucked between other objects. I am starting with my hierarchy guess file and filling in offsets as I code the program and decode the file.

Code:

- CIV3 No length field, appears to be length 26 (0x1a).
- BIC  int Length = 0x20c
    - 0x00 int ? = 0x289
    - The rest is all zeroes
- BICQ No length field
    - VER# int subrecords = 1. Each record has no name but starts with int length (= 0x2d0)
        - Suspect these are game rules copied from the BIQ from which the game was created
    - GAME int subrecords = 1. Each subrecord starts with int length (= 0x1d9d) . I suspect this is the same as the GAME section in the BIQ file and thus a subsection of BIC .
- GAME - Does not seem to have length or subrecords field. Guessing 2nd appearance of GAME is top-tier parent -- OR -- maybe it is settings
    - DATE
    - PLGI
    - DATE - this instance had a length that fell just short of CNSL
- suspected data padding here length 8 bytes, or perhaps a simple data member of parent
- CNSL - Based on some I/O errors referring to this, I now wonder if this
   is a parent container that includes buildings, meaning it would be
   the parent of the map and much else, too
    - WRLD int Length = 2 (initially thought 2 subrecords, but there are two bytes between that and next section)
        - 0x00 short int ? = 0x11
    - WRLD int length (= 164 / 0xa4)
        - 0x00 int ?
        - 0x04 int mapWidth (?) (= 60 / 0x3c)
        - 0x08 int ?
        - 0x0c int ?
        - 0x10 int ?
        - 0x14 int ?
        - 0x18 int mapHeight (?) (= 60 / 0x3c)
        - 0x1c int ? = maxint
        - 0x20 int ?
        - 0x24 int ?
        - 0x28 int ?
        - 0x2c int ?
        - 0x30 - 0x9b all 0xff's
        - 0x9c int ?
        - 0xa0 int ?
    - WRLD int length (= 52 / 0x34)
        - 0x00 int ? = 1
        - 0x04 int ? = 1
        - 0x08 int ? = 1
        - 0x0c int ? = 1
        - 0x10 int ? = 1
        - 0x14 int ? = 1
        - 0x18 int ? = 1
        - 0x1c int ? = 1
        - 0x20 int ? = 1
        - 0x24 int ? = 1
        - 0x28 int ? = 1
        - 0x2c int ? = 1
        - 0x30 int ? = 0
    - TILE - In C3C there are four different TILE sections for each game tile of lengths 36, 12, 4 and 128 in that order. This is a 60x60 game, and if I understand the isometric layout that's 30x60 because each column is 60 tiles high, but going directly east/west is 2 grid moves, so there exists (from upper-left) a 0,0 and 0,2 and 1,1 and 1,3 but no 0,1 or 0,3 or 1,0 or 1,2. So 30x60 is 1800 tiles resulting in 7200 TILE sections with repeating lengths of 36, 12, 4 and 128 bytes (not including the 4-byte name or 4-byte length integer). Order of game tiles starts at top left (NW) and is in left-right order (W-E) and then top-bottom (N-S). So 0,0 ; 2,0 ; 4,0 ; 6;0 etc..
        - TILE int Length = 36
            - 0x0c This byte seems to have nothing to do with terrain. It may be the LSB in a 4-byte integer for purposes unknown
            - 0x0d 1-byte seems to be somewhat correlated to terrain.
            - 0x0e-0x13 seem to always be zero
            - 0x14-0x19 seem to be always 0xff
            - 0x1a Continent ID. It's possible this is a 2-byte short int. Fresh water tiles are part of thier landmates' continent.
            - 0x1b seems to be zeroes
            - 0x1c All 0x06 on my test map. looks somewhat similar to 0x0d
            - 0x1d varies a lot
            - The last 6 bytes seem to always be ff ff 00 00 00 00
        - TILE int Length = 12
            - 0x00 - 1-byte worker improvements bitmap. The question marks are from other sources and not verified by me so far.
                - 0000 0001 = Road
                - 0000 0010 = Rail (?)
                - 0000 0100 = Mine
                - 0000 1000 = Irrigation
                - 0001 0000 = Fortress (?)
                - 0010 0000 = Goody Hut (?)
                - 0100 0000 = Pollution (?)
                - 1000 0000 = Barbarian (?)
            - 0x01-0x04 - all zeroes in my map
            - 0x05 - 1-byte Terrain. The lower nybble is base terrain, and the upper nybble is actual terrain. The mismatched nybbles are due to overlays like forests, cities, jungles, etc.. It seems that in this coding mountains and hills are overlays, too.
            - 0x06-0x09 - all zeroes
            - 0x0a - some nybble-nybble repetition like 0x05 but not as much; think it's a bitmask possibly including the next byte
            - 0x0b - mostly 0x00's with a few 0x10's

        - TILE int Length = 4
            - 0x00
        - TILE int Length = 128. This may conform to [TILE "Type B" described here]([url]http://forums.civfanatics.com/archive/index.php/t-48270.html[/url])
            - 0x00 4-byte bitmap, mask 0x02 indicates player-visible tile
            - 0x04 4-byte bitmap, mask 0x02 indicates player-visible-"now" tile, in my experience applies only to tiles units can see and not city/culture-visible tiles

        - CONT - continents, I presume, several occur
- suspected padding or simple data here --
- LEAD - LEAD, CULT and 2x ESPN cycle many times
    - CULT
    - ESPN
    - ESPN
    - UNIT - many UNIT, IDLS cycling
        - IDLS
    - CITY - repetition of this term makes me wonder if there could be e.g. a CITY/CITY hierarchy with different scopes having different meanings
    - CITY
    - CITY - City name is under this instance
        - POPD
            - CTZN - repeated for each citizen? Each one has description e.g. "Happy Laborer (England)"
            - CTZN
            - CTZN
        - BINF - Bin full?
        - BITM
        - DATE - Date city founded?
    - ? CITY
    - ? CTPG - seem to be two of these per city name
    - ? CITY
    - ? CITY Lots of repeated CITY's without the other sections
    - CLNY - presumed colony info, only one CLNY in my sample file
    - PALV - ? repeated
    - HIST - ? not repeated
    - TUTR - ? Suggests tutorial info; not repeated
    - FAXXX - Not sure if this is a FAXX section or random data that looks like a string
    - RPLS - not repeated, clearly a parent item
        - RPLT - repeated
        - RPLE - repeated, occasionally city names associated in runs of RPLE's; sometimes RPLT's resume after city name, sometimes not ; saw one great wonder name among the RPLE's to my surprise
    - RPLT
    - ? PEER - not repeated ; multiplayer-related?

3.5-year-later EDIT: I recently rediscovered the brief work I did with C# hiding in an SVN repo, converted it to Git and posted in on GitHub: https://github.com/myjimnelson/c3satcs

Quintillus · May 3, 2013

Blue Monkey said:
I'm one. Not because of but because of family ties

Heh; I have a friend who doesn't have those for the same reason.

Puppeteer said:
So, in one case say I've got the project working and up, and you're reading an SG that sounds interesting, but nobody has posted a screenshot in weeks. You could copy the URL of the save file posted to the SG thread, paste into the map browser, and it would then ask (via AJAX) the Python app server which would look at the URL, decide if it's already seen and cached this URL before, fetch and parse the save game file if needed and return the desired non-spoiling game and map data to the browser which would turn it into a map and summary of the game. (Difficulty level, map size, barb settings, random seed, etc.) This would not require any login or ID of any sort.

That'd also be really handy for following PBEM games. Some of them sound pretty interesting, but they often lack the big picture necessary to follow along if you weren't from the beginning.

I'm still following the thread, though I hadn't seen a couple updates from last week until today.

Quintillus · Jul 23, 2013

Any updates on this? You did warn us that you'd tease us and never follow through in the first post, but nevertheless, figured it couldn't hurt to ask.

Puppeteer · May 11, 2014

Quintillus said:
Any updates on this? You did warn us that you'd tease us and never follow through in the first post, but nevertheless, figured it couldn't hurt to ask.

Heh, well I did produce a bunch of code and some pretty pictures, but maybe that's an even worse kind of tease.

I got really busy at work then got a promotion around the time of my last update. I guess I've been busy, but lately I have started thinking about Civ3.

I remember I had some concerns about licensing and other general unhappiness depending on where I obtained save-game-file-read info and what I incorporated. I get the feeling those who know how to read the save game info are proprietary about it, so I'd almost rather reverse-engineer it myself, but I don't seem to have free time these days.

I'm not sure I have any motivation to try to work on reading the save-game info just now, but I may have some interest in trying to play with the map display process again. I've recently been poking at some various charting helper libraries (JavaScript, .NET) and wonder if they might have any use for my HTML Civ3 maps.

Puppeteer · May 12, 2014

I think I have the SVG map display mostly figured out. Most of the stuff I searched for was overly complicated for what I need. I wound up just placing a polygon for each tile on an SVG viewport, and I can select and style them. I even can put text on them like I did with the "isometbrick" table.

In fact, I just copied the isometbrick Python code (because it was easy to find and modify--I guess my C# code is around here somewhere) and mostly only changed the output string. The logic and looping was the same, but instead of spanning columns in a table I did SVG transforms.

There are tiny gaps between the tiles. I'm sure I can figure out something for that. I can make black gridlines that cover the gaps, but some people may not want gridlines.

I also need to figure out if I can make it resizable. It conforms to the browser size, but if you try to zoom it resizes the SVG to the window.

Anyway, here it is: SVG Civ3 Map

A screenshot:

Compare to in-game minimap:

A reminder what this is: My program read the map info from a decompressed save game file and created the linked HTML/SVG map. I updated the GitHub code if someone knows Python and can't wait on my lazy butt.

A couple more screenshots in the spoiler tag showing that I can put text on the tiles and what it looks like with gridlines:

Spoiler :

Notes to self:

Spoiler :

Edit: I made a change to the style sheet which eliminates the gaps in Chrome but not IE 11. I have yet to try on other browsers, but the linked page is looking pretty sharp now. I added "shape-rendering: crispEdges;" to polygon elements to fix the gaps.

Here's the screenshot with fixed gaps in Chrome:

Puppeteer · May 12, 2014

Ok, I'm really happy about the SVG layout for the map. The last screenshot is the best output the program has produced, but it's only the proof of concept for the map scaffolding. It's relatively simple conceptually, I can stack elements, I can easily add elements without complex calculations, I can determine x,y grid location from the tile reference, and I can make the html page responsive to user interaction with the map tiles.

My next steps are to build a layered-tile map and assign CSS classes based on the tile-layer, like continent ID, base terrain, terrain overlay, worker improvements, and in the future units and cities. I don't recall offhand if resource locations are in the TILE section--and therefore available to me now--or if they are in a different part of the save file like cities and units. And then use the CSS classes to color the map; the way I'm doing it now is a hack.

A nice-to-have-but-not-important thing would be to eliminate the jagged edges of the map. If I assume X-wraparound but not Y (like the default game) I can do the top and bottom easily enough, but the wraparound tiles will take a little magic.

I can also see that this is nearing the point where somebody might even want to use it, so I'd like to see if I can get it to read arbitrary Conquests save files, compressed or not. Right now the program is tailored to one uncompressed save file which is why all my output maps are the same so far.

Here are some layers I'm thinking of, upside-down because the last one is drawn last and thus ends up "on top" of the other elements (and of course with CSS and/or JavaScript can hide or show layers!):

Continent ID (Not sure if this one will be useful in the end product, but what the heck, let's put it in now)
Base Terrain
Overlay Terrain
Resources (no strategic resources until I can ensure non-spoiler info)
Roads / Rails (no, I'm nowhere near implementing this yet...er, future)
Worker improvements
Cities (future)
Units (future)
Civ-territory-shading (future)
Dot map (pie in the sky)

For non-tile-shaped items I'm figuring on using either letters, unicode glyphs or one of the glyph collections, but since I'm using SVG I really have a lot of options.

Another nice-to have would be to de-square the map a bit. I have some vague ideas, but that's probably a future thing. One vague idea is to have a more organically-shaped isotile and try to arrange it so certain base tile types overlap others, like ocean overlaps sea, sea and land overlap coast and such.

Edit: Sweet! :yeah:

I think I just figured out how to fix the jaggies, and it's pretty easy after all. I'm really liking SVG.

Puppeteer · May 13, 2014

Well, I spent much of my time tonight on the edges. I'm basically cloning (use xlink:href) the end tile to the other side and relying on the SVG viewport to crop the edges. Again it looks good in non-IE browsers, but IE11 doesn't crop at the viewport, so it's still jaggy but with repeated tiles at each end.

I'm surprised at how much better it looks without the jagged edges. Really that's all that visually changed.

Structurally I have grouped rows now which makes some of the transforms more consistent.

Puppeteer · May 13, 2014

I've been sitting here, staring at my map and trying to figure out which direction I want to go next. I know I want to assign CSS classes to the base tiles and overlay tiles, but I kept waffling between whether to continue to generate SVG from Python or to do it in-browser and generate from JSON, my intermediate-format.

Then I had an epihany: SVG is the intermediate format. Once I make the SVG it is the only data store I need. It will be as easy as JSON to cache, compress and deliver. It can even be used in other applications or directly in a web browser.

That makes the way forward a little easier.

Puppeteer · May 14, 2014

It now assigns various CSS classes to base terrain tiles, overlay terrain and my other layers (currently the background rectangle that gets rid of the top and bottom jaggies, the fog of war, and a hex byte value I can use to figure out which value means what on the map).

The base terrain looks just like before, but now I have overlay terrain! For now it's just text or Unicode strings, but that can easily be changed.

What's even better is it's now interactive. Boo-yah! Click the link for yourself and have hours of fun making map elements appear and disappear (keep in mind fog of war and background rectangle are both big and black and can partially or fully obscure one another).

The more I do, the more I realize IE--even IE11--just doesn't behave the same as other browsers. This works in IE (11, anyway), but it doesn't overlay the tiles the same way Chrome does, so the overlay terrain isn't as effective. But I'm still working on the basics, not trying to make all the browsers happy.

Link to the interactive map

Puppeteer · May 14, 2014

Oh, are you tired of looking at the same stupid map? Let's see if it works on another map....

Like this huge world map from a succession game save file?

Yep. Although I had to manually decompress it and re-hard-code the first TILE offset and width and height. But that is fixable. Also, you can't zoom yet. Getting there, getting there....

Puppeteer · May 18, 2014

Ah, what next? I've been itching to make it work on arbitrary C3C save files, but I haven't quite figured that out yet.

I also want to be able to zoom and pan like it's Google Maps for Conquests. That's hard right? Let's see what the Internet says:

https://code.google.com/p/svgpan/

The SVGPan library features:

Panning (pan à la Google maps) (click on the white background and pan)
Zooming (using the mouse wheel)
Element dragging (click on a drawing element and drag it somewhere else)
Combinations of the above like zooming while dragging

ariutta/svg-pan-zoom · GitHub

Simple pan/zoom solution for SVGs in HTML. It adds events listeners for mouse scroll, double-click and drag, plus it optionally offers:

JavaScript API for control of pan and zoom behavior
onPan and onZoom event handlers
On-screen zoom controls
It works cross-browser and supports both inline SVGs and SVGs in HTML 'object' or 'embed' elements.

timmywil/jquery.panzoom · GitHub

Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER. And although IE<=8 is not supported, this plugin is future-proof.

Mobile support

Panzoom includes support for touch gestures and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You'll be amazed at how well this performs on your mobile device.

iOS and Android are supported.

The first one is tempting because it actually compares itself to Google Maps. The last one is the most-recently updated and apparently most popular, and it explicitly says it supports pinch zoom gestures for mobile which I desire. The middle one is also very recently updated and doesn't require jQuery, but I've been using jQuery already, although with my latest CSS stylings I'm not sure I really need jQuery anymore.

It looks like the most difficult part is picking one and running with it. We'll see.

One thing I haven't seen explicitly mentioned yet is whether they can wrap-pan the SVG...that would be really neat, too. I mean like in-game where you can infinitely scroll East or West and it just keeps going and going and going.

Puppeteer · May 18, 2014

Notes to self while messing with timmywill's jquery panzoom aka "ohhhhhhhh!":

Panzoom() is applied to the .panzoom class element; the div is the parent and apparently needs to be .panzoom-parent

The examples are using functions to apply panzoom() to various elements. I was copying and pasting and winding up with several panzoom() calls when I thought I was just changing options.

The function() callas are selecting elements and then applying panzoom() to them

Puppeteer · May 19, 2014

Well, I'm grumpy. I've been wrestling with this panning/zooming thing for three hours, and I'm not where I want to be, but I guess it's still pretty cool.

Techy details in the spoiler tag, but I wasn't able to keep the show/hide interactive functionality and make it pan & zoom. :gripe:

Spoiler :

Also, it seems to be zooming it like a bitmap instead of an SVG, so when you zoom in it's jaggy. :gripe:

Plus IE is misbehaving even more with pan & zoom. :gripe:

But hey! Check this out: pannable, zoomable C3C web maps! Try the mouse wheel or pinch-to-zoom.

The small map I've been using all along

Big world map (may be slow to manipulate)

No screenshots because it's hard to screenshot panning and zooming.

I think I can make the big maps more responsive by using xlinks to a defined shape instead of of a polygon for each tile, but I haven't tested that yet.

Puppeteer · May 19, 2014

Puppeteer said:
Also, it seems to be zooming it like a bitmap instead of an SVG, so when you zoom in it's jaggy.

Hmm...when it zooms it's jaggy, but sometimes it redraws and is crystal clear with no jaggies. I haven't figured out yet when/why it redraws.

I also have the small map so that you can't scroll the edge of the map into the viewport, but for some reason the big map is miscalculating something and not letting you scroll to the top or the bottom when zoomed. It's a pretty narrow range.

Edit: Ok, I fixed the large map zoom problem; I got rid of the width:100% and height:100% styles for the parent div. And I can get the SVG to redraw when I inspect element or hit F12 to toggle the dev console. Surely there is a way I can trigger it otherwise, but at least I'm getting closer to where I want to be. I updated the files for the above links.

Edit 2: I can make it redraw on mobile by changing the orientation (rotate the phone). I think I'm close to having pan/zoom where I want it, except maybe for not being able to wrap East and West. But for the moment I seem to have to pick between pan & zoom and interacting with the map (turning stuff on/off like before, and I was going to be able to pull more info by hovering over tiles). Hopefully I can bring it all together somehow.

:woohoo:

I got it all working together, pretty quickly. Now if I can only remember how I did it.... Oh I removed the style sheet, so something in it was messing me up. The files in the link aren't updated yet.

Edit: Ok, apparently the SVG positioning or something was messing up pan & zoom.

Puppeteer · May 19, 2014

I updated the files at these links. I am much happier with the results! And you can both pan & zoom and show/hide elements, and I have DOM access to the SVG data again which will be very handy for upcoming features!

Puppeteer said:
But hey! Check this out: pannable, zoomable C3C web maps! Try the mouse wheel or pinch-to-zoom.

The small map I've been using all along

Big world map (may be slow to manipulate)

No screenshots because it's hard to screenshot panning and zooming.

My biggest issue for now is why it usually needs a kick to redraw itself at the new resolution.

Smaller issues:

It scrolls the North & South edges into the frame at some zoom levels
It won't wrap left/right
It's slow on big maps (need xlinks instead of polygons)
IE is becoming even less cooperative as I add features, but I think I can fix the short-window problem

The current state of the mountains, hills and other overlay terrain is temporary. I just need to install Inkscape and draw myself some SVG trees, hills and such.

Oh, and sooner or later I want to make this so it can be used on any Conquests SAV without hard-coding values into it.

wuhjah · May 19, 2014

This is going to be awesome. :thumbsup:

Puppeteer · May 19, 2014

wuhjah said:
This is going to be awesome.

Thanks! I figured there are still some lurkers for this one. It's nice to know there is interest.

Today I added some more buzzwords--Bootstrap and responsive--to the maps and also finally made IE happy by handholding it all the way down the trail to the map size.

IE handholding:

Spoiler :

The controls-on-the-left is a bit awkward-looking for a fully zoomed-out-map, but I think it looks pretty good on a zoomed-in map. Besides, I have some ideas for what else is going to be to the left of the map.

Buzzword-y map of the day that even IE gets along with

IE(11) even redraws at every resolution, so it is slower but always looks really sharp. The screenshot is from IE11 zoomed-in.

Edit: The "grid lines" are really a result of antialiasing creating a bit of a gap between tiles. IE is ignoring the style I applied to fix it in other browsers, but with the background black I have to hide the jagged North and South edges it looks like a nice subtle grid when zoomed in like this.

Puppeteer · May 19, 2014

I'm getting wayyyyy ahead of myself here, but here's a braindump of some ideas that have been rattling around in my head:

Think I can manage dotmap creation and sharing via HTTP GET parameters e.g. http://url/?mapsaveloc=mapurl&mapdot=30,4&mapdot=36,2
Will assume bonus and luxury resource info is non-spoiler (may not be the case in a modded game)
At first will assume all strategic resources are spoiler info as checking for prerequisite techs is completely off my radar at this time
Maybe have some elements auto-un-display when map is zoomed out (resources, tile improvements, detail in terrain if I get fancy)
Mini-map that can click to center and show current view area (embed mini in SVG or make a png?)
Default starting zoom level and auto-center on capital city location
Ability to change starting center via HTTP GET parameters
Need to figure out how not to spoil fogged terrain changes (forest chops or plants, worker actions since tile last viewed). Some of the forest info currently shown may technically be spoiler info.

Civ3 Show-And-Tell

Emperor

Emperor

Attachments

Emperor

Archiving Civ3 Content

Archiving Civ3 Content

Emperor

Emperor

Emperor

Emperor

Attachments

Emperor

Emperor

Attachments

Emperor

Attachments

Emperor

Emperor

Emperor

Emperor

Emperor

Prince

Emperor

Attachments

Emperor

Similar threads