Re:HTML Kong
by paulirish on Saturday October 08, 2016 @05:25PM
(#12668801)
The game logic is held within the CSS, which has a rather beautiful obfuscation/formatting applied: http://kong.xn--8ws00zhy3a.com/kong.css
[ Parent
| on HN ]
Check out what happens if you disable the CSS. In Firefox: Tools / Web Developer / Style Editor / Toggle style sheet visibility (the little eye icon).
Any idea how to do it?
Author here. It was done with a Python script that parses the CSS into a stream of characters annotated with metadata saying whether the character is allowed to be escaped and whether whitespace can be inserted before or after it. It's then just a matter of breaking up the stream where whitespace is permitted and using the escaping to pad segments to the exact size required.
Definitely not recommended in production. Other than the obvious inefficiency, it was only supported in Chrome fairly recently (even though the CSS escaping rules have remained largely unchanged for 20 years or so). In this case, though, the game itself depended on recent bug fixes in Chrome, so there wasn't much point in worrying about compatibility with older versions.
Remove all the whitespace, and then add spaces and newlines in legal positions to make the wave pattern.
Edit: It also seems to add escapes to the text to make it a bit neater than what I suggested.
Re:HTML Kong
by asadlionpk on Sunday October 09, 2016 @02:05AM
(#12670072)
I want to know this too. Must be some grunt/gulp script.