Change Card Size and Position about deck-of-cards

[pakastin]

Yeah, it's unfortunale hardcoded here:
https://github.com/pakastin/deck-of-cards/blob/7afec8d2585b683445f03aa9a8655283be4b87e5/lib/modules/poker.js#L36-L37

and:

https://github.com/pakastin/deck-of-cards/blob/7afec8d2585b683445f03aa9a8655283be4b87e5/lib/modules/bysuit.js#L36-L37

I'm currently rewriting the project, so this will change in the future.. I hope to get it forward during the weekend.

[kenshinbat]

Will be extremely glad if you can make it work, I have been stuck on fixing it for a month now. Can't wait till its the weekend.

Thanks

[pakastin]

Basically you could customize those modules:

var SIZE = 1; // change this!

var deck = Deck();

deck.bysuit = deck.queued(function (next) {
  deck.cards.forEach(function (card, i) {
    var i = card.i;
    var rank = card.rank;
    var suit = card.suit;
    var delay = i * 10;

    card.animateTo({
      delay: delay,
      duration: 400,

      x: -Math.round((6.75 - rank) * 8 * SIZE), // affects here
      y: -Math.round((1.5 - suit) * 92 * SIZE), // and here..
      rot: 0,

      onComplete: function () {
        if (i === deck.cards.length - 1) {
          next();
        }
      }
    });
  });
});

[pakastin]

..and poker:

deck.poker = deck.queued(function (next) {
  deck.cards.slice(-5).reverse().forEach(function (card, i, len) {
    var delay = i * 250;

    card.animateTo({
      delay: delay,
      duration: 250,

      x: Math.round((i - 2.05) * 70 * SIZE), // again here's where the magic happens
      y: Math.round(-110 * SIZE), // and here..
      rot: 0,

      onStart: function () {
        card.$el.style.zIndex = (len - 1) + i;
      },

      onComplete: function () {
        card.setSide('front');
        if (i === 4) {
          next();
        }
      }
    });
  }); 
});

[pakastin]

Should work, I tried it with example.html.. 😉

[pakastin]

..and like I said I try to get the next-gen version hopefully done during this weekend ;)

[kenshinbat]

It didn't work when I tried it, when I click the Poker and Bysuit buttons, the cards don't deal.
Am I replacing the whole codes in the modules or inserting them from a specific line?

[pakastin]

Call deck.shuffle() first couple of times 😉

[pakastin]

Check out: https://github.com/pakastin/deck-of-cards/blob/master/example/example.js

[pakastin]

So:

deck
.shuffle()
.shuffle()
.poker();

[kenshinbat]

Hi,
I am not getting a hang of this it all. I have explained what I need in the images attached. Thanks

[pakastin]

Try set the SIZE so that if cards are too close to each other, raise the value and vice versa. If you need a separate Y-value, just add SIZE_Y etc.. :)

[kenshinbat]

What script file, example.js?

[kenshinbat]

Hi,
any luck with the upgrade? I still can't re-arrange the cards. Can you do a replica in the poker script? Just increase the size of the Cards and space them. Thanks

[pakastin]

Sorry, I got busy with an urgent client work. I’ll work an example for you after couple of hours..

[pakastin]

Here's an example: https://jsfiddle.net/o5vkm5qz/

You can change the card size in the CSS and it will position accordingly.. (poker + by suit)

[kenshinbat]

Thanks a bunch bro. Been off the project for a while, works fine on jsfiddle. Will check with my project and get back to you.

[kenshinbat]

Hi friend,
Thanks for the help so far, I am back on the project now and still haven't figured out a way to make the cards display in different positions. Attached is the image showing the display intended. Any help please. Thanks

[pakastin]

This will get so much easier in the next version!