Show HN: Vanilla JavaScript refinery simulator built to explain job to my kids
fuelingcuriosity.com127 points by fuelingcurious 5 days ago
127 points by fuelingcurious 5 days ago
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
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. This is a great example of the kind of 'good enough' software that LLMs enable. Before LLMs existed you'd either hire someone to do this an exorbitant cost or you'd pick up a second full time job learning the nessessary skills. This software doesn't need to be massive scaled, hyperperformant, and absolutely bug free. It just needs to do its job well enough, which it does. I am also a (non-software) engineer and although I can write software (poorly) I have also used these tools to do some things that previously just wouldn't have gotten done. We still need people to do Serious Software but for millions of little applications like this LLMs are a game changer. Thank you for the support! I tell my team this all the time, there’s no point in building systems that we rely on to be perfect to integrate LLMs, but we can use them to low risk workflows that otherwise would never get coding/automation support. It’s really changed the way I work from opening up the ability to write deterministic code, but I’ve yet to see many instances that we could tolerate a “in-the-loop” LLM yet. 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 How awesome that you were able to find this! I’m only missing a couple! The SRU is my final hurrah that I’m trying to get the play dynamic right. Balancing air demand with sulfur load without overwhelming the screen with bars and widgets. > How awesome that you were able to find this! I’m only missing a couple! Missing a couple of features you want to add? The "able to find this" (the 1981 Exxon magazine) needs context to appreciate re: the dispersion of certain personal belongings over time. I would have picked the magazine up in 1981 or 1982 (possibly 1983) at the school energy fair, and it remained in my physical possession for the next 40-something years. In elementary school I did not have a significant amount of possessions outside of toys. Then in middle school I got a small desk, and in high school I got a larger desk, and it ended up in a folder of "neat stuff" that I saved. Then after college my stuff from the desk ended up in a banker's box, which I still have, along with a couple of other boxes of stuff from that era. This year I looked for maybe 20-30 minutes and found it. I still have all of my copies of Compute's Gazette from the mid-late 1980s. I will say that it is amazing to be able to go online and find all sorts of old computer/electronics/whatever magazines from the 1950s-1980s on archive.org or bitsavers or worldradiohistory.org and there they are... unless they're not. A couple of units that were shown on your page, but that is a very cool note. You never know when something leaves a lasting impression on someone! Just a meta-comment, this is the first time in my years on HN that every single comment on something is positive! You’ve really created something special here - and given a lot of people a brighter day. Thanks for sharing it! Thanks for sharing that insight! I hope you learned something in the process as well! I hope to find time soon to incorporate all the ideas found in the comments. 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. Thank you, almost like you read my manifest for this haha. I was concerned the learning would get overshadowed by the LLM use. Hope you learned some interesting facts that help you understand the why of refining a little bit more. I started developing this before the conversation around oil became mainstream media again. Great to see a spiritual successor to SimRefinery[1] after all these years! I’ll take the compliment! My goal was to keep each unit to simple tap and drag play dynamics. If there’s another curiosity, mechanical, electrical, another unit, I can add it to the development plans. It’s fun for our family! 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. Phase 1b: The Desalter doesn't show anything on the grid in Firefox (v148.0.2), so you automatically lose. Ah interesting, I have playtested on safari, chrome, and edge. I’ll have to look into what’s unique there. Thank you! Up-to-date Firefox on Linux allowed me to complete certification of a shipment of Jet fuel, no trouble all the way through. Great concept and execution. Hurray! Thank you for the update note. I was going to get after it tonight after I put the kids to bed otherwise. On Win11 Firefox latest (148.0.2), I still cant see them :\ You owe me nothing! I just wanted to let you know! If you open the Firefox inspection window, right-click any element on a webpage and select Inspect. Alternatively, use the keyboard shortcut Ctrl+Shift+C (Windows/Linux) or Cmd+Option+C (Mac). You can also access it via the menu button (three horizontal lines) -> More Tools -> Web Developer Tools. Does it show any errors? I figured out why it wouldn't work on my machine: Same reason for me, I don't want animations specifically in my OS. I wish there was a separate OS-level setting for apps. Ah! Tried to add an accessibility feature and broke it! I’ll see what I can do to find a better middle ground. 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! Haha man maybe I’ll add a track to keep going until you arrive at the website hosting the Great Refinery Run. Energy-ception 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. Interesting! I could add a “just the facts” button in the bottom section that lets you go through all the fun fact slides I built? Also, thank you for the compliment! I would love to partner with folks to build more professions and host them under Fueling Curiosity. It's very good and you can be proud. Your kids should be too! Thank you! They call themselves my play testers and ask to see if I have added anything new almost daily for the last week or so. I have a bonus level for the SRU I’m trying to perfect. This is really cool, i love seeing a fun interactive game tied in to deep knowledge about an industry. Thanks! I would love to hear your biggest takeaway or follow up curiosity. 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. If you hard reset, it will erase your save file cookie and forget your progress. Another option, if you push through to the end and deliver your first product, you unlock the refinery map feature and can jump back to the extraction step! 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. Fair, I can think through adding risk points where poor stewardship can exasperate these concerns. Thank you for your feedback. 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. I hope you found the procedure! Sometimes learning by failure and that your intuition doesn’t always win is the best lesson! Thanks for playing! Great little education game. Sulpher particles move really fast, might be worth slowing them down 20%. I was basically random clicking to get them. Fair point, I have a rebound energy and terminal velocity set, still lower the top speed! Thanks for the feedback. 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. Hello! Thank you for the vote of confidence! I deliberately left the client-side JavaScript un-obfuscated (AI showed me how to do it, but then I undid it for posting here). A colleague of mine started talking about selling it as a training tool, but ha I don’t know if that is in the cards. If you send me an email, we can talk about helping you get a head start! Very cool stuff! Thank you for making. Thank you for playing, would love to hear the most interesting fact or minigame you enjoyed the most! Just wanted to say, great job! Thank you! Share with your colleagues! It’s important folks understand how oil and gas works with so much unrest. This is awesome
fuelingcurious - 5 days ago
idiotsecant - 5 days ago
fuelingcurious - 5 days ago
jason_s - 5 days ago
fuelingcurious - 5 days ago
jason_s - 3 days ago
fuelingcurious - 3 days ago
cadamsdotcom - 16 hours ago
fuelingcurious - 14 hours ago
usui - 5 days ago
fuelingcurious - 5 days ago
zbuttram - 5 days ago
fuelingcurious - 5 days ago
pmoati - 5 days ago
insin - 5 days ago
fuelingcurious - 5 days ago
cameron_b - 5 days ago
fuelingcurious - 5 days ago
superxpro12 - 5 days ago
fuelingcurious - 5 days ago
joeframbach - 5 days ago
With reduced-motion enabled (which is basically required in Tahoe :eyeroll:), animations complete immediately and there is no chance to click the salt/water. @media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
insin - 2 days ago
fuelingcurious - 5 days ago
lfpeb8b45ez - 5 days ago
fuelingcurious - 5 days ago
profsummergig - 4 days ago
fuelingcurious - 4 days ago
Tacite - 5 days ago
fuelingcurious - 5 days ago
i-dont-remember - 4 days ago
fuelingcurious - 4 days ago
dwringer - 5 days ago
fuelingcurious - 5 days ago
nkalupahana - 5 days ago
fuelingcurious - 5 days ago
yesthisiswes - 4 days ago
fuelingcurious - 4 days ago
ecshafer - 5 days ago
fuelingcurious - 5 days ago
TheGamerUncle - 5 days ago
fuelingcurious - 5 days ago
why_only_15 - 5 days ago
fuelingcurious - 5 days ago
fy20 - 4 days ago
fuelingcurious - 4 days ago
sealthedeal - 5 days ago
