back
35 comments
This is a quick side project I built to try Firebase. I was surprised how easy it was to put something together. Their onboarding process is fantastic, the docs are well-written, and their sample apps provide several simple design patterns to use as starting points.

I thought that Firebase would be incredibly useful as a rapid prototyping tool, but I'm now thinking of using it as a backend for a couple of apps I'm bootstrapping and doing away with servers altogether. iOS support and other interesting features are in the pipeline, and it's already an incredibly compelling platform.

The only thing missing for me right now is webhook support.

How do you guys create these cool little sites so quickly. I can imagine how you could create the script easily, but making the little icons, layouts, etc... must take a long time.

Or am I just really slow?

The icons took longer to create than the code. :)

I'm a front end developer and designer, so I can throw layouts together pretty quickly. I now use Typecast[1] to set a basic mood and find a header and body font, then for simple sites like this I skip Photoshop/Fireworks and do the ‘layout’ in the browser.

[1]: http://typecast.com/

It's pretty simple. Firebase has pretty decent docs and even when they didn't (I was at their pre-release hackathon), it was still extremely simple to get up and running. Just scope their site.
Funny, my first attempt at a real-time web app was also a Deathmatch Rock Paper Scissors server. But it was 1997, so the spock version wasn't yet invented.

Picking a technology for the 2-way comm was tough back then, since Layers only worked on Netscape and IFrame was IE only. I ended up going with a frameset and zero-height frame at the bottom of each screen. When you input your move, it'd submit a form on the frame and update the state on the server. And the frames would periodically poll to see if the opponent had given his move.

Once both moves were available, it'd run its little Mortal Kombat pixel art animation and crush the opponent's scissors with its fist. It was start of the art at the time. I hadn't ever seen anybody do real time web stuff at that point.

As I find happens with most "build something silly while slacking off at work" scenarios, we ended up shipping it a few months later. One of our products looked like it could actually benefit from the ability to real-time update one of its components, so I tore out the fighting and used the RPS comm stuff.

Lovely implementation, extremely forgettable URL.

Can you please comment on what kind of stack you've got going on? Is this operating on websockets?

There are quite a lot of people squatting on rpsls-related domains, sadly.

The app's 100% JavaScript, served from a static server, and backed by Firebase. https://www.firebase.com/ You include their library and create a reference to any point in your "Firebase", which is essentially a live JSON store that each client subscribes to. Clients can push data to the store and declare callbacks that fire when data changes at any given endpoint. Changes persist in near-realtime between all connected clients. It is very neat.

"waiting for opponent..." on /?random

Is it down?

Edit: Reloading the page (with /?random) either generates a random room for me, which is no use when I want to play a random opponent, or does something in a flash and then asks me if I want to play again, meanwhile still displaying a 0-0 score. When I click play again, it keeps saying "waiting", though in the right bottom there is an opponent connected. I somehow doubt it.

I played to 37 wins with a friend to decide who buys the drinks tonight. By the end, he couldn't choose rock or scissors, and I couldn't choose lizard, and sometimes he would pick two things at a time. We decided that these are intended depths of the game, and we needed to practice more in order to learn the subtle dynamics of the game. Good Job!
When you're ready to step up your game I'll tell you about the cheat codes that let you choose Twinkie. : )
Give us the twinkie!!!!!
Hmm, I can't copy and paste the url from the box for some reason. I can copy it, but can't paste as text...
The wikipedia article points out that some people have problems creating Spock's sign. Which made me think that if someone couldn't play Spock's sign, then that changes your strategy, which changes your opponents, which changes yours...

I need to dust off my game theory textbook.

Neat. Bug report: score is not preserved among reconnections. Example: I close my browser by mistake when we're 4 - 2, when I load the URL again scores are back at 0 - 0 (but the other player that not disconnected still has 4 - 2).
Thanks. Right now, scores are kept independently by each client and never pushed to the server. This is simply to prevent cheating; cunning players could update their score without winning (or even playing a game), and the change would be pushed to their opponent.

I need to work out how to store and validate scores in Firebase to prevent cheating (which should be possible with their security rules, I think).

I don't know how it currently works, but this is how I'd do it:

    1. Clients notify server they want to play a/another game
    2. Clients both pick their 'answer' (spock/lizard/rock/...)
    3. Server only tells what choice the other made once both players submitted
    4. Server computes who wins, and updates scores accordingly
This does require a stateful server, but I don't think it's possible to make it cheat-proof with only clients.
Thanks for the input. Steps 1-3 are how it currently works. Step 4 is problematic because the Firebase server cannot compute who wins; that has to be done on the client.

I think I can configure Firebase to validate scores based on some precondition (i.e. 'only allow this value to be increased by one if both players have chosen and declared'). Then clients would reset their choices immediately and scores would be 'locked-in' until the next victory condition is met. That will prevent basic attempts to cheat, but I need to look into the docs to see if I could be smarter about it.

I wanted to try it out but "find random opponent" never found a random opponent.

If there is no "random opponent" to be found within say 20 seconds, you could fake the "random oppenent" to be a program that is random-rpsls'ing with me.

Nice Spock intro animation!

I wonder if this can be turned into a competitive version of Dual N-Back? "Magic" style card games could be given this treatment as well, but would have to be mediated by computer.
Yep, it could. There's a lot of potential for realtime gaming of a more 'traditional' nature. Some guys have built a tabletop boardgaming environment called 'Roll20' that's powered by the same stack I used. They have 100,000 users already, and it's a lot of fun. https://www.firebase.com/customers/roll20-case-study.html
I've got these nephews (-in-law) that play this weird variant that has to do with guns and shields and badges and a few other things... wish I could find the rules.
Seems to randomly declare a winner without me ever choosing anything. Presents me with a choice half the time, otherwise it just declares a random winner.
Weird. What browser? I'll confess that I threw this together and haven't done much testing, but all seems well on Chrome, Firefox, Safari, and Mobile Safari.
It continually and randomly decided what the outcome was for about 5 minutes before freezing for me. (On Chromium)
Ah. Sorry about that. I haven't had a chance to test the lobby/random opponent matchmaking feature under stress, and it's not working as I'd hoped. You should be able to send the URL to a friend and play them, though. (Or open another window and play yourself to try things out.)
Another bug: I can no longer choose lizard (or at least lizard no longer shows up as an option). FF on Win7
The random function never seemed to match me with anyone.
I get matched pretty fast, but the opponent never does anything. =/
Time to duel! http://rpsls.ws#dw3nx
Good game! Quite addictive I might add.
Bazinga!
Why were the two extra options added?
It's a development of the original game, by Sheldon from Big Bang Theory.

http://en.wikipedia.org/wiki/Rock-paper-scissors-lizard-Spoc...

EDIT: As nthitz helpfully points out, it wasn't invented by Sheldon, or anybody in Big Bang Theory. Let's say it was popularized by Big Bang Theory. Bazinga!

Not invented by Sheldon which makes me think you didn't read original HN link or the wikipedia article that you linked to...
Sorry about that. I skimmed the Wikipedia article -- I figured HN readers appreciate sources.