A Game State Collection or Update the cards collection?

So I was prototyping a card game with MeteorJS, and when I got to the game play, I found myself facing two ways to implement it:

• Create a separate Collection for the Game State and use cursor.observe() on it, then update the card on the client then animating it with jQuery.
• Insert the cards for the game into a collection that holds the gameId, and update each record with each action, with the help of an animation helper on the Template.

Now, for the first approach, the only issue I have is when a player wants to come and watch the game, is the best way to get the up to date Game State by reading the whole collection then apply the animations from the beginning of the game until the current state? Or is there another approach to it?

The second approach needs to subscribe to the Game Cards collection and each operation needs to make sure if the card exists or no before updating, which could get slow with a growing community.

So let's say I'm going with the first approach, is there a reliable way to shuffle the cards in the collection? I thought of keeping an array record in the Players collection then applying those numbers to the cards in the client's collection. Is that a good approach? Also, once again, the watchers. I don't really like the idea of reading the whole Game State and animating the cards from the beginning.

This is the code I wrote for the first approach:

State = -> GameState.find()

State().observe ->

    added: (card) ->

        if card.player is getPlayerId().playerId
            Animations.player {card: card.cardId}, card.animation
        else 
            if card.player is getOpponentId().playerId
                Animations.opponent {card: card.cardId}, card.animation

So, basically, each Game State record consists of the card ID on the client's collection, the player's ID, and the animation to be done.