How to connect between prototype chain of objects and HTML representing them?

Question

I have a card game, and cards are represented by Javascript objects that are created as instances of class (card > card-type > card-instance). I did it like this so that the cards can share methods.

Then I construct the HTML, and the cards suppose to be able to do all kinds of stuff, like move or attack for example.

move is defined in Card.prototype.move = function... and attack is UnitCard.prototype.attack

and now I am trying to connect the Card objects to their corresponding HTML elements, so that I will be able to so something like

$('#board').on('click', '.card', function (e) {
  this.move(this.location, newLocation);
});

An idea I had is to make all the data and functions of the cards part of the DOM, and insert an object somewhere along the prototype chain of the DOM elements, so that the HTML of that card will have a move function. I know this idea is a bit crazy, but I am trying to avoid constant lookups inside objects (find the clicked card by name in the array of all cards and then if other cards that have influence on the action find them in the dom and then find them in the object etc...)

Any suggestions on how to solve this issue?

UPDATE - Current Code:

var Card = function (type, name, epoch) {
  var cardHtml =  document.createElement('div');

  cardHtml.className += "card";
  cardHtml.id = name;
  cardHtml.cardType = type;
  cardHtml.cardName = name;
  cardHtml.cardEpoch = epoch;

  this.cardHtml = cardHtml;
}

var Agent = function (cardProps, subtype, description, strike, shield, price) {
  //fixed
  Card.apply(this, cardProps);
  this.subtype = subtype;
  this.price = price; //agenda

 //changable
  this.cardHtml.innerHTML = ss.tmpl['cards-agent'].render({
    name: this.name,
  });
  this.cardHtml.strike = strike;
  this.cardHtml.shield = shield;
  this.cardHtml.location = []; //board/hand/deck/grveyard
}


Agent.prototype = Object.create(Card.prototype);

Agent.prototype.move = function (currentLocation, newLocarion) {
    console.log('move');
}

Answer 1

I assume that your board has specific places where your cards can be placed.

You should have a Board object containing an array of Places, something like:

function Card(divId){

   this.divId = divId;

   //generate Card html elements with jquery
}

function Place(divId){

   var currentCard = null;

   //attach this javascript object to an html element
   this.divId = divId;

   //register events of this Place where this Place has this.divId
   /*
   $(document).on("click", this.divId, function(){

   });
   */

   this.setCard = function(card){
      currentCard = card;

      //use jquery to add Card html elements to this Place html element
   }

}

function Board(){

   var places= new Array();

   this.addPlace = function(place){
      places.push(place);
   }

   this.moveCard = function(card, toPlace){

      toPlace.setCard(card);
   }
}

var card1 = new Card("#divCard1");
var card2 = new Card("#divCard2");

var place1 = new Place("#divPlace1");
var place2 = new Place("#divPlace2");

var board = new Board();

board.addPlace(place1);
board.addPlace(place2);

board.moveCards(card1,place1);

This is really off the top of my head. I don't even know if it runs or not. It's just to give you an idea. Interpret it as pseudo code.

Good luck!

Answer 2

Store a reference to the instance on the element's data object.

var Card = function (type, name, epoch) {
  var cardHtml =  document.createElement('div');

  cardHtml.className += "card";
  cardHtml.id = name;
  cardHtml.cardType = type;
  cardHtml.cardName = name;
  cardHtml.cardEpoch = epoch;

  this.cardHtml = cardHtml;
  $(cardHtml).data("card",this);
}

Now you can access it within events as needed.

$('#board').on('click', '.card', function (e) {
  var card = $(this).data('card');
  card.move(card.location, newLocation);
});

This of course assumes you can use jquery, per the jquery you're using in your question.

Answer 3

I can think of two additional options.

You could use bind to create a click handler in which this is actually your object instead of the dom element.

el.onclick = (function(){/* ... */}).bind(yourObj);

In this case, within your function, this would be your object instead of the dom element. As long as your object stores a reference to the dom element itelf, then you're set.

---

Another option would be to define the click handler within a closure which has a variable containing the object.

function bindHanlder(yourObj, el){
    el.onclick = function(){
        // "yourObj" can be used here.
    };
}