Devlog 1: I actually ported Balatro to the web…

Total time logged: ~3h 15m (hackatime wasn’t working because I was on windows today instead of linux, but I put in around 2 hours that werent logged)

Not gonna lie, this was way harder than I thought it would be. But the base web port of Balatro is officially working!

It took over 3 hours of dealing with random compilation errors, broken shaders, and browser crashes, but it runs insanely smooth now. Here is everything that went down to get it working.

i hope i dont get sued or anything cuz i posted the straight files, i will probably add some thing where you can import your game files and then it makes a webport

also, there is no website to play yet, thats coming next.

The stuff that broke (and how I fixed it)

1. WebGL and Shaders acting up

Balatro uses a ton of shaders for card effects, dissolves, and holographic stuff. Browsers are super picky about WebGL compared to desktop:

• Fixed loop issues in hologram.fs so the browser wouldn’t just crash when rendering cards.
• Fixed texture scaling issues so cards wouldn’t render as solid black rectangles.

2. Making saves actually save

In the browser, local file saves wipe as soon as you close the tab. That obviously sucked for a rogue-like game, so I fixed it:

• Forced love.js to use a fixed save folder name (Balatro).
• Made it automatically sync saves to the browser’s IndexedDB every 15 seconds and whenever you switch tabs. So now your run saves even if you refresh or close the tab.

3. Mobile touch controls

Playing on a phone was annoying at first because touching the screen made the browser zoom in or scroll the page.

• Blocked double-tap zooming, page scrolling, and pull-to-refresh gestures.
• Touches now map accurately directly to the cards and buttons.

4. The booster pack freeze bug

This was easily the worst bug. Opening a booster pack would completely freeze the entire tab with zero error messages in the console.
Turns out the game was getting stuck in an infinite loop while trying to generate cards for the pack view. Refactored the pack generation logic to yield frames properly, and now packs open instantly.

5. Build script and github setup

• Wrote a custom Python script (tools/build.py) so I can audit, patch, and build the whole web version with one terminal command.
• Set up Git LFS so heavy game files don’t bloat the git history.
• Added a GitHub Actions workflow to auto-deploy to GitHub Pages whenever I push code.

Current Status

• Base Web Port: Fully working
• Shader Fixes: Done
• Save Files: Working and persistent
• Mobile Support: Good to go
• Auto Deployment: Set up

What’s Next

Now that the actual game runs, the next goal is making mods work.

1. Injecting Steamodded into the web build so it can load custom Lua mods.
2. Adding an “Import Mod” button on the webpage so you can drag and drop mod files right into the game.
3. posting on website, will get a domain.
4. OPTIMIZATIONS! very important

(my devlogs look better too)

Another hour of coding today, and it led to a massive realization.

The 0.5.0 Wall (And Why It Sucked)

I spent today’s session trying to fine tune the “Zen Governor” speed penalty and fixing the text wrapping bugs. While the words are wrapping better now, actually using the extension felt terrible. I type pretty fast, and using my own extension was making me so mad that I wanted to stop working on it.

the screenshot I attached shows what the penalty was. basically, if you started writing too fast, it would add MORE to the poem. and it sucked. i tried playing around with the characters per minute timings but its just not very reliable and hard to perfect.

If a mindfulness app makes you want to punch your keyboard, you’ve built the wrong app.

the Epiphany

The whole typing-test framework is inherently stressful. If the app is tracking your typos, grading your accuracy, and monitoring your speed, your brain stays stuck in “performance mode.” You arent relaxing, youre just playing this game of “type as fast as you can”. while its fun to type fast, its not the point of this project.

So, I’m throwing the whole typing exam mechanic in the trash.

The Next Step: The “Brain Dump” Overhaul (v0.6.0)

For the next version, we are pivoting to something that actually feels therapeutic:

• Free-form Canvas: No more copying quotes perfectly. No more “incorrect” keys or rigid typing checks. You get an empty screen that asks: What’s making your mind busy right now?
• Dissolving Text: You type whatever raw thoughts are in your head. Exactly 1.5 seconds after you type a letter, it will smoothly fade, blur, and drift away into nothingness. Your stressful thoughts literally disappear from the screen.
• No Performance Metrics: Goodbye WPM, goodbye accuracy tracking. Just a simple counter showing you’ve let go of 50 characters. Once you type 50 characters of a raw brain dump, the overlay fades out, and the site unlocks.
• hopefully this 5.0 release will be the LAST, as this project is getting a little boring to work on…

This completely gets rid of the annoying spacing and indexing bugs too, because the browser can just handle normal text input natively. Time to rebuild this into something that actually brings some peace.

Well. I just spent 2 hours on the newest version. And for what…

This is the official 0.4.0 release.

It’s been a bit since my last devlog, and a lot has happened behind the scenes to finally bridge the gap between project and final extension. unfortunately, this is not the final.

First, a quick reality check on the layout. In my last post, I said the text was perfectly centered. It was… on my blank HTML test page. But the second I actually started testing the extension on live websites like YouTube and Twitter, their styles completely leaked into my code and broke it. So ye, the centering is currently broken but ill fix it one day. maybe

Here is a quick list of everything I actually changed and built since the last log:

It actually unlocks the page now: Once you finish typing the very last letter, the overlay just fades away. pretty simple for now, i might make it like a melting effect? not sure yet

• Bolder text & a clean new font: Like I said in the last post, the old text was way too small and thin. I cranked it up to 34px, made it a lot bolder, and switched it to Google’s ‘Roboto Mono’ font so it looks way niccer.
• Multi-line poems: You can type through short stanzas now instead of just flat, one-line quotes. I completely broke the extension at first because the cursor kept getting stuck on the invisible line-break characters \n, but I fixed the logic so it jumps lines.
• Escape to restart: Added a quick reset feature. Hitting the Escape key wipes your current progress and pulls up a fresh random quote.

The Plan

The code works well and everything feels incredibly smooth, but this 0.4.0 update is officially a halfway point and a place to rebuild.

After staring at the live WPM and accuracy counters ticking up while I was testing it, I asked my dad how it looked. He made me realize that I am literaly building the exact opposite of what I actually want.

The whole points of this Grounding project is to be a relaxing speed bump that encourages you to take a breath and get off your device. But by adding speed metrics and accuracy, I literally just cloned Monkeytype.
instead of calming your brain, i filled it with the dopamine hit like any game. you just want to get back to your social media even FASTER.

but what is next: For the next update, im making a big change. I am stripping away the stress metrics (byeWPM and accuracy) and shifting toward a more mindful experience. I am going to look into organic, calming color palettes and maybe even a mechanic that forces you to ‘slow down’ rather than type fast. Like, maybe if you type too fast, it generates more text for you to slow you down. Not really sure yet, but the speed type era is officially over.

i also learnedd more markdown so from now on my dev logs will look better.

huge update for grounding today.

first off, i fixed the layout issues from the last post. the text is finally centered on the screen and actually readable against the dark background.

but the biggest change is that the typing mechanic is officially here.
I shifted the text rendering to individual character spans so i could track keyboard inputs character by character. it completely mirrors the monkeytype feel now.

How it looks so far:

• characters start out a muted gray
• typing a correct key turns it a smooth offwhite
• typos turn a soft red
• i also got the custom caret (cursor) working.

it has a decent transition so it slides smoothly between letters instead of just snapping rigidly, and it flashes slowly when you stop typing (the animation is still going to be worked on cuz its not the best). backspace support is fully functional too, so you can actually go backward and correct your mistakes.

now, what’s next:

• making the overlay fade out beautifully once the quote is 100% complete
• also might make the text larger and bolder; its hard to read
• actually unlocking the restricted website after you finish typing
• expanding the quote pool with some longer, cleaner poems/quotes (i might try to get the quotes from some bank, not sure yet.)

Added some placeholder quotes. I have it randomly choose from a list of quotes that then displays on the overlay. Next update will make the text EASIER to see, and also i will add the ability to type and get into the social media. also its off center and ill fix that.

Finally started the extension. Googles docs for creating extensions is amazing, theres a full guide. i matched the coloring from MonkeyType, because thats where my inspiration comes from.

First devlog. Created the files, and created some small text to see how all of the work would turn out. Looks great so far.

Features to add:

1. Poems to auto show.
2. Compatible with more websites.
3. add the actual typing animations and everything
   4, clean up the code cuz its messy

With an array of commands, ChudBot is the perfect addition to the HackClub slack. I took my commands from my discord bot, and wrote it into a Slack bot! I hope everyone can enjoy this project as much as I did making it.