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
Terr_•3h ago
"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.)
Contortion•2h ago
Terr_•2h ago
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.
cookiengineer•2h ago
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:
https://cookie.engineer/design/consent/index.html