🥚 T-Eggletop Map Creator
We created a homebrew tabletop map designer based on the MERN framework that is intended to make the campaign design process faster and easier for dungeon masters of all levels, including us :D
The T-Eggletop Map Creator (TeMC) is a homebrew tabletop map designer intended to make the campaign design process faster and easier, especially for GMs who are not artistically inclined. TeMC is a web application that operates using the MERN framework, (MongoDB, Expression.js, React.js, Node.js.) Both the frontend and backend are hosted on Heroku.
We on Team Eggmacs know firsthand how painful it is to lug around folders of graph paper to all your D&D sessions. Using our web application, users are able to draft, create, save, and download their own comprehensive maps in minutes, as well as browse maps published by other users on the site.
Joice: CSS, art & design, map item display Jordan: Full-stack, user authentication, database API, map structure Kay: Backend, search API, map download Meghana: Map creator, interface Sean: Operations, deployment, search/profile features
Features
Map Creator
The map creator is our central feature. Users can select tiles, assets, and characters from a bar and design their maps in the grid space provided. Tiles are the background, assets add the details, and characters are the avatars.
The item bar is organized into tiles, assets, and characters. Clicking on an item in the item bar will put the user in a “placement mode” where all clicks will place that item in the grid. Hovering over a grid box will highlight it, indicating the spot where the asset will be placed. The grid is toggleable so that users can see what the downloaded png will look like, or edit without the grid if they prefer.
This map is implemented using four layers: two display layers and two placement layers (one for tile sized items and one for asset sized items.) The display layers are displayed on top of each other to create the full map display.
Search & Map Cataloguing
There is a search feature where users are able to search through other users and maps created. The search is done by assigning different objects with score rankings using substrings, then displaying results in a listed format. Every entry is hyperlinked so you can navigate directly to the user profile or map from the search results.
Users are able to search for and open maps from the search page or user profiles. This loads the map into the map creator. Created maps can be saved and become searchable by other users.
Saving a map (via a button click) creates a database object containing the map’s unique ID, tiles, and assets. Loading a map pulls that information from the database and brings it up in the route associated with that map ID.
Map Download
Downloading the map as a png is our third unique feature. Users can export their finished maps as a png with a transparent background. Given the map object, the download algorithm uses an HTML5 Canvas with the dimensions of the map, iterates through the arrays of items, grabs the images, and converts them into File objects that can be drawn onto the canvas. The canvas object is then converted into a downloaded png that pops up in the browser.
User Authentication, Profiles, and Personalized Views
The profile and map creation pages are customized based on who is logged in and which map is being viewed. Profiles are fetched using UseEffect at page load. The options on the map creator are also dynamically displayed based on whether or not the user is the author of the map. If they are, it gives them delete/save functions, and if they aren’t, they are only allowed to make one time changes and download their modified version.
Creating an account and modifying a profile is instant. At sign up, a new user object is created, and at sign in, the user info is verified with a fetched user object. The avatar is stored on our MongoDB server as a base64 bytestring. Every update or upload is sent from front to back as an object, then the backend sends the new object to MongoDB via the Node driver.
Example Maps
Here are some example maps from our users!
“Sus” by 4Goose
“map of UCLA Rooftops” by gowin
“A MURDER” by theresonlyjuice
“DesertOasis1” by the-bay-kay
“Franz Hall 1178” by Shalphan
This is our final project for UCLA’s CS 35L: Software Construction, Winter 2022, taught by Professor Paul Eggert.