Efficient method for flipping cards up/down ?

[ShashaKrismas]

Hello,
In the game I'm currently devving i'm trying to flip cards up/down in a stock.

Initialization works fine, it reads the state the card is in and updates the image accordingly:

Code: Select all

            // Create cards types:
            for (var color = 1; color <= 4; color++) {
                    // Build card type id
                    value = 1;
                    var card_type_id = this.getObjectCardUniqueId(color, value);
                    var path_img = 'img/objects.jpg';
                    this.tableHand.addItemType(card_type_id, 1, g_gamethemeurl + path_img, color-1);
                    // Putting the same value here, "1" so that the stock sort them by ID and not by value in the stock.
                    // -1 is here so that the numbers in the db correspond to the card number displayed.

            }
            
            for (var color = 1; color <= 4; color++) {
                // Build card type id
                value = 1;
                var card_type_id = this.getObjectCardUniqueId(color, value) + 8;
                var path_img = 'img/backcard.jpg';
                this.tableHand.addItemType(card_type_id, 1, g_gamethemeurl + path_img, color-1);
            }
            
            // Cards in center of the table hand
            var objectcard_table = gamedatas.objectcard_states;
            for ( var i in this.gamedatas.table) {
                var card = this.gamedatas.table[i];
                var color = card.type;
                var value = card.type_arg;
                var objectcard_state = objectcard_table[card.id].card_state;
                if (objectcard_state == 0){
                    this.tableHand.addToStockWithId(this.getObjectCardUniqueId(color, value)+8, card.id);
                }
                if (objectcard_state == 1){
                    this.tableHand.addToStockWithId(this.getObjectCardUniqueId(color, value), card.id);
                }
            }

But things get tricky when I try to refresh the img through notifications:
I couldn't find adequate documentation to change style "on the spot", so the only solution I found was to remove the card from the stock face up/down and add it in the stock again face down/up. The problem is that they are added automatically at the end of the stock and not where they were before. When I refresh the page then the cards are correctly displayed at the right position in the right state :

Code: Select all

        notif_flipObjectCard : function(notif) {
            // Flip cards on the table
            console.log('Not implemented yet');
            if(notif.args.objectcard_state == 0) //Face down 
            {   
                this.tableHand.removeFromStockById(notif.args.objectcard_id);
                this.tableHand.addToStockWithId(this.getObjectCardUniqueId(notif.args.objectcard_color, 1), notif.args.objectcard_id); //We add it face up
            }

            if(notif.args.objectcard_state == 1) //Face up 
            {   
                this.tableHand.removeFromStockById(notif.args.objectcard_id);
                this.tableHand.addToStockWithId(this.getObjectCardUniqueId(notif.args.objectcard_color, 1) + 8, notif.args.objectcard_id); // We add it face down
            }
            // THIS DOESNT WORK !!!
            // as the cards are added to the end like a pile.
        },

This is not ideal at all for the mechanism of my game as this part is supposed to be some kind of memory game.
I would take gladly any advice on that, thank you so much!

[Fletcheese]

Could you just add/remove classes to make cards appear as face-up vs face-down?

[ShashaKrismas]

Hi, thank your for your answer,
you mean like changing the classes of the card dynamically ? how would i do that ? I'm basing my code off the hearts tutorial and my html looks like this:

Code: Select all

<div id="table_wrap" class="whiteblock">
    <h3>TABLE</h3>
    <div id="table">
    </div>
</div>

and then I link the stock like this:

Code: Select all

   // TODO: Set up your game interface here, according to "gamedatas"
            // Table "hand"
            this.tableHand = new ebg.stock(); // new stock object for hand
            this.tableHand.create( this, $('table'), this.cardwidth, this.cardheight );

I don't have custom css classes for these cards and my code in the first post was my best attempt of defining custom variable classes.
Also I need to say I'm not a good coder at all with web languages, this is basically my chance to learn as I program, so excuse me if it seems like I am asking for the obvious!

[Fletcheese]

Sure, no worries. Yes I mean changing the element classes. There are some great utilities for doing this described in the JS documentation. In summary:

1. Define a class in your CSS that shows the "face-down" card image
2. dojo.addClass("<card_id>", "<face-down-class>")
3. You may also need to remove a face-up class via dojo.removeClass but I'd recommend you should set up your CSS such that face-down will take precedence over face-up

That being said, if you want to make it impossible for players to cheat using their browser dev console you may need something more robust. But memory games are already very easy to cheat by taking verbose notes so I'm not sure this is worth worrying about.

[ShashaKrismas]

Yeah exactly, I was thinking about that people could just make the css disappear and see what's underneath...
The memory part is fine but it's more that if nobody has flipped the card yet then nobody should be advantaged by knowing what's underneath.
I will try your method and see, thanks a lot!

[Fletcheese]

Just make sure that no identifiable info is assigned to your card elements before they are flipped for the first time. You could do this by generating unique IDs each game for each card. So the DB has a fresh association of IDs to cards each game such that the dev console would not reveal what the card is until after that info is served by the DB in response to someone flipping it.

[SwHawk]

Yeah exactly, I was thinking about that people could just make the css disappear and see what's underneath...

Perhaps a dumb question, but does the id and the card type are transmitted using notifications and/or PHP's getAllDatas()? if so you should consider that it's publicly available and that whether the cards are actually shown face up or down, the players can access the information underneath (using browser dev tools for example).

Correct me if I'm wrong, but at the core, you seem to be relying on a memory mechanism where all the cards have a fixed position, and players should try to reveal pairs satisfying different conditions. If that's so, keeping the cards' order will be a problem if you use regular stock. You may have to either create a stock per card position (tedious, but you won't have to modify stock's source code) or modify stock's source code. Another option may be to try out Anti-Stock (as described here on the wiki) and see if you case is covered or can be covered.

[ShashaKrismas]

Hi ! Thank you both for your answers.
My game mechanism actually is that people exchange cards in hands between them and when they have a pair they have to find the corresponding "slot" of the pair to put them down. These slots are hidden and randomized.

but does the id and the card type are transmitted using notifications and/or PHP's getAllDatas()

Yeah they are, for this I copied the code from hearts to get the cards in the middle of the table that are supposed to be face down, with a NotifyAllPlayers(). I'm not sure of how I should be doing it the right way though...

As for the stock I gave them all the same weight so by default they are sorted by the card_id in the database, numbers that change at each game because of the shuffling, but I'll take a look!
Thanks!

[ShashaKrismas]

Fletcheese: thanks your method works really well, the only inconvenient would be that anyone could make the background disappear for now, unless I make it so that the background is not displayed permanently under, and for that I would need to use the database values about the card, which leads to my other question:
I tried to check the other day, how to access gamedatas from the js console to check for leakage but I didn't find how, can we actually do it ?