JSFiddle - React, Tailwind, and code Playground

by Johan Preynat

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.js"></script>
<div ng-app="gameApp">
    <div ng-controller="gameCtrl">
        <table ng-bind-html="gameTable">
        </table>
    </div>
</div>

JavaScript

angular.module('gameApp', ['ngSanitize'])
       .controller("gameCtrl", function($scope) {
           var str = "........####.............##..##...............#.......&&&&&&......&&&&&&.........&..&&&....%..##.&&&&&......##......&&&......................#..................";
           $scope.gameTable = makeTableFrom(str);
});

function makeTableFrom(str) {
    
    var k = 1,
        result = "";
    
    for (var i = 1; i <= 8; i++) {
        result += '<tr>';
        
        for (var j = 1; j <= 20; j++) {
            
            if (str[k-1] === '#') {
                result += '<td id="' + k + '">#</td>';
            }
            else if (str[k-1] === '&') {
                result += '<td class="click" val="water" id="' + k + '">&</td>';
            }
            else {
                result += '<td class="click" id="' + k + '"><a href="#"></a></td>';
            }
            
            k++;
        }
        
        result += '</tr>';
    }
    
    return result;
}