Update generator

generator/css/ui.css

@@ -1,11 +1,37 @@
 #preview-container {
-    padding: 10px;
-    border: 10px gray;
+    margin: 10px;
     background-color: white;
-    height: 100mm;
     display: flex;
-    flex-direction: row;
     justify-content: space-around;
+    align-items: center;
+}
+
+/* Small screen (preview fills all columns) */
+@media (max-width : 1199px) {
+    .preview-container {
+        flex-direction: row;
+    }
+    .card {
+        margin-right: 10px;
+    }
+}
+/* Large screen (preview fills one column, columns are narrow) */
+@media (min-width: 1200px) and (max-width : 1599px) {
+    .preview-container {
+        flex-direction: column;
+    }
+    .card {
+        margin-bottom: 10px;
+    }
+}
+/* Huge screen (preview fills one column, columns are wide) */
+@media (min-width : 1600px) {
+    .preview-container {
+        flex-direction: row;
+    }
+    .card {
+        margin-right: 10px;
+    }
 }
 
 .row-eq-height {
@@ -20,4 +46,17 @@
     border-radius: 4px !important;
     border-top-right-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
+}
+
+.form-group {
+    margin-bottom: 10px;
+}
+
+.card h4 {
+    /* Revert bootstrap style for the card preview */
+    font-weight: bold;
+}
+
+.form-horizontal {
+    margin-top: 10px;
 }

generator/generate.html

@@ -42,33 +42,59 @@
         </div>
         <div class="row">
             <div class="col-md-12 col-lg-3">
-                <h3>Menu</h3>
-                <form role="form">
-                    <span class="help-block" id="total_card_count">Deck contains 0 cards.</span>
+                <!--<h3>Menu</h3>-->
+                <form role="form" class="form-horizontal">
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
                     <a href="" id="file-save-link" style="display:none">Hidden download link</a>
-                    <button type="button" class="btn btn-info btn-block" id="button-help">Open Help</button>
-                    <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards (discards current data)</button>
-                    <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>
-                    <button type="button" class="btn btn-primary btn-block" id="button-save">Save cards to file</button>
-                    <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>
-                    <span class="help-block">Note: generated cards open in a new tab or window.</span>
+                    <div class="form-group">
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-info btn-block" id="button-help">Open Help</button>
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-danger btn-block" id="button-clear">Delete all</button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample</button>
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-load">Load from file</button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-sort-name">Sort by name</button>
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-save">Save to file</button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-sort-icon">Sort by icon</button>
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-success btn-block" id="button-generate">Generate</button>
+                        </div>
+                    </div>
+                    <span class="help-block">Generated cards open in a new tab or window.</span>
                 </form>
                 <h3>Default values</h3>
                 <form role="form" class="form-horizontal">
                     <div class="form-group">
-                        <label for="small-icons" class="col-sm-3 control-label">Small icon</label>
-                        <div class="col-sm-9">
+                        <label for="small-icons" class="col-sm-2 control-label">Icon</label>
+                        <div class="col-sm-10">
                             <div class="checkbox">
                                 <label>
-                                    <input type="checkbox" checked id="small-icons"> Use small icons on the front
+                                    <input type="checkbox" checked id="small-icons"> Use small front icons
                                 </label>
                             </div>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="default-color" class="col-sm-3 control-label">Color</label>
-                        <div class="col-sm-9">
+                        <label for="default-color" class="col-sm-2 control-label">Color</label>
+                        <div class="col-sm-10">
                             <div class="input-group">
                                 <select id="default_color_selector" class="colorselector-data"></select>
                                 <input type="text" id="default-color" class="form-control" placeholder="Card color" data-property="color">
@@ -76,8 +102,8 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="default-icon" class="col-sm-3 control-label">Icon</label>
-                        <div class="col-sm-9">
+                        <label for="default-icon" class="col-sm-2 control-label">Icon</label>
+                        <div class="col-sm-10">
                             <div class="input-group">
                                 <span class="input-group-btn">
                                     <button class="btn btn-default icon-select-button" type="button">Search</button>
@@ -87,26 +113,45 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="default-title-size" class="col-sm-3 control-label">Title size</label>
-                        <div class="col-sm-9">
-                            <div class="input-group">
-                                <select class="form-control" id="default-title-size">
-                                    <option value="big">big</option>
-                                    <option value="normal" selected>normal</option>
-                                    <option value="small">small</option>
-                                    <option value="tiny">tiny</option>
-                                </select>
-                            </div>
+                        <label for="default-title-size" class="col-sm-2 control-label">Title</label>
+                        <div class="col-sm-10">
+                            <select class="form-control" id="default-title-size">
+                                <option value="big">big font</option>
+                                <option value="normal" selected>normal font</option>
+                                <option value="small">small font</option>
+                                <option value="tiny">tiny font</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-apply-color">Apply color</button>
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-apply-font">Apply title font</button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-apply-icon">Apply icon</button>
+                        </div>
+                        <div class="col-sm-6">
+                            <button type="button" class="btn btn-primary btn-block" id="button-apply-icon-back">Apply back icon</button>
                         </div>
                     </div>
                 </form>
             </div>
             <div class="col-md-12 col-lg-5">
-                <h3>Card</h3>
-                <span class="help-block">Use this part to edit individual cards.</span>
+                <!--<h3>Card</h3>-->
                 <form class="form-horizontal" role="form">
                     <div class="form-group">
-                        <label for="selected-card" class="col-sm-2 control-label">Selected card</label>
+                        <label for="selected-card" class="col-sm-2 control-label">Deck</label>
+                        <div class="col-sm-10">
+                            <p class="form-control-static" id="total_card_count">Deck contains 0 cards.</p>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="selected-card" class="col-sm-2 control-label">Card</label>
                         <div class="col-sm-10">
                             <select class="form-control" id="selected-card"></select>
                         </div>
@@ -114,7 +159,7 @@
                     <div class="form-group">
                         <label class="col-sm-2 control-label"></label>
                         <div class="col-sm-4">
-                            <button type="button" class="btn btn-danger btn-block" id="button-delete-card">Delete selected card</button>
+                            <button type="button" class="btn btn-danger btn-block" id="button-delete-card">Delete card</button>
                         </div>
                         <div class="col-sm-3">
                             <button type="button" class="btn btn-primary btn-block" id="button-add-card">Add new card</button>
@@ -175,9 +220,8 @@
                 </form>
             </div>
             <div class="col-md-12 col-lg-4">
-                <h3>Preview</h3>
-                <span class="help-block">Preview might not be 100% accurate due to style conflicts.</span>
-                <div id="preview-container">
+                <!--<h3>Preview</h3>-->
+                <div id="preview-container" class="preview-container">
                 </div>
             </div>
         </div>

generator/js/cards.js

@@ -132,6 +132,7 @@ var card_element_generators = {
     subtitle: card_element_subtitle,
     property: card_element_property,
     rule: card_element_ruler,
+    ruler: card_element_ruler,
     description: card_element_description,
     text: card_element_text,
     fill: card_element_fill,
@@ -152,7 +153,7 @@ function card_generate_contents(contents, card_data, options) {
         var element_generator = card_element_generators[element_name];
         if (element_generator) {
             return element_generator(element_params, card_data, options);
-        } else {
+        } else if (element_name.length > 0) {
             return card_element_unknown(element_params, card_data, options);
         }
     }).join("\n");

generator/js/ui.js

@@ -2,6 +2,37 @@
 var card_data = [];
 var card_options = card_default_options();
 
+function mergeSort(arr, compare) {
+    if (arr.length < 2)
+        return arr;
+
+    var middle = parseInt(arr.length / 2);
+    var left = arr.slice(0, middle);
+    var right = arr.slice(middle, arr.length);
+
+    return merge(mergeSort(left, compare), mergeSort(right, compare), compare);
+}
+
+function merge(left, right, compare) {
+    var result = [];
+
+    while (left.length && right.length) {
+        if (compare(left[0], right[0]) <= 0) {
+            result.push(left.shift());
+        } else {
+            result.push(right.shift());
+        }
+    }
+
+    while (left.length)
+        result.push(left.shift());
+
+    while (right.length)
+        result.push(right.shift());
+
+    return result;
+}
+
 function ui_generate() {
     // Generate output HTML
     var card_html = card_pages_generate_html(card_data, card_options);
@@ -55,9 +86,10 @@ function ui_add_new_card() {
 
 function ui_duplicate_card() {
     if (card_data.length > 0) {
-        card_data.push(ui_selected_card());
-        var card = card_data[card_data.length - 1];
-        card.title = card.title + " (Copy)";
+        var old_card = ui_selected_card();
+        var new_card = $.extend({}, old_card);
+        card_data.push(new_card);
+        new_card.title = new_card.title + " (Copy)";
     } else {
         card_data.push(card_default_data());
     }
@@ -84,7 +116,7 @@ function ui_delete_card() {
 }
 
 function ui_update_card_list() {
-    $("#total_card_count").text("Deck contains " + card_data.length + " cards.");
+    $("#total_card_count").text("Deck contains " + card_data.length + " unique cards.");
 
     $('#selected-card').empty();
     for (var i = 0; i < card_data.length; ++i) {
@@ -258,6 +290,53 @@ function ui_change_default_icon_size() {
     ui_render_selected_card();
 }
 
+function ui_sort_by_name() {
+    card_data = mergeSort(card_data, function (a, b) {
+        if (a.title > b.title) {
+            return 1;
+        }
+        if (a.title < b.title) {
+            return -1;
+        }
+        return 0;
+    });
+    ui_update_card_list();
+}
+
+function ui_sort_by_icon() {
+    card_data = mergeSort(card_data, function (a, b) {
+        if (a.icon > b.icon) {
+            return 1;
+        }
+        if (a.icon < b.icon) {
+            return -1;
+        }
+        return 0;
+    });
+    ui_update_card_list();
+}
+
+function ui_apply_default_color() {
+    for (var i = 0; i < card_data.length; ++i) {
+        card_data[i].color = card_options.default_color;
+    }
+    ui_render_selected_card();
+}
+
+function ui_apply_default_icon() {
+    for (var i = 0; i < card_data.length; ++i) {
+        card_data[i].icon = card_options.default_icon;
+    }
+    ui_render_selected_card();
+}
+
+function ui_apply_default_icon_back() {
+    for (var i = 0; i < card_data.length; ++i) {
+        card_data[i].icon_back = card_options.default_icon;
+    }
+    ui_render_selected_card();
+}
+
 $(document).ready(function () {
     ui_setup_color_selector();
     $('.icon-list').typeahead({source:icon_names});
@@ -265,12 +344,19 @@ $(document).ready(function () {
     $("#button-generate").click(ui_generate);
     $("#button-load").click(function () { $("#file-load").click(); });
     $("#file-load").change(ui_load_files);
+    $("#button-clear").click(ui_clear_all);
     $("#button-load-sample").click(ui_load_sample);
     $("#button-save").click(ui_save_file);
+    $("#button-sort-name").click(ui_sort_by_name);
+    $("#button-sort-icon").click(ui_sort_by_icon);
     $("#button-add-card").click(ui_add_new_card);
     $("#button-duplicate-card").click(ui_duplicate_card);
     $("#button-delete-card").click(ui_delete_card);
     $("#button-help").click(ui_open_help);
+    $("#button-apply-color").click(ui_apply_default_color);
+    $("#button-apply-icon").click(ui_apply_default_icon);
+    $("#button-apply-icon-back").click(ui_apply_default_icon_back);
+
     $("#selected-card").change(ui_update_selected_card);
 
     $("#card-title").change(ui_change_card_title);