javascript - How to display .toggle or .Animate to all connected browser sessions using Meteor -

but how show interaction of clicking on element toggles or animates? meteor checkers example: http://checkers.meteor.com/

in example below, every browser that's connected meteor server able see when 1 of other browsers makes shape change.

https://jsfiddle.net/qh2jyl3b/

html:

<div class="square"></div> <script src="//code.jquery.com/jquery-1.10.2.js"></script> 

css:

.square {   width: 100px;   height: 100px;   background: white;   border: 10px solid black;   cursor: pointer;  } 

javascript:

$(".square").click(function() {     $( ).toggleclass("circle");   }); 

you can store click state in meteor.collection. changes in collections propagate reactively connected clients. create separate document each square , save state here. can create helper displays correct class name depending on db items.

for example can this way:

for each chess-table can create separate document on server side:

chesstablecell = new mongo.collection('chesstablecell');

then can store state of each cell in each of document. can insert

chesstablecell.insert({name: 'a1', state: false); chesstablecell.insert({name: 'a2', state: false);  ...etc 

and on client side have access cells states this:

chesstablecell.findone({name: 'a1'}).state;

and on click need toggle state of clicked cell. can in following way:

template.chessboard.events({//or whatever template called     'click .cell': function(e,t) {       var cellname = $(e.target).data('name'); //if specify cell name in html in data-name attribute       var cellvalue = chesstablecell.findone({name: cellname}).state;       //here can update value       chesstablecell.update({name: cellvalue}, {$set: { state: !cellvalue}});     } }); 

then state change reactively on every connected client. of course need reflect changes in html this:

{{#each chesstablecells}}   <div class="cell {{#if state}}active{{/if}}" data-name="{{name}}"></div> {{/each}} 

and in client code:

template.chessboard.helpers({   chesstablecells: function() { return chesstablecell.find({}); } });