HN Explorer

61 comments

[ 3.4 ms ] story [ 137 ms ] thread
jacquesm
There is a puzzle with a few million BTC as the prize! So far nobody has claimed it, we'll see if it stays that way.
[deleted]
(comment deleted)
Lewton
If you’re talking about guessing the keys for satoshis wallets then I guess you’re technically correct :p
tlb
Supposing I had a solution to that puzzle, how much real money do you reckon I could turn that into? Given that the exchange rate would drop dramatically as I started selling.
jimnotgym
I suppose it depends on how long your willing to take to liquidate it
caymanjim
I think the Satoshi coins are in many small wallets of ~50 BTC each, so there's no one-shot win there.
csomar
Technically speaking all of the bitcoins are up in the prize.
jacquesm
That was the puzzle I had in mind.
anonfunction
I got through the first 6 css pixel perfect challenges but got stuck on the last one where I couldn't get the gradients to match.
tiddles
Would you have any hints for puzzle 3? The power of CSS has far overtaken me in the last few years.
solox3
It involves a "border" style.
tiddles
Thanks, those lines in the corners threw me off.
notamy
I got stuck on the 6th one -- I can get everything perfectly aligned, but I'm using border + border-radius which renders with a few pixels missing :(
YetAnotherNick
Funny I am stuck at the pink triangle, but my gradients are mostly matched. I used the Mac's color picker and what it gave me doesn't work, even though both target and result are showing exact same rgb value in that :(.
tiddles
It's both that and the circle that I can't get past now :) Extending the circle's height to what should be correct screws up the whole diff and paints a load of stripes across it...
johndough
I found that `clip: rect(0px, 0px, 0px, 0px)` does not work, but fixes the stripes bug.
nathan_f77
Sorry about that, I made it too difficult! I've updated the last puzzle to remove any gradients and transforms, so it should be much easier now.
Syssiphus
It's possible to interpolate the correct values with a screenshot, the gimp and a calculator.
nathan_f77
Nice work, that's exactly what I had in mind when I wrote it.

For anyone else reading this - The puzzle has been updated to remove the gradients and transform, so it should be much easier now.

koala_man
TL;DR from the web site:

>I know this isn’t really a “programming challenging”

nathan_f77
Yeah I wasn't sure if I should include this CSS game, or where to put it. But I think it's a fun "warm-up" exercise, and stages 2-4 have some very challenging programming puzzles. Thanks for the feedback, I'll try to update the wording in the post!
mattlondon
The first puzzle 0 does not work at all on Firefox 64. The Target Result and Difference areas are entirely blank. There are no errors in the console.
nathan_f77
That's surprising, I tested this on Mac with Firefox 64, Chrome, and Safari. Which operating system are you using, and could you try disabling some extensions?
Topgamer7
I got through the last css puzzle, but kept telling me that like 17 pixels are different. They were as identical as one could get it...
nathan_f77
Sorry about that, I made it too difficult! I've updated the last puzzle to remove any gradients and transforms, so it should be much easier now.
Lee201
Got through the first puzzle, found the wallet empty - someone's already on the hunt!
eat_veggies
It's possible to complete the first challenge without writing any CSS -- just deactivate break points to bypass the anti-debugger loop, and then use react dev tools to modify state and set the `completed` key to true :)

5Kbf6NSm6SABiMHwDcuZKY17fmCsnsKRYxR4hcnGqfzPsTeZnEj

nathan_f77
Nice work!
nathan_f77
Update: I've disabled React DevTools, and have also encrypted the puzzle solutions.
userbinator
I hope the OP has learned his lesson about doing client-side validation in JavaScript ;-)
ziont
so 0.125 is 470 USD. did you end up getting that?
nathan_f77
This CSS game was just the first of four stages, but it had a prize of 0.005 BTC. The next two stages also have addresses with 0.005 BTC, and the last one unlocks the address with 0.125 BTC.
johndough
The link to the third stage does not seem to work (https://btc2018.formapi.io/d63c04b...). I get "btc2018.formapi.io’s server IP address could not be found." When visiting a wrong address, I get "Page not found" instead.
nathan_f77
Hmm that's strange, it's working fine for me. You could maybe try a different browser, or curl on the command line.
johndough
Oh, I've been had :D

Too bad I didn't know about the Dinosaur game in Chrome.

nkshio
got through all of them, and found all to be empty. wondering if anything was there at all to start with :(
YetAnotherNick
Wow! How did you solve it this fast? Your comment is at max an hour after anyone solved first question. I gave up in second question.
nathan_f77
Don't worry, they were just trolling and trying to stop other people from doing the puzzles.

But someone was able to solve the final puzzle 24 hours after it went live. I'll be writing up some blog posts with the solutions.

dasmoth
Really nice idea.

One thing that's adding to the "frustration factor" of the CSS problems is that the updates seem rather racy (Firefox 63, MacOS), in the sense that if you edit further while an update is already running, it doesn't seem to trigger a further update. Makes moving things around 1px at a time more annoying that it should be.

(I'm another one stuck with a just few pixels difference on the triangle for CSS Puzzle 7. Once someone's claimed the final prize, might there be an option to skip through to the later puzzles?)

Signez
Ah, it's reassuring to see other people getting mad on that triangle. I am very curious to see the solution for that thing in particular, as I found all the other CSS puzzles way easier :)

My personal best (9px left): https://i.imgur.com/A0LIDxT.png

nathan_f77
Oops, sorry about that! The solution involved `transform: rotate(81deg);`, but now I'm realizing how frustrating that was.

I've updated the last puzzle to remove any transforms, so it should be much easier now, and you can move on to the next stage.

nathan_f77
Sorry, yes I'm realizing that I made the last CSS puzzle too difficult. I've just updated it and removed the gradients, so it should be a bit easier now.
johndough
I've been messing around with that triangle for half an hour now. Gradients were comparatively easy.
nathan_f77
If you still want to solve it and you still have the page open, here's a hint: `transform: rotate(*);`.

But if you refresh the page, I've made this last puzzle much easier by removing the `transform`.

johndough
The problem was that the triangle angle was more than 8 degrees but less than 9 degrees. Probably the triangles were constructed differently. Anyway, I started again from the beginning now so I can't test further.
nathan_f77
The angle was actually 81 degrees, and you probably had some different sizes for the borders. Sorry about that! The puzzle wasn't meant to be insanely difficult and frustrating until the end.
johndough
Maybe a flipped triangle is rendered differently.
explodingcamera
The css puzzle was definitiv fun but definitively frustrating due to inaccuracy and bugs of the html2canvas library.

However I have to say the second puzzle is pretty uninteresting. It just seems so arbitrary and just kills all possible fun by giving you exact instructions how you are supposed to complete it.

nathan_f77
Thanks for the feedback, and sorry about that! But if you can make it to the final stage, I think you might enjoy that one.
[dead] easymodex
The last css puzzle keeps breaking for me and I'm on the spot pretty much but then i get triangles of death over the whole image. Is there a way to continue with the other challenges?

EDIT: Tried on chrome and firefox and when i try to put the circle into position the image breaks.

[deleted]
(comment deleted)
syncerr
For anyone frustrated with the colors on stage 7:

    container: #660076
    triangle: #fd8abb
    circle: #fee376
[deleted]
(comment deleted)
halfjew22
Hey Nathan! I’m working on creating a website that is somewhat similar by much more wide scale that uses a pattern similar to this.

Email me at lustig@knophy.com if you’re interested in chatting. The idea has tremendous potential and I’m nearing completion of a prototype.

Thanks in advance, Michael

loueed
Thanks for the 0.005BTC - Client Side Dev :)

Edit: 500,000 Sat sounds better :P

nathan_f77
Hey well done, thanks for posting! Did you solve the first stage with the CSS puzzles?

I'd be really interested to know if you figured out the correct CSS, or if you found the solutions in the JS source, or if you disabled the debug protection and used the React Dev Tools. Haha I made a lot of mistakes here. But hacking/reverse engineering is all part of the challenge :)

loueed
I solved most of them using plain CSS except for the 7th puzzle, I had to right-click the solution canvas and view that within another tab so that I had access to the dev tools colour picker tool. Great puzzle though! Got me thinking about the possibilities of such projects.

A community run puzzle platform where people have to pay a few thousand Satoshi to play. Or simply a lottery style game that clocks out at midnight every day.

m-ou-se
All of the first challenge's puzzles can be solved with:

    .thing {
      background: url(data:image/png;base64,iVBO...);
      width: ...px;
      height: ...px;
    }
Where the image data is just the target image itself. :)