Whatsup

Readme

Well the project is done. This is just a readme.

Multimedia & UI

Visual Interface

I added a 1.8” TFT SPI display using the ESP32 VSPI hardware bus. Optimizing it brought up a few problems:

FreeRTOS Multithreading Collision:

• Updating the TFT directly inside Bluetooth callbacks caused SPI bus collisions, locking up the hardware and making buttons unresponsive.
• Fix: I decoupled the UI rendering. The callbacks now just set volatile bool flags, which the main loop() checks to safely draw updates without blocking audio processing.

SPI Bottleneck + Flickering:

• Calling tft.fillScreen() pushed over 1.2 million bits per update, causing alot flickering and latency.
• Fix: I replaced full screen clears with bounded box redraws (tft.fillRect) to only erase and update the changed pixels.

Metadata

AVRCP Bridge:

• Used set_avrc_metadata_callback to fetch track duration, artist, and title from the phone.

Volume & Playback UI

Marquee for long titles:

• Titles over 23 characters wrapped onto other UI elements, looking ugly.
• Fix: Disabled text wrapping and added a millis() scrolling effect for long titles.

Volume Bar:

• Added a bottom bar displaying potentiometer position and volume %.
  Playback Icons:
• The play/pause icon updates based on a2dp_sink.get_audio_state().

Optimistic UI:

• Pressing Play/Pause had a big visual delay while waiting for the phones Bluetooth confirmation.
• Fix: The ESP32 now locally fakes the audio state and redraws the icon instantly, while handling the actual command in the background.

Content Duration:

• Track duration may not work as expected because some phones dont send it.

Libraries

Adafruit ST7735 and ST7789:

• Hardware driver for the 1.8” TFT.

Adafruit GFX:

• Graphics library used to draw the UI.

Hardware Pinout (ST7735)

• CS -> Pin 5
• DC (A0) -> Pin 2
• RST -> Pin 4
• SCK -> Pin 18 (VSPI)
• MOSI (SDA) -> Pin 23 (VSPI)

Playback controls and adjustable volume

Basically i added playback control to play the next/previous song or stop/play it aswell as adjustable volume with a potentiometer. I also added Led to blink when its not conneted to bluetooth, and turn off when it is. Also why its cramped is because the other side of the ESP is reserved for the display which will come next.

Also ehh button fell off in the video .

I changed some wiring around so heres a new wiring overview:

Wiring:

Amplifier:

• LRC -> Pin 26
• BCLK -> Pin 27
• DIN -> Pin 14

Playback and volume:

• Next btn -> Pin 25
• Prev btn -> Pin 32
• Play btn -> Pin 33
• Potentiometer -> Pin 34

Led:

• Blue LED -> Pin 13

Problem with potentiometer:

• The potentiometer was super jittery with values all over the place. Now normally a capacitor can be an easy fix, but i dont have one .
• I opted for a fix in the code by just getting a 64 sample average which just adds up 64 readings and divides by 64 to get one value.

Esp32 bluetooth speaker setup and test

I had coded previously on this project but i lost the code as i didnt upload it to github. I started again now from scratch so thats why the time is 1 hour.

Basically wired the components and configurated the esp32 using Arduino with PlatformIO on VScode.

The program can connect to bluetooth and play content.

One issue i had when compiling and uploading to the esp, was that the program was too big so i had to include a .csv file with partition table as the default one limits size.

Components:

• Esp 32 Devkit V1
• Max98257A
• Cheap 8ohm 3W mini speaker

Wiring:

• 5V rail -> Amplifier VIN
• Common GND between the amplifier and the ESP
• LRC -> Pin 14
• BCLK -> Pin 27
• DIN -> Pin 26
• Speaker to +- terminal on the Amplifier

Libraries:

• Arduino-audio-tools
• ESP32-A2DP

Added a readme that explains how the game works. Everything is finished now .

The game is basically done now. I will check on some final polishes but as of this moment i have created every function i wanted to create.
Biggest pain about this was the dam layouts. They took so long to get right. Also animations and score display didnt work properly so i had to tend to that aswell.
Anyways heres what i have added:

Added options menu

• Added an options menu dialog. The dialog opens with the same animation as the Game Over dialog.
• Toggle game sound on/off.
• Restart the game.
• Reset your best score (with confirmation prompt).

Sound toggle

• Added isSoundOn to gameState to track sound status.
• All sound effects now check isSoundOn before playing.

UI

• Increased the number of jewel particles spawned when a block breaks.
• I didnt have sprites for the texts so i created a function to render “sound:”, “replay:”, and “Reset score:” directly to the options dialog. This uses a bold, rounded Fredoka font style with a small shadow effect.

Menu with UI

• Added a start menu with a start button and a title.
• The start button triggers the startAnim() function that changes the state to START_ANIM, which plays the grid sweep animation, which again changes state to PLAYING when its done.

This devlog inlcudes grid animations for start and game over.

Honestly im very proud of this one. Might be one of the more cooler things i have managed to do .

Sweep animation

• I added a sweep animation that triggers whenever a new game starts.

• Instead of the grid just appearing empty, game picks a row and fills every cell in that row with a random color, then moves to the next row on the next frame. Once the grid is full, it does a second pass of the rows setting every cell back to empty (null). By doing this over several frames it basically creates a “wipe” effect that looks cool.

Silvering animation

• When you lose, the game scans the board to “freeze” your blocks.
• The game starts at the top and checks every single cell, moving left to right and then down to the next row. If it finds a block, it changes that blocks color to silver. At the end it basically looks like a wave that kinda “washes” your board. Then the gameover dialog draws.

Sounds

• Added a score update sound that plays when the score count up animation plays on the gameover screen.

• There was a bug where the “New Best” sound would not play again after you triggered a new game. Fixed it by setting its variable to false in the updateSilvering function.

Honestly the biggest pain in this was when and where to play the animations lol. Things just wouldnt work so it required alot of testing with delays etc.

In this devlog i added a full audio system and new line clear animation aswell as fixing other issues. Also i finally used a little markdown .

Added a audio system using the Web Audio API (AudioContext).

• Added an unlock function so audio works across browsers and devices (basically needs a user gesture to enable sound cuz the browser blocks it).

Added sound effects for all big actions:

• Block placement, block release, and wrong placement.
• Button clicks and new game.
• Block explosion for each block that breaks.
• Game over event.
• Sound for the new best score trophy on the game over screen (delayed).

New particle effect for block breaking.

• Cleared blocks now break in a wave, with each block exploding in sequence and spawning jewel particles.
• As before, the color of the explosion and particles is always the same color of the shape just placed.

UI improvements:

• Prevented accidental button clicks on the game over dialog by not registering clicks while the dialog is animating in.

Some challenges faced and their solution:

• Basically browsers block audio until a user interacts with the page. I solved by listening for the first user gesture (click/tap) and unlocking the audio context at that moment.

• For the particle animation i needed to keep game logic instant while playing out the visual and sound. I solved by separating the animation layer from the game state, so the grid clears instantly for logic but visuals and sounds play out in a wave.

• When many blocks explode at once, playing the sound for each was noisy and annoying. Fixed by only playing the explosion sound once per plsced shape.

• Players could trigger buttons on the game over screen if they were still holding the mouse. Fixed by ignoring clicks until the dialog animation is complete.

Soooo long story short i added float animations .

In this devlog i built a floating text system, Heres a description of hwo it works:
Every time a piece is dropped, a +Score floats up right from where the piece was placed.
Clearing multiple lines (or extending a combo) now shows a random word (“Good”, “Great”, “Amazing”, “Perfect”) to the center of the screen, with logic to make sure the same word never repeats twice in a row.
Hitting back to back line clears now triggers a gold “Combo x” pop in animation right below the sprite text to let players know they are on a streak.

Improved the scoring and game over dialog. Added a count up animation for the scoring. When its game over the dialog pops up with a fade animation, then it initiates the score count up animation, then at last if you have a new best it will display the new best trophy.

Added a burst animation when you clear a line. Its like the confetti animation just with jewels. It spawns 4-6 jewels on each cell in the line thats cleared. The particles gets the color of the shape you just placed. So much cooler now

Just added a “animation” which isnt really an animation lol, but just adjusting the Y position of the buttons when you click them so it looks like it actually presses it. I also increased the hitbox of the draggable shapes so its easier to actually drag them. Before you had to perfectly press on the shape, now you can press a little outside it to drag it.

Summary of what i have added today.

Game States: Cleaned up how the game tracks whats going on. It now use actual states like PLAYING and GAME_OVER instead of just true/false flags. This makes it way easier to pause or show menus without things breaking aswell as making it easier to scale further.

Button Clicks: Created a brand new file (uiEvents.js) just to handle UI buttons and their functions.

Fixed Button Hitboxes: The “New Game” and “Share” buttons were drawn sideways on the screen (cuz they appear sideways in the spritesheets), which messed up where you could click them. I fixed the math so the click areas match the flipped width and height.

Restart Button: The “New Game” button actually works now. It clears the grid, resets the score, hands out new pieces, and starts a new game without you having to refresh the page.

Share Button: Opens the web share for your device so you can share your score. It wont show the actual web share opening in the screen recording tho, because it hides it.

This is basically the same state and click system i used in my Flappy Bird project. It makes it easier to add new buttons and their click events later on aswell as choosing what functions run in which state. It worked so well i decided to use it again.

I created the game over screen. Idk how this took so long, the time just went by. Biggest pain is always the layout cuz you have to get it right with the sizes and coordinates. Anyways i thought it looks nice like this. The play button and share button doesnt have any functions as of this moment but will be added soon.

The scoring system is finished . Might be changed later on but this is what i have now:

Points for Placing: You now get base points just for dropping shapes onto the board (1 point per square in the block).

Bigger Multi Line Bonuses: Clearing multiple lines at once now gives a bigger point boost, instead of just a flat rate.

Infinite Combos: Your multiplier will grow endlessly as long as you keep your streak alive, allowing for big scores.

Three turn streak breaker: You have up to 3 turns to clear a line. if you place 3 blocks without a clear, your streak resets to zero.

Saved High Scores: Your high score is saved to your browser.
Basically, the game now rewards multi line clears and long, uninterrupted streaks.

i added UI elements for the score and best score. They are currently only for visuals as i havent properly created the scoring functionality yet, but im working on that right now. The painful thing was placing these correclty because some sizes caused blurriness, so i had to make adjustments. I also had to change some pixels on the spritesheet using piskelapp.com. After all that i finally ended up with a semi finsiehd scoring UI. Lastly i polished the grid by adjusting its positions and sizes so its more centered aswell as adding a background.

This devlog doesnt contain any visual changes, only code cleanup and better asset management.
Basically my code was a bit cluttered with assets and layouts scattered everywhere so i decided to clean it up a bit by separating asset loading, layout and grid positions. This makes it easier to add more UI elements in the future without alot of problems, and modify them in a more readable manner.
My laptop is alright now so heres a video of the game in its current state.

I thought the UI looked a bit plain so i found game assets from freegameassets.net and updated the ui with sprites. It isnt fully implemented yet with some UI inconsistencies plus some values are hard coded. This and the performance will be improved later on.

This took longer than needed. I basically tried mimicking the hand generation algorithm used in the real game and tried and rewrote many times to make it perfect which i am incapable of as of this moment . I tried different algorithms, and could never find the right one. So i have finally landed on one i deem acceptable, and maybe overly complicated, but its alright for now. I added simple scoring and combo system that will improve later. Heres a short summary of the algorithm (which definetly has flaws):

The game needs to give you 3 pieces every round that are playable but not random garbage.

1. Read the board. Count how full it is (fill%) and find rows/columns that are 1-2 cells away from clearing.

2. Pick piece categories using weighted dice. Empty board? Mostly chunks and fillers to build up. Half full? Mix in line pieces. Nearly full? Spam small helpers so you dont die. The weights shift gradually.

3. Generate candidates. Roll 3 pieces from those weights, check each one individually fits somewhere on the board. If yes, score the hand by simulating “what if the player placed each piece in its best spot?” then count how many lines would clear and how many lines get pushed to 6-7/8 filled (setup moves).

4. Pick from the top 3. Do this up to 60 times, keep the 8 best hands, then randomly pick from the top 3.

its not perfect but its better than the complete random algorithm i had before. Also my old laptop gave up on me a little so i couldnt take a screenrecording, but atleast theres a picture .

Created more shapes like diffrerent rotation of the T, L, Z shapes and a new diagonal shape aswell as vertical lines.

I added a highlight feature that shows which rows and columns will be cleared when placing a block.

First i created a temporary grid simulation by copying the current grid and applying the ghost block placement to it. Then i checked which rows and columns would be completely full using the same logic as the clearing function.

Then i created a separate highlightLine function that draws full color blocks on any cell thats part of a clearable row or column.

phewwwww this took a long time . But my big brain did it

I made the game playable. Added recursive hand validation to ensure all pieces are placeable. Also separated the hand logic from blocks.js where it was previously.

Created a function that recursively checks if all 3 pieces in a generated hand can be placed on the grid in some sequence. The function:

• Simulates placement of each piece at every valid position
• Recursively validates remaining pieces can fit on the updated grid
• Ensures generated hands are always solvable (player must find the strategy)
• Triggers game over only when no valid 3-piece combination exists

Right now game over is displayed in the console and nothing happens after. I havent tested every possible bug that can be made, but hopefully there wont be any.

Added a function that clears the rows and columns when all cells are filled. Also just realized i havent shown mobile version so heres a video of the game in its current state on IOS Safari.

In this devlog i created a ghost preview of where the shape is about to be placed on the grid. Lowkey didnt know what to do when starting cuz i have never done this, but then i realized the calculation is more or less the same as placing it on the grid, but instead of placing it you just draw it with an offset.

Solved the problem from previous devlog. Basically when dragging and dropping block shapes onto the grid, certain shapes would place one cell off from where the mouse cursor indicated. Some shapes placed correctly while others didnt. Some would also overlap other blocks already on the grid.

It had two problems:

1. When picking up a shape, the code immediately centered it on the cursor, causing a “jump” effect. The original click position relative to the shapes center wasnt preserved during dragging.

2. The pointerup handler calculated grid placement from the shapes center using Math.floor(shapeSize / 2) offsets. This created inconsistent results. Even sized shapes (2x2, 4x1) center falls between grid cells. Odd sized shapes (3x3, 1x5) center falls on a grid cell using the same offset calculation for both caused the 1 cell placement error. Solved this by calculating from top left instead of center and then rounding with Math.round() giving it a better “snapping” to grud behaviour.

The overlap issue was a because of this misalignment. the shapes would calculate their grid position incorrectly which woulsd bypass the isValid checks intended cell allowing placement on cells that were already filled.

Yeah anyways other than that bloody issue, i added a feature that removes placed shapes from the hand and generates a new hand when the current one runs out.

The shapes are now placable on the grid by dragging them. They should not be able to be placed if the shape is outside the grid or if the shape overlaps other blocks. As you can see in the video it still places the shape as long as the start position is inside the grid. It should only place when the whole shape fits. I will fix this next time.

Finally finished the dragging function it works on both mobile and pc. On mobile the browser started to scroll when dragging the pieces so i used “touch-action: none;” in the css for the Canvas element which solved the problem. I also separated shapes, game config etc into own files so they are better managed.

Just wanted to make a quick devlog. I have made it possible to create a hand of three shapes that generates randomly. Currently im working on making them draggable but that will come in the next devlog so all this time didnt just go into placing them lol.

Worked on the shapes and a function to place them on the grid. Heres a little showcase of some of the shapes like S shape, Z shape, Big small L shapes, corner shapes, squares etc placed on the grid using the new function. You can also look at the console to see how the grid updates.

created the blocks and the glossy effect which was a little more difficult than expected. Also adjusted grid and background color.

Started with the setup of the canvas. Then i created the grid layout for the game. Might change later as perfect styling isnt the priority yet.

The project is basically done now. I added better punctions and number generations with capitalization on words that comes after a word that ends with “. ! ?” etc. I worked on the mobile version aswell as the ReadME.

So i went a different route than i started the previous devlog with. Instead of rolling through new quotes and removing old ones from the DOM that caused alot of problems i decided to just scratch that idea and get a big list of words (got from monkeytype repo) and just generate some random words on the page and add punctuation and numbers option. Not perfect spawn rate for those yet but will improve it. On passsage mode i decided to keep the easy, medium and hard options for the quotes. If you think thats alot of changes for 30 mins you are right. I lost over 1 hour of work because of some bug that didnt let flavortown sync correctly with hackatime

i added a confetti animation when beating your high score. Also i added function that loads in new quote when you are about to reach the end of the current quote. IDK if its just my laptop being hella slow and bad but it had a lot of performance issues when it the quotes started to pile up so i had to solve that by creating a DOM cleanup function that just removes the spans that are out of view. Doing this made alot of problems and i had to work around them aswell as restructure my code. Right now the layout shifts when loading and unloading the quotes but i will hopefully fix that when i have the time.

Worked on the stats calculation a bit also added function that prevents you from going back with the backspace to a previous word. Basically if space is entered in its correct place it marks it as word completed and you cant go back beyond that point. The keypress is still measured in the accuracy calculation. Also i added personal best function that gets saved in localstorage. For that i added different overlays. One is standard test complete that pops up if nothing special happens. The other one pops up when you completed a test for the first time marking your baseline. The third one pops up when you beaten your best score.

Biggest change here is a test completed screen overlay that shows your stats in the end. The reason why this took so long is because i started creating a type of start screen and finished it but then i thought whats the point in a start screen? it would just be an inconvinience so i removed it. Then i worked on the test over overlay which took long because of the css which is a pain. Also small changes like removing text in the restart button and i changed the accuracy calculation by still counting the mistakes you corrected.

I have limited the lines to show max three lines and scroll as you type. It starts scrolling each 2nd line. I tried so many different method for this one as one solved a problem then caused another etc. In the end i found the solution but then the caret wasnt updating properly all i needed was to place the scroll function call so it happens before updating the caret position then i had to remove the smooth scroll behaviour in the CSS so the delay would be gone and update it instantly. Also removed the underline on the correct characters so its a bit more readable.

Wow this took a long time. I added WPM, accuracy stats and timer for timed and passage mode. I also improved the resets and added endTest function. The WPM calculation took so damn long to figure out myself. Shouldve just searched for the formula lmao.

The site now gets a quote from my data.json file that has all the quotes saved. Firstly it gets the difficulty that user has selected (default is easy) then it gets quote array of that difficulty and selects a random quote from that to display. I also centered the text so it looks a bit better

Added a caret and function for the reset button. The rest of the things doesnt have a function yet but soon it will. I also kind of blocked the hidden input by disabling the arrow keys and keeping the inputs caret at the end so the user cant accidentally go back and only be where the visible caret is. Heres a video of how it looks rn. Pls excuse my bad typing lmao

I finally got the typing working. It tracks each letter typed and adds a incorrect or correct class. The backspace works correctly aswell. Took long because i put three equal signs on the null check so it only checked if it was null and not undefined so it never removed the classes when using backspace lol. When i realized i removed one = and it worked again

Finished the mobile layout and the desktop layout. Tried to make it as responsive as i could but hadnt worked properly with CSS for a long long time so i was a little rusty. Took a bit much time to get this layout right even tho its a simple one.

doing a quick devlog. i finished the dropdown menu for difficulty and mode. Also added toggle on and off function for it that toggles the visibility by adding and removing a “show” class. also started with the actual typing area. Basically the text will go over the user input and the user input will be hidden so it looks like you are typing the letters.

Gonna be making a typing speed tester. i started with the layout of the page. Doing the mobile first approach.

(Video filmed on ios) I added some animations to the gameover screen. Also transition fade on every state aswell as a «flash» when the bird dies. The score button now allows you to reset your best score and the share button opens up the webshare for your device. The game is done now :D

Added audio that works on Safari. I tried the HTML5 Audio API (new Audio()) but it caused delays and lag because safari blocks playback until the user interacts with the page. So i researched a bit and found out about the Web Audio API. With this i can preload sounds into buffers for instant playback, but audio must be unlocked with a user interaction the first time, after that sound plays very well across the browsers i tried. The audio files arent big so shouldnt take much memory.

Finished creating the UI and its functions. For now the score and share buttons doesnt have any function. I made the code more separated so the UI events are in a different file from the Ui render and i fixed some glitches with the bird, pipe and UI. The menu/start screen and the get ready screen aswell as the pause and unpause works. Next up are sounds and then maybe animate the Ui to pop up different times than each other but idk yet.

I created the game menu UI. For now only the start button works. i changed bird physics (again lol) for better flapping. I also added sparks to the scoreboard medal like it has on the original game. The game states were hell to manage so i did rework and created a central game state manager that has all the game info so i can access them in any file by just importing one thing and check if game is paused, what screen its on etc.

I changed the bird physics so they match the OG flappy bird game a little more by sort of “hanging” angled upwards when flapping then rotating fast downwards again. It may not look like much changed but i did ALOT of rewowrk in the code because my game file was very cluttered so i had to separate UI logic into its own file and collisions etc into the pipe file.

Added a “NEW BEST” with a badge and a score saved in localstorage. also added medals where you get a bronze medal at score 10, silver on score 20, gold on 50 and platinum on 100. And made the digit 1 smaller on the score so it looks better and not wide. The game is slowly finishing.✌👌

since i found out how to improve the quality of assets on the canvas i decided to try out one singular spritesheet instead of so many images loading on the screen etc. The spritesheet is now almost just as good as the singular images. I sat there writing coordinates for like 30 assets on the spritesheet lol. Also changed a bit of code so it uses the new coordinates. Some things broke but i fixed them :). btw it looks better ingame than this image

The assets i used earlier were blurry due to scaling so i had to fix their size and pixels using piskelapp.com. I recreated the number images aswell as the scoreboard then had to test it on the game again and again with different sizes. At last i added a bird flap animation and changed the canvas code so the game looks crispier.

added the score logic. the number 1 on the score numbers look a bit out of place ooof

removed and changed some code, better pipe and bird collision interaction, game over image at the end, changed the canvas height and width. Also took hella long with try and error because some assets were low quality so i tried to make it look better in the game but didnt work so im saving that for last :(((

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.

worked on the pipe collisions. not perfect yet but it will be :D

fixed and improved some code and added bird class with gravity and controls. The bird rotates when flapping and falling. no collision logic yet

Created the pipes with random Y positions. this took longer than expected because i was learning about Classes

Created a canvas and made it responsive. Added the background image, ground image and bird image, the bg and ground moves in a gameloop so it looks like its going forward.

Big wiring mess lol but i added a menu and a 2 player mode. Also added a buzzer for sounds and cleaned up code. Basically done now.

Created the scores logic and made it a bit more challenging. When someone loses it will shoot the ball to the winners direction. Also increased ball speed and it spawns in random position on the Y axis. Might change from potentiometers to buttons as it gets tiring to play lol also will add 2 player mode sometime.

Fixed collision stuff and added CPU logic. The game is now playable with an opponent. The CPU is only allowed to move once the ball is on the right side which makes the game winnable.

Added ball and collision logic. The ball bounces

Found out how to move the paddle with the potentiometer. Im learning everything new so taking some time🫣

Set up the libraries and the oled display and drew one rectangle to test it