June 16, 2025
Given the limited time I'll focus on upgrading my UI, because mini games do take a while to make lol :,). BUT I promise it'll still be fancy and fun, and most of all cute. I'll first focus on fixing the background for flappy-bird start screen, so that it's not just a pink background, but instead a background in the game itself!
I added a “Back to Game” button below the Flappy Queenie canvas so players can easily return to the main virtual pet game whenever they want. The button uses the same purple-pink color palette as the rest of the UI for a consistent, friendly look, with smooth hover and click animations to make it feel interactive and polished. I positioned it centered at the bottom of the screen so it’s always visible but doesn’t interfere with gameplay. On the code side, I wired up a simple click handler that redirects back to the main game page, keeping the flow seamless for players jumping between mini games and the main experience. It’s a handy little quality-of-life feature that helps keep everything connected and user-friendly! 💜🎮
I updated my start game screen to now include the game's title - Flappy Queenie! Now the user will know ahead of time what game they're getting into :)
Also, I kept the colors similar to my catcher game so that all mini games retain a soft, pink theme!
I added a new start game overlay so Flappy Queenie now waits for the player to press jump before starting. This gives players a moment to get ready instead of being thrown right into the action. The overlay matches the game’s pink, playful aesthetic, with a white rounded box, soft shadows, and cheerful instructions. To make it feel extra polished, I added a smooth fade-out effect — as soon as you jump, the overlay gently disappears and the game begins seamlessly. On the code side, I introduced a gameStarted flag so the game loop only runs after that first jump, and I hooked up Space, Click, and Tap inputs so it works smoothly on both desktop and mobile. It’s a small touch, but it makes the game feel more professional, welcoming, and player-friendly right from the start! 🌸✨
I updated my css to better match the game's overall atmosphere! Now the background has pink hues and the score was also moved up to not block the game screen! I also adjusted the game over screen - now it's not a boring, annoying red text, but rather a pretty widget with an easy-to-read text!!
I added a smooth scrolling base that moves perfectly in sync with the pipes, giving the game a much more polished and dynamic feel. To do this, I introduced a horizontal offset variable that loops seamlessly, making the ground scroll infinitely without any jumps or glitches. I also adjusted the base image size and position so it fits the canvas nicely without stretching or distortion. Plus, I fixed the draw order so the pipes now appear behind the base, which cleans up the layering and makes the visuals look way better. And of course, I swapped out the old pipe sprite for a fresh new red pipe that fits the game’s vibe perfectly. Overall, these changes make Flappy Queenie feel more complete and visually balanced! 🌟🐶
I finally fixed a bunch of bugs that were messing up the Flappy Queenie gameplay and visuals, so it’s way more fun and polished now. Queenie’s sprite size got bumped up to a good visible scale, and the jump control actually works — no more falling straight to game over before you even press space. I adjusted the pipes to have a bigger gap, which makes flying through feel fair and less frustrating with Queenie’s cute, fluffy size. The background image now fills the whole canvas perfectly with a smart crop-and-scale function, so there’s no more empty space on the sides or weird stretching. Plus, the collision detection got tightened up so you don’t get unfair game overs when you’re clearly above the pipes. And of course, the game resets smoothly on space or click after a game over. All in all, it’s a smoother, cleaner, and way more playable Flappy Queenie experience! 🐶✨
Today I tried creating the outline for the flappy-bird game, but I'm running into some problems with its functionality. I personalized my sprites though! I'll continue working to try and resolve the issue of the JUMP not working and sprites being misplaced!
Good news yall! More games are to come! The catcher did so well I got inspired to add more classics to Queenie :D! Ill probably do the flappy-bird idea afterall so ill post more devlogs on that!
In the several days, I gave the yoga timer a major glow-up! Switched out the boring linear progress bar for a cool circular one that matches the countdown perfectly. Then I added new phases like Prepare and Relaxation so it feels more like a real yoga flow, and renamed everything to sound more chill and on-theme. It’s looking way more polished now and much more close to the final vibe I’m going for. 🌀
Added smooth fade animations to popups for more natural transitions. Disabled plus/minus buttons when values hit their limits to prevent invalid input. These updates make the interface cleaner and easier to use.
Added a success screen to congratulate users when the workout ends, with options to restart or close. The app now uses a calming background image that fits all screen sizes. Standard icons like play and pause were replaced with Font Awesome for a cleaner, more consistent look. Button interactions and timer transitions were also refined for a smoother experience.
Redesigned the timer UI to match a modern, clean layout. The Sets, Workout, and Rest sections were reorganized with consistent styling and inline time editing. Controls were made more user-friendly with +/- buttons and real-time input validation. Overall, the interface is now more intuitive, visually aligned, and easier to interact with.
I finally cleaned up the mini-game layout so everything feels way more balanced and polished. I moved the side panels out of the game container and wrapped everything in a flexbox container — this means the game and side widgets line up nicely without overlapping or weird positioning. The Catcher icon got a size boost, the “Mini-Games” title is now perfectly centered, and I switched to a fun bubbly font that vibes better with Queenie’s style. Plus, the side widgets stay centered no matter the screen size, the yellow arrow toggle got bigger and easier to spot, and the “Back to Menu” button got nudged a bit so it’s not stuck to the edge anymore. All in all, it’s a softer, cleaner UI that just feels right 🌸
Today I added and styled a Start Game screen, so now it doesn't just throw you into the game. It's got a blurry background, too, so you get a slight glimpse of the game!
I finally tackled that pesky problem where the background music wouldn’t start again after you came back from the mini-game. Browsers are super picky about autoplay, so the music kept getting stuck until you clicked the mute button twice—ugh.
Now, when you return, there’s a neat little fullscreen prompt that says “Click anywhere to resume music.” One click and boom, the tunes are back! It feels way smoother and more polished, and you don’t have to do any weird button dancing to hear Queenie’s royal theme again. Small fix, but it makes the whole experience feel way better! 🎵👑
Today I added the proper sprites! - Queenie's head as the catcher, a treat as the good object, and mud as the bad one! Plus I adjusted the back to game button to actually take you back to the saved game screen. Currently the score does nothing in terms of XP, but I'm thinking of adding a countdown timer at the start. Also expect fixes for minor bugs!
Today I finally fixed the wonky placement of the arrow that opens the mini-game widget—it was floating in weird spots on different screens, but now it snaps perfectly into place like it actually belongs there (imagine that!). Much cleaner and easier for players to find.
Even more exciting: I’ve now implemented the actual Catcher mini-game! 🕹️ Right now it’s using temporary image placeholders (think boxes and blobs pretending to be snacks and paws), but the core mechanics are up and running. You can move left and right to catch falling items, and it actually feels satisfying already—even without the final polish. This is the first of a few planned games, and it’s great to see it come to life on screen.
I tried adding an arrow button to open a widget screen with games, but something isn't working.... I'm trying to place it on the right side of the screen. Anyway, the idea is to display a list of cute fancy games you guys can play!
I'm thinking of improving the UI more after I get some feedback, but also I want to add a mini-game to really boost the engagement aspect! I might start off with a classic Falling Object Catcher.... if that works, I'll think of more minigames to earn coins and XP!
Today I focused on polishing Queenie’s interface for a smoother and more elegant experience. 🐾✨
First, I fixed an issue where the need icons (like hunger or cleanliness) weren’t displaying — turns out the HTML block was missing entirely. Once added, the icons appeared as expected, including the default “thriving” state when Queenie’s doing well.
Next, I aligned all the action buttons (Feed, Play, Rest, Clean) into a single horizontal row using Flexbox. Previously, the Clean button was awkwardly sitting below the others — definitely not up to royal standards. I also created more breathing room between Queenie’s video and her need icons so they’re no longer overlapping.
PLUS, I introduced a proper top bar section that visually separates the “Mute Music” and “Back to Menu” buttons from the rest of the screen, giving it a clean, nav-like feel. And I added more vertical spacing around Queenie’s video to prevent the interface from feeling cramped on taller screens.
Small refinements, but they make a big difference in how polished the whole experience feels. Queenie deserves only the best. 💅💖
Today I resolved a bug where user progress wasn't saving correctly after logging out and logging back in. The issue was caused by conflicting references to the stats object, which I've now fixed by consistently referencing a single defaultStats template. I also introduced a cooldown system to prevent players from rapidly spamming actions like feeding or playing to gain XP too quickly. Now, Queenie requires a short pause between actions, which keeps the game more balanced and true to her royal pace. :)
Since shipping this project I continued working on it. New devlogs are being posted on a newer, separate version of this project! So far, these changes have been added to the project: need-icon images for Queenie's needs, leveling system with an XP progress bar, sign in/up screen, background music with a mute/unmute option, and animations!
Added new animated videos for Queenie’s actions—now when the user clicks the feed, play, rest, or clean buttons, Queenie performs a corresponding animation (like playing with her toy, taking a bath, or napping). After each animation ends, it automatically switches back to her idle (thriving) animation. This makes the game feel more alive and responsive, giving each action a fun visual reward.
Replaced Queenie von Floof’s idle GIF with a short MP4 video to give her animations a smoother, higher-quality feel. The video plays automatically in place of the old GIF and blends better with the overall aesthetic. I adjusted the layout to make sure the video stays centered and doesn’t overlap the interactive buttons, keeping everything clean and responsive.
Fixed an issue where unmuting music on the game screen didn't actually resume playback. Now, when the player toggles the mute button, the app checks which screen is currently visible and correctly resumes either the menu or game music. This prevents the awkward silence when unmuting and keeps the vibe consistent across screens.
Added a background music system to enhance the atmosphere of the game. Menu and gameplay now each have their own looping tracks, and a mute/unmute button controls both. Fixed an issue where music overlapped during screen transitions, and ensured playback starts only after the user's first interaction to comply with browser autoplay policies.
Add 'Back to Menu' button with styling and visibility control
Add title screen with sign up/sign in flow and persistent user-specific save/load functionality
Added leveling system with an XP progress bar with real-time updates reflecting current XP/level, and created glowing animation effect on XP bar container to celebrate level-ups
Uploaded need-icon images for Queenie's needs and integrated them into gameplay. The icons can appear at once and update in real-time
QUEENIE IS BACK!! This royal virtual pet experience takes everything you loved from the original and levels it up — literally. With new animations, sound effects, a dynamic leveling system, stat tracking, mood-based interactions, and a full save/load system, Queenie is more alive (and demanding) than ever. Feed her fancy treats, entertain her with sparkly toys, pamper her with spa days, and watch her grow from a spoiled fluffball into a legendary royal companion. Please take care of her highness!
I added sound effects to play, sleep, clean, and feed buttons using remote sound URLs.
Added functionality to the other three buttons (Play, Sleep, and Clean): Play button now triggers a bounce effect to show playful energy, Rest button fades Queenie to simulate sleep and reappearing refreshed, Clean button now uses a pink glow and quick shake to simulate bath time
Refactored the project by splitting the single HTML file into separate HTML, CSS, and JS files for better organization. Implemented a Tabata interval timer supporting multiple rounds with updated UI to show workout/rest phases and progress. Also enabled dynamic timer display updates when inputs change during pause.
Refine timer inputs to separate minutes and seconds, and update JS logic and styles accordingly
I added a full pet stats system to my virtual pet app (featuring Queenie von Floof). Stats include Hunger, Happiness, Energy, Cleanliness, and Health—each starting at 100. I created interactive buttons (Feed, Play, Rest, Clean) that update these stats in different ways, and added automatic stat decay every 10 seconds to simulate real-time care. If core stats get too low, Queenie’s health drops; if maintained well, it recovers. I also implemented dynamic status messages that reflect her current mood and condition. Everything is clamped between 0 and 100 to keep it balanced.
Welcome to Queenie von Floof, your interactive, pampered virtual pet — inspired by amagotchis but with a royal twist! Feed her snacks, play fetch, give her spa days, and tuck er in for beauty sleep — all while keeping her happy, healthy, and fabulous.
A calming and customizable yoga interval timer built for focus and flow. Ideal for personal sessions, yoga instructors, and mindful break routines.
This was widely regarded as a great move by everyone.