0

I have this multiplayer board game project, which has a Board (being the Collection) and many Piece objects (being the Model)*.

In order to display same board set up to all online players, how can I organize my Backbone code to update the Piece's position CSS attribute after a player moves that said Piece?

Additional info:

I'm using the Django framework on the server side, where every Piece object has a id, x_position and y_position attributes.

tilacog
  • 663
  • 7
  • 14
  • How are you moving the pieces (drag, mouse)? Have you written any preliminary Backbone code or are these just concepts? – Dennis Rongo Mar 13 '13 at 12:45
  • Hi there, I'm going to use Jquery-ui Draggable interface to drag elements arround. For now, it's just conceptual code. – tilacog Mar 15 '13 at 02:09

1 Answers1

0

You could use CSS classes on the piece. Assuming your x_position is a range of a-z and your y_position is a range of 1-8 then

<div class="pawn <%= x_position+y_position %>">pawn</div>

And your CSS could look like

a1 { left:0; bottom:0; }
a2 { left:0; bottom:1em; }
/* and so on */
b1 { left:1em; bottom:0; }
/* and so on */

Listen to your draggable's stop event and work out which square it's in (it will provide you with the dropped position in the ui object (ui.position.left and ui.position.top). You can then apply the correct CSS class update the model, and clear the attributes the draggable has set.

Wil
  • 4,887
  • 3
  • 22
  • 30
  • In that sense, I would be referencing the the "square" position on each Piece CSS, so it could be rendered accordingly? – tilacog Mar 21 '13 at 11:59