diff --git a/_posts/2018-04-12-make-a-map.md b/_posts/2018-04-12-make-a-map.md new file mode 100644 index 0000000..0465b00 --- /dev/null +++ b/_posts/2018-04-12-make-a-map.md @@ -0,0 +1,41 @@ +--- +layout: post +title: D&D Make-A-Map +date: 2018-04-12 +categories: projects +description: A web app that randomly generates a D&D Battlemap based on user parameters +author: Justin Gonzales +author-image: https://avatars2.githubusercontent.com/u/34696177?s=460&v=4 +author-bio: First Year Computer Security Student at Rochester Institute of Technology +author-email: jag2724@rit.edu +author-social: + github: https://github.com/justing0927 +--- +# Summary +D&D Make-A-Map is a web-app built using the Create React App, made to randomly generate d&d maps with various biomes and obstacles with the click of a button (or 3). +It's built using Node.JS and has documentation on how to build it locally or as a server. +The application utilizes JSX, html, and javascript and user input to create it's random maps. + +# The Journey + +D&D Battlemaps can be frustrating. Either you spend hours to settle for an imperfect map, you spend significant time drawing out a map during the session +to fit your needs, or even forgo the map altogether. Oftentimes, you only need a quick, concrete, place to get one's bearings. +It's even worse for unexpected encounters where you need a map. So, I set out to do what needed done. +I wanted to have something that could quickly generate a map based on a biome and some other input parameters, like for obstacles (and I think it turned out pretty alright). + +I needed a web-app, and having never done anything in HTML, Javascript, I figured I might as well throw myself into the deep-end, and try and use React, as I knew +it was a popular front-end app deal. +It took hours to start getting anything done, but I learned a lot in the process about HTML, Javascript, states, buttons, and how exactly not to organize the code +for a web-app. This is where I met the first big roadblock. +I was starting nearly from scratch (the Create React App helpfully creates the necessary files and an example page), and needed to figure out how to DO things. +Hours of tutorials, trial and error, and I finally understood how to set a components state and have that change things. + +So, I had gotten buttons working! Options! Input values! The keys to doing somethign! +All that was left was creating the actual map, and displaying it correctly, how hard could that be? +Of course, that's the essence of the project, and it had me stumped for awhile. The second biggest roadblock. +But hey, eventually after hours of researching and trying things from button groups to a crazy attempt to display each object individually, I stumbled on html tables. +It was as simple as two for loops and learning about how to add children to nodes. Which, would be a quick, simple, task for anyone who knew what they were doing. +I, of course, didn't. So quite a few hours later, with the help of some others (thanks Hudson) it was done! + +So, altogether, I spent quite a few hours over quite a few days working until I got something I decided worked and I could be proud of. +There's plenty more to be done, and plans are in place for the future; but, for now I'm happy with Make-A-Map, and everything I learned.