Sin descripción
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ui.js 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. // Ugly global variable holding the current card deck
  2. var card_data = [];
  3. var card_options = card_default_options();
  4. function mergeSort(arr, compare) {
  5. if (arr.length < 2)
  6. return arr;
  7. var middle = parseInt(arr.length / 2);
  8. var left = arr.slice(0, middle);
  9. var right = arr.slice(middle, arr.length);
  10. return merge(mergeSort(left, compare), mergeSort(right, compare), compare);
  11. }
  12. function merge(left, right, compare) {
  13. var result = [];
  14. while (left.length && right.length) {
  15. if (compare(left[0], right[0]) <= 0) {
  16. result.push(left.shift());
  17. } else {
  18. result.push(right.shift());
  19. }
  20. }
  21. while (left.length)
  22. result.push(left.shift());
  23. while (right.length)
  24. result.push(right.shift());
  25. return result;
  26. }
  27. var ui_generate_modal_shown = false;
  28. function ui_generate() {
  29. // Generate output HTML
  30. var card_html = card_pages_generate_html(card_data, card_options);
  31. // Open a new window for the output
  32. // Use a separate window to avoid CSS conflicts
  33. var tab = window.open("output.html", 'rpg-cards-output');
  34. if (ui_generate_modal_shown == false) {
  35. $("#print-modal").modal('show');
  36. ui_generate_modal_shown = true;
  37. }
  38. // Send the generated HTML to the new window
  39. // Use a delay to give the new window time to set up a message listener
  40. setTimeout(function () { tab.postMessage(card_html, '*') }, 500);
  41. }
  42. function ui_load_sample() {
  43. card_data = card_data_example;
  44. ui_update_card_list();
  45. }
  46. function ui_clear_all() {
  47. card_data = [];
  48. ui_update_card_list();
  49. }
  50. function ui_load_files(evt) {
  51. // ui_clear_all();
  52. var files = evt.target.files;
  53. for (var i = 0, f; f = files[i]; i++) {
  54. var reader = new FileReader();
  55. reader.onload = function (reader) {
  56. var data = JSON.parse(this.result);
  57. ui_add_cards(data);
  58. };
  59. reader.readAsText(f);
  60. }
  61. // Reset file input
  62. $("#file-load-form")[0].reset();
  63. }
  64. function ui_add_cards(data) {
  65. card_data = card_data.concat(data);
  66. ui_update_card_list();
  67. }
  68. function ui_add_new_card() {
  69. card_data.push(card_default_data());
  70. ui_update_card_list();
  71. ui_select_card_by_index(card_data.length - 1);
  72. }
  73. function ui_duplicate_card() {
  74. if (card_data.length > 0) {
  75. var old_card = ui_selected_card();
  76. var new_card = $.extend({}, old_card);
  77. card_data.push(new_card);
  78. new_card.title = new_card.title + " (Copy)";
  79. } else {
  80. card_data.push(card_default_data());
  81. }
  82. ui_update_card_list();
  83. ui_select_card_by_index(card_data.length - 1);
  84. }
  85. function ui_select_card_by_index(index) {
  86. $("#selected-card").val(index);
  87. ui_update_selected_card();
  88. }
  89. function ui_selected_card_index() {
  90. return parseInt($("#selected-card").val(), 10);
  91. }
  92. function ui_selected_card() {
  93. return card_data[ui_selected_card_index()];
  94. }
  95. function ui_delete_card() {
  96. card_data.splice(ui_selected_card_index(), 1);
  97. ui_update_card_list();
  98. }
  99. function ui_update_card_list() {
  100. $("#total_card_count").text("Deck contains " + card_data.length + " unique cards.");
  101. $('#selected-card').empty();
  102. for (var i = 0; i < card_data.length; ++i) {
  103. var card = card_data[i];
  104. $('#selected-card')
  105. .append($("<option></option>")
  106. .attr("value", i)
  107. .text(card.title));
  108. }
  109. ui_update_selected_card();
  110. }
  111. function ui_save_file() {
  112. var str = JSON.stringify(card_data, null, " ");
  113. var parts = [str];
  114. var blob = new Blob(parts, { type: 'application/json' });
  115. var url = URL.createObjectURL(blob);
  116. var a = $("#file-save-link")[0];
  117. a.href = url;
  118. a.download = "rpg_cards.json";
  119. a.click();
  120. setTimeout(function () { URL.revokeObjectURL(url); }, 500);
  121. }
  122. function ui_update_selected_card() {
  123. var card = ui_selected_card();
  124. if (card) {
  125. $("#card-title").val(card.title);
  126. $("#card-title-size").val(card.title_size);
  127. $("#card-count").val(card.count);
  128. $("#card-icon").val(card.icon);
  129. $("#card-icon-back").val(card.icon_back);
  130. $("#card-contents").val(card.contents.join("\n"));
  131. $("#card-color").val(card.color).change();
  132. }
  133. ui_render_selected_card();
  134. }
  135. function ui_render_selected_card() {
  136. var card = ui_selected_card();
  137. $('#preview-container').empty();
  138. if (card) {
  139. var front = card_generate_front(card, card_options);
  140. var back = card_generate_back(card, card_options);
  141. $('#preview-container').html(front + "\n" + back);
  142. }
  143. }
  144. function ui_open_help() {
  145. window.open("http://crobi.github.io/rpg-cards/", "_blank");
  146. }
  147. function ui_select_icon() {
  148. window.open("http://game-icons.net/", "_blank");
  149. }
  150. function ui_setup_color_selector() {
  151. // Insert colors
  152. $.each(card_colors, function (name, val) {
  153. $(".colorselector-data")
  154. .append($("<option></option>")
  155. .attr("value", name)
  156. .attr("data-color", val)
  157. .text(name));
  158. });
  159. // Callbacks for when the user picks a color
  160. $('#default_color_selector').colorselector({
  161. callback: function (value, color, title) {
  162. $("#default-color").val(title);
  163. ui_set_default_color(title);
  164. }
  165. });
  166. $('#card_color_selector').colorselector({
  167. callback: function (value, color, title) {
  168. $("#card-color").val(title);
  169. ui_set_card_color(value);
  170. }
  171. });
  172. // Styling
  173. $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
  174. }
  175. function ui_set_default_color(color) {
  176. card_options.default_color = color;
  177. ui_render_selected_card();
  178. }
  179. function ui_change_option() {
  180. var property = $(this).attr("data-option");
  181. var value = $(this).val();
  182. card_options[property] = value;
  183. ui_render_selected_card();
  184. }
  185. function ui_change_card_title() {
  186. var title = $("#card-title").val();
  187. var card = ui_selected_card();
  188. if (card) {
  189. card.title = title;
  190. $("#selected-card option:selected").text(title);
  191. ui_render_selected_card();
  192. }
  193. }
  194. function ui_change_card_property() {
  195. var property = $(this).attr("data-property");
  196. var value = $(this).val();
  197. var card = ui_selected_card();
  198. if (card) {
  199. card[property] = value;
  200. ui_render_selected_card();
  201. }
  202. }
  203. function ui_set_card_color(value) {
  204. var card = ui_selected_card();
  205. if (card) {
  206. card.color = value;
  207. ui_render_selected_card();
  208. }
  209. }
  210. function ui_update_card_color_selector(color, input, selector) {
  211. if ($(selector + " option[value='" + color + "']").length > 0) {
  212. // Update the color selector to the entered value
  213. $(selector).colorselector("setValue", color);
  214. } else {
  215. // Unknown color - select a neutral color and reset the text value
  216. $(selector).colorselector("setValue", "");
  217. input.val(color);
  218. }
  219. }
  220. function ui_change_card_color() {
  221. var input = $(this);
  222. var color = input.val();
  223. ui_update_card_color_selector(color, input, "#card_color_selector");
  224. ui_set_card_color(color);
  225. }
  226. function ui_change_default_color() {
  227. var input = $(this);
  228. var color = input.val();
  229. ui_update_card_color_selector(color, input, "#default_color_selector");
  230. ui_set_default_color(color);
  231. }
  232. function ui_change_default_icon() {
  233. var value = $(this).val();
  234. card_options.default_icon = value;
  235. ui_render_selected_card();
  236. }
  237. function ui_change_card_contents() {
  238. var value = $(this).val();
  239. var card = ui_selected_card();
  240. if (card) {
  241. card.contents = value.split("\n");
  242. ui_render_selected_card();
  243. }
  244. }
  245. function ui_change_default_title_size() {
  246. card_options.default_title_size = $(this).val();
  247. ui_render_selected_card();
  248. }
  249. function ui_change_default_icon_size() {
  250. card_options.icon_inline = $(this).is(':checked');
  251. ui_render_selected_card();
  252. }
  253. function ui_sort_by_name() {
  254. card_data = mergeSort(card_data, function (a, b) {
  255. if (a.title > b.title) {
  256. return 1;
  257. }
  258. if (a.title < b.title) {
  259. return -1;
  260. }
  261. return 0;
  262. });
  263. ui_update_card_list();
  264. }
  265. function ui_sort_by_icon() {
  266. card_data = mergeSort(card_data, function (a, b) {
  267. if (a.icon > b.icon) {
  268. return 1;
  269. }
  270. if (a.icon < b.icon) {
  271. return -1;
  272. }
  273. return 0;
  274. });
  275. ui_update_card_list();
  276. }
  277. function ui_apply_default_color() {
  278. for (var i = 0; i < card_data.length; ++i) {
  279. card_data[i].color = card_options.default_color;
  280. }
  281. ui_render_selected_card();
  282. }
  283. function ui_apply_default_icon() {
  284. for (var i = 0; i < card_data.length; ++i) {
  285. card_data[i].icon = card_options.default_icon;
  286. }
  287. ui_render_selected_card();
  288. }
  289. function ui_apply_default_icon_back() {
  290. for (var i = 0; i < card_data.length; ++i) {
  291. card_data[i].icon_back = card_options.default_icon;
  292. }
  293. ui_render_selected_card();
  294. }
  295. $(document).ready(function () {
  296. ui_setup_color_selector();
  297. $('.icon-list').typeahead({source:icon_names});
  298. $("#button-generate").click(ui_generate);
  299. $("#button-load").click(function () { $("#file-load").click(); });
  300. $("#file-load").change(ui_load_files);
  301. $("#button-clear").click(ui_clear_all);
  302. $("#button-load-sample").click(ui_load_sample);
  303. //$("#button-save").click(ui_save_file);
  304. $("#button-sort-name").click(ui_sort_by_name);
  305. $("#button-sort-icon").click(ui_sort_by_icon);
  306. $("#button-add-card").click(ui_add_new_card);
  307. $("#button-duplicate-card").click(ui_duplicate_card);
  308. $("#button-delete-card").click(ui_delete_card);
  309. $("#button-help").click(ui_open_help);
  310. $("#button-apply-color").click(ui_apply_default_color);
  311. $("#button-apply-icon").click(ui_apply_default_icon);
  312. $("#button-apply-icon-back").click(ui_apply_default_icon_back);
  313. $("#selected-card").change(ui_update_selected_card);
  314. $("#card-title").change(ui_change_card_title);
  315. $("#card-title-size").change(ui_change_card_property);
  316. $("#card-icon").change(ui_change_card_property);
  317. $("#card-count").change(ui_change_card_property);
  318. $("#card-icon-back").change(ui_change_card_property);
  319. $("#card-color").change(ui_change_card_color);
  320. $("#card-contents").change(ui_change_card_contents);
  321. $("#page-size").change(ui_change_option);
  322. $("#page-rows").change(ui_change_option);
  323. $("#page-columns").change(ui_change_option);
  324. $("#card-arrangement").change(ui_change_option);
  325. $("#card-size").change(ui_change_option);
  326. $("#default-color").change(ui_change_default_color);
  327. $("#default-icon").change(ui_change_default_icon);
  328. $("#default-title-size").change(ui_change_default_title_size);
  329. $("#small-icons").change(ui_change_default_icon_size);
  330. $(".icon-select-button").click(ui_select_icon);
  331. ui_update_card_list();
  332. });