Show HN: Vanilla JavaScript refinery simulator built to explain job to my kids
Hi HN, I’m a chemical engineer and I manage logistics at a refinery down in Texas. Whenever I try to explain downstream operations to people outside the industry (including my kids), I usually get blank stares. I wanted to build something that visualizes the concepts and chemistry of a plant without completely dumbing down the science, so I put together this 5-minute browser game. Here's a simple runthrough: https://www.youtube.com/watch?v=is-moBz6upU . I pushed to get through a full product pathway to show the V-804 replay. I am not a software developer by trade, so I relied heavily on LLMs (Claude, Copilot, Gemini) to help write the code. What started as a simple concept turned into a 9,000-line single-page app built with vanilla HTML, CSS, and JavaScript. I used Matter.js for the 2D physics minigames. A few technical takeaways from building this as a non-dev: * Managing the LLM workflow: Once the script.js file got large, letting the models output full file rewrites was a disaster (truncations, hallucinations, invisible curly-quote replacements that broke the JS). I started forcing them to act like patch files, strictly outputting "Find this exact block" and "Replace with this exact block." This was the only way to maintain improvements without breaking existing logic. * Mapping physics to CSS: I wanted the minigames to visually sit inside circular CSS containers (border-radius: 50%). Matter.js doesn't natively care about your CSS. Getting the rigid body physics to respect a dynamic, responsive DOM boundary across different screen sizes required running an elliptical boundary equation (dx * dx) / (rx * rx) + (dy * dy) / (ry * ry) > 1 on every single frame. Maybe this was overkill to try to handle the resizing between phones and PCs. * Mobile browser events: Forcing iOS Safari to ignore its default behaviors (double-tap zoom, swipe-to-scroll) while still allowing the user to tap and drag Matter.js objects required a ridiculous amount of custom event listener management and CSS (touch-action: manipulation; user-select: none;). I also learned that these actions very easily kill the mouse scroll making it very frustrating for PC users. I am hoping I hit a good middle ground. * State management: Since I didn't use React or any frameworks, I had to rely on a global state object. Because the game jumps between different phases/minigames, I ran into massive memory leaks from old setInterval loops and Matter.js bodies stacking up. I had to build strict teardown functions to wipe the slate clean on every map transition. The game walks through electrostatic desalting, fractional distillation, hydrotreating, catalytic cracking, and gasoline blending (hitting specific Octane and RVP specs). It’s completely free, runs client-side, and has zero ads or sign-ups. I'd appreciate any feedback on the mechanics, or let me know if you manage to break the physics engine. Happy to answer any questions about the chemical engineering side of things as well. For some reason the URL box is not getting recognized, maybe someone can help me feel less dumb there too. https://fuelingcuriosity.com/game
Discussion Highlights (19 comments)
fuelingcurious
Hello y’all as the post says, certainly a novice stepping into y’all’s space, but I am passionate that we can use the newest form of coding to allow us to change the way we teach. I think it’s a different way to use AI to teach, not having it explicitly do the teaching, but a way to extract context from different backgrounds into more fun learning tools.
Tacite
It's very good and you can be proud. Your kids should be too!
zbuttram
Great to see a spiritual successor to SimRefinery[1] after all these years! [1] https://en.wikipedia.org/wiki/SimRefinery
insin
Phase 1b: The Desalter doesn't show anything on the grid in Firefox (v148.0.2), so you automatically lose.
TheGamerUncle
Hi sorry do you have the code for this I have been delaying to work on something like this but would love to use this as boilerplate.
sealthedeal
This is awesome
bcze56bbn854
Thanks I really liked it and it taught me a lot
ecshafer
Great little education game. Sulpher particles move really fast, might be worth slowing them down 20%. I was basically random clicking to get them.
usui
I just want to say that despite the AI negativity in other places, this highlights the positive aspect of it. I'm sure this could have been done without it, but I'm glad OP could get it out faster for a low-risk use case, shared it with us, and in the process taught a little bit of refining to others. It's a fun minigame.
why_only_15
Very cool stuff! Thank you for making.
dwringer
I accidentally clicked through the explanatory text after the first slide (I was still clicking the pump and didn't realize one more click was going to skip through); I have not been able to get the applet to rewind back to the beginning.
nkalupahana
I think it would be great if the game also talked about various negative externalities at different points in the process (pollution, etc.). IMO would go a long way in making the game more well-rounded, and would add more varied content.
jason_s
OOH! Neat! I looked on my mobile phone enough to get a sense of what this is. I'm not in the petroleum industry, but about 45 years ago I was mesmerized at an energy fair at my elementary school by this Exxon magazine that showed the refinery flow with a bunch of little dots: https://archive.org/details/p-2330663/P2330670.JPG
lfpeb8b45ez
This is great, but I really thought it was going to go from crude oil to refinement to data centers to LLM tokens to explain every software developer’s job!
pmoati
The "patch file" approach for LLM output on large files is spot on. I've hit the same wall and forcing targeted replacements instead of full rewrites is the only sane way past a certain codebase size. Also respect for managing state manually in 9k lines of vanilla JS without reaching for a framework.
i-dont-remember
This is really cool, i love seeing a fun interactive game tied in to deep knowledge about an industry.
profsummergig
This is amazing, and there should be these for every profession and job in the world. However, I also want to be able to auto-speedrun something like this, without intentionally "playing" a game. So that I can sit back and watch what's involved in a profession, without having to make lots of decisions.
yesthisiswes
TIL I should never be responsible for hot swapping pumps! Great idea and execution. We need more of these types of projects to exist in the world.
fy20
Just wanted to say, great job!