JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div id="gridLayout" class="gridLayout" ng-app="mine_main">
    <div class="gridContainer" ng-controller="gridCtrl">Grid size:
        <input type="number" min="5" max="20" width="40" size="3" ng-model="gridData.rowNum" ng-change="genGrid()" />
        <br />Reward Percentage:
        <input type="number" min="0" max="75" width="40" size="3" ng-model="gridData.reward" ng-change="renderDistributions()" />%
        <br />Encounter Percentage:
        <input type="number" min="0" max="75" width="40" size="3" ng-model="gridData.encounter" ng-change="renderDistributions()" />%
        <br />Both Percentage:
        <input type="number" min="0" max="75" width="40" size="3" ng-model="gridData.both" ng-change="renderDistributions()" />%
        <div ng-repeat="row in rows" class="row">
            <div ng-repeat="cell in row" class="cell" ng-class="cell.hilight"></div>
        </div>
    </div>
</div>

CSS

.gridContainer {
    position: relative;
    margin-top: 10px;
    padding: 0 0 0 0;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}
.row {
    padding: 0;
    height: 36px;
}
.cell {
    display: inline-block;
    width: 36px;
    height: 36px;
    position: relative;
    z-index: 0;
    font-size: 18px;
    color: #888888;
    text-align: center;
    line-height: 36px;
    border-style: solid outset;
    border-width: 1px;
    border-color: black;
    cursor: pointer;
}
.reward {
    background: green;
}
.encounter {
    background: red;
}
.both {
    background: orange;
}

JavaScript

var mine_main = angular.module('mine_main', []);
mine_main.controller('gridCtrl', ['$scope', function ($scope) {
    $scope.gridData = {
        rowNum: 6,
        reward: 25,
        encounter: 25,
        both: 25
    };
    $scope.rows = [];
    $scope.genGrid = function () {
        var id = 1;
        $scope.rows = [];
        for (var y = 0; y < $scope.gridData.rowNum; y++) {
            $scope.rows.push([]);
            for (var x = 0; x < $scope.gridData.rowNum; x++) {
                $scope.rows[y].push({
                    id: id,
                    hilight: false
                });
                id++;
            }
        }
        $scope.renderDistributions();
    };
    $scope.renderDistributions = function () {
        var freeTiles = Math.pow($scope.gridData.rowNum, 2),
            tileTypes = ['reward', 'encounter', 'both'],
            reb = {
                tiles: Math.round(freeTiles * ($scope.gridData.reward / 100)),
                num: 1
            },
            start = [],
            broken = false,
            type_i = 0;

        for (var y = 0; y < $scope.gridData.rowNum; y++) {
            for (var x = 0; x < $scope.gridData.rowNum; x++) {
                $scope.rows[y][x].hilight = false;
            }
        }
        for (var y = 0; y < $scope.gridData.rowNum; y++) {
            for (var x = 0; x < $scope.gridData.rowNum; x++) {
                if ($scope.rows[y][x].hilight === false) {
                    start = [x, y];
                    broken = true;
                    break;
                }
            }
            if (broken === true) {
                break;
            }
        }
        for (var y = start[1]; y < $scope.gridData.rowNum; y++) {
            for (var x = start[0]; x < $scope.gridData.rowNum; x++) {
                if (type_i < 3) {
                    if ($scope.rows[y][x].hilight === false && reb.num <= reb.tiles) {
                        $scope.rows[y][x].hilight = tileTypes[type_i];
      ...