[HN Gopher] Virtual deck of cards using just a browser
___________________________________________________________________
Virtual deck of cards using just a browser
Author : beermonster
Score : 209 points
Date : 2021-06-01 15:16 UTC (7 hours ago)
(HTM) web link (playingcards.io)
(TXT) w3m dump (playingcards.io)
| nolroz wrote:
| I've used this a lot with my team for our remote "happy hour"
| since pandemic started. It's been a great way to interact and
| blow off some steam. I'm surprised that there isn't baseline
| templates for blackjack, poker, spades, and other common card
| games although the site makes it easy to save configurations once
| you have something that works. Highly recommended!
| semitones wrote:
| poker is a bit more complicated. A friend and I built a site
| for playing poker with friends, for free:
|
| https://justpoker.games/
| codeulike wrote:
| Looks great. It probably doesn't matter for something like this,
| but what algorithm are you using for card shuffling? Note that if
| you use a 32-bit random seed, you only reach about 4 x 10^9 of
| the 8 x 10^67 different ways a pack of cards can be shuffled - a
| tiny tiny tiny fraction.
|
| http://www.lauradhamilton.com/random-lessons-online-poker-ex...
|
| The other interesting aspect about card shuffling is how more
| shuffling than necessary might make the end result worse
|
| https://blog.codinghorror.com/the-danger-of-naivete/
|
| edit: changed to 'seed' as mentioned below, reframed blog post
| jxy wrote:
| > if you use a 32-bit random number generator, you only reach
| about 4 x 10^9 of the 8 x 10^67 different ways
|
| I suggest you reread your linked article. The fault is in using
| a 32-bit _SEED_.
|
| Random shuffling algorithms are trivial and well known [0]. It
| really doesn't need some click-bait blog posts.
|
| [0] https://en.wikipedia.org/wiki/Fisher-Yates_shuffle
| codeulike wrote:
| Well they're not well known to me. But yes I can see in the
| FAQ https://playingcards.io/docs/faq that this site uses
| Fisher-Yates.
| TheMiddleMan wrote:
| Yes, you got it, Fischer-Yates shuffle via lodash. Here's
| their implementation:
| https://github.com/lodash/lodash/blob/master/shuffle.js
| crazygringo wrote:
| I'm intrigued by why all these example shuffling algorithms are
| based on _swapping_ cards in-place.
|
| The first algorithm that would occur to me would be take a pile
| of 52 cards, and repeatedly pick cards randomly to place into a
| new pile that eventually has 52 cards.
|
| Though I suppose that's the kind of thing that's trivial to
| program in scripting languages with arrays that are easy to
| remove a middle item from, and less so in a classic algorithmic
| language like C.
| teruakohatu wrote:
| > and less so in a classic algorithmic language like C.
|
| Shuffling into a new pile is not that it is hard to do in C,
| just move items from one linked list to another.
|
| But if it can be done with a simple array saving memory then
| why not.
| [deleted]
| ffffwe3rq352y3 wrote:
| Great idea! However, using inspect element you can easily see
| what the card is before you flip it! Super easy to exploit
| lwhi wrote:
| Cheating is always possible .. I guess you need to trust the
| person you're playing with?!
| usrusr wrote:
| One of my long term untouched toy app project ideas has been
| basically this, but strictly limited to local Bluetooth
| connectivity in face to face settings. For when you don't have a
| deck, or don't have a table, or just feel like gadget overdose.
|
| Obviously that idea came before the pandemic.
| bovermyer wrote:
| "Choking hazard?" Cute, heh.
| veganjay wrote:
| One cool thing is the ability to create your own deck and the
| ability to share with other users.
|
| There are a lot of existing games already in the system and
| plenty more shared on the reddit group:
| https://www.reddit.com/r/PlayingCardsIO/
|
| Also there is an open-source clone available:
| https://virtualtabletop.io/
|
| And somewhat related, /r/digitaltabletop has a huge list of
| options to play games online:
| https://www.reddit.com/r/digitaltabletop/comments/gg4sfx/big...
| gowld wrote:
| If the author is here: it's easy to accidentally flip a card
| while trying to move it. Consider making flip be a more complex
| gesture, like a connect-click/long-press menu or a pop up
| confirmation.
| TheMiddleMan wrote:
| Hi, creator of the site here. Could you give a bit more details
| about specifically when it flips by accident?
|
| There's a threshold that objects need to be dragged beyond to
| start moving, which is different for touch/mouse.
|
| Also, what device/OS are you using?
| teucris wrote:
| Wow, and board games! At the beginning of the pandemic, my son
| was obsessed with chess but wanted to invent his own variants
| like horde or crazyhouse. Instead of buying several chess sets, I
| whipped together something like this but with only one board
| option and no collab. I wish I had known about this sooner!
| SamBam wrote:
| When I was looking to buy pieces for a custom Onitama set I
| made, I discovered the universe of "fairy chess pieces," or
| non-standard pieces with different moves or powers. The classic
| one is the Amazon, which is a combination Queen and Knight
| (hard to google "amazon chess piece," of course...), but
| there's also the Empress, the Elephant, the Camel... With
| easier access to 3D printing, there's now a whole world of
| these.
| urbandw311er wrote:
| I may have missed this but is there a way for certain players to
| look at their own cards without other players seeing them. This
| would be great for certain games where players are dealt a hand
| and permitted to examine it privately.
| TheMiddleMan wrote:
| The bottom area is the "hand", cards placed there are only
| visible to each individual player.
|
| Note that some games like Checkers have the hand turned off by
| default.
| eitland wrote:
| Fantastic!
|
| I've been wanting to build and play on a "open world" deck of
| cards game.
|
| Now I now I can play without creating it first and I won't have
| to waste my time creating kt only to find out later that someone
| else had already done it.
| mandamanda wrote:
| https://virtualtabletop.io/ started out as a FOSS clone of this
| but has long surpassed this it in terms of features.
| wolfshack wrote:
| Hi. Just wanted to show you this app I made for Android (soon
| also for iPhone), which seems somewhat similar:
| https://play.google.com/store/apps/details?id=com.cardgamesd...
| gorjusborg wrote:
| This is brilliantly simple. Seems like an obvious idea in
| retrospect, which is so often the case with brilliant ideas.
| amelius wrote:
| It misses a videocall option.
|
| Also, it doesn't enforce who's turn it is.
| hauxir wrote:
| https://cardtables.online has a video call option :)
| beermonster wrote:
| You bring your own! Which IMHO makes it even better.
|
| You can tell your opponent 'oi your turn!' using your preferred
| platform.
| [deleted]
| ASalazarMX wrote:
| > Also, it doesn't enforce who's turn it is.
|
| I think this could actually be a feature. In a real game, the
| players self-enforce the turns, and when someone gets
| distracted and plays out of turn, it's hilarious to banter
| while setting things straight again. Of course that would need
| the videocall part.
| yoz-y wrote:
| A few years back there was this great platform for playing
| Magic: The Gathering, which didn't enforce anything at all and
| it was still great. Even did a few tournaments using it.
|
| As long as all the moves are logged, you can enforce the rules
| by yelling at people.
| ALittleLight wrote:
| Magic Workstation?
|
| Magic does have the problem that sometimes, in specific edge
| cases, players can disagree about what should happen based on
| the rules. It's hard to come to consensus via the yelling at
| people protocol.
|
| But I do agree it was great. And free.
| yoz-y wrote:
| Oops forgot to mention the name, it was Apprentice.
| jonplackett wrote:
| This is such a great website
|
| The best thing is how you can import card data as a CSV.
|
| I've been prototyping a card game with it and have a few command
| line scripts to go from an Indesign deck to a fully working play-
| testable game in under a minute.
| ollybee wrote:
| Does anyone know anything about the tech or infrastructure behind
| this site?
| deaddodo wrote:
| Just digging through the HTML and jS source, it appears to be
| fairly standard HTML with some ReactJS+Firebase on the
| frontend. It's communicating via Socket.io which implies the
| backend is running the reference nodejs server:
|
| https://github.com/socketio/socket.io
| ilaksh wrote:
| Well but why so they need socket.io if they are using
| Firebase?
| TheMiddleMan wrote:
| Creator of the site here.
|
| We use Firebase for Auth and file storage only. Game
| updates are sent through Socket.io in order to have better
| control over them, and also Firebase charges per update
| which is a lot for games.
| [deleted]
| turdnagel wrote:
| This is really great. I love how flexible it is - I think BYO
| video chat / turn management is a fine tradeoff to make. Wish I
| knew about it a year ago!
| gowld wrote:
| Perhaps Web Intents could provide the chat integration?
|
| https://en.wikipedia.org/wiki/Web_Intents#History
| dash2 wrote:
| Interesting. Looks like a quicker/simpler version of Tabletop
| Simulator, which seems to have got big on Steam.
| teddyh wrote:
| See also: https://deck.of.cards/
|
| (Discussed here previously:
| https://news.ycombinator.com/item?id=10164513)
| TheMiddleMan wrote:
| Hi all, I'm Rob Middleton, the creator of this site. Very cool to
| see it pop up here!
|
| The tech stack is Nodejs, MongoDB, Redis, Socket.io, and React +
| Redux on the frontend.
|
| It's actually been a pet project for a long time (6+ years) but
| I've been taking it more seriously since Jan 2020. Fun fact: the
| original was built with Backbone.js and CoffeeScript.
|
| Happy to answer some questions and please let me know your
| feedback too.
|
| And follow us on Twitter for updates:
| https://twitter.com/playingcardsio
| simplify wrote:
| Thanks for building this! As a hobby game designer, I've been
| wanting something like this for a long time. I'll be digging
| into the docs[0] to see if I can prototype one of my card game
| concepts.
|
| I've also just added PlayingCards.io to my website[1] of
| multiplayer games that require no user accounts :)
|
| [0] https://playingcards.io/docs/ [1] https://quickparty.games
| qwertox wrote:
| Thanks for making "open world" board/card games. Open world in
| the sense that an interaction order is not enforced, where you
| can place the chips anywhere you like, whenever you like,
| leaving it up to the players to enforce the rules through
| either common sense or another communication channel.
|
| I remember back in the Google Wave days I created a connect
| four game where no turns were enforced, and you could take out
| the chips of the opponent if you saw that they cheated. A
| Google engineer was a bit irritated by that, she expected that
| it was turn based and pointed it out as a flaw.
|
| Maybe you could add a feature which shakes the entire table so
| that the cards/boards end up in a state where continuing
| doesn't make much sense, like when you push away the board IRL
| because you noticed that you lost.
| movedx wrote:
| > A Google engineer was a bit irritated by that, she expected
| that it was turn based and pointed it out as a flaw.
|
| Aaah! The old STEM education in full effect. Beautiful
| example. No creative thinking on their part whatsoever.
| thunderbong wrote:
| Hi,
|
| just the other day I was wondering what happened to older
| Javascript frameworks like Backbone.
|
| Can you elaborate why you moved from Backbone to React / Redux?
| As of what I recall, Backbone was extremely stable and a lot of
| companies used it in very heavy web apps as well.
|
| Since, the 2D board games of the type on your site doesn't seem
| to require heavy front-end lifting (I might be completely wrong
| here), I'm curious to know the reason behind switching to a
| newer technology which is still riding the hype wave.
|
| Thanks. And of course, the site is very nice. Will be sharing
| it with my colleagues for our Friday online hangouts!
| TheMiddleMan wrote:
| Good question. Both Backbone and React provide a way to build
| UI components. React Components are way easier for:
|
| 1. Having nested DOM elements in your components. Backbone
| really wanted you to just have one element per component, and
| then use jQuery to add children as needed.
|
| 2. Adding event handlers and other HTML attributes. JSX
| syntax means you can basically write HTML in your JS file.
| Backbone made you add event handlers manually.
|
| 3. Nested components. React lets the parent simply specify
| what children it wants and React automatically
| creates/reuses/destroys component instances for you. This was
| all manual in Backbone.
|
| The bigger advantage though, is how the state is typically
| organized in React apps.
|
| In Backbone, app state was sprinkled throughout the component
| hierarchy, and often you would have do event spaghetti up and
| down the hierarchy to update some state held by another
| component.
|
| Typical React apps use a state container like Redux, the UI
| is "projected" from the state, and components just send
| changes to the state, aka "unidirectional data flow".
|
| That said, React is not the best for games. Maintaining 60
| fps can be difficult and we've done some fairly heavy
| optimization to try to keep it smooth.
| eloeffler wrote:
| I'd love to see something like this with the ability to upload my
| own card decks (front and back) to play deck building games etc.
| dharmab wrote:
| Tabletop Simulator has pretty much every card and board game
| you can think of as a fanmade mod. There's also a scripting
| system and official virtual versions of commerical games that
| use the scripts to automate parts of the game like setup.
| beermonster wrote:
| Does this work?
|
| https://playingcards.io/docs/custom-decks
| kqr wrote:
| This will be perfect for a lunch and learn series on
| probability fundamentals I want to hold.
| eloeffler wrote:
| Haha, how did I miss that? :D
|
| Yes this looks nice! Though I was also thinking of a way to
| just upload images that can then be used.
| davidye wrote:
| Shameless plug - but give https://screentop.gg a try! Studios
| and kickstarters are already using it to develop and play deck
| building games.
| samcheng wrote:
| Pretty awesome! I felt like it was missing an affordance to move
| a stack of cards at once, though. Perhaps it's a hidden key
| combination?
| beermonster wrote:
| You can put a stack in a card holder if you edit the table via
| the toolbox/briefcase icon and add the relevant widget. Then
| you can move a stack by dragging the corner handle (the number)
___________________________________________________________________
(page generated 2021-06-01 23:01 UTC)