JSFiddle - React, Tailwind, and code Playground

by siyegen

JavaScript

//A* Demo with a backbone

$(function(){

    console.log("Okay");
    (function($){

        Backbone.sync = function(method, model, success, error){ 
            success();
        }

        var Cell = Backbone.Model.extend({
            defaults: {
                // state values: blank, selected, travelled, start, end
                state : 'blank'
            }
        });

        var CellList = Backbone.Collection.extend({
            model: Cell
        });

        var Grid = Backbone.Model.extend({
            defaults: {
                columns : 5, rows: 5, moving: false, selectMode: false
            },
            initialize: function(){
                var l_cols = this.get('columns');
                var l_rows = this.get('rows');
                console.log('Init Grid -> '+l_cols+' x '+l_rows);
                this.collection = new CellList();
                this.size = l_cols * l_rows;
                console.log(this.size);
                for(var i=0; i<this.size; i++){
                    var cell = new Cell();
                    cell.set({
                        x: Math.floor(i/l_cols),
                        y: i%l_rows
                    });
                    this.collection.add(cell);
                }
                return this;
            }
        });

        var CellView = Backbone.View.extend({
            tagName: 'td',
            className: 'cell',
            initialize: function(){
                _.bindAll(this, 'render', 'toggle');

                this.model.bind('change', this.render);
            },
            events: {
                'click': 'toggle'
            },
            render: function(){
                $(this.el).attr('id', this.model.id);
                $(this.el).removeClass('selected blank');
                $(this.el).addClass(this.model.get('state'));
                return this;
            },
            toggle: function(e){
                e.preventDefault();
               ...