HTML5 Deck of Cards(pakastin.github.io) |
HTML5 Deck of Cards(pakastin.github.io) |
same when clicking on the top card of a stack, it jumps ~40px.
The user can create a JSON string that represents a game (checkers, solitare, dominion, smash up, etc). Then the engine creates cards, tokens, dice, etc. It does not enforce rules but it supports multi player and some rules about visibility to other players. Its intended use case is for testing out new games or expansions before printing them.
It's a little bit early in the project though, so you'd have to run it from source if you want a demo.
yeah, not even close i would say.
but the use of JSON is nice.
var suit = i / 13 | 0;
That's such a clean way to get a 0, 1, 2 or 3 from each card's `i` and I never would have thought of it.
Now you just need to add a dropdown to select what drinking game you want to play.. ring of fire anyone?..
Inspecting the cards, you can see that they are using the unicode character for spade/heart/etc. But in the browser itself you get nothing but smileys.
Perhaps the font they're using doesn't have those code points?
Edit: Yes, that's the case. Font is not specified, so it comes in as "inherit" by default, using whatever the browser feels like. On Mac Chrome, that must use smileys to represent unknown characters. Switching the document font to Arial in CSS fixes the issue and makes the cards look like cards.
You're seeing the Last Resort fallback font, which shows a symbol representative of the codepoint range, and the range's name, so you can identify what type of font you need. Since the suits are in the smiley block, you see a smiley. If you had no Latin alphabet font, you'd see an A.
Seems kinda wasteful.
https://desandro.github.io/3dtransforms/examples/card-01.htm...
#card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }
Only thing about is that it easily looks like crap. I mean if you don't curl & flip the card looks too solid..but I'll check it out.
It would be difficult to practice sleight of hand.
Additionally, with three elements (possible just one if you're crazily good at CSS), it'd be possible to have flippable cards. Still just using CSS3.
Edit: Can someone explain these downvotes for me?
Go figure :)
My own CSS playing cards with proper card faces from 3 years ago is here:
I suppose that's more for a second library that can manage stacks of cards, dealing and interacting with dealt cards, etc.
Nice work by the way!
Press "Räjäytä" (means "explode" in Finnish) ;)
I made an endless random card (and die roll) generator: http://staticresource.com/shuffle.html just tap anywhere to draw a new card.
Seeing what you've done with your Deck of Cards is a big inspiration!
I thought we needed to make a separate repository for github pages first. My other repo doesn't show at all.
I used 52-framed movieClip as a card, where frames were values.
And then every suit graphic was one movieClip as well with 4 frames: spade, heart, club and diamond
Worked great! Not so easy to do with HTML though. Lots of figuring out coordinates manually.
particularly awesome is "sort", which i think really nicely simulates a (reverse) shuffle; it seemed like i could see the top edge of the cards lift as they rotated along the bottom edge
suit = int(i / 13)
suit = (int)(i / 13)
suit = math.floor(i / 13)
And on the flip side with JS's lack of number types, any code that looks like it's doing type casts (rather than math) looks out of place. If one must mess around with JS number types then all you can really do is give hints to the optimizing compiler, in which case "|0" is the standard way to hint that you want a small int.
Obviously what looks clean is a matter of opinion, but FWIW.
Math.floor(value) can return some weirder values such as: NaN (for anything that isn't a number), and Infinity, -Infinity, -0. And Math.floor(-1e-300); is -1 so care needs to be taken with floating values near zero.
which has the advantage of working with any size of deck. important since in brazillian truco you leave most of the numbers out ;)
~~(i/13)Similar to seeing `!!` and thinking true/false coercion.
4 and 13 are relatively prime, so each number between 1 and 52 can be uniquely represented by the function (x) -> (x%13, x%4).
<div class=card data-value="A" data-suit="︎">︎</div>
Or something?
<p class="2 ︎"/>
http://codepen.io/femto113/pen/avzWJq
Doesn't include the card centers, but does have top and bottom corners.
EDIT: HN doesn't seem to like unicode characters? The class should include the suit symbol.
Thanks anyway, and I really appreciate true CSS ::-wizards, don't get me wrong.. ;)
I like the svg suggestion.
https://commons.wikimedia.org/wiki/Category:SVG_playing_card...
https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_bac...
Use (int), like C.
I just tested it in PHP and it seems it is 20% faster in PHP compared to casting to int. Maybe someone out there will have a weird use case for that, or someone doesn't want to put more effort into writing code into terminal and doesn't care about his code being unreadable. I think its useful to know it exists.
Btw, do you or someone else know why its faster in php too? Its a bitwise operation and I assume under the hood its casting to int, its weird to have it faster than casting it to int, why does this happen? It makes sense in javascript to that its faster than functions, but why it is faster than a cast in PHP?
It is worse because people are even less familiar with this in PHP. It's not idiomatic.
> I just tested it in PHP and it seems it is 20% faster in PHP compared to casting to int.
How rigorous was your testing? Which version of PHP were you using?
> It makes sense in javascript to that its faster than functions, but why it is faster than a cast in PHP?
It shouldn't be. It might save an allocation in older PHP versions, I'm not sure.
Math.floor() favors the number equal to/less than the parameter, Math.floor(-15.5) is -16 while (-15.5 | 0) is -15
Also because the returned value is int32[0],
Math.floor(2147483648.5) is 2147483648 while (2147483648.5 | 0) is -2147483648
You are fine if you know the input is less than (2^31) + 1 and you want to truncate, rather than floor.
[0]: http://www.ecma-international.org/ecma-262/6.0/#sec-binary-b...
https://developer.mozilla.org/pt-PT/docs/Web/JavaScript/Refe...
> Math.floor( 45.95); // 45
> Math.floor(-45.95); // -46
Its not like its hidden or anything... Its in the center of the page on my 1920x1080 screen.
Chrome 45 on Linux
It's odd that a bitwise operator should have the effect of truncating the float (since X|0 == X)? I'm guessing there's an implicit type conversion to int in the middle?
This all to save a fraction of a microsecond on an operation that's called 60 times on the page.
But yeah, I agree about googling part: I remember having Googled "tilde javascript" and "pipe javascript".. :)
Tilde is useful with indexOf:
if (~array.indexOf(item)) {}
..equals to:
if (array.indexOf(item) > -1) {}
i/13|undefined