If you want to save the click state in a Meteor.Collection, you can achieve this easily. Any changes made to the collection will be updated reactively for all connected clients. All you need to do is create a separate document for each square and store the state there. Then, you can set up a helper function that displays the correct class name based on the database items.
Here's an example of how you can do it:
You can create a separate document for each chess table on the server side like this:
ChessTableCell = new Mongo.Collection('chesstablecell');
You can then store the state of each cell in these documents. Initially, you can insert the following:
ChessTableCell.insert({name: 'a1', state: false});
ChessTableCell.insert({name: 'a2', state: false);
...and so on
On the client side, you can access the cell states like this:
ChessTableCell.findOne({name: 'a1'}).state;
When a cell is clicked, you simply need to toggle the state of that cell. You can do this by:
Template.chessboard.events({
'click .cell': function(e,t) {
var cellName = $(e.target).data('name'); //assuming you have specified cell name in your HTML data-name attribute
var cellValue = ChessTableCell.findOne({name: cellName}).state;
//update the value here
ChessTableCell.update({name: cellValue}, {$set: { state: !cellValue}});
}
});
This way, the state will change reactively on every connected client. Remember to reflect these updates in your HTML as well, like so:
{{#each ChessTableCells}}
<div class="cell {{#if state}}active{{/if}}" data-name="{{name}}"></div>
{{/each}}
In your client code, you can set up helpers like this:
Template.chessboard.helpers({
ChessTableCells: function() { return ChessTableCell.find({}); }
});