okos
/
rpg-cards
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Preview rendering

Robert Carnecky 10 years ago
parent
ed51f20302
commit
1f91c60652
4 changed files with 55 additions and 33 deletions
Split View Show Diff Stats
  1. 17
    0
      generator/css/ui.css
  2. 15
    26
      generator/generate.html
  3. 7
    6
      generator/js/cards.js
  4. 16
    1
      generator/js/ui.js

+ 17
- 0
generator/css/ui.css View File 

@@ -1,4 +1,21 @@
1 1 
 .color-label {
2 2 
     float: left;
3 3 
     margin-right: 5px;
4 
+}
5 
+
6 
+#preview-container {
7 
+    padding: 10px;
8 
+    border: 10px gray;
9 
+    background-color: white;
10 
+    height: 100mm;
11 
+    display: flex;
12 
+    flex-direction: row;
13 
+    justify-content: space-around;
14 
+}
15 
+
16 
+.row-eq-height {
17 
+  display: -webkit-box;
18 
+  display: -webkit-flex;
19 
+  display: -ms-flexbox;
20 
+  display:         flex;
4 21 
 }

+ 15
- 26
generator/generate.html View File 

@@ -18,16 +18,18 @@
18 18 
     <script type="text/javascript" defer src="js/ui.js"></script>
19 19 
     <!-- CSS -->
20 20 
     <link href="css/ui.css" rel="stylesheet" />
21 
+    <link href="css/cards.css" rel="stylesheet" />
22 
+    <link href="css/icons.css" rel="stylesheet" />
23 
+    <link href="css/custom-icons.css" rel="stylesheet" />
21 24 
 </head>
22 25 
 <body>
23 
-    <div class="container">
26 
+    <div class="container-fluid">
24 27 
         <h1 class="page-header">RPG card generator</h1>
25 28 
         <div class="row">
26 29 
             <div class="alert alert-danger alert-dismissible" role="alert">
27 30 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
28 31 
                 <strong>Experimental user interface!</strong>
29 
-                This user interface is experimental and largely non-functional.
30 
-                The only thing that works right now are the "load sample cards", "load cards from file", "save cards", and "generate cards" buttons.
32 
+                This user interface is experimental and some UI elements are non-functional.
31 33 
             </div>
32 34 
             <div class="alert alert-warning alert-dismissible" role="alert">
33 35 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 
@@ -35,26 +37,21 @@
35 37 
                 Some RPG systems are protected by copyright.
36 38 
                 Even if some spell/item data is freely available, it does not mean you may redistribute cards containing such data.
37 39 
             </div>
38 
-            <div class="alert alert-info alert-dismissible" role="alert">
39 
-                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
40 
-                If you need help on how to use this tool, go visit <a href="http://crobi.github.io/rpg-cards/" class="alert-link">http://crobi.github.io/rpg-cards/</a>.
41 
-            </div>
42 40 
         </div>
43 
-        <div class="row">
44 
-            <div class="col-md-4">
41 
+        <div class="row row-eq-height">
42 
+            <div class="col-md-3">
45 43 
                 <h3>Menu</h3>
46 44 
                 <form role="form">
47 45 
                     <span class="help-block" id="total_card_count">Deck contains 0 cards.</span>
48 46 
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
49 47 
                     <a href="" id="file-save-link" style="display:none">Hidden download link</a>
48 
+                    <button type="button" class="btn btn-info btn-block" id="button-help">Open Help</button>
50 49 
                     <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>
51 
-                    <button type="button" class="btn btn-primary btn-block" id="button-save">Save cards</button>
50 
+                    <button type="button" class="btn btn-primary btn-block" id="button-save">Save cards to file</button>
52 51 
                     <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards</button>
53 52 
                     <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>
54 53 
                     <span class="help-block">Note: generated cards open in a new tab or window.</span>
55 54 
                 </form>
56 
-            </div>
57 
-            <div class="col-md-4">
58 55 
                 <h3>Global options</h3>
59 56 
                 <form role="form">
60 57 
                     <div class="checkbox">
 
@@ -84,22 +81,13 @@
84 81 
                     </div>
85 82 
                 </form>
86 83 
             </div>
87 
-            <div class="col-md-4">
88 
-                <h3>Card list</h3>
84 
+            <div class="col-md-5">
85 
+                <h3>Card</h3>
89 86 
                 <form role="form">
90 87 
                     <div class="form-group">
91 88 
                         <label for="selected_card">Selected card</label>
92 89 
                         <select class="form-control" id="selected_card"></select>
93 90 
                     </div>
94 
-                    <button type="button" class="btn btn-primary btn-block" id="button-delete-card">Delete selected card</button>
95 
-                    <button type="button" class="btn btn-primary btn-block" id="button-add-card">Add new card</button>
96 
-                </form>
97 
-            </div>
98 
-        </div>
99 
-        <div class="row">
100 
-            <div class="col-md-8">
101 
-                <h3>Card</h3>
102 
-                <form role="form">
103 91 
                     <div class="form-group">
104 92 
                         <label for="card_name">Name</label>
105 93 
                         <input type="text" id="card_title" class="form-control" placeholder="Title" readonly>
 
@@ -118,15 +106,16 @@
118 106 
                     <div class="form-group">
119 107 
                         <label for="card_contents">Contents</label>
120 108 
                         <textarea class="form-control" rows="10" id="card_contents" readonly wrap="off">
121 
-subtitle | Subtitle text
122 
-rule
123 
-property | Name | Text
124 109 
                         </textarea>
125 110 
                     </div>
111 
+                    <button type="button" class="btn btn-primary btn-block" id="button-delete-card">Delete selected card</button>
112 
+                    <button type="button" class="btn btn-primary btn-block" id="button-add-card">Add new card</button>
126 113 
                 </form>
127 114 
             </div>
128 115 
             <div class="col-md-4">
129 116 
                 <h3>Preview</h3>
117 
+                <div id="preview-container">
118 
+                </div>
130 119 
             </div>
131 120 
         </div>
132 121 
     </div>

+ 7
- 6
generator/js/cards.js View File 

@@ -179,7 +179,6 @@ function card_generate_color_gradient_style(color, options) {
179 179 
 function card_generate_front(data, options) {
180 180 
     var color = card_data_color_front(data, options);
181 181 
     var style_color = card_generate_color_style(color, options);
182 
-    var count = data.count || 1;
183 182
184 183 
     var result = "";
185 184 
     result += '<div class="card" ' + style_color + '>';
 
@@ -188,7 +187,7 @@ function card_generate_front(data, options) {
188 187 
     result += card_generate_contents(data.contents, data, options);
189 188 
     result += '</div>';
190 189
191 
-    return card_repeat(result, count);
190 
+    return result;
192 191 
 }
193 192
194 193 
 function card_generate_back(data, options) {
 
@@ -196,7 +195,6 @@ function card_generate_back(data, options) {
196 195 
     var style_color = card_generate_color_style(color, options);
197 196 
     var style_gradient = card_generate_color_gradient_style(color, options);
198 197 
     var icon = card_data_icon_back(data, options);
199 
-    var count = data.count || 1;
200 198
201 199 
     var result = "";
202 200 
     result += '<div class="card" ' + style_color + '>';
 
@@ -207,7 +205,7 @@ function card_generate_back(data, options) {
207 205 
     result += '  </div>';
208 206 
     result += '</div>';
209 207
210 
-    return card_repeat(result, count);
208 
+    return result;
211 209 
 }
212 210
213 211 
 function card_generate_empty(count, options) {
 
@@ -285,8 +283,11 @@ function card_pages_generate_html(card_data, options) {
285 283 
     var front_cards = [];
286 284 
     var back_cards = [];
287 285 
     card_data.forEach(function (data) {
288 
-        front_cards = front_cards.concat(card_generate_front(data, options));
289 
-        back_cards = back_cards.concat(card_generate_back(data, options));
286 
+        var count = data.count || 1;
287 
+        var front = card_generate_front(data, options);
288 
+        var back = card_generate_back(data, options);
289 
+        front_cards = front_cards.concat(card_repeat(front, count));
290 
+        back_cards = back_cards.concat(card_repeat(back, count));
290 291 
     });
291 292
292 293 
     // Add padding cards so that the last page is full of cards

+ 16
- 1
generator/js/ui.js View File 

@@ -1,5 +1,6 @@
1 1 
 // Ugly global variable holding the current card deck
2 2 
 var card_data = [];
3 
+var card_options = card_default_options();
3 4
4 5 
 function ui_generate() {
5 6 
     // Generate output HTML
 
@@ -95,9 +96,22 @@ function ui_update_selected_card() {
95 96 
         $("#card_title").val(card.title);
96 97 
         $("#card_icon").val(card.icon);
97 98 
         $("#card_contents").val(card.contents.join("\n"));
99 
+
100 
+        ui_render_card(card);
98 101 
     }
99 102 
 }
100 103
104 
+function ui_render_card(card) {
105 
+    var front = card_generate_front(card, card_options);
106 
+    var back = card_generate_back(card, card_options);
107 
+    $('#preview-container').empty();
108 
+    $('#preview-container').html(front + "\n" + back);
109 
+}
110 
+
111 
+function ui_open_help() {
112 
+    window.open("http://crobi.github.io/rpg-cards/", "_blank");
113 
+}
114 
+
101 115 
 $(document).ready(function () {
102 116 
     $("#button-generate").click(ui_generate);
103 117 
     $("#button-load").click(function () { $("#file-load").click(); });
 
@@ -106,8 +120,9 @@ $(document).ready(function () {
106 120 
     $("#button-save").click(ui_save_file);
107 121 
     $("#button-add-card").click(ui_add_new_card);
108 122 
     $("#button-delete-card").click(ui_delete_card);
123 
+    $("#button-help").click(ui_open_help);
109 124 
     $("#selected_card").change(ui_update_selected_card);
110 
-
125 
+
111 126 
     ui_update_card_list();
112 127 
 });
113 128

Write Preview
Loading…
Cancel
Save