I used the time over Christmas and in between the years to redesign my website.
This time I decided to make it in the theme of an evil Sith Lord that commands the Galactic Cookie Empire, because I found my previous cookie consent game a bit boring after a while.
Here's the website's welcome page and the cookie consent game: https://cookie.engineer/index.html
(the cookie consent game isn't started on any other page of my website, only on the welcome page)
I also made a "making of" weblog article series, in case you're interested in the development process and how I implemented it and what kind of troubles I went through already:
- Making of the Game: https://cookie.engineer/weblog/articles/making-of-my-website...
- Making of the Avatar: https://cookie.engineer/weblog/articles/making-of-my-website...
- Debuggers to toy around with: https://cookie.engineer/design/consent/index.html
It "should" work on modern browsers. I tested it on Firefox on Linuxes, Chrome/Chromium on Linuxes, and Safari on Macbook. Don't have an iPhone so I can't test that, but my two old Android phones were also working fine with the meta viewport hack (I can't believe this is still the "modern" way to do things after 15 years. Wtf).
Best experience is of course with a bigger display. On smaller screen sizes, the game will use a camera to zoom around the game world and follow the player's spaceship. Minimum window width is 1280 pixels for no camera, and I think 800 pixels to be playable (otherwise the avatar gets in the way too much in the boss fights).
Oh, there's also a secret boss fight that you can unlock when you toy around with the Dev Tools :)
What's left to do on the avatar animation side:
- I have to backport CMUdict to JavaScript / ECMAScript. That's what I'm working on right now, as I'm not yet satisfied with the timings of the phonemes. Existing tools and pipelines that do this in python aren't realtime, which leads to my next point.
- I want to switch to using the "waveform energy detection" and a zero cross rate detector to time phonemes more correctly. I believe that changes in waveforms and their structures can detect differences in phonemes, but it's a gut feeling and not a scientific fact. Existing phoneme animation papers were kind of shit and broken (see my making of article 2). The phoneme boundary detector is highly experimental though and is gonna need a couple weeks more time until it's finished.
That's it for now, hope you gonna enjoy your stay on my website and I hope you gonna have fun playing the Cookie Consent Game :)
Oh, also, because it might not be obvious: No LLMs were used in the making of this website. Pretty much everything is hand-coded, and unbundled and unminified on purpose so visitors can learn from the code if they want to.
~Cookie
neogodless13 hours ago
Ha, I like the site, and enjoyed playing some of the game!
So when I saw the "About Me" image, I thought Gen AI - https://cookie.engineer/about/me/teaser.jpg But no LLM used for that? (No judgment, just after seeing that image, and then you declaring no LLM use, I thought I'd ask!)
cookiengineerop13 hours ago
> But no LLM used for that?
Well, I mean, I self-hosted stable diffusion to be able to generate the teaser images and the award images (for the ranks in the Game Over Dialog).
I only implemented the initial SD paper [1] back then so I have no clue whether the u-net architecture changed when it comes to the semantic mapping of the text/labels. Did that change and is Stable Diffusion 3 now an LLM, actually?
neogodless12 hours ago
Sorry, you know this stuff way better than me. I thought "gen AI" that generated visualizations / images used similar code, but as I say Large LANGUAGE Models in my head, I realize it must be something else (at least in name!)
Again this should in no way implicate a diminishing of the work and accomplishment of building your site. Just noticing some kind of "AI" (ANI) was used to make an image. Maybe worth clarifying for pedants like me (but probably not worth it ;-)!)
mmmlinux12 hours ago
This feels like moving the goal posts.
Terr_14 hours ago
Hot-take: "Oh, here's a link that says if I click it, someone will show off their artistic front-end design theme."
"I see flat colors and a list of recent project news. Nothing at the bottom. Is it the wrong URL? Or does it not work on my phone? Let's go back and check the HN comments."
"The submission has a bunch of text which doesn't seem to answer my immediate confusion. There's a game somewhere? Was that the wrong link? Did it not pop up correctly? Did I need to give the site special permissions?"
TLDR: This random user unfamiliar with the site is not sure what they were supposed to focus-on and notice/appreciate, and wasn't able to figure it out within a reasonable period before needing to put the phone down again. (Not including the time to write this follow-up comment.)
Terr_13 hours ago
Okay, so I think the problem here is that the "game" is easy to miss, when:
1. You have your audio off or volume too low.
2. You just don't interact with the bottom cookie prompt.
3. The prompt never shows up for some reason. Saw it a few times, but even after a lot of resetting cookies and reloading, I can't get it to show reliably.
I suggest a special URL parameter so that you can link people to a slightly deeper step in the process where It's obvious what they should be interacting with.
cookiengineerop13 hours ago
Could be that the avatar's speech is conflicting with an ongoing speech or sound track. Couldn't replicate it what you wrote yet, but gonna try to debug this a little more.
I had to put the initial things in a click listener, and then it's 3 seconds after the initial click when the cookie consent banner is shown (due to AudioContext API limitations and that they have to be a user gesture event that .resume()s the audio context instance).
> I suggest a special URL parameter so that you can link people to a slightly deeper step in the process where It's obvious what they should be interacting with.
The Debugger Views here show more details, and you can play the game just fine and toy around with it:
Contortion13 hours ago
My browser auto-declines cookies so I also had the same thought. On reloading I can briefly see a pop-over with a lot of text in it before it disappears, so I guess that is the cookie game I initially missed.
nailer13 hours ago
The site uses cookies, so needs a cookie warning. (monocle emoji)
cookiengineerop13 hours ago
Exactly, that's what the game is about!
nailer13 hours ago
Oh there is one, it just appears after a delay.
joduplessis14 hours ago
Lol, amazing! Love the voice.
