More card editing functionality

generator/generate.html

                 <span class="help-block">Use this part to edit individual cards.</span>
                 <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">Selected card</label>
                         <div class="col-sm-10">
-                            <select class="form-control" id="selected_card"></select>
+                            <select class="form-control" id="selected-card"></select>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="card_contents" class="col-sm-2 control-label"></label>
+                        <label class="col-sm-2 control-label"></label>
                         <div class="col-sm-5">
                             <button type="button" class="btn btn-danger btn-block" id="button-delete-card">Delete selected card</button>
                         </div>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="card_name" class="col-sm-2 control-label">Name</label>
+                        <label for="card-title" class="col-sm-2 control-label">Name</label>
                         <div class="col-sm-10">
-                            <input type="text" id="card_title" class="form-control" placeholder="Title" readonly>
+                            <input type="text" id="card-title" class="form-control" placeholder="Title">
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="card_icon" class="col-sm-2 control-label">Icon</label>
+                        <label for="card-count" class="col-sm-2 control-label">Count</label>
+                        <div class="col-sm-10">
+                            <input type="number" id="card-count" class="form-control" placeholder="Count" data-property="count">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="card-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">Select</button>
                                 </span>
-                                <input type="text" id="card_icon" class="form-control" placeholder="Icon name" readonly>
+                                <input type="text" id="card-icon" class="form-control" placeholder="Icon name" data-property="icon">
                             </div>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="card_color" class="col-sm-2 control-label">Color</label>
+                        <label for="card-color" class="col-sm-2 control-label">Color</label>
                         <div class="col-sm-10">
                             <div class="input-group">
                                 <select id="card_color_selector" class="colorselector-data"></select>
-                                <input type="text" id="card_color" class="form-control" placeholder="Card color" readonly>
+                                <input type="text" id="card-color" class="form-control" placeholder="Card color" data-property="color">
                             </div>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="card_contents" class="col-sm-2 control-label">Contents</label>
+                        <label for="card-contents" class="col-sm-2 control-label">Contents</label>
                         <div class="col-sm-10">
-                            <textarea class="form-control" rows="14" id="card_contents" readonly wrap="off"></textarea>
+                            <textarea class="form-control" rows="14" id="card-contents" wrap="off"></textarea>
                         </div>
                     </div>
                 </form>

generator/js/colors.js

 
 var card_colors = {
     "": "",
-    "maroon": "maroon",
+    "dimgray": "dimgray",
+    "black": "black",
     "darkgoldenrod": "darkgoldenrod",
+    "saddlebrown": "saddlebrown",
+    "indianred": "indianred",
+    "maroon": "maroon",
     "indigo": "indigo",
+    "darkblue": "darkblue",
     "royalblue": "royalblue",
-    "dimgray": "dimgray",
-    "black": "black"
+    "darkgreen": "darkgreen",
+    "#666633": "#666633"
 }

generator/js/ui.js

 function ui_add_new_card() {
     card_data.push(card_default_data());
     ui_update_card_list();
+    ui_select_card_by_index(card_data.length - 1);
+}
+
+function ui_select_card_by_index(index) {
+    $("#selected-card").val(index);
+    ui_update_selected_card();
 }
 
 function ui_selected_card_index() {
-    return parseInt($("#selected_card").val(), 10);
+    return parseInt($("#selected-card").val(), 10);
+}
+
+function ui_selected_card() {
+    return card_data[ui_selected_card_index()];
 }
 
 function ui_delete_card() {
 function ui_update_card_list() {
     $("#total_card_count").text("Deck contains " + card_data.length + " cards.");
 
-    $('#selected_card').empty();
+    $('#selected-card').empty();
     for (var i = 0; i < card_data.length; ++i) {
         var card = card_data[i];
-        $('#selected_card')
+        $('#selected-card')
             .append($("<option></option>")
             .attr("value", i)
             .text(card.title));
 }
 
 function ui_update_selected_card() {
-    var card = card_data[ui_selected_card_index()];
+    var card = ui_selected_card();
     if (card) {
-        $("#card_title").val(card.title);
-        $("#card_icon").val(card.icon);
-        $("#card_contents").val(card.contents.join("\n"));
-        $("#card_color").val(card.color);
-
-        ui_render_card(card);
+        $("#card-title").val(card.title);
+        $("#card-count").val(card.count);
+        $("#card-icon").val(card.icon);
+        $("#card-contents").val(card.contents.join("\n"));
+        $("#card-color").val(card.color);
+        ui_update_card_color_selector(card.color);
     }
+
+    ui_render_selected_card();
 }
 
-function ui_render_card(card) {
-    var front = card_generate_front(card, card_options);
-    var back = card_generate_back(card, card_options);
+function ui_render_selected_card() {
+    var card = ui_selected_card();
     $('#preview-container').empty();
-    $('#preview-container').html(front + "\n" + back);
+    if (card) {
+        var front = card_generate_front(card, card_options);
+        var back = card_generate_back(card, card_options);
+        $('#preview-container').html(front + "\n" + back);
+    }
 }
 
 function ui_open_help() {
 }
 
 function ui_setup_color_selector() {
+    // Insert colors
     $.each(card_colors, function (name, val) {
         $(".colorselector-data")
             .append($("<option></option>")
             .text(name));
     });
     
+    // Callbacks for when the user picks a color
     $('#default_color_selector').colorselector({
         callback: function (value, color, title) {
             $("#default_color").val(title);
     });
     $('#card_color_selector').colorselector({
         callback: function (value, color, title) {
-            $("#card_color").val(title);
+            $("#card-color").val(title);
+            ui_set_card_color(value);
         }
     });
-    $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
 
+    // Callbacks for when the user enters a color as a text
     $("#default_color").change(function (e) {
         var color = $("#default_color").val();
         if ($("#default_color_selector option[value='" + color + "']").length > 0) {
         }
         ui_set_default_color(color);
     });
+
+    // Styling
+    $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
 }
 
 function ui_set_default_color(color) {
     card_options.default_color = color;
 }
 
+function ui_change_card_title() {
+    var title = $("#card-title").val();
+    var card = ui_selected_card();
+    if (card) {
+        card.title = title;
+        $("#selected-card option:selected").text(title);
+        ui_render_selected_card();
+    }
+}
+
+function ui_change_card_property() {
+    var property = $(this).attr("data-property");
+    var value = $(this).val();
+    var card = ui_selected_card();
+    if (card) {
+        card[property] = value;
+        ui_render_selected_card();
+    }
+}
+
+function ui_set_card_color(value) {
+    var card = ui_selected_card();
+    if (card) {
+        card.color = value;
+        ui_render_selected_card();
+    }
+}
+
+function ui_update_card_color_selector(color) {
+    if ($("#card_color_selector option[value='" + color + "']").length > 0) {
+        // Update the color selector to the entered value
+        $("#card_color_selector").colorselector("setValue", color);
+    } else {
+        // Unknown color - select a neutral color and reset the text value
+        $("#card_color_selector").colorselector("setValue", "");
+        $("#card-color").val(color);
+    }
+}
+
+function ui_change_card_color() {
+    var color = $(this).val();
+
+    ui_update_card_color_selector(color);
+    ui_set_card_color(color);
+}
+
+function ui_change_card_contents() {
+    var value = $(this).val();
+
+    var card = ui_selected_card();
+    if (card) {
+        card.contents = value.split("\n");
+        ui_render_selected_card();
+    }
+}
+
+
 $(document).ready(function () {
     ui_setup_color_selector();
 
     $("#button-add-card").click(ui_add_new_card);
     $("#button-delete-card").click(ui_delete_card);
     $("#button-help").click(ui_open_help);
-    $("#selected_card").change(ui_update_selected_card);
+    $("#selected-card").change(ui_update_selected_card);
+
+    $("#card-title").change(ui_change_card_title);
+    $("#card-icon").change(ui_change_card_property);
+    $("#card-count").change(ui_change_card_property);
+    $("#card-color").change(ui_change_card_color);
+    $("#card-contents").change(ui_change_card_contents);
 
     $(".icon-select-button").click(ui_select_icon);