JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<inventory slots="50">test 1: 4<br>test 2: 4<br>test 3:6</inventory>

CSS

.slot {
    width: 50px;
    height: 50px;
    margin: 5px;
    float: left;
}

.slot.item {
    background-color: aqua;
}

.slot.full {
    background-color: #DDD;
}

.slot.free {
    background-color: #1cc533;
}

JavaScript

angular.module('inventoryManager', [])
    .directive('inventory', function() {
        return {
            restrict: 'E',
            scope: {
                slots: '='
            },
            template: '<div class="inventory"><div class="slot" ng-class="{item: slot.type===\'item\', full: slot.type===\'full\', free: slot.type===\'free\'}" ng-repeat="slot in islots" title="{{slot.name}}">{{$index+1}}</div></div>',
            transclude: true,
            compile: function($element, $attrs, transclude) {
                return function($scope, $iel, $iattrs) {
                    $scope.islots = [];
                    transclude($scope, function(clone) {
                        var slotLines = clone.contents(),
                            slotLinesLen = slotLines.length,
                            items = [],
                            itemI = 0;
                        for (var i = 0; i < slotLinesLen; i++) {
                            var matches = /(.+?)\s?:\s?(\d+)/i.exec(angular.element(slotLines[i]).text());
                            if (matches !== null) {
                                items.push({
                                    name: matches[1].trim(),
                                    slots: parseInt(matches[2], 10)
                                });
                            }
                        }
                        for (var s = 0; s < $scope.slots; s++) {
                            var item = items[itemI],
                                tempS = -1;
                            if (typeof item !== 'undefined') {
                                tempS = s + item.slots - 1;
                                $scope.islots.push({
                                    type: 'item',
                                    name: item.name,
                                    slots: item.slots
                                });
                                for (; s < tempS; s++) {
                                   ...