June 17, 2025
Instead of passing tons of arguments (it's a no-no pls never do that), I switched to zustand for global states. And that's pretty much it; I also spent time to test if the app still works as it should, as well as trying to optimize the back-end (ended up not changing anything much).
Turn your Discord status into a simple, eye-catching image for easy sharing and display.
Thanks @tobycm so much for pointing this out. The format of the game data looked bad before, and I fixed so that it looks like a properly-formatted json file. It's backward-compatible too so the old game data files still work!
In this session I created a separate app for development, and configured the code to detect dev environment and adjust things accordingly. The major thing is to make sure exporting game data works from the iframe inside Discord. At first I tried to display a modal which would prompt the player to copy and paste to a .json file themself. But the thing is navigator.clipboard
doesn't work in iframe so I abandoned that idea. The approach now is to send the data to backend via query as base64, then it will create the file, which works better in my opinion. I also spent time to make sure the production works as it should, which includes some configurations that are not visible in the video below or the GitHub commit.
I explored the Embedded App SDK furthermore. Created a store for Discord-related information, especially user
for later use; for now the Discord username and avatar is displayed. The game will also update rich presence with the page the player is in. External links are handled through the SDK also. When game is minimized, unnecessary components are hidden, only the money info is in frame. I will think about implementing a leaderboard for users in the same game.
This is a big step forward I believe. I spent time reading the docs, watching videos, learning how to implement Discord Embedded App SDK in order to turn this game into an activity in Discord. And I'm glad it all worked out in the end :D With this, I also created a backend for authentication and later uses. There will be a lot of things to learn from here.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/12072d881cbd233e08acf4bc3421ea7811769d21
This is a project that I started 2 years ago, and this was just simply an update (at a user's request :D). Since I haven't touched it for a long time, it took quite long for me to update gradle and dependencies and make sure the build wouldn't fail. After that it's just me implementing a better method to save and exit world safely in single player, while still showing the message screen.
And well, I plan to work on this project more.
Release: https://github.com/pdt1806/AutoDisconnect/releases/tag/v1.2.1
A simple Minecraft mod that automatically disconnects players when they are in low health. Fabric only.
Project received first issue about certain achievements couldn't be achieved even when the requirements were met. Turns out, I forgot to implement the logic :D It was quick to add the logic but it took more time to optimize it for better readability. Issue is resolved.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/b7c4af14a9c538cb8224794de119c38c860b2c9e
Preview: https://804d3912.project-cb.pages.dev/
First session after ship #1 and so this was pretty quick. I simply added the base icon (various sizes) with any
purpose so that PWA on desktop doesn't use the maskable icon intended for Android. I also updated the manifest based on suggestions from PWABuilder, so now the app appears more native, can be used as a sidebar app on Edge, etc. There are still many progressive features of PWA that I will need to explore and utilize them for my app.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/9854296a8688fcaf457dc5155c3dee3757d5f87c
Preview: https://aa6d0635.project-cb.pages.dev/
This is the final refurbishment before ship. A lot of changes are made to PWA, including better icons and making sure the game works offline. Then I fixed some bugs, specifically about money burst and SFX volume on change. Also added more stuff to Statistics, completed README, and the About page with appropriate credits. Sounds pretty quick but it took me so long to try (the PWA) and fix a lot of things, not counting the time I worked on the icons. Nonetheless, things should be good on different platforms now.
And here we have the logics for items collected! I've not spent time to test each individual item's function, so there might be bugs here and there, which should be totally expected although I've tried my best to minimize the errors. For the next session, I will just put placeholder icons for undone graphics, but the game should be functional like how I want it to be, with a foundation for later updates.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/9ff3a6cf3150cee303afc0a53a320f34d1d20772
Preview: https://97b62458.project-cb.pages.dev/
Gameplay: Achievements now come with rewards. Play more, earn more! Also added reward multiplier since items collected will increase the reward value later.
Code logic: Fixed bug related to displaying balance in store (on mobile), as well as bug about money not being decremented but instead incremented after buying an upgrade.
Next session will be about how to check items collected and adjust game logic accordingly.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/3b1ab464d65703468de26607b6f0a03a902fb541
Preview: https://e55115d9.project-cb.pages.dev/
I simply added more inventory items and their conditions, made changes to the achievements, as well as refactored certain parts of the code (to be specific, I added incrementing functions for stores). Also fixed layouts here and there.
As promised, a gameplay update! I've added an Inventory page with items that player can obtain as they progress in the game. Each item collected will have an impact on the gameplay. This is to increase the engagement with the game, preventing it from being boring. And with that, I plan to make offline earning as an item to obtain, and not part of the settings.
As of right now, there's an Inventory page where player can see the items and their details, as well as the conditional logics to get the items. I've not yet implemented how the items will work, that will be for the next update. Graphics are also not created yet so there we have 🍐.
Other stuff: refactored the logic for adding inventory item and achievement (since they're similar), as well as loading achievements & items; fixed custom cursors not working; update description for each achievement; made sure preact is used in production only.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/048eeadcfc6256826d809d96c7aa91826bfebbce
Preview: https://69826f3a.project-cb.pages.dev/
This was an attempt to improve PageSpeed Insights scores. Fixed some parts related to accessibility but at the same time I couldn't compromise the control over the game. The big difference comes from splitting chunks and lowering the package size, as well as auto preloading resources.
The recent changes have been about performance, but I will be back to work on the gameplay next.
Migrated from react-router to TanStack router. Really, routing is way better on mobile devices, as well as less unnecessary re-renders. Also refactored some parts related to global variables and possible re-renders.
Basically another session of optimization.
Quick session; the game now reuses useSound functions instead of creating a new one for every component.
Another peak performance update! This time, I utilized react-scan to figure out where and how FPS dropped on mobile (I actually had to pull out both iPhone and Samsung to verify if it's not a Safari issue). Eventually I found out that creating a new audio object every click was the reason of the lag. Luckily, React use-sound library resolved this issue beautifully while also keeping audio overlap. Then I proceeded with some refactors here and there, debugging the DB, etc. The game should run pretty smooth on mobile as a PWA now.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/93dc6edf163cabbcc845f5800f25cf3ba67520c9
Preview: https://8338d721.project-cb.pages.dev/
Added Offline mode, earn money and achievements even when the game is closed. This can be toggled on and off according to player's preference. Along with that are the two new stats: first access to the game, and last time in game. Refactored some parts to make the codebase clean.
GitHub commit: https://github.com/pdt1806/project-cb/commit/c12f6f55429ad3c70fa1f19c9db911d2460fe772
Preview: https://0550511c.project-cb.pages.dev/
Continued on the custom cursors. Now the game accesses indexedDB to load the stored cursors. Reset to default option is added. It also stores the URL of the blobs to session storage for quick access without requesting from db every single time.
Also made a little bit changes to the meta tags.
Preview: https://cc455744.project-cb.pages.dev/
Integrated IndexedDB into the game in order to store custom cursors and sound effects. For now the basic logic for updating custom cursors works, although there are still bugs, but I have to call it a day cuz it's getting late now.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/235f16dae7a36744cedab34addb501bb524e768f
Preview: https://6e24c01a.project-cb.pages.dev/
Tiny little update, making sure components only re-render when they are in view. Also refactored so that when numbers update (especially those dealing with money), only those components re-render and not the entire page.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/786e5f2121be0d1f52ec56aabc7aaa8af84801f4
Preview: https://3f92996d.project-cb.pages.dev/
THE performance update! Basically, I switched completely from useContext to zustand, followed by a massive refactor of the game logic. The reason behind this migration is because useContext and providers caused unnecessary re-renders, that even limiting TPS couldn't solve the performance issue. Battery drained so fast on mobile, and I knew I had to do something. The video below clearly shows how better the game functions after moving to zustand. There might be bugs and errors somewhere that I haven't caught yet since I had to implement a new way to handle game data.
Thank you to anyone who has pointed out issues with the performance.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/0b73ba679c00f1d54061e09f367aeed029a40baa
Preview: https://00e4ff22.project-cb.pages.dev/
I found out a lot of components re-render unnecessarily so I tried to prevent it by using use-context-selector. It didn't work like I thought though, probably my fault because I didn't spend a lot of time trying to understand it. I will just call it a day, no commits made, but hours still needed to be logged :D
Tried to use zustand for global state management but ended up not implementing it. Tried a lot of different methods for smooth money display and also ended up implementing none (decided to stick with RAF). Anyway, players can now adjust TPS to improve performance (even though I'm not so sure about whether or not it will help with saving battery).
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/c88cc44ea3ff9438d837040f003e8c67df25ad24
Preview: https://7656b025.project-cb.pages.dev/
An attempt to improve performance (reduce lag) by splitting the game context into 4 different ones, reducing the dependency on each others to avoid unnecessary re-renders. Also used request animation frame (capped at 60 TPS) to improve perf and battery life.
Hopefully this will actually improve player's experience.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/36b61eff3aa7b4e8278dedcbbded7c5bfd9e3ec3
Preview: https://1b8cd503.project-cb.pages.dev/
Added custom pointers (for now these pointers are from the internet, planning to create original graphics soon), refactored many parts of the code (especially dealing with hooks and playing sound, hours of trials and errors), added SFXs where they should be, updated accordion for the shop.
Not much of a surface difference besides the cursors basically.
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/2e806b3c841b7fa929c91eae1bae4e441dc6e8ca
Preview: https://8d8efccb.project-cb.pages.dev/
Updated the look of the upgrades a little bit. Added 2 new achievements related to upgrades (& updated checking logic). Added a whole lot of sound effects!
This session was less about coding and more about finding the SFXs (and fixing bugs too) :D
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/0887f3b5ac261ee84e3e7fe45908b34ca3c242f4
Preview: https://4c212e3b.project-cb.pages.dev/
Visual: Huge change, including new colors, new patterns, animations, box shadow for the button, more intuitive UX
Bug fix: Upgrade button only pops when changed from disabled to enabled; check game data file before loading
Performance: limit to 20 ticks per second, still have room for improvement
Gameplay: Manual upgrades are no longer one-time only
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/87cbab4a0dfa030bf09e73df085dbd1b350da1fe
Preview: https://d12e85e7.project-cb.pages.dev/
(devlog time should be 3h5m51s)
Visually more appealing with background & button animation, text shadow, etc.
Some details are now hidden when player hasn't reached there yet, creating a feeling of surprise and progress
Added floating text when clicking like +$1
Refactored certain parts
Visual: Updated background for visual engagement, updated small details with box-shadow, fixed padding
Logic: better method to store Achievements
New feature: Export to/Import game data from a JSON file
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/df52af7f0ff01063c9d4a803fe9a9a02f2b5c47c
Preview: https://34310ec7.project-cb.pages.dev/
(note: time spent on this session should be 2h45m45s)
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/2ae059a8e431351206c90fc2a04e7ed2a9564e65
Preview: https://dc86c88c.project-cb.pages.dev/
added achievement earned sfx, added placeholder icons for achievements, fixed scrolling issue on mobile, updated Statistics (+ total time in game), updated About page
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/a7616cc8cfb86d91a7a3e8dbf3855a0d74e07785
Preview: https://3b86418d.project-cb.pages.dev/
GitHub commit: https://github.com/pdt1806/college-bank-clicker/commit/f30b2b37f3ac79a699319ffdd6dcbd1e84d5fb6a
A parody clicker game about the College Board's Advanced Placement (AP) exams. College Bank Clicker is a satire of standardized testing culture, particularly the AP program. It is not affiliated with or endorsed by the College Board. All jokes are made in good fun. Start clicking and enjoy!
This was widely regarded as a great move by everyone.