Show HN: I built a puzzle / programming challenge with a 0.125 BTC prize | Hacker News Reader

Show HN: I built a puzzle / programming challenge with a 0.125 BTC prize

formapi.io

48 pointsnathan_f7757 comments

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

Nice work!

Update: I've disabled React DevTools, and have also encrypted the puzzle solutions.

Or you can also find solutions directly in the source code. I see that someone moved out the funds 8 minutes ago ;)

https://www.blockchain.com/btc/address/1CSSrZSSRf1RyShKGsYXw...

Whoops, I assumed the obfuscator would encrypt those strings. I should have checked that more carefully. Oh well!

I hope the OP has learned his lesson about doing client-side validation in JavaScript ;-)

so 0.125 is 470 USD. did you end up getting that?

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.

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.

Hmm that's strange, it's working fine for me. You could maybe try a different browser, or curl on the command line.

Oh, I've been had :D

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

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?)

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

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.

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.

I've been messing around with that triangle for half an hour now. Gradients were comparatively easy.

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`.

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.

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.

Maybe a flipped triangle is rendered differently.

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. :)

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.

Would you have any hints for puzzle 3? The power of CSS has far overtaken me in the last few years.

It involves a "border" style.

Thanks, those lines in the corners threw me off.

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 :(

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 :(.

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...

I found that `clip: rect(0px, 0px, 0px, 0px)` does not work, but fixes the stripes bug.

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.

It's possible to interpolate the correct values with a screenshot, the gimp and a calculator.

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.

For anyone frustrated with the colors on stage 7:

    container: #660076
    triangle: #fd8abb
    circle: #fee376

Thank you!

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.

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.

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.

If you’re talking about guessing the keys for satoshis wallets then I guess you’re technically correct :p

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.

I suppose it depends on how long your willing to take to liquidate it

I think the Satoshi coins are in many small wallets of ~50 BTC each, so there's no one-shot win there.

Technically speaking all of the bitcoins are up in the prize.

That was the puzzle I had in mind.

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

Got through the first puzzle, found the wallet empty - someone's already on the hunt!

Thanks for the 0.005BTC - Client Side Dev :)

Edit: 500,000 Sat sounds better :P

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 :)

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.

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.

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?

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...

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.

got through all of them, and found all to be empty. wondering if anything was there at all to start with :(

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.

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.

TL;DR from the web site:

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

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!

Reply on news.ycombinator.com