Add tictactoe widget.

Thanks to @amanagr for a few refinements to my original
version, which was really raw.  (It's still raw.)

.eslintrc.json

@@ -172,6 +172,7 @@
         "upload": false,
         "user_events": false,
         "voting_widget": false,
+        "tictactoe_widget": false,
         "widgetize": false,
         "submessage": false,
         "Plotly": false,

static/js/tictactoe_widget.js

@@ -0,0 +1,161 @@
+var tictactoe_widget = (function () {
+
+var exports = {};
+
+var tictactoe_data_holder = function () {
+    var self = {};
+
+    var me = people.my_current_user_id();
+    var square_values = {};
+    var num_filled = 0;
+    var waiting = false;
+    var game_over = false;
+
+    function is_game_over() {
+        var lines = [
+            [1, 2, 3],
+            [4, 5, 6],
+            [7, 8, 9],
+            [1, 4, 7],
+            [2, 5, 8],
+            [3, 6, 9],
+            [1, 5, 9],
+            [7, 5, 3],
+        ];
+
+        function line_won(line) {
+            var token = square_values[line[0]];
+
+            if (!token) {
+                return false;
+            }
+
+            return (
+                (square_values[line[1]] === token) &&
+                (square_values[line[2]] === token));
+        }
+
+        var board = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+        function filled(i) {
+            return square_values[i];
+        }
+
+        return _.any(lines, line_won) || _.all(board, filled);
+    }
+
+    self.get_widget_data = function () {
+        function square(i) {
+            return {
+                val: square_values[i] || i,
+                idx: i,
+                disabled: waiting || square_values[i] || game_over,
+            };
+        }
+
+        var squares = [
+            [square(1), square(2), square(3)],
+            [square(4), square(5), square(6)],
+            [square(7), square(8), square(9)],
+        ];
+
+        var token = (num_filled % 2 === 0) ? 'X' : 'O';
+        var move_status = token + "'s turn";
+
+        if (game_over) {
+            move_status = "Game over!";
+        }
+
+        var widget_data = {
+            squares: squares,
+            move_status: move_status,
+        };
+
+        return widget_data;
+    };
+
+    self.handle = {
+        square_click: {
+            outbound: function (idx) {
+                var event = {
+                    type: 'square_click',
+                    idx: idx,
+                    num_filled: num_filled,
+                };
+                return event;
+            },
+
+            inbound: function (sender_id, data) {
+                var idx = data.idx;
+
+                if (data.num_filled !== num_filled) {
+                    blueslip.info('out of sync', data.num_filled);
+                    return;
+                }
+
+                var token = (num_filled % 2 === 0) ? 'X' : 'O';
+
+                if (square_values[idx]) {
+                    return;
+                }
+
+                waiting = (sender_id === me);
+
+                square_values[idx] = token;
+                num_filled += 1;
+
+                game_over = is_game_over();
+            },
+        },
+    };
+
+
+    self.handle_event = function (sender_id, data) {
+        var type = data.type;
+        if (self.handle[type]) {
+            self.handle[type].inbound(sender_id, data);
+        }
+    };
+
+    return self;
+};
+
+exports.activate = function (opts) {
+    var self = {};
+
+    var elem = opts.elem;
+    var callback = opts.callback;
+
+    var tictactoe_data = tictactoe_data_holder();
+
+    function render() {
+        var widget_data = tictactoe_data.get_widget_data();
+        var html = templates.render('tictactoe-widget', widget_data);
+        elem.html(html);
+
+        elem.find("button.tictactoe-square").on('click', function (e) {
+            e.stopPropagation();
+            var idx = $(e.target).attr('data-idx');
+
+            var data = tictactoe_data.handle.square_click.outbound(idx);
+            callback(data);
+        });
+    }
+
+    self.handle_events = function (events) {
+        _.each(events, function (event) {
+            tictactoe_data.handle_event(event.sender_id, event.data);
+        });
+        render();
+    };
+
+    render();
+
+    return self;
+};
+
+return exports;
+
+}());
+if (typeof module !== 'undefined') {
+    module.exports = tictactoe_widget;
+}

static/js/widgetize.js

@@ -5,6 +5,7 @@ var exports = {};
 var widgets = {};
 
 widgets.poll = voting_widget;
+widgets.tictactoe = tictactoe_widget;
 
 exports.activate = function (in_opts) {
     var widget_type = in_opts.widget_type;

static/styles/zulip.scss

@@ -2778,3 +2778,11 @@ div.topic_edit_spinner .loading_indicator_spinner {
 .hotkey-hint {
     opacity: 0.75;
 }
+
+div.message_content table.tictactoe {
+    width: 80px;
+}
+
+td.tictactoe {
+    width: 15px;
+}

static/templates/widgets/tictactoe-widget.handlebars

@@ -0,0 +1,20 @@
+<h3>Tic Tac Toe</h3>
+
+{{ move_status }}
+<br />
+
+<table class="tictactoe">
+    {{#each squares}}
+    <tr>
+        {{#each this}}
+        <td class="tictactoe">
+            <div>
+                <button {{#if this.disabled}}disabled{{/if}} class="tictactoe-square" data-idx="{{ idx }}">
+                    {{ this.val }}
+                </button>
+            </div>
+        </td>
+        {{/each}}
+    </tr>
+    {{/each}}
+</table>

zproject/settings.py

@@ -948,6 +948,7 @@ JS_SPECS = {
             'js/stream_list.js',
             'js/filter.js',
             'js/voting_widget.js',
+            'js/tictactoe_widget.js',
             'js/widgetize.js',
             'js/submessage.js',
             'js/fetch_status.js',