Deck of Cards (old version) https://deck.of.cards/old

JavaScript 51.4%
CSS 29.9%
Stylus 12.7%
HTML 4.4%
Pug 1.6%

Find a file

Juha Lindstedt 8d3be56c56 Fix fisher-yates 🙈		2020-03-26 12:24:39 +02:00
.github	Update FUNDING.yml	2019-06-05 13:27:30 +03:00
chrome	added Chrome app source	2015-09-08 19:51:20 +03:00
css	Add will-change	2017-06-19 21:46:54 +03:00
dist	fixes #36	2017-03-29 12:09:33 +03:00
example	Add will-change	2017-06-19 21:46:54 +03:00
lib	Fix fisher-yates 🙈	2020-03-26 12:24:39 +02:00
views	css transition -> JS animation	2015-09-16 17:52:51 +03:00
.gitignore	added npm-debug.log	2015-09-04 20:27:47 +03:00
index.js	added card.animateTo() -method!	2015-09-24 01:51:04 +03:00
LICENSE	Update LICENSE	2015-11-11 13:20:47 +02:00
package.js	Meteor packaging	2015-11-30 17:25:10 -05:00
package.json	Added call to donate after npm install (optional)	2019-07-15 06:54:21 -07:00
README.md	Added financial contributors to the README	2019-07-15 06:54:21 -07:00

README.md

HTML5 Deck of Cards

NEW VERSION COMING UP!

The new multiplayer Deck of Cards is released at https://deck.of.cards, but will have it's cards library open sourced soon here!

Old version

Pure vanilla JS (+ CSS3) – no dependencies, by Juha Lindstedt & contributors.

https://deck.of.cards/old

Install from Google Chrome Web Store

Frontside card graphics are slightly modified from Chris Aguilar's awesome Vector Playing Card Graphics Set.

Also check out my RE:DOM and HTML5 Node Garden projects!

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

LGPL if you use Chris Aguilar's vector playing cards. Otherwise MIT.

Download

Installation from npm

npm install deck-of-cards

Then add in your html file

In <head>:

<link rel="stylesheet" href="node_modules/deck-of-cards/example/example.css">

At the end of the <body>:

<script src="node_modules/deck-of-cards/dist/deck.min.js"></script>

Usage

Full example

<html>
    <head>
        <title>Cards</title>

        <link rel="stylesheet" href="node_modules/deck-of-cards/example/example.css">
    </head>
    <body>
        <script src="node_modules/deck-of-cards/dist/deck.min.js"></script>

        <div id="container"></div>

        <script>
            var $container = document.getElementById('container');

            // create Deck
            var deck = Deck();

            // add to DOM
            deck.mount($container);

            deck.cards.forEach(function (card, i) {
                card.setSide(Math.random() < 0.5 ? 'front' : 'back');

                // explode
                card.animateTo({
                    delay: 1000 + i * 2, // wait 1 second + i * 2 ms
                    duration: 500,
                    ease: 'quartOut',

                    x: Math.random() * window.innerWidth - window.innerWidth / 2,
                    y: Math.random() * window.innerHeight - window.innerHeight / 2
                });
            });
        </script>
    </body>
</html>

Available on JsFiddle: http://jsfiddle.net/x0gjood1/

Javascript API

Deck

// Instantiate a deck
var deck = Deck();

// display it in a html container
var $container = document.getElementById('container');
deck.mount($container);

Deck example: http://jsfiddle.net/ec4kcx1k/

// Flip all cards in deck
deck.flip();

// Sort cards
deck.sort();

// Shuffle
deck.shuffle();

// Display fan
deck.fan();

// Remove deck from html container, hide it
deck.unmount();

Shuffle cards and fan: http://jsfiddle.net/favbdkta/

Deck with jokers:

// Instanciate a deck with jokers
var deck = Deck(true);

Card

// Select the first card
var card = deck.cards[0];

// Add it to an html container
card.mount($container);

// Allow to move/drag it
card.enableDragging();
card.disableDragging();

// Allow to flip it
card.enableFlipping();
card.disableFlipping();

// Flip card
card.flip();

// Display card front or back
card.setSide('front');
card.setSide('back');

Draggable and flippable card: http://jsfiddle.net/cgz9mjts/

Card in deck

Remove a card from a deck

var deck = Deck();

// Remove 10 cards starting from the 6th
var removedCards = deck.cards.splice(5, 10);

removedCards.forEach(function (removedCard) {
    removedCard.unmount();
});

Deck without Clubs: http://jsfiddle.net/L25facxj/

Build instructions

npm install
npm start

(starts watching for changes..)

Latest changes

0.1.4 card.animateTo() -method added –> simplier modules! Simple example of usage
0.1.3 JS animations (instead of CSS transitions)
0.1.2 Backside graphics + setRankSuit (+ card.value -> card.rank!)
0.1.1 Better organized modules + Chrome app
0.1.0 Realistic face graphics, notice change of license for now..
0.0.4 winning mode, simpler shuffling, CSS box-shadow change
0.0.3 big refactoring – code now easier to follow and in smaller pieces
0.0.2 made intro shorter & added "poker"
0.0.1 initial version

Where's what?

css/ - CSS source (stylus + nib) of the example

chrome/ - Chrome Web Store app source

dist/ - deck.js & deck.min.js

example/ - https://deck-of-cards.js.org

lib/ - JS (ES6) source of dist/deck.js - deck.js is also the main file

views/ - HTML source of the example

Note to self: todo

Make z-index temporary by reordering DOM elements between actions
Enhance API, make more flexible

README.md Unescape Escape