Flag Creator Postmortem

## Introduction As of today, the project I've spent the last week on is complete. I learned a lot doing it, to say the least. The biggest thing I learned about was manipulating and creating SVG files on the fly to make some crisp flags. Everything else on the site was in service of that vision. ## Idea Gathering As the quarantine beat on, I grew more restless in the lack of things to do. Movie theaters and diners and things are closed, of course. So I decided to maybe create a new nation roleplay I can do with my friends, assuming the quarantine remains for much longer (which I imagined so). To that end, I settled upon an alternate universe World War II era nation roleplay. I imagined a custom world with player-created nations. Perhaps the players could fill out a more extensive nation builder than the one provided in my Crusades NRP? That was the idea behind this new project, at least. I'd wanted something similar for the Crusade NRP but that site was static so I couldn't actually save any of the results. With my new webserver setup I could do just that. And so I started planning and planning. And eventually came upon the problem of flags. Should I create them myself and let others pick from a pool of flags? No, I should do it one better: let the players create their own flags, too! ## Inspiration Very early on I was committed to having the flag creation process spit out a SVG so I could easily resize it at will. With that in mind, I then needed to actually get back to basics and learn how to manipulate and create SVGs on the fly. There came the JavaScript, and the bulk of effort on this project. I had looked at [Scrontch's Flag Designer](https://flag-designer.appspot.com/) as inspiration when the project began. It impressed me how the flags could be previewed in real time whenever any changes were made. I thought it was genius but did have some complaints about its execution, like how the symbols all had ugly outlines no matter the color you picked. Plus, the site didn't save any of the flags you created — something I absolutely needed on my end, of course. After scrawling the features I needed and how to get start, I took a stab at making it better. ## Early Designs I decided that Scrontch had the right idea in separating the flag into three pieces: background, foreground, and symbol. Getting the backgrounds and foregrounds were as easy as drawing polygons and rectangles and whatnot and simply appending them to the flag div. The real difficulty came much later in working with the symbols. Those dastardly symbols. ## Symbol Hell Many of my early SVGs were unclean and of different dimensions, therefore I had to calculate and scale each one uniquely to get them to center on the field. This was unsustainable for a number of reasons, one of them being that it was a pain to do the calculations and another that it was annoying to have every single symbol have its own unique set of coordinates and stuff. It was hell. Another, much bigger reason in my mind was related to contextual transformations. This is a term I've made up to encompass the translating and scaling of a symbol in relation to the foreground picked before it. This means if someone picks an upper left canton foreground that the icon shrinks and moves to fit inside it. It was very necessary before the creator could be called done that I have that finished — least of which being that Scrontch had and it so should I — but that it just looked much cleaner and made the most sense to do it. Therefore, a lot of time went into figuring out how to contextually transform the symbols. With each symbol already having a separate set of coordinates and scaling values just to be centered, they would each need a new set of coordinates and scaling values for each and every unique foreground. Things quickly get out of hand when you consider just how many combinations that is. After some time, I had an epiphany to just manually clean the SVGs I'd acquired and make them all a standard dimension. In doing so, any translations or scaling values could be easily shared between them. It was a breakthrough and helped relieve all of the potential work of doing things uniquely. ## Cleaning SVGs For posterity's sake I should mention how I cleaned the SVGs. To begin, I used Inkscape, a free SVG program. I would import the SVG, bring up the XML Editor (Shift+Ctrl+X), ungroup any g tags I'd see (Ctrl+U), highlight and union all of the paths together into one big one, and then delete any leftover transformation definitions. Then adjust the document size to whatever I needed, the symbol to the same, and center it. And then all done! Export and copy the path data to my JavaScript. From there, all transformations can be done from the same dimensions and therefore work seamlessly between any and all symbols. Made it so much better. ## Saving the Flag Saving the SVG also took some thinking to accomplish. I wanted to take the generated SVG flag and save it to the webserver. This meant taking the client-side JavaScript flag and somehow handing it off to the server-side PHP to be saved. I settled on doing a POST request for this, so a form submission. But how would I submit the flag? It was then that I learned about blobs and how they could be used to create new files, and base64 and how it could be used to send the files to PHP. So the basic process was to get the HTML of the flag SVG, shove it into a blob file, turn the blob into a base64 string, and give a hidden input the string's value. After that it can be passed through like any other form of data, decoded in PHP, and out comes the flag! Ready to be saved. ## Viewing Flags This was the very last thing I did before calling it quits. I made a super simple page to just display all flags in the save folder. Makes it a lot easier to see what everyone's created! ## Conclusion Very rewarding and super interesting problem to face. I was really motivated to see it finished and I'm still beaming that everything's worked as I wanted. But this is just one piece of my greater nation roleplay idea... I still have the rest of the nation builder, the maps, everything else. Oh well. At least now I don't have to worry about running out of material.