@rohanswamy

Phase 4 is done, and the game is finally starting to feel interactive instead of just being a static screen.

First off, I got the inventory pieces to actually respond when you click them. I added a variable to track what you’re holding, so now when you click a block, it highlights in gold. But honestly, the coolest part was hooking up the keyboard. I linked the R and F keys to the math I wrote back in Phase 2. Being able to just hit a key and watch the piece instantly spin or flip in the sidebar is so satisfying after staring at frozen shapes for days.

I also added click events to the main 14x14 grid. It’s not physically snapping the pieces onto the board yet that’s the big goal for Phase 5 but if you open up the console, it perfectly tracks the X and Y coordinates of wherever you click. Getting the code to remember which piece I had selected without glitching out the rest of the screen was kind of a pain, but the foundation to finally place these things is totally set now.

Phase 3 is officially done, and the game actually looks like a real game now. I got tired of looking at a blinding white layout, so I gave the whole UI a massive dark mode glow up with a sleek slate background and neon blue gradients for the blocks. The biggest victory this time was writing the inventory rendering system. I had to use three layers of nested loops to parse through the piece arrays, row by row, cell by cell, to dynamically generate the HTML for all 21 shapes. If a cell is a 1, the code paints it glowing blue; if it’s a 0, it keeps it transparent. It was a ton of lines of CSS and layout tweaking to get the grid to auto align nicely in the sidebar, but seeing all 21 polyominoes neatly lined up next to the main board instead of just reading them in the browser console is incredibly satisfying.

Just finished mapping out all 21 game pieces in JavaScript and wrote the code to rotate and flip them. The rotation math absolutely broke my brain I’m using nested arrays to swap rows into columns, and for a while, my shapes kept turning into weird, distorted blobs instead of actually spinning. Since these pieces only live in the game’s memory right now, the actual page looks exactly the same as my last update, but checking the browser console proves the math is working perfectly behind the scenes. Next up is finally getting these blocks to show up visually in the player inventory sidebar!

Got the basic 3 column layout done and the 14x14 game board actually rendering on the screen using a 2D JavaScript array. I ended up wasting a ton of time fighting my WakaTime tracker because the extension log was completely blank and wouldn’t log my hours, but a quick reinstall and re-pasting the API key fixed it. For the board itself, I stamped data x and data y coordinates right onto each HTML cell so the game can track clicks and hovers easily later. Now that the empty board is up and customized, I’m moving on to defining the 21 game pieces and figuring out how to rotate and flip them.