Inspiration
We all want to study efficiently. That’s why we use tools like Pomodoro timers and focus apps. But let’s be honest—they get boring really fast.
What if these tools can be both productive and fun? Introducing Tamataski, a Chrome extension that lets you grow your own cute pet "Tama" as you study.
What it does
Tamataski can detect if you are procrastinating on your work in a browser by detecting whether you have a YouTube, Instagram or Tiktok tab open. Our beloved Tama will growl at you if it catches you slacking. For your award of hard focus, Tama provides you with coins that you can spend to decorate it (it will also bounce around your screen happily), and hopefully the incentive would encourage you to lock in and slay those assignments.
How we built it
We built a chrome extension using Javascript, HTML, and CSS. Our code makes api calls to chromium to access the user's browser data such as their URL link. We used async functions to simulate a smooth experience while updating hidden timers, coin system, and pet positions in the chromium user storage using their database.
The actual cat visual UI is an injected canvas HTML element through the chrome extension. The cat animation uses a custom sprite sheet parser to loop through various sprites and create the animation. The logic of the cat movement runs on the background script, which runs on the browser as a whole. This allows us to sync the cat's movements across all the tabs, as the animation runs on content script, which runs on all tabs separately.
Challenges we ran into
In the backend, we had persistent issues with async functions as the program often return undefined values due to it returning before an item is fetched. We resolved those issues with callbacks using lambda functions; sometimes we also used .get and .then; for simpler issues we used await... We also had issues getting the pop up to work with a css style, as it's difficult to make it compatible.
Furthermore, getting the cat to sync across the tabs was difficult. Our first attempt involved setting the cat's state and position inside the shared browser local storage, and having each tab take in that data to sync. However we found that each tab overwrote the other tabs' states and positions and lead to chaos. Our next attempt involved sending messages, and this succeeded but not without difficulties. Messages needed to be sent to each tab specifically and the logic to move the cat needed to be moved to the background script in order to sync better. As we expanded the extension, we moved more parts of the cat's logic to the background script, such as the position and the velocity.
Accomplishments that we're proud of
We are proud of our success in animating Tama, and with the help of chromium api, detect elements in the user's browser that we couldn't before.
What we learned
Some of us learned the value in using lambda functions as callbacks and understanding how api calls with javascript is very much like threading, we learned to familiarize and adapt to the chaos of async functions and learn to handle the flow of the program while keeping it running smoothly and normally.
What's next for Tamataski
- Personalize which website to block.
- Stop Tama from moving and place it anywhere on the screen.
- Add more accessories to purchase.
- Unlock new pets using coins.
- Create bonus coins hours when user buys accessories.
Log in or sign up for Devpost to join the conversation.