This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine
What I Built
The Singularity News editorial team is pleased to announce that, to help everyone prepare for the upcoming events, they are trying to share all the knowledge gathered from interviews with carefully selected subjects in a lighthearted and interactive format. At the same time, they firmly reject any accusations that including the Halloween target audience had any negative influence on the outcome. - Mr. Slop
Unfortunately, I have to say that Halloween has lost quite a bit of its shine in the light of the future looming over our heads. So for the final week, I created this CCG = Collective Card Game.I borrowed the card game system from the Flogons. I didn't have time to fully develop the game in that project, but now I did. The CSS-based 3D rendering introduced there came in extremely handy, along with the pure HTML concept, resulting in a no-build development approach.
I think the game speaks for itself, and since it's a PWA, it can also be installed on mobile phones.
I also thought of those who don't like learning the rules of a new card game. Well, for them there's the Auto:on feature. By activating it, you can basically sit back and watch the game play itself like a movie.
no online multiplayer yet – the 4- and 7-player tables are played against bots
But the main point is that, throughout the game, you can interview every single card. And I'll just reveal that the final outcome was also created with some serious AI assistance.
I think that's enough for now.
The entire backstory and the characters — who, of course, have absolutely nothing to do with any real or fictional individuals — come from the world of my Singularity News feed.
For example, the Halloween target audience.
Keep reading and share your comment! SN::0001 |> SN::0010 |> SN::0011
Demo
https://singularity-news-ccg.vercel.app/
Code
https://github.com/Pengeszikra/singularity-news-ccg
This moment is the SCARIEST part of development!
When I noticed that Claude had based it on one of the articles in my Pure HTML series, I realized it had taken the concept so seriously that it even embedded the images directly into index.html.
How I Built It
Gemma – Gemma 4 (gemma-4-26b-a4b-it, via the Gemini API) and gpt-oss-120b (on Groq) was used. The whole build process is documented in PROMPTS.md – every prompt I gave the agent, in the original Hungarian.
Why Does Open Innovation Matter?
Open-weight models give me freedom: the same prompts run on Gemma 4 or gpt-oss-120b today, and later I can move to a local model to save tokens and money, without rewriting the game.
My Agent Session
The Spirit of It
The whole development process once again reminded me of what I wrote in my Vibe Archeologist article. I dug up solutions I had written almost two years ago, and by relying on today's slop coding techniques, I was able to implement them confidently and at an incredible speed.
Pure HTML + No Build System forever!!
And finally, I was able to develop the entire program from the director's chair, resulting in a game that can actually be played from beginning to end and always has a few surprises in store.
Prize Categories
-
Gemma – Gemma 4 (
gemma-4-26b-a4b-it, via the Gemini API) is the primary model of the game: it writes Mr. Slop's news ticker, the character interviews, the intro spoken by the first flipped card, and the final epilogue article built from your collected characters. gpt-oss-120b (on Groq) is only a fallback and can be selected manually with the in-game AI switch.
Thanks for watching!
Top comments (2)
This is a really fun card game! 😸
I actually felt a little rich while playing it. 💰
And I liked the idea that combining - and - turns into +. That’s such a fun little mechanic!
"Pure HTML + No Build System forever!!" 🙌
As a 12-year-old dev building entirely on a $150 Android phone, I feel this mantra in my soul. Bloat is the enemy, and constraints breed the most creative solutions.
The "Vibe Archeologist" concept is brilliant, and the way you leveraged Gemma 4 and gpt-oss-120b to dynamically generate Mr. Slop's news ticker and character interviews is incredibly clever. It’s a perfect example of using AI not just to write boilerplate, but to create a genuinely interactive, living experience (the "Auto:on" movie mode is a fantastic touch for accessibility, too).
This is a super inspiring submission for the Hacktoberfest challenge. It’s a great reminder that sometimes the most powerful "stack" is just raw HTML, CSS, and a clear vision.
Quick question: since you mentioned gpt-oss-120b is a manual fallback, did you find the latency or token costs significantly different between the two models when generating the in-game character interviews?
Amazing work, Peter! 🐯☁️