Frogatto Map Viewer

A leaflet page which draws the game map of the Frogatto & Friends game.

Screenshot(s)

Setup

• Get a copy of the anura engine
• Get a copy of the frogatto module for anura.
• Place the frogatto module under anura's modules/frogatto4 folder
• Point the A_PATH variable in scripts/common.sh to your anura install. e.g. $HOME/Games/Native/anura
• Run scripts/dump_level_data.sh from the project's folder to get the level data from the game and pack it into level_data.json.
• Run scripts/render_levels.sh from the project's folder to generate screenshots of every level. (On my machine it takes about 10 seconds per screenshot. Seeing as there's about 225 levels, the whole process will take around 40 minutes)
• Run a local server from the projects directory (python3 -m http.server 8123 as an example)
• Visit the page from your browser

Code overview

Scripts

scripts/dump_level_data.sh

runs the query from scripts/query_level_data.txt on all the levels, and post-processes the resulting dictionary with scripts/add-size.jq

query_level_data.txt

is the query passed to anura's query utility. For each level, it stores the next and previous levels, as well as any door-based exits

scripts/render_levels.sh

render's levels. Currently anura's render_level utility only supports one level at a time. This will take a while to run.

scripts/common.sh

contains base variables such as the location of your anura install, and the image output path.

scripts/query_level_id.txt

is the query for grabbing all the level ids from the frogatto module

scripts/add-size.jq

is a jq script which adds the size to the level dictionary based on its dimensions. This size is needed later on in the leaflet stage as the screenshot's top left corner is rarely ever (0,0) of the level

scripts/anura-query.sh

Usage anura-query.sh query.txt Relative/level.cfg Runs the query located in query_file.txt through anura. The second argument if provided is the relative level path from frogatto4/data/level. Specifying it will limit the query to that level/level folder.

scripts/get_door_types.sh

A quick script for listing all the object types that are considered a 'portal' - door. Was used once when creating scripts/query_level_data.txt

scripts/door_types.txt

for dumping the output of scripts/get_door_types.sh to.

Map

index.js

A gigantic file(822 lines). It handles getting the level data from level_data.json, and arranging the levels as specified in another json file. (If running with the PRODUCTION constant set to false, the map file can be specified from the page, otherwise a hardcoded file path is used) It also handles the various tools - Select, SnapH, SnapV, HAlign, VAlign, CustomAdd and MissingLevels - and keeping track of all the (leaflet) level objects.

tools.js

Contains all tools with the exception of Select, CustomAdd and MissingLevels which are tied into index.js

level.js

Contains the Level, LevelData, Door and DoorData classes.

placement.js

Various utilities related to the placement of levels. Includes functions for creating popups, blobs, and calculating positions for relative level placements

scale.js

Functions for converting between leaflet's (latitude, longitude) format and pixel coordinates.