Quick shot about how I detect which chessboard field was clicked

This post is a part of Get Noticed! 2017 contest by Maciej Aniserowicz

It is late, so to the point — this post, to be frankly more a quick note that post, will be about how and why I detect which field was clicked.

Why

It’s quite obvious — to track game, to show available moves (in future), etc.

How

Characters of vertical columns of squares were extracted to separated file:

const characters = [
    {character: "a"},
    {character: "b"},
    {character: "c"},
    {character: "d"},
    {character: "e"},
    {character: "f"},
    {character: "g"},
    {character: "h"},
];
return {
    characters: () => characters.slice(),
};

And also they are sliced, to be sure that any holder of instance can not modify characters instance.

Characters were used in characters-row-view module, so there were a great opportunity to use another one new feature from ES 6:

collection: new Backbone.Collection([
    emptyElement,
    ...characters,
    emptyElement,
]),

It is called Spread operator, and can be used to create new array containing elements from another array. It’s more compact, but I think many people (including me) need some time to get used to it.

Collections for row views need another model property character, like white-row-view:

collection: new Backbone.Collection([
    {type: "number-left"},
    {type: "white", character: characters[0].character},
    {type: "black", character: characters[1].character},
    {type: "white", character: characters[2].character},
    {type: "black", character: characters[3].character},
    {type: "white", character: characters[4].character},
    {type: "black", character: characters[5].character},
    {type: "white", character: characters[6].character},
    {type: "black", character: characters[7].character},
    {type: "number-right"},
]),

Which can be used to determine which “character field” was clicked (square-view):

alert(`${this.model.get("character")}${this._getRowNumber()}`);

Second part of this ES 6 template string had to be extracted to separated method, because contains code from which I am not proud:

_getRowNumber: function () {
    const id = this.$el.parent().attr("id");
    return id.substr(id.length - 1);
},

It takes its parent, and because parent contain number in id attribute, code base on this to calculate row number. I didn’t find a way, how to inject this value to square-view in other way. If you know how to do it better (and I’m sure there is a better, cleaner and DOM independent way), do not hesitate to write a comment which will guide me to nicer solution!

And of course, chessboard has to be “clickable”:

if (this._isChessboardField()) {
    this.$el.attr("role", "button");
    this.$el.attr("tabindex", "0");
}

And this is another thing which has serious drawbacks: it is not as accessible as native button element. But at the moment, it’s OK for me, with TODO comment which will remind me that something is a little bit wrong (Linter is complaining about it, and that’s good).

Conclusion

As always (and especially with today’s post and code), if you know how my problems can be resolved in a better way, feel free to leave a comment!

<< Read my previous post:

Backbone Collection, Marionette Views and CSS counters used to display field algebraic notation

>> Read my next post:

How to be DRY with Marionette Behavior