The tail end of this month has been all about getting my brewing game back to the state it was in before the Vue 3 upgrade. I went back and forth about trying to embrace Vue’s Composition API, but I landed back on my mantra of “use what I know and what gets built the fastest.”
As part of the upgrade process, I had to replace the old class component package I was using that allows me to structure Vue components in a more object oriented pattern. Vue Facing Decorator handles this for Vue 3 the way I want it to, but getting it to play nice with this site’s Astro architecture took a bit of back and forth to get building. The two things that seemed necessary to get everything working was to:
- Set “experimentalDecorators” to true in my tsconfig.json
- Add “vue-facing-decorator” to the astro config under Vite —> SSR —> noExternal
But once this was all in place and playing together nicely, I could basically copy paste my existing logic from my old project instead of trying to reinvent the wheel each time. Now my very basic clicker prototype is available as it was in my first implementation.
Right now, it’s just a proof of concept for the following pattern:
- “Buy” one of each of the necessary materials (Water, Barley, Yeast, and Hops) by clicking on the barrels
- Click the mash ton, consuming water and barley and starting the timer.
- Once complete, click the brew kettle which will consume the hops.
- Once complete, click the fermentation vessel which will consume the yeast
- And finally, click the bottles (my placeholder art for a bottling line) to package the beer and make it ready to sell.
If you go through all of this, the “Beers Ready to Sell” at the top should increment by one. Each station should also have some rudimentary error handling to prevent activation if you don’t have the correct materials.
Having this site up and running has provided the motivation I was looking for, and it’s been nice to pick away at without having to think about how to deploy or share my progress. Now that I’m back at the starting line though, I need to look forward to what I’d like to implement next:
- The concept of currency, so that you start with a certain amount of money and spend it on the contents of the barrels
- A better representation of your inventory, I don’t know if I just want to make the bar at the top prettier or if I want a stand alone screen
- Implement some super simple customer logic to periodically buy beers and complete the gameplay loop
Once the full loop is complete, I’ll think about enhancing customers to ask for different kinds of beer, and how I’ll go about getting the player to make them.