Platform decision

[ctrenks]

Having built many web applications with ajax / php / mySql I was presented with a "simple" task form a friend of mine. We built a database of every MTG card for a website, then figuerd we have all this data lets build a simplr "tabletop" emulator to play between us, nothing that would be public or against the terms of MTG / WOC.

So knowing Ajax I figured on the following -

Ill create a mySql db to store the gamestate, send new positions to the server and query for changes made by player 2, then relocate the objects on the screen to keep the game in synch.. By no means are we planning any logic, just shuffle/ deal and move cards around the screen. Obviously there are some values that will change per card such as image (fron/back) counters being added ext..

Backend wise I think I have no issue, the UI is my issue, as I havent dealt with moving multiple objects, sending the x,y,z back to a server, then reading changes and moving the items.

I have been searching for HTML5 solutions as well as AJAX simple div positions. Seems like re-drawing a canvas with image data willl be combersome if say 200 cards are in play.

My main question is should I consider HTML5 or simply look at making it purely Ajax.

Here is the requirements -

Present a deck of 60+ cards, deal 7 to each player.

Decks will load a game table, each card will have a unique ID, multiple images, as there is a front / back/ alt side for most cards, counters that change during game play, positions X,y and z index

all cards will be selectable, and able to move anywhere on the table, or be returned to the deck as I plan on having the deck object an array of all available cards left, not a stack of cards.

If you have any input, or possible direction on where to head with this that would be great. I plan to have each "card" as a div, with the image of the card, a counter div inside the card div attached to most cards that have counters.

Thanks,
Chris

[AleMonteiro]

ctrenks,

I may be wrong, but as far as I understand, the Canvas object of HTML 5 is for 2d and 3d draw. You can't have an <div > inside a <canvas>.

And I don't think that have doubts abouth the plataform, it's decided, it'll be Web with HTML/CSS/JS. The question that I see is about the UI architeture.

And to be clear, I think you missunderstand the AJAX concept. AJAX has nothing to do with your interface, it is only an assync request to the server using XMLHttpRequest.

Your entire interface will be manipuled by JavaScript, and using AJAX(that is only a concept, not an programming language or a framework) you'll make the request to the server.

About the UI, you could simply create the HTML structure and a few JS functions to handle the flow. Or you could do something a litle more sofisticated, and build an object oriented model for your card game.

In example, the prototype could look something like this:

// Namespace
    var CardGame = {}; 

    // Card Deck
    CardGame.Deck = function() {
        var 
            cardValues = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K'],
            cardClubs = ['Clubs', 'Diamonds', 'Hearts', 'Spades'],
            i=0,
            j=0;

        this.cards = new Array();

        for(var i=0, il=cardValues.length; i < il; i++) {
            for(var j=0, jl=cardClubs.length; j<jl; j++) {
                this.cards.push(new CardGame.Card(cardValues[i], cardClubs[j]));
            }
        }
    }

    CardGame.Deck.prototype.alertCards = function() {
        alert(this.cards.length);
    };

    CardGame.Card = function (value, club) {
        this.value = value;
        this.club = club;

        return this;
    };

    window.onload = function() {
        var deck = new CardGame.Deck();
        deck.alertCards();
    };

[ctrenks]

I get the Ajax part, simply to push and pull card states and positions. I think I just need to sit back and get a grip on the drag and drop aspect, and then reporting position through AJAX. The HTML5 canvas confused me as a "simple" drag / drop board, but I see what you mean by just images.

[AleMonteiro]

Take a look at jQuery UI, they have drag and drop helpers.