diff --git a/gemp-lotr/gemp-lotr-web/pom.xml b/gemp-lotr/gemp-lotr-web/pom.xml
index 24bd6a1d4..c09fea50d 100644
--- a/gemp-lotr/gemp-lotr-web/pom.xml
+++ b/gemp-lotr/gemp-lotr-web/pom.xml
@@ -14,4 +14,12 @@
     <build>
         <finalName>gemp-lotr</finalName>
     </build>
+    <dependencies>
+        <dependency>
+            <groupId>com.gempukku.tcg</groupId>
+            <artifactId>generic-tcg-web</artifactId>
+            <version>1.0-SNAPSHOT</version>
+            <type>war</type>
+        </dependency>
+    </dependencies>
 </project>
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
index 2b6ca500c..eca098584 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
@@ -37,9 +37,9 @@
     <script type="text/javascript" src="js/gemp-012/logging.js"></script>
     <script type="text/javascript" src="js/gemp-012/commonUi.js"></script>
     <script type="text/javascript" src="js/gemp-012/jCards.js"></script>
-    <script type="text/javascript" src="js/gemp-012/CardContainer.js"></script>
-    <script type="text/javascript" src="js/gemp-012/CardGroup.js"></script>
-    <script type="text/javascript" src="js/gemp-012/RowCardLayoutCardGroup.js"></script>
+    <script type="text/javascript" src="/generic-tcg/js/CardContainer.js"></script>
+    <script type="text/javascript" src="/generic-tcg/js/CardGroup.js"></script>
+    <script type="text/javascript" src="/generic-tcg/js/RowCardLayoutCardGroup.js"></script>
     <script type="text/javascript" src="js/gemp-012/cardFilter2.js"></script>
     <script type="text/javascript" src="js/gemp-012/DeckPanel.js"></script>
     <script type="text/javascript" src="js/gemp-012/deckBuildingUi2.js"></script>
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/AttachedCardsLayoutCardGroup.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/AttachedCardsLayoutCardGroup.js
deleted file mode 100644
index 3a9e2de78..000000000
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/AttachedCardsLayoutCardGroup.js
+++ /dev/null
@@ -1,168 +0,0 @@
-var AttachedCardsLayoutCardGroup = RowCardLayoutCardGroup.extend({
-    attachedGroupsLeft: null,
-    attachedGroupsTop: null,
-    attachedGroupsFinderFunc: null,
-    attachedGroupsRootRecognizeFunc: null,
-
-    init: function (cardContainerDiv, cardContainFunc) {
-        this._super(cardContainerDiv, cardContainFunc);
-        this.attachedGroupsLeft = new Array();
-        this.attachedGroupsTop = new Array();
-        this.attachedGroupsFinderFunc = new Array();
-        this.attachedGroupsRootRecognizeFunc = new Array();
-    },
-
-    addAttachedGroup: function(left, top, rootRecognizeFunc, finderFunc) {
-        this.attachedGroupsLeft.push(left);
-        this.attachedGroupsTop.push(top);
-        this.attachedGroupsRootRecognizeFunc.push(rootRecognizeFunc);
-        this.attachedGroupsFinderFunc.push(finderFunc);
-    },
-
-    iterAttached: function(cardDiv, cardId, props, rootRecognizeFunc, finderFunc, func) {
-        if (!rootRecognizeFunc(cardDiv, cardId, props))
-            return;
-
-        $(".card", this.cardContainerDiv).each(
-            function() {
-                var cardDivAtt = $(this);
-                var cardIdAtt = cardDivAtt.data("id");
-                var propsAtt = cardDivAtt.data("props");
-                var layout = cardDivAtt.data("layout");
-                var widthToHeightScaleFunc = cardDivAtt.data("widthToHeight");
-                if (finderFunc(cardDiv, cardId, props, cardDivAtt, cardIdAtt, propsAtt))
-                    func(cardDivAtt, cardIdAtt, propsAtt, layout, widthToHeightScaleFunc);
-            });
-    },
-
-    getCardHeightScale: function(cardDiv, cardId, props) {
-        var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
-        return Math.min(1, 1 / (cardBox.bottom - cardBox.top));
-    },
-
-    getCardBox: function(cardDiv, cardId, props) {
-        var cardRatio = cardDiv.data("widthToHeight")(cardId, props);
-        var result = {};
-        result.left = 0;
-        result.top = 0;
-        result.right = Math.min(1, cardRatio);
-        result.bottom = Math.min(1, 1 / cardRatio);
-        return result;
-    },
-
-    getCardGroupBox: function(cardDiv, cardId, props) {
-        var that = this;
-
-        var minLeft = 0;
-        var minTop = 0;
-        var maxRight = Math.min(1, cardDiv.data("widthToHeight")(cardId, props));
-        var maxBottom = Math.min(1, 1 / cardDiv.data("widthToHeight")(cardId, props));
-        var cardWidth = maxRight;
-        var cardHeight = maxBottom;
-
-        for (var i = 0; i < this.attachedGroupsFinderFunc.length; i++) {
-            var attachFunc = this.attachedGroupsFinderFunc[i];
-            var rootRecognizeFunc = this.attachedGroupsRootRecognizeFunc[i];
-            var attachLeft = this.attachedGroupsLeft[i];
-            var attachTop = this.attachedGroupsTop[i];
-
-            var attIndex = 0;
-            this.iterAttached(cardDiv, cardId, props, rootRecognizeFunc, attachFunc,
-                function(attCardDiv, attCardId, attProps, layout, attWidthToHeightRatioFunc) {
-                    attIndex++;
-                    var attBox = that.getCardBox(attCardDiv, attCardId, attProps);
-                    var attWidth = attBox.right - attBox.left;
-                    var attHeight = attBox.bottom - attBox.top;
-                    if (attachLeft < 0) {
-                        maxRight = Math.max(maxRight, attachLeft * attIndex + attWidth);
-                    } else if (attachLeft > 0) {
-                        minLeft = Math.min(minLeft, cardWidth + attachLeft*attIndex - attWidth);
-                    }
-
-                    if (attachTop < 0) {
-                        maxBottom = Math.max(maxBottom, attachTop * attIndex + attHeight);
-                    } else if (attachTop > 0) {
-                        minTop = Math.min(minTop, cardHeight + attachTop*attIndex - attHeight);
-                    }
-                });
-
-            if (attachLeft < 0)
-                minLeft = Math.min(minLeft, attachLeft * attIndex);
-            else
-                maxRight = Math.max(maxRight, cardWidth + attachLeft * attIndex);
-
-            if (attachTop < 0)
-                minTop = Math.min(minTop, attachTop * attIndex);
-            else
-                maxBottom = Math.max(maxBottom, cardHeight + attachTop * attIndex);
-        }
-        var result = {};
-        result.left = minLeft;
-        result.top = minTop;
-        result.right = maxRight;
-        result.bottom = maxBottom;
-        return result;
-    },
-
-    getCardBoxRatio: function(cardDiv, cardId, props) {
-        var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
-        var result = {};
-        result.x = cardBox.right - cardBox.left;
-        result.y = cardBox.bottom - cardBox.top;
-        return result;
-    },
-
-    layoutCardGroup: function(cardDiv, cardId, props, layout, zIndex, cardBox, boxLeft, boxTop, boxWidth, boxHeight) {
-        var that = this;
-        var pixelSize = boxWidth / (cardBox.right - cardBox.left);
-        var cardGroupHeight = pixelSize * (cardBox.bottom - cardBox.top);
-        var cardGroupWidth = pixelSize * (cardBox.right - cardBox.left);
-
-        var cardRatio = cardDiv.data("widthToHeight")(cardId, props);
-        var cardWidth = pixelSize * Math.min(1, cardRatio);
-        var cardHeight = cardWidth / cardRatio;
-        var cardLeft = boxLeft - cardBox.left * pixelSize;
-        var cardTop = boxTop - cardBox.top * pixelSize + (boxHeight - cardGroupHeight) / 2;
-        this.layoutOneCard(cardDiv, cardId, props, layout, zIndex, cardLeft, cardTop, cardWidth, cardHeight);
-
-        zIndex--;
-
-        for (var i = 0; i < this.attachedGroupsFinderFunc.length; i++) {
-            var attachFunc = this.attachedGroupsFinderFunc[i];
-            var rootRecognizeFunc = this.attachedGroupsRootRecognizeFunc[i];
-            var attachLeft = this.attachedGroupsLeft[i];
-            var attachTop = this.attachedGroupsTop[i];
-
-            var index = 0;
-            this.iterAttached(cardDiv, cardId, props, rootRecognizeFunc, attachFunc,
-                function(attCardDiv, attCardId, attProps, layout, attWidthToHeightRatioFunc) {
-                    index++;
-                    var attCardBox = that.getCardBox(attCardDiv, attCardId, attProps);
-                    var attWidth = pixelSize * (attCardBox.right - attCardBox.left);
-                    var attHeight = pixelSize * (attCardBox.bottom - attCardBox.top);
-
-                    var attLeft;
-                    if (attachLeft <= 0)
-                        attLeft = cardLeft + index * pixelSize * attachLeft;
-                    else
-                        attLeft = cardLeft + cardWidth - attWidth + index * pixelSize * attachLeft;
-                    var attTop;
-                    if (attachTop <= 0)
-                        attTop = cardTop + index * pixelSize * attachTop;
-                    else
-                        attTop = cardTop + cardHeight - attHeight + index * pixelSize * attachTop;
-                    that.layoutOneCard(attCardDiv, attCardId, attProps, layout, zIndex,
-                        attLeft, attTop,
-                        attWidth, attHeight);
-                    zIndex--;
-                });
-        }
-    },
-
-    layoutCardBox: function(cardDiv, cardId, props, layout, boxLeft, boxTop, boxWidth, boxHeight, ratio) {
-        var that = this;
-        var zIndex = this.zIndexBase;
-        var cardBox = this.getCardGroupBox(cardDiv, cardId, props);
-        this.layoutCardGroup(cardDiv, cardId, props, layout, zIndex, cardBox, boxLeft, boxTop, boxWidth, boxHeight);
-    }
-});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/CardContainer.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/CardContainer.js
deleted file mode 100644
index 672f8474c..000000000
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/CardContainer.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// This is a logical, and not a physical object.
-// Its purpose is to maintain order and control over multiple card groups
-var CardContainer = Class.extend({
-    cardContainerDiv: null,
-    cardGroups: null,
-    layoutFunc: null,
-
-    init: function(cardContainerDiv, layoutFunc) {
-        this.cardContainerDiv = cardContainerDiv;
-        this.cardGroups = {};
-        this.layoutFunc = layoutFunc;
-    },
-
-    addCard: function(elem, cardId, props, layoutFunc, widthToHeightScaleFunc) {
-        var cardDiv = $("<div class='card'></div>");
-        cardDiv.append(elem);
-        this.cardContainerDiv.append(cardDiv);
-        cardDiv.data("id", cardId);
-        cardDiv.data("props", props);
-        cardDiv.data("layout", layoutFunc);
-        cardDiv.data("widthToHeight", widthToHeightScaleFunc);
-    },
-
-    addCardGroup: function(name, cardGroup) {
-        this.cardGroups[name] = cardGroup;
-    },
-
-    setLayout: function(left, top, width, height) {
-        this.layoutFunc(this.cardGroups, left, top, width, height);
-    },
-
-    layoutCards: function() {
-        iterObj(this.cardGroups,
-                function (groupName, cardGroup) {
-                    cardGroup.layoutCards();
-                });
-    }
-});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/CardGroup.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/CardGroup.js
deleted file mode 100644
index 8f3ca6f44..000000000
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/CardGroup.js
+++ /dev/null
@@ -1,52 +0,0 @@
-var CardGroup = Class.extend({
-    cardContainerDiv: null,
-    cardContainFunc: null,
-    left: null,
-    top: null,
-    width: null,
-    height: null,
-
-    init: function(cardContainerDiv, cardContainFunc) {
-        this.cardContainerDiv = cardContainerDiv;
-        this.cardContainFunc = cardContainFunc;
-    },
-
-    iterCards: function(func) {
-        var that = this;
-        $(".card", this.cardContainerDiv).each(
-                function() {
-                    var cardDiv = $(this);
-                    var cardId = cardDiv.data("id");
-                    var props = cardDiv.data("props");
-                    var layout = cardDiv.data("layout");
-                    if (that.cardContainFunc(cardDiv, cardId, props))
-                        func(cardDiv, cardId, props, layout);
-                });
-    },
-
-    findCardPropsById: function(cardId) {
-        var result = null;
-        $(".card", this.cardContainerDiv).each(
-          function() {
-              var cardDiv = $(this);
-              var foundCardId = cardDiv.data("id");
-              if (foundCardId == cardId)
-                result = cardDiv.data("props");
-          });
-        
-        return result;
-    },
-
-    setLayout: function(left, top, width, height) {
-        this.left = left;
-        this.top = top;
-        this.width = width;
-        this.height = height;
-
-        this.layoutCards();
-    },
-
-    layoutCards: function() {
-        log("CardGroup::layoutCards - This method should be overriden");
-    }
-});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/RowCardLayoutCardGroup.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/RowCardLayoutCardGroup.js
deleted file mode 100644
index d5a24c151..000000000
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/RowCardLayoutCardGroup.js
+++ /dev/null
@@ -1,185 +0,0 @@
-var RowCardLayoutCardGroup = CardGroup.extend({
-    padding: 3,
-    zIndexBase: 0,
-    maxCardHeight: null,
-
-    init: function (cardContainerDiv, cardContainFunc) {
-        this._super(cardContainerDiv, cardContainFunc);
-    },
-
-    setMaxCardHeight: function(maxCardHeight) {
-        this.maxCardHeight = maxCardHeight;
-    },
-
-    setZIndexBase: function(zIndexBase) {
-        this.zIndexBase = zIndexBase;
-    },
-
-    getCardHeightScale: function(cardDiv, cardId, props) {
-        return 1;
-    },
-
-    getCardBoxRatio: function(cardDiv, cardId, props) {
-        var result = {};
-        result.x = Math.min(1, cardDiv.data("widthToHeight")(cardId, props));
-        result.y = Math.min(1, 1 / cardDiv.data("widthToHeight")(cardId, props));
-        return result;
-    },
-
-    layoutCards: function() {
-        var that = this;
-        var ratios = {};
-        var scale = 1;
-        this.iterCards(
-            function(cardDiv, cardId, props, layout) {
-                ratios[cardId] = that.getCardBoxRatio(cardDiv, cardId, props);
-                scale = Math.min(scale, that.getCardHeightScale(cardDiv, cardId, props));
-            });
-
-        if (!this.tryLayoutInOneRow(ratios, scale)) {
-            var rows = 2;
-            if (this.maxCardHeight != null)
-                rows = Math.max(rows, Math.ceil((this.height + this.padding) / (this.maxCardHeight + this.padding)));
-            while (true) {
-                if (this.canLayoutInRows(ratios, rows, scale)) {
-                    this.layoutInRows(ratios, rows, scale);
-                    return;
-                }
-                rows++;
-            }
-        }
-    },
-
-    canLayoutInRows: function(ratios, rows, scale) {
-        //log("Can layout in rows: "+rows);
-        var that = this;
-        var rowHeight = this.height / rows - this.padding * (rows - 1);
-        var ascentLeft = 0;
-        var cardRowCount = 0;
-        var row = 0;
-        this.iterCards(
-            function(cardDiv, cardId, props, layout) {
-                var cardWidth = ratios[cardId].x * rowHeight * scale;
-                cardRowCount++;
-                if (cardRowCount == 1) {
-                    ascentLeft += that.padding + cardWidth;
-                } else {
-                    if (ascentLeft + that.padding + cardWidth > that.width) {
-                        ascentLeft = 0;
-                        row++;
-                        ascentLeft += that.padding + cardWidth;
-                        cardRowCount = 1;
-                    } else {
-                        ascentLeft += that.padding + cardWidth;
-                    }
-                }
-            });
-        return row < rows;
-    },
-
-    layoutInRows: function(ratios, rows, scale) {
-        var that = this;
-        var rowHeight = this.height / rows - this.padding * (rows - 1);
-        var ascentLeft = 0;
-        var ascentTop = 0;
-        var cardRowCount = 0;
-        this.iterCards(
-            function(cardDiv, cardId, props, layout) {
-                var ratio = ratios[cardId];
-                var boxWidth = ratio.x * rowHeight * scale;
-                cardRowCount++;
-                if (cardRowCount == 1) {
-                    that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
-                    ascentLeft += that.padding + boxWidth;
-                } else {
-                    if (ascentLeft + that.padding + boxWidth > that.width) {
-                        ascentLeft = 0;
-                        ascentTop += that.padding + rowHeight;
-                        that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
-                        ascentLeft += that.padding + boxWidth;
-                        cardRowCount = 1;
-                    } else {
-                        that.layoutCardBox(cardDiv, cardId, props, layout, that.left + ascentLeft, that.top + ascentTop, boxWidth, rowHeight, ratio);
-                        ascentLeft += that.padding + boxWidth;
-                    }
-                }
-            });
-    },
-
-    tryLayoutInOneRow: function(ratios, scale) {
-        var totalRatio = 0;
-        var cardCount = 0;
-        this.iterCards(
-            function(cardDiv, cardId, props, layout) {
-                cardCount++;
-                totalRatio += ratios[cardId].x;
-            });
-
-        var availableCardsWidth = this.width - this.padding * (cardCount - 1);
-        var maxCardHeight = this.height;
-        if (this.maxCardHeight != null)
-            maxCardHeight = Math.min(this.maxCardHeight, maxCardHeight);
-        var oneRowCardWidths = maxCardHeight * totalRatio * scale;
-        if (oneRowCardWidths <= availableCardsWidth) {
-            this.layoutInOneFullRow(ratios, scale);
-            return true;
-        } else {
-            var cardHeightInTwoRows = this.height / 2 - this.padding;
-            var cardHeightToFitAll = availableCardsWidth / (totalRatio * scale)
-            if (cardHeightToFitAll >= cardHeightInTwoRows) {
-                this.layoutInOnePartialRow(ratios, cardHeightToFitAll, scale);
-                return true;
-            }
-        }
-        return false;
-    },
-
-    layoutInOnePartialRow: function(ratios, rowHeight, scale) {
-        var that = this;
-        var left = 0;
-        var index = 0;
-        this.iterCards(
-            function(cardDiv, cardId, props, layout) {
-                var ratio = ratios[cardId];
-                var boxWidth = ratio.x * rowHeight * scale;
-
-                that.layoutCardBox(cardDiv, cardId, props, layout, that.left + left, that.top, boxWidth, rowHeight, ratio);
-
-                left += boxWidth + that.padding;
-                index++;
-            });
-    },
-
-    layoutInOneFullRow: function(ratios, scale) {
-        var that = this;
-        var left = 0;
-        var index = 0;
-        this.iterCards(
-            function(cardDiv, cardId, props, layout) {
-                var ratio = ratios[cardId];
-                var cardHeight = that.height;
-                if (that.maxCardHeight != null)
-                    cardHeight = Math.min(cardHeight, that.maxCardHeight);
-                var boxWidth = ratio.x * cardHeight * scale;
-
-                that.layoutCardBox(cardDiv, cardId, props, layout, that.left + left, that.top, boxWidth, cardHeight, ratio);
-
-                left += boxWidth + that.padding;
-                index++;
-            });
-    },
-
-    layoutOneCard: function(cardDiv, cardId, props, layout, zIndex, cardLeft, cardTop, cardWidth, cardHeight) {
-        //log("layout card "+cardId+": "+cardLeft+","+cardTop+"    "+cardWidth+"x"+cardHeight);
-        cardDiv.css({"zIndex": zIndex,"left": cardLeft + "px", "top": cardTop + "px", "width": cardWidth, "height": cardHeight});
-        layout(cardDiv, cardId, props, cardLeft, cardTop, cardWidth, cardHeight);
-    },
-
-    layoutCardBox: function(cardDiv, cardId, props, layout, boxLeft, boxTop, boxWidth, boxHeight, ratio) {
-        var cardLeft = boxLeft;
-        var cardWidth = boxWidth;
-        var cardHeight = cardWidth / cardDiv.data("widthToHeight")(cardId, props);
-        var cardTop = boxTop + (boxHeight - cardHeight) / 2;
-        this.layoutOneCard(cardDiv, cardId, props, layout, this.zIndexBase, cardLeft, cardTop, cardWidth, cardHeight);
-    }
-});
\ No newline at end of file