ReactJS is certainly interesting to play around with. After completing a few basic tutorial projects, I felt the best way to solidify the lesson was to start on a project of my own. I wanted to produce something useless but unique. The kind of application that would at least elicit a mild amusement from the user. Why not make a silly game? Thus the concept of MoreSQL was born.

After a few pen and paper design session, I began planning out the basic program flow and technical goals. ReactJS would exclusively handle the front end with CodeIgniter powering the back end. Not a ton of PHP functionality but I wanted something lightweight but capable of expanded functionality if need be. Heroku seemed like a decent platform for deployment.

The gameplay is pretty simple. Press the button and the SQL meter will tick up another level. There is a randomized limit for each SQL meter which is revealed by the color of the markings. Stopping at the red level will cause that particular meter to freeze. If the “Add SQL” button is pressed beyond the red level the game will restart. Once the player freezes all meters on the red level, another SQL meter is added.

Getting started was simple enough. I created a bare bones prototype of SQL meter object, added the basic interaction and planned for each component win state. High level game logic such as current SQL Level was added to the root component. After playing a few round of the rough prototype I noticed a small issue with the overall game mechanic design. Progression becomes close to impossible after a few SQL meters were added. It seemed like a decent enough trade off for a quick project.

I ran into a small snag transitioning the meter objects from prototype to production. The meter object needed to display current level as a bar rather than an integer. Since the bars would be fairly rigid in structure, a table seemed like the best fit. Specific table data cell updated along with input from the user or instruction from object cool down process. After squashing a few bugs I completed a quick CSS pass and deployed with Heroku.

MoreSQL was a fun weekend project. I am moderately happy with the result but I did notice some additional issues. The height of the table within each meter must be given a static height. Assigning a height to these elements limits the options for responsiveness. Though I am becoming more and more comfortable with responsive design, component height always seems to cause issues. The only solution appears to be setting a static height value for troublesome components or to simply make it look as good as possible. No project will ever be perfect and is an extremely subjective whole to throw time at. I prefer to release and improve based on feedback.

We Need MoreSQL!


comments powered by Disqus