Show HN: Figure is a daily logic puzzle game
387 by sumul | 107 comments on Hacker News.
Hello, HN! Figure is a little side project I’ve been working on. Someone described it as Bejeweled meets Wordle. I built the puzzle interface and website in Next.js and React, which was a first for me and overall a great learning experience. The daily puzzle data is queued up in a PostgreSQL table. Another table stores anonymous solve stats. Once a day, a cron job hits a serverless API that promotes the next puzzle as “live” and prompts Next.js to update the prebaked static site with the new data. The game state is managed with Redux and your stats are persisted to localStorage. Framer Motion for animations. Styling is mostly Tailwind CSS. I use Figma for design and Logic Pro to make the sounds. I get a lot of questions about how the puzzles are generated. It’s not super sexy. I generate random grids of tiles and then run them through a brute force solver (sounds rough but the puzzles don’t feel anything). Every few days, I play through puzzles that look promising based on the solution space and pick some good ones to go into the queue. The rest are sent back to the void (again, painless). I’ve spent a little bit of time tinkering with a procedural generator, but so far the random ones are better. The downsides of the random approach are (1) the curation effort required, and (2) the high variability in puzzle difficulty. I have a feeling there’s a whole body of math and CS knowledge where Figure is an example of something that I don’t know the name for (imposter syndrome intensifies). As for the future of Figure, I feel strongly about keeping it free of ads, login walls, in-app purchases, or anything else that infringes on enjoyment or privacy. I’d also like to make sure Figure is accessible to everyone. English isn’t exactly required to play, but translations for the UI and website would be nice. I’ve tried to build Figure to be friendly to people who have color vision deficiency and people who rely on screen readers and keyboard navigation, but I have no idea if it’s actually any fun in these cases. Here are some miscellaneous thoughts… 1. It’s been surprisingly satisfying to build a web game with a modern frontend stack. I’ve noticed a lot of grumbling on HN over the years from OG web developers who yearn for the days of semantic HTML, a sprinkling of CSS, and vanilla JS. I was in that boat too and have grumbled plenty about the breakneck pace of frontend evolution. One of my goals with this project was to pick some popular frameworks and give them an honest try. I’m now a believer, but there’s still no way I can keep up with all the progress. 2. I found Tailwind awkward at first, but after a while I realized I was using Figma a lot less and just designing in code with utility classes, which is great for focus and flow. Having lived through the Web 2.0 standards revolution, it was hard to let go of some deeply rooted opinions about semantic purity, but overall I’m sold. 3. I really love side projects. At most jobs, you’re pushed toward specialization. Side projects allow you to build out a generalist skillset, which makes you better at your core job function and better at collaborating with others. It’s also liberating to explore and pivot around without time pressure. Figure started out as a 3D fidget toy in Unity where you fling projectiles at floating objects… 4. I made this game on my trusty 2013 MacBook Pro, which has been almost completely sufficient (ahem Docker ಠ_ಠ). I’ll probably get an M2 Air soon, but I’m reluctant to say goodbye to the best computer I’ve ever owned. 5. I’m very grateful for the people who build and maintain open source projects. It’s also delightful how many paid services offer generous free tiers to let developers play around: Figma, GitHub, Vercel, Supabase, and Pipedream, just to name a few that I’m currently using actively. If you work on FOSS and/or these excellent platforms, thank you. Anyway, hope you like it. Happy to answer any questions.
387 by sumul | 107 comments on Hacker News.
Hello, HN! Figure is a little side project I’ve been working on. Someone described it as Bejeweled meets Wordle. I built the puzzle interface and website in Next.js and React, which was a first for me and overall a great learning experience. The daily puzzle data is queued up in a PostgreSQL table. Another table stores anonymous solve stats. Once a day, a cron job hits a serverless API that promotes the next puzzle as “live” and prompts Next.js to update the prebaked static site with the new data. The game state is managed with Redux and your stats are persisted to localStorage. Framer Motion for animations. Styling is mostly Tailwind CSS. I use Figma for design and Logic Pro to make the sounds. I get a lot of questions about how the puzzles are generated. It’s not super sexy. I generate random grids of tiles and then run them through a brute force solver (sounds rough but the puzzles don’t feel anything). Every few days, I play through puzzles that look promising based on the solution space and pick some good ones to go into the queue. The rest are sent back to the void (again, painless). I’ve spent a little bit of time tinkering with a procedural generator, but so far the random ones are better. The downsides of the random approach are (1) the curation effort required, and (2) the high variability in puzzle difficulty. I have a feeling there’s a whole body of math and CS knowledge where Figure is an example of something that I don’t know the name for (imposter syndrome intensifies). As for the future of Figure, I feel strongly about keeping it free of ads, login walls, in-app purchases, or anything else that infringes on enjoyment or privacy. I’d also like to make sure Figure is accessible to everyone. English isn’t exactly required to play, but translations for the UI and website would be nice. I’ve tried to build Figure to be friendly to people who have color vision deficiency and people who rely on screen readers and keyboard navigation, but I have no idea if it’s actually any fun in these cases. Here are some miscellaneous thoughts… 1. It’s been surprisingly satisfying to build a web game with a modern frontend stack. I’ve noticed a lot of grumbling on HN over the years from OG web developers who yearn for the days of semantic HTML, a sprinkling of CSS, and vanilla JS. I was in that boat too and have grumbled plenty about the breakneck pace of frontend evolution. One of my goals with this project was to pick some popular frameworks and give them an honest try. I’m now a believer, but there’s still no way I can keep up with all the progress. 2. I found Tailwind awkward at first, but after a while I realized I was using Figma a lot less and just designing in code with utility classes, which is great for focus and flow. Having lived through the Web 2.0 standards revolution, it was hard to let go of some deeply rooted opinions about semantic purity, but overall I’m sold. 3. I really love side projects. At most jobs, you’re pushed toward specialization. Side projects allow you to build out a generalist skillset, which makes you better at your core job function and better at collaborating with others. It’s also liberating to explore and pivot around without time pressure. Figure started out as a 3D fidget toy in Unity where you fling projectiles at floating objects… 4. I made this game on my trusty 2013 MacBook Pro, which has been almost completely sufficient (ahem Docker ಠ_ಠ). I’ll probably get an M2 Air soon, but I’m reluctant to say goodbye to the best computer I’ve ever owned. 5. I’m very grateful for the people who build and maintain open source projects. It’s also delightful how many paid services offer generous free tiers to let developers play around: Figma, GitHub, Vercel, Supabase, and Pipedream, just to name a few that I’m currently using actively. If you work on FOSS and/or these excellent platforms, thank you. Anyway, hope you like it. Happy to answer any questions.
Comments
Post a Comment