From 008aa90756b4262ae5785bebd1da802556e66997 Mon Sep 17 00:00:00 2001
From: Amit Gupta <amitgupta.gwl@gmail.com>
Date: Thu, 17 May 2018 19:59:00 +0530
Subject: [PATCH] Copy paste pattern

- show snakebar when weighted pattern is copied to card with different weight
- copy button : to copy single card pattern without weight
- Shit+copy button : to copy multiple card pattern with weight
- paste button to apply selected patterns
-
---
 index.html              |   1 +
 static/css/snackbar.css |  46 ++++++++
 static/js/app.js        |  14 ++-
 tags/decktemplate.tag   | 183 ++++++++++++++++++++++++++------
 tags/review.tag         |  54 +++-------
 tags/tags.js            | 225 +++++++++++++++++++++++++++-------------
 6 files changed, 372 insertions(+), 151 deletions(-)
 create mode 100644 static/css/snackbar.css

diff --git a/index.html b/index.html
index 2d6f307..d7e0ab7 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
     <link href="static/css/style.css" rel="stylesheet">
     <link href="static/css/masorny.css" rel="stylesheet">
     <link href="static/css/slider.css" rel="stylesheet">
+    <link href="static/css/snackbar.css" rel="stylesheet">
     <style>
     
     </style>
diff --git a/static/css/snackbar.css b/static/css/snackbar.css
new file mode 100644
index 0000000..123ae7b
--- /dev/null
+++ b/static/css/snackbar.css
@@ -0,0 +1,46 @@
+/* The snackbar - position it at the bottom and in the middle of the screen */
+#snackbar {
+    visibility: hidden; /* Hidden by default. Visible on click */
+    min-width: 250px; /* Set a default minimum width */
+    margin-left: -125px; /* Divide value of min-width by 2 */
+    background-color: #333; /* Black background color */
+    color: #fff; /* White text color */
+    text-align: center; /* Centered text */
+    border-radius: 2px; /* Rounded borders */
+    padding: 16px; /* Padding */
+    position: fixed; /* Sit on top of the screen */
+    z-index: 1; /* Add a z-index if needed */
+    left: 50%; /* Center the snackbar */
+    bottom: 30px; /* 30px from the bottom */
+}
+
+/* Show the snackbar when clicking on a button (class added with JavaScript) */
+#snackbar.show {
+    visibility: visible; /* Show the snackbar */
+
+/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
+However, delay the fade out process for 2.5 seconds */
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes fadein {
+    from {bottom: 0; opacity: 0;} 
+    to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+}
\ No newline at end of file
diff --git a/static/js/app.js b/static/js/app.js
index 6c27148..53e87db 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -70,19 +70,23 @@ function rotateSymbolsRandomly(elements){
  * @param {boolean} maintainRatio 
  * @param {*} desiredSize : desired size whould be bigger for big cards, small for small cards
  */
-function resizeSymbolsRandomly(elements, maintainRatio, desiredSize){
+function resizeSymbolsRandomly(elements, randomEnable, maintainRatio, desiredSize){
     elements.each(function(){
         var originalSize = {
             width : $(this).attr("w"),
             height : $(this).attr("h")
         }
-        var size = transformSize(originalSize,true,maintainRatio, desiredSize);
+        var size = transformSize(originalSize,randomEnable,maintainRatio, desiredSize);
         //$(this).width(size.width).height(size.height);
-        $(this).css({width: size.width, height : size.height });
-        $(this).find(".ui-wrapper").css({width: size.width, height : size.height });
-        $(this).find(".ui-wrapper img").css({width: size.width, height : size.height });
+        resizeSymbol($(this), size);
     });
 }
+
+function resizeSymbol(symbol,size){
+    $(symbol).css({width: size.width, height : size.height });
+    $(symbol).find(".ui-wrapper").css({width: size.width, height : size.height });
+    $(symbol).find(".ui-wrapper img").css({width: size.width, height : size.height });
+}
 /* 
 calculate new width and height for a symbol on the basis of original size. 
 Maintains ratio if selected
diff --git a/tags/decktemplate.tag b/tags/decktemplate.tag
index b49c316..fbb3dff 100644
--- a/tags/decktemplate.tag
+++ b/tags/decktemplate.tag
@@ -17,8 +17,8 @@
             </div>
             
             <i class="fa fa-random action-btn btn btn-info"  title="Arrange Randomly" onclick={ arrangeRandomly }></i>
-            <i class="fa fa-copy action-btn btn btn-info"  title="Copy Pattern" onclick={ this.parent.arrangeRandomly }></i>
-            <i class="fa fa-paste action-btn btn btn-info"  title="Paste Pattern" onclick={ this.parent.arrangeRandomly }></i>
+            <i class="fa fa-copy action-btn btn btn-info"  title="Copy Pattern" onclick={ copy }></i>
+            <i class="fa fa-paste action-btn btn btn-info"  title="Paste Pattern" onclick={ paste }></i>
             
 
             <label class="btn-bs-file">
@@ -70,7 +70,46 @@
 
         resizeRandomly(){
             var maintainRatio = $("#resize-action").prop("checked");
-            this.selectCards(resizeSymbolsRandomly, maintainRatio, this.parent.frame.desiredSymbolSize);
+            this.selectCards(resizeSymbolsRandomly, true, maintainRatio, this.parent.frame.desiredSymbolSize);
+        }
+
+        var clipboard = null;
+
+        copy(e){
+            var selected = $(".cf-selected");
+            if(e.shiftKey){
+                //copy pattern weightwise
+                clipboard = {};
+                selected.each((i,cardEl) =>{
+                    var result = this.extractPatternDataWithWeight(cardEl);
+                    if( !clipboard[result.weight] ){
+                        clipboard[result.weight] = [];
+                    }
+                    clipboard[result.weight].push( result.pattern );
+                });
+            }else{
+                if(selected.length > 1 || selected.length === 0 ){
+                    alert("Please select only 1 card.");        
+                }else{
+                    clipboard = this.extractPatternData(selected);
+                }
+            }
+        }
+
+        paste(){
+            var selected = $(".cf-selected");
+            if(clipboard === null || selected.length === 0) return;
+
+            if( Array.isArray(clipboard) ){//non weight
+                selected.each((i,cardEl) =>{
+                    this.applyPatternData( clipboard , cardEl);
+                });
+            }else{
+                selected.each((i,cardEl) =>{
+                    this.applyPatternDataWithWeight(clipboard,cardEl);
+                });
+            }
+            //clipboard = null;
         }
 
         /*loadtemplate(e){
@@ -93,13 +132,111 @@
                 }
             });
         }*/
+        
+
+        extractPatternData(cardEl){
+            var symbols = [];
+            $(cardEl).find(".symbol").each( (si,symbol) => {
+                symbols.push( this.copyStyle(symbol) );
+            });
+            return symbols;
+        }
+
+        applyPatternData(data,cardEl){
+            $(cardEl).find(".symbol").each( (si,symbol) => {
+                this.applyStyle(data[si],symbol);
+            });
+        }
+
+        extractPatternDataFromMultipleCards(cardsEl){
+            var cards = [];
+            $(cardsEl).each( (card_i, card) => {
+                cards.push( this.extractPatternData(card) );
+            });
+        }
+
+        applyPatternDataOnMultipleCards(data,cardsEl){
+            $(cardsEl).each( (card_i, card) => {
+                this.applyPatternData(data[card_i], card);
+            });
+        }
+
+        extractPatternDataWithWeight(cardEl){
+            var totalWeight =0;
+            var symbols = {
+                "1" : [],
+                "2" : []
+            };
+
+            $(cardEl).find(".symbol").each( (si,symbol) => {
+                var weight = $(symbol).attr("weight");
+                symbols[weight].push( this.copyStyle(symbol) );
+                totalWeight += Number.parseInt(weight);
+            });
+
+            return { weight: totalWeight, pattern: symbols};
+        }
+
+/*
+        1. Calculate totalWeight of a card (based on image size)
+        2. Select a set *randomly* from the pattern sets for calculated weight
+        3. For each symbol in selected set, apply pattern on each symbol in given card.
+        */
+        applyPatternDataWithWeight(data,cardEl){
+            var weightSets = data[ $(cardEl).attr("totalweight") ];//there can be multiple pattern set for each weight
+            if(!weightSets){//selected card has different weight
+                showSnackBar();
+                return;
+            }
+            var patternSet = weightSets[ randInRange(0,weightSets.length -1) ];//select one set randomly
+
+            var weightWiseCounter = {//Each set contains symbol position info weight wise
+                "1" : 0,
+                "2" : 0
+            }
+            $(cardEl).find(".symbol").each( (si, symbol) => {
+                var w = $(symbol).attr("weight");
+                var index = weightWiseCounter[w];
+                this.applyStyle( patternSet[ w ][ index ], symbol)
+                weightWiseCounter[w] +=1;
+            } );
+        }
+
+        applyPatternsToCards(data){
+            $(".cardframe").each( (card_i, cardEl) => {
+                this.applyPatternDataWithWeight(data,cardEl);//Each set contains symbol position info weight wise
+            });
+        }
+
+        copyStyle(el){
+            return {
+                top: $(el).position().top,
+                left: $(el).position().left,
+                height: $(el).height(),
+                width: $(el).width(),
+                transform: $(el).css("transform"),
+            }
+        }
+
+        applyStyle(source,target){
+            $(target).css({
+                top: source.top,
+                left: source.left,
+                transform: source.transform,
+            });
+            resizeSymbol($(target), source);
+        }
+
+        
+        
+
         this.exportTemplateName = `${this.parent.frame.symbolsPerCard}-${this.parent.frame.width}x${this.parent.frame.height}-match-it`;
         readTemplateFile(f){
             var input = f.srcElement;
             if (input.files && input.files[0]) {
                 var reader = new FileReader();
                 reader.onload = e => {
-                    this.parent.applyTemplate(JSON.parse(e.target.result));
+                    this.applyPatternsToCards(JSON.parse(e.target.result).cards);
                 }
                 reader.onloadend = e => {
                     this.update();
@@ -114,33 +251,9 @@
                 frame : this.parent.frame,
                 cards: {}
             };
-            $(".cardframe").each(function(fi){
-                var totalWeight =0;
-                var symbols = {
-                    "1" : [],
-                    "2" : []
-                };
-
-                $(this).find(".symbol").each( function(si,symbol){
-                    //var thumbnail = $(this).find("img")[0];
-                    var height = $(symbol).height();
-                    var width = $(symbol).width();
-                    var weight = $(symbol).attr("weight");
-
-                    symbols[weight].push({
-                        top: $(this).position().top,
-                        left: $(this).position().left,
-                        height: height,
-                        width: width,
-                        transform: $(this).css("transform"),
-                    });
-
-                    totalWeight += Number.parseInt(weight);
-                });
-                if(!deck.cards[totalWeight]){
-                    deck.cards[totalWeight] = [];
-                }
-                deck.cards[totalWeight].push(symbols);
+            $(".cardframe").each((fi,frame) => {
+                var result = this.extractPatternDataWithWeight(frame);
+                deck.cards[result.weight].push(result.pattern);
             })
             //TODO: convert to nimn first
             //download(JSON.stringify(deck), `${deck.frame.symbolsPerCard}-${this.frame.width}x${this.frame.height}-match-it.json` ,"application/json");
@@ -149,5 +262,13 @@
 
             download( data, fileName ,"application/vnd.nimn");
         }
+
+        function showSnackBar() {
+            // Get the snackbar DIV
+            var x = $("#snackbar").addClass("show");
+
+            // After 3 seconds, remove the show class from DIV
+            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
+        }
     </script>
 </decktemplate>
\ No newline at end of file
diff --git a/tags/review.tag b/tags/review.tag
index 9c5cd6b..eed6857 100644
--- a/tags/review.tag
+++ b/tags/review.tag
@@ -49,6 +49,7 @@
                 </div>
                 
             </div>
+            <div id="snackbar">Selected card has different size of images</div>
         </div>
     </div>
     <script>
@@ -89,11 +90,12 @@
 
             //position symbols in a card
             $(".cardframe").each( (i,el) => {
-                resizeSymbolsRandomly($(el).find(".symbol"),this.frame.resizeEnable , this.frame.maintainratio, this.frame.desiredSymbolSize);
+                resizeSymbolsRandomly($(el).find(".symbol"), this.frame.resizeEnable, this.frame.maintainratio, this.frame.desiredSymbolSize);
                 if(this.frame.rotateEnable){
                     rotateSymbolsRandomly($(el).find(".symbol"));
                 }
                 setRandomPos($(el).find(".symbol"));
+                this.updateTotalWeight(el);
             })
 
             //Card selection
@@ -150,6 +152,15 @@
                 }
             }
         }
+
+        updateTotalWeight(el){
+            totalWeight = 0;
+            $(el).find(".symbol").each( (i,img) => {
+                totalWeight += Number.parseInt($(img).attr("weight"));
+            });
+            $(el).attr("totalweight", totalWeight);
+        }
+
         this.totalSymbols = totalCombinations($( "#symbolscount" ).val());
         this.cards = createBlocks($( "#symbolscount" ).val());
 
@@ -173,46 +184,5 @@
             }
         }
 
-        applyTemplate(templateData){
-            $(".cardframe").each( (card_i, card) => {
-                var totalWeight = this.calculateTotalWeight(card);
-                var weightSets = templateData.cards[totalWeight];
-                var randomIndex = randInRange(0,weightSets.length -1);
-                var symbols = $(card).find(".symbol");
-                var weightWiseCounter = {
-                    "1" : 0,
-                    "2" : 0
-                }
-                var cardTemplate = weightSets[randomIndex];
-
-                $(card).find(".symbol").each( (si, symbol) => {
-                    var w = $(symbol).attr("weight");
-                    $(symbol).css({
-                        top: cardTemplate[w][ weightWiseCounter[w] ].top,
-                        left: cardTemplate[w][ weightWiseCounter[w] ].left,
-                        transform: cardTemplate[w][ weightWiseCounter[w] ].transform,
-                    })
-                    $(symbol).height(cardTemplate[w][ weightWiseCounter[w] ].height);
-                    $(symbol).width(cardTemplate[w][ weightWiseCounter[w] ].width);
-                    weightWiseCounter[w] +=1;
-                } );
-
-            });
-        }
-
-        calculateTotalWeight(el){
-            var totalWeight = $(el).attr("totalweight");
-            if( ! totalWeight ){
-                totalWeight = 0;
-                $(el).find(".symbol").each( (i,img) => {
-                    totalWeight += Number.parseInt($(img).attr("weight"));
-                });
-                $(el).attr("totalweight", totalWeight);
-                return totalWeight;
-            }else{
-                return totalWeight;
-            }
-        }
-
     </script>
 </review>
\ No newline at end of file
diff --git a/tags/tags.js b/tags/tags.js
index b266a2d..6ac416c 100644
--- a/tags/tags.js
+++ b/tags/tags.js
@@ -1,4 +1,4 @@
-riot.tag2('decktemplate', '<div id="action-bar" class="row align-items-center"> <div class="col form-inline"> <i class="fa fa-repeat action-btn btn btn-info" title="Arrange Randomly" onclick="{rotateRandomly}"></i> <div class="input-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="resize-action" checked> <label class="form-check-label" for="resize-action"> Maintain height-width ratio </label> </div> <span class="fa-stack fa-lg action-btn btn btn-info" title="Resize Randomly" style="font-size: 1.2em;" onclick="{resizeRandomly}"> <i class="fa fa-square-o fa-stack-2x" style="top: -0.5px;"></i> <i class="fa fa-arrows-h fa-stack-1x" style="top: -0.5px;"></i> </span> </div> <i class="fa fa-random action-btn btn btn-info" title="Arrange Randomly" onclick="{arrangeRandomly}"></i> <i class="fa fa-copy action-btn btn btn-info" title="Copy Pattern" onclick="{this.parent.arrangeRandomly}"></i> <i class="fa fa-paste action-btn btn btn-info" title="Paste Pattern" onclick="{this.parent.arrangeRandomly}"></i> <label class="btn-bs-file"> <i class="fa fa-folder-open-o action-btn btn btn-info" title="Open Pattern file" onclick="{this.parent.arrangeRandomly}"></i> <input type="file" class="filebutton" accept="application/vnd.nimn,*.nmn,*.nimn" onchange="{readTemplateFile}"> </label> <div class="form-inline input-group"> <input id="exportTemplateName" type="text" class="form-control" placeholder="Enter the template name " riot-value="{exportTemplateName}" style="width: 300px;"> <i class="fa fa-save action-btn btn btn-info" title="Save Pattern to external file" onclick="{exportTemplate}"></i> </div> </div> </div> </div>', '', '', function(opts) {
+riot.tag2('decktemplate', '<div id="action-bar" class="row align-items-center"> <div class="col form-inline"> <i class="fa fa-repeat action-btn btn btn-info" title="Arrange Randomly" onclick="{rotateRandomly}"></i> <div class="input-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="resize-action" checked> <label class="form-check-label" for="resize-action"> Maintain height-width ratio </label> </div> <span class="fa-stack fa-lg action-btn btn btn-info" title="Resize Randomly" style="font-size: 1.2em;" onclick="{resizeRandomly}"> <i class="fa fa-square-o fa-stack-2x" style="top: -0.5px;"></i> <i class="fa fa-arrows-h fa-stack-1x" style="top: -0.5px;"></i> </span> </div> <i class="fa fa-random action-btn btn btn-info" title="Arrange Randomly" onclick="{arrangeRandomly}"></i> <i class="fa fa-copy action-btn btn btn-info" title="Copy Pattern" onclick="{copy}"></i> <i class="fa fa-paste action-btn btn btn-info" title="Paste Pattern" onclick="{paste}"></i> <label class="btn-bs-file"> <i class="fa fa-folder-open-o action-btn btn btn-info" title="Open Pattern file" onclick="{this.parent.arrangeRandomly}"></i> <input type="file" class="filebutton" accept="application/vnd.nimn,*.nmn,*.nimn" onchange="{readTemplateFile}"> </label> <div class="form-inline input-group"> <input id="exportTemplateName" type="text" class="form-control" placeholder="Enter the template name " riot-value="{exportTemplateName}" style="width: 300px;"> <i class="fa fa-save action-btn btn btn-info" title="Save Pattern to external file" onclick="{exportTemplate}"></i> </div> </div> </div> </div>', '', '', function(opts) {
 
         this.selectCards = function(cb,...arg){
             var elArr = $(".cf-selected");
@@ -21,7 +21,134 @@ riot.tag2('decktemplate', '<div id="action-bar" class="row align-items-center">
 
         this.resizeRandomly = function(){
             var maintainRatio = $("#resize-action").prop("checked");
-            this.selectCards(resizeSymbolsRandomly, maintainRatio, this.parent.frame.desiredSymbolSize);
+            this.selectCards(resizeSymbolsRandomly, true, maintainRatio, this.parent.frame.desiredSymbolSize);
+        }.bind(this)
+
+        var clipboard = null;
+
+        this.copy = function(e){
+            var selected = $(".cf-selected");
+            if(e.shiftKey){
+
+                clipboard = {};
+                selected.each((i,cardEl) =>{
+                    var result = this.extractPatternDataWithWeight(cardEl);
+                    if( !clipboard[result.weight] ){
+                        clipboard[result.weight] = [];
+                    }
+                    clipboard[result.weight].push( result.pattern );
+                });
+            }else{
+                if(selected.length > 1 || selected.length === 0 ){
+                    alert("Please select only 1 card.");
+                }else{
+                    clipboard = this.extractPatternData(selected);
+                }
+            }
+        }.bind(this)
+
+        this.paste = function(){
+            var selected = $(".cf-selected");
+            if(clipboard === null || selected.length === 0) return;
+
+            if( Array.isArray(clipboard) ){
+                selected.each((i,cardEl) =>{
+                    this.applyPatternData( clipboard , cardEl);
+                });
+            }else{
+                selected.each((i,cardEl) =>{
+                    this.applyPatternDataWithWeight(clipboard,cardEl);
+                });
+            }
+
+        }.bind(this)
+
+        this.extractPatternData = function(cardEl){
+            var symbols = [];
+            $(cardEl).find(".symbol").each( (si,symbol) => {
+                symbols.push( this.copyStyle(symbol) );
+            });
+            return symbols;
+        }.bind(this)
+
+        this.applyPatternData = function(data,cardEl){
+            $(cardEl).find(".symbol").each( (si,symbol) => {
+                this.applyStyle(data[si],symbol);
+            });
+        }.bind(this)
+
+        this.extractPatternDataFromMultipleCards = function(cardsEl){
+            var cards = [];
+            $(cardsEl).each( (card_i, card) => {
+                cards.push( this.extractPatternData(card) );
+            });
+        }.bind(this)
+
+        this.applyPatternDataOnMultipleCards = function(data,cardsEl){
+            $(cardsEl).each( (card_i, card) => {
+                this.applyPatternData(data[card_i], card);
+            });
+        }.bind(this)
+
+        this.extractPatternDataWithWeight = function(cardEl){
+            var totalWeight =0;
+            var symbols = {
+                "1" : [],
+                "2" : []
+            };
+
+            $(cardEl).find(".symbol").each( (si,symbol) => {
+                var weight = $(symbol).attr("weight");
+                symbols[weight].push( this.copyStyle(symbol) );
+                totalWeight += Number.parseInt(weight);
+            });
+
+            return { weight: totalWeight, pattern: symbols};
+        }.bind(this)
+
+        this.applyPatternDataWithWeight = function(data,cardEl){
+            var weightSets = data[ $(cardEl).attr("totalweight") ];
+            if(!weightSets){
+                showSnackBar();
+                return;
+            }
+            var patternSet = weightSets[ randInRange(0,weightSets.length -1) ];
+
+            var weightWiseCounter = {
+                "1" : 0,
+                "2" : 0
+            }
+            $(cardEl).find(".symbol").each( (si, symbol) => {
+                var w = $(symbol).attr("weight");
+                var index = weightWiseCounter[w];
+                this.applyStyle( patternSet[ w ][ index ], symbol)
+                weightWiseCounter[w] +=1;
+            } );
+        }.bind(this)
+
+        this.applyPatternsToCards = function(data){
+            $(".cardframe").each( (card_i, cardEl) => {
+                this.applyPatternDataWithWeight(data,cardEl);
+            });
+        }.bind(this)
+
+        this.copyStyle = function(el){
+            return {
+                top: $(el).position().top,
+                left: $(el).position().left,
+                height: $(el).height(),
+                width: $(el).width(),
+                transform: $(el).css("transform"),
+            }
+        }.bind(this)
+
+        this.applyStyle = function(source,target){
+            $(target).css({
+                top: source.top,
+                left: source.left,
+                transform: source.transform,
+            });
+            resizeSymbol($(target), source);
         }.bind(this)
 
         this.exportTemplateName = `${this.parent.frame.symbolsPerCard}-${this.parent.frame.width}x${this.parent.frame.height}-match-it`;
@@ -30,7 +157,7 @@ riot.tag2('decktemplate', '<div id="action-bar" class="row align-items-center">
             if (input.files && input.files[0]) {
                 var reader = new FileReader();
                 reader.onload = e => {
-                    this.parent.applyTemplate(JSON.parse(e.target.result));
+                    this.applyPatternsToCards(JSON.parse(e.target.result).cards);
                 }
                 reader.onloadend = e => {
                     this.update();
@@ -45,33 +172,9 @@ riot.tag2('decktemplate', '<div id="action-bar" class="row align-items-center">
                 frame : this.parent.frame,
                 cards: {}
             };
-            $(".cardframe").each(function(fi){
-                var totalWeight =0;
-                var symbols = {
-                    "1" : [],
-                    "2" : []
-                };
-
-                $(this).find(".symbol").each( function(si,symbol){
-
-                    var height = $(symbol).height();
-                    var width = $(symbol).width();
-                    var weight = $(symbol).attr("weight");
-
-                    symbols[weight].push({
-                        top: $(this).position().top,
-                        left: $(this).position().left,
-                        height: height,
-                        width: width,
-                        transform: $(this).css("transform"),
-                    });
-
-                    totalWeight += Number.parseInt(weight);
-                });
-                if(!deck.cards[totalWeight]){
-                    deck.cards[totalWeight] = [];
-                }
-                deck.cards[totalWeight].push(symbols);
+            $(".cardframe").each((fi,frame) => {
+                var result = this.extractPatternDataWithWeight(frame);
+                deck.cards[result.weight].push(result.pattern);
             })
 
             var data = JSON.stringify(deck);
@@ -79,6 +182,13 @@ riot.tag2('decktemplate', '<div id="action-bar" class="row align-items-center">
 
             download( data, fileName ,"application/vnd.nimn");
         }.bind(this)
+
+        function showSnackBar() {
+
+            var x = $("#snackbar").addClass("show");
+
+            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
+        }
 });
 riot.tag2('design', '<div class="row"> <div class="col-md-4"> <select id="cardsize" class="form-control" onchange="{changeDemoCardSize}"> <option disabled="true">Select Size</option> <option each="{cardsize,name in cards}" riot-value="{name}" selected="{name == \'Normal Playing Card Or Bridge Size\'}">{name}</option> </select> <div class="empty"></div> <select id="symbolscount" onchange="{checkSymbolCount}" class="form-control"> <option selected="false" disabled="true">Number of symbols on a card</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <div class="empty"></div> <div>Choose background color</div> <input id="colorpicker" onchange="{changeBgColor}" value="#ffffff" style="width:100%;" type="color"> <div class="empty"></div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="rotate"> <label class="form-check-label" for="rotate"> Rotate randomly </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="resize"> <label class="form-check-label" for="resize"> Resize randmly </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="maintainratio" checked="true"> <label class="form-check-label" for="maintainratio"> Maintain height width ratio </label> </div> </div> <div class="col-md-8"> <div id="slider-horizontal-val" class="text-center" style="width:160mm;"></div> <div id="slider-horizontal"></div> <div id="demo-card-container"> <div style="float:left; width:160mm; height:160mm;"> <div id="demo-card"> </div> </div> <div id="slider-vertical" style="float:left"></div> <div id="slider-vertical-val" style="float:left"></div> </div> </div> </div>', 'design .ui-slider .ui-slider-handle,[data-is="design"] .ui-slider .ui-slider-handle{ width: 0.8em; height: 0.8em; } design #slider-vertical,[data-is="design"] #slider-vertical{ height: 150mm; width: 5px; } design #slider-horizontal,[data-is="design"] #slider-horizontal{ width: 150mm; height: 5px; } design #demo-card,[data-is="design"] #demo-card{ display: block; outline: 1px solid grey; margin-top: 10px; } design #demo-card-container,[data-is="design"] #demo-card-container{ height: 160mm; } design #slider-vertical-val,[data-is="design"] #slider-vertical-val{ writing-mode: tb-rl; height: 100%; text-align: center; }', '', function(opts) {
 
@@ -270,7 +380,7 @@ riot.tag2('gallery', '<label class="btn-bs-file btn btn-outline-info">Browse Ima
             this.update();
         }.bind(this)
 });
-riot.tag2('review', '<decktemplate></decktemplate> <div id="review-panel" class="input-bar clearfix" style="width:100%"> <div class="photolist-wrapper" style="width:100%"> <div each="{card in cards}" class="cardframe" onclick="{select}" riot-style="background-color: {frame.bgColor}"> <div class="align-center" style="writing-mode: tb-rl; height: 100%; text-align:center; font-size: small; color: gray;">funcards.github.io/match-it</div> <div each="{symbol in card}" class="symbol trans" h="{readSymbol(symbol).size.height}" w="{readSymbol(symbol).size.width}" weight="{calculateWeight( readSymbol(symbol).size )}"> <img riot-src="{readSymbol(symbol,true).src}"> <div class="ui-resizable-handle resizeHandle"></div> </div> </div> </div> </div>', 'review .cardframe,[data-is="review"] .cardframe{ display: block; background-color: white; float: left; margin: 3px; border-radius: 5px; padding: 5px; position: relative; } review .symbol,[data-is="review"] .symbol{ position: absolute; cursor: move; } review .resizeHandle,[data-is="review"] .resizeHandle{ width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; bottom: 1px; right:1px; display: none; } review .ui-rotatable-handle,[data-is="review"] .ui-rotatable-handle{ width: 10px; height: 10px; background-color: green; bottom: 1px; right:1px; border-radius: 5px; cursor: crosshair; display: none; } review .cf-selected,[data-is="review"] .cf-selected{ outline: 4px solid yellow; }', '', function(opts) {
+riot.tag2('review', '<decktemplate></decktemplate> <div id="review-panel" class="input-bar clearfix" style="width:100%"> <div class="photolist-wrapper" style="width:100%"> <div each="{card in cards}" class="cardframe" onclick="{select}" riot-style="background-color: {frame.bgColor}"> <div class="align-center" style="writing-mode: tb-rl; height: 100%; text-align:center; font-size: small; color: gray;">funcards.github.io/match-it</div> <div each="{symbol in card}" class="symbol trans" h="{readSymbol(symbol).size.height}" w="{readSymbol(symbol).size.width}" weight="{calculateWeight( readSymbol(symbol).size )}"> <img riot-src="{readSymbol(symbol,true).src}"> <div class="ui-resizable-handle resizeHandle"></div> </div> </div> <div id="snackbar">Selected card has different size of images</div> </div> </div>', 'review .cardframe,[data-is="review"] .cardframe{ display: block; background-color: white; float: left; margin: 3px; border-radius: 5px; padding: 5px; position: relative; } review .symbol,[data-is="review"] .symbol{ position: absolute; cursor: move; } review .resizeHandle,[data-is="review"] .resizeHandle{ width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; bottom: 1px; right:1px; display: none; } review .ui-rotatable-handle,[data-is="review"] .ui-rotatable-handle{ width: 10px; height: 10px; background-color: green; bottom: 1px; right:1px; border-radius: 5px; cursor: crosshair; display: none; } review .cf-selected,[data-is="review"] .cf-selected{ outline: 4px solid yellow; }', '', function(opts) {
         this.templates = [];
         this.frame = {
             width : $( "#demo-card" ).width(),
@@ -302,11 +412,12 @@ riot.tag2('review', '<decktemplate></decktemplate> <div id="review-panel" class=
             });
 
             $(".cardframe").each( (i,el) => {
-                resizeSymbolsRandomly($(el).find(".symbol"),this.frame.resizeEnable , this.frame.maintainratio, this.frame.desiredSymbolSize);
+                resizeSymbolsRandomly($(el).find(".symbol"), this.frame.resizeEnable, this.frame.maintainratio, this.frame.desiredSymbolSize);
                 if(this.frame.rotateEnable){
                     rotateSymbolsRandomly($(el).find(".symbol"));
                 }
                 setRandomPos($(el).find(".symbol"));
+                this.updateTotalWeight(el);
             })
 
             $("#action-bar").click((e) =>{
@@ -355,6 +466,15 @@ riot.tag2('review', '<decktemplate></decktemplate> <div id="review-panel" class=
                 }
             }
         }.bind(this)
+
+        this.updateTotalWeight = function(el){
+            totalWeight = 0;
+            $(el).find(".symbol").each( (i,img) => {
+                totalWeight += Number.parseInt($(img).attr("weight"));
+            });
+            $(el).attr("totalweight", totalWeight);
+        }.bind(this)
+
         this.totalSymbols = totalCombinations($( "#symbolscount" ).val());
         this.cards = createBlocks($( "#symbolscount" ).val());
 
@@ -376,45 +496,4 @@ riot.tag2('review', '<decktemplate></decktemplate> <div id="review-panel" class=
             }
         }.bind(this)
 
-        this.applyTemplate = function(templateData){
-            $(".cardframe").each( (card_i, card) => {
-                var totalWeight = this.calculateTotalWeight(card);
-                var weightSets = templateData.cards[totalWeight];
-                var randomIndex = randInRange(0,weightSets.length -1);
-                var symbols = $(card).find(".symbol");
-                var weightWiseCounter = {
-                    "1" : 0,
-                    "2" : 0
-                }
-                var cardTemplate = weightSets[randomIndex];
-
-                $(card).find(".symbol").each( (si, symbol) => {
-                    var w = $(symbol).attr("weight");
-                    $(symbol).css({
-                        top: cardTemplate[w][ weightWiseCounter[w] ].top,
-                        left: cardTemplate[w][ weightWiseCounter[w] ].left,
-                        transform: cardTemplate[w][ weightWiseCounter[w] ].transform,
-                    })
-                    $(symbol).height(cardTemplate[w][ weightWiseCounter[w] ].height);
-                    $(symbol).width(cardTemplate[w][ weightWiseCounter[w] ].width);
-                    weightWiseCounter[w] +=1;
-                } );
-
-            });
-        }.bind(this)
-
-        this.calculateTotalWeight = function(el){
-            var totalWeight = $(el).attr("totalweight");
-            if( ! totalWeight ){
-                totalWeight = 0;
-                $(el).find(".symbol").each( (i,img) => {
-                    totalWeight += Number.parseInt($(img).attr("weight"));
-                });
-                $(el).attr("totalweight", totalWeight);
-                return totalWeight;
-            }else{
-                return totalWeight;
-            }
-        }.bind(this)
-
 });
\ No newline at end of file