JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<div ng-app="app">
    <editboard></editboard>
    <addpaylines></addpaylines>
</div>
<div class="hide">
    <div id="viewboard">
        <div>
            <div ng-repeat="r in getNumber(board.rows)"> <span ng-repeat="c in getNumber(board.columns)">
                    <span ng-hide="board.edit">
                    <input type="checkbox" ng-model="newpayline[r][c]"
                        ng-true-value='{"r":{{r}},"c":{{c}}}'/>
                </span>
 <span ng-show="board.edit">X</span>
</span>
            </div>
        </div>
    </div>
    <div id="editboard">
        <div ng-show="board.edit">
            <div>
                <input type="number" ng-model="board.rows" min="1" />
            </div>
            <div>
                <input type="number" ng-model="board.columns" min="1" />
            </div>
            <viewboard></viewboard>
            <div>
                <button ng-click="board.edit = false">Finish</button>
            </div>
        </div>
    </div>
    <div id="addpaylines">
        <div ng-hide="board.edit">
            <viewboard></viewboard>
            <button ng-click="addpayline()">Add</button>
            <div ng-repeat="p in board.paylines">
                {{p}}
            </div>
        </div>
    </div>
</div>

CSS

.hide {
    display:none;
}

JavaScript

//comboboard
var app = angular.module('app', []);

app.service('board', function () {
    return {
        rows: 3,
        columns: 3,
        edit: true,
        paylines: []
    }
});

app.directive('editboard', function (board) {
    return {
        restrict: 'E',
        template: document.getElementById('editboard').innerHTML,
        controller: function ($scope) {
            $scope.board = board;
            $scope.newpayline = [];

        }
    }
});

app.directive('viewboard', function (board) {
    return {
        restrict: 'E',
        template: document.getElementById('viewboard').innerHTML,
        controller: function ($scope) {
            $scope.board = board;
            $scope.getNumber = function (num) {
                var x = [];
                for (var i = 0; i < num; i++) {
                    x.push(i);
                }
                return x;
            }
        }
    }
});

app.directive('addpaylines', function (board) {
    return {
        restrict: 'E',
        template: document.getElementById('addpaylines').innerHTML,
        controller: function ($scope) {
            $scope.board = board;

            function empty() {
                var r = new Array(board.rows);
                for (var i = 0; i < board.rows; i++) {
                    r[i] = Array(board.columns);
                }
                return r;
            }

            $scope.newpayline = empty();
            $scope.$watch('board.edit', function(){
               $scope.newpayline = empty();
            });

            $scope.paypoint = function (r, c) {
                $scope.newpayline[r][c] = {
                    r: r,
                    c: c
                };
            }
            
            $scope.addpayline = function(){
                var payline = []
                for(var i = 0; i < $scope.newpayline.length; i++){
                    payline = payline.concat($scope.newpayline[i].filter(function(v){
                        return...