Visualiser

Hi folks!

I created a visualiser for this year’s challenge, it’s Reactjs based and runs completely in your browser:

You can access it here. It is hosted on Azure Files and other than downloading the files required, there should not be any network traffic, your replays are not uploaded and are simply rendered in your browser.

To view a replay, simply drop a replay folder here:

The control buttons should be self explanatory. The ‘play’ button is also the ‘pause’ button.

When you mouse over a cell on the map you will get a tool-tip with the cell’s data:

I developed this on 1920x1080 on Firefox, so YMMV on different resolutions.

Please leave any feedback and bug reports here.

Edits:
0.1.3 Now served over https
0.1.4 Auto reset on drop of new replay folder
0.1.5 Colour tweaks
0.1.6: Static sprites:


0.1.7: Chrome issues fixed
0.1.8: More visual indicators, see post here https://forum.entelect.co.za/t/visualiser/632/20?u=rhl
0.1.9: Removed some extraneous state and doesn’t crash anymore in the situation where move information is unavailable.

5 Likes

People with deuteranomaly and protanomaly are collectively known as red - green colour blind and they generally have difficulty distinguishing between reds, greens , browns and oranges. They also commonly confuse different types of blue and purple hues.

2 Likes

Updated link, now being served over https only

Enabled CI and CD on Azure devops. Will tackle the TODO list tomorrow.

Tweaked the air colour to aqua
You can now freely drag and drop new replay folders without needing to reset first

Updated to version 0.1.4: Fixed issue where some rounds are replayed out of order or duplicated.

1 Like

Version 0.1.5 released: Total player health now displayed

2 Likes

Could not sleep.

Version 0.1.6 released. Only cosmetic changes. Now with more space and worms:

2 Likes

Awesome project, I am getting a bug where it always stops playing on Round 98 for some reason, am I doing something wrong?

Do you have any errors in your browser console?
I only tested in Firefox, which browser are you using?

I am using the latest version of Chrome and no errors appear in the console, just Next State 97 times and then it stops, the match has 150 rounds and finished correctly with a winner.
Let me try Firefox quickly to test it out.

Firefox works correctly, must be something with Chrome and perhaps a memory issue, will continue using Firefox to test, thanks for the project.

I will have a look at chrome later, I see some visual differences that needs ironing out. Thanks for the bug report!

I also had an issue with not having all the rounds load before breaking, and giving a blank page.

Solution: I loaded the first 10 rounds, then proceeded in reuploading all the matchlog’s files. Then all the rounds load.

This is not a fix, but a temporary workaround

Okay, I can confirm I can replicate the issue where it stops on round 98 in Chrome. Busy looking at it.

Bad news folks, from my investigation it seems like Chrome only resolves the first 100 entries in the dropped folder, starting with the files and then the folders. So what happens is that the two files with the bot’s moves gets resolved, and then the first 98 folders.

You may see a demo here and test with a replay folder: https://mdn.mozillademos.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry%24samples/Example?revision=1493829

Firefox seems to be the only browser that supports this API fully: https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#Browser_compatibility

So support for the visualiser is only on Firefox.

if you’re using the HTML5 filesystem API you need to call the readEntries() method repeatedly until it returns 0 entries. Each time it’s called it returns folders in batches of 100.

1 Like

Chrome round 98 bug fixed! Thanks for the info @marcin_k !

This visualizer is great! Well done mate!

1 Like

Version 0.1.8 released, containing visual changes to indicate the moves made and health on the map itself
The Worm that moved is highlighted: image
Shooting: image
Invalid moves: image
Nothings: image
Digging: image

Health now indicated through opacity:image