A while back, I had heard rumblings in the gaming community about a new game called Stardew Valley. I was told it was like Harvest Moon, but with much more in-depth systems. I bought it and immediately fell in love. I recommended it to all my friends and put in over 90 hours into the game. When I wasn't playing it, I was thinking about it. I was reading the subreddit while waiting in lines and planning out my farm in my head while I was in the car.
While the game was incredibly fun to play, I found myself keeping track of various things on paper and in note files scattered all over my screen. There was already an incredible dev community building around the game with interactive farm planners and stardew.farm, so I thought I would give a try at making something of my own and create a tool to take care of one of the things that I was doing on paper.
To give a brief overview of what the tool was trying to solve-- In the game, there is a community center. As the game progresses, you find that there are some forest spirits that have taken up residence in it and they leave some hints around that they want certain items. Each room in the center has a number of bundles associated with it and each bundle has a number of items that are required to complete it. By leaving items in the community center that are part of these bundles, the player can get various rewards. For example, in the
Pantry room, there is a
Spring Crops Bundle that requires one of each of the major crops grown in spring. Completing it will give the player fertilizer that will let their plants grow faster. Additionally, some items are in more than one bundle and some bundles are "pick 5 of these 6 items".
Once that was selected, I needed to decide what my UI was going to look like, roughly. I knew that I wanted to have a series of boxes for each item from the game that needed to be collected. I had tried to do a similar layout before in bootstrap, but found it hard to get the vertical sizing correct. After some reading, I found that FlexBox might be the answer to my woes. I found a CSS framework that was based around flexbox called Bulma (at the time, Bootstrap 4 was still very alpha and had not settled on FlexBox).
Writing the logic for the app turned out to be fairly easy. Vue's databinding seemed pretty intuitive to me and bulma was easy enough to pick up for my usage. It did take me some time to figure out how to store the state of the application such that it was easy to databind and also easy to look up using JS. I settled on using a nested array with a sub-array for each bundle of items. From there, I used databinding to change the UI based on the item array. The hardest part of the project was actually getting the data into the app. Long-term, I knew I would need to write a parser for the game data, but I decided that was a problem for another time. I took to the wiki and copy-pasted (Creative Commons-licensed) data into a JSON file, cleaned it up, andgave it some tests. To my surprise, everything seemed to pretty much work.
I sent the link out to some of my friends who play the game to get some feedback, made changes, and then submitted it to the Stardew Valley subreddit. I got a pretty positive response. Lots of people seemed interested in it. I implemented a few more suggestions from the thread and then posted on the Steam forums and the official Stardew Valley Forums. People liked it enough that I registered a domain name for it.
I have some more planned features for it (getting better display on mobile apps chief among them), but for the most part, the app continues to work well. I've gotten a few pull requests as well, which is a first for me. It was a fun project and I'm glad that I did it. I learned quite a bit about interacting with people in the community as well as balancing feature requests.
You can find the checklist at http://www.stardewcommunitychecklist.com/ with source code at https://github.com/kihashi/stardew_community_checklist.