okos
/
rpg-cards
보기 1
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 Activity
소스 검색

Preview rendering

Robert Carnecky 10 년 전
부모
ed51f20302
커밋
1f91c60652
4개의 변경된 파일과 55개의 추가작업 그리고 33개의 파일을 삭제
통합 보기 변경상태 보기
  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 파일 보기

1 
 .color-label {
 1 
 .color-label {
2 
     float: left;
 2 
     float: left;
3 
     margin-right: 5px;
 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 파일 보기

18 
     <script type="text/javascript" defer src="js/ui.js"></script>
 18 
     <script type="text/javascript" defer src="js/ui.js"></script>
19 
     <!-- CSS -->
 19 
     <!-- CSS -->
20 
     <link href="css/ui.css" rel="stylesheet" />
 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 
 </head>
 24 
 </head>
22 
 <body>
 25 
 <body>
23 
-    <div class="container">
26 
+    <div class="container-fluid">
24 
         <h1 class="page-header">RPG card generator</h1>
 27 
         <h1 class="page-header">RPG card generator</h1>
25 
         <div class="row">
 28 
         <div class="row">
26 
             <div class="alert alert-danger alert-dismissible" role="alert">
 29 
             <div class="alert alert-danger alert-dismissible" role="alert">
27 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 30 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
28 
                 <strong>Experimental user interface!</strong>
 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 
             </div>
 33 
             </div>
32 
             <div class="alert alert-warning alert-dismissible" role="alert">
 34 
             <div class="alert alert-warning alert-dismissible" role="alert">
33 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 35 
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
35 
                 Some RPG systems are protected by copyright.
 37 
                 Some RPG systems are protected by copyright.
36 
                 Even if some spell/item data is freely available, it does not mean you may redistribute cards containing such data.
 38 
                 Even if some spell/item data is freely available, it does not mean you may redistribute cards containing such data.
37 
             </div>
 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 
         </div>
 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 
                 <h3>Menu</h3>
 43 
                 <h3>Menu</h3>
46 
                 <form role="form">
 44 
                 <form role="form">
47 
                     <span class="help-block" id="total_card_count">Deck contains 0 cards.</span>
 45 
                     <span class="help-block" id="total_card_count">Deck contains 0 cards.</span>
48 
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
 46 
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
49 
                     <a href="" id="file-save-link" style="display:none">Hidden download link</a>
 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 
                     <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>
 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 
                     <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards</button>
 51 
                     <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards</button>
53 
                     <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>
 52 
                     <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>
54 
                     <span class="help-block">Note: generated cards open in a new tab or window.</span>
 53 
                     <span class="help-block">Note: generated cards open in a new tab or window.</span>
55 
                 </form>
 54 
                 </form>
56 
-            </div>
57 
-            <div class="col-md-4">
58 
                 <h3>Global options</h3>
 55 
                 <h3>Global options</h3>
59 
                 <form role="form">
 56 
                 <form role="form">
60 
                     <div class="checkbox">
 57 
                     <div class="checkbox">
84 
                     </div>
 81 
                     </div>
85 
                 </form>
 82 
                 </form>
86 
             </div>
 83 
             </div>
87 
-            <div class="col-md-4">
88 
-                <h3>Card list</h3>
84 
+            <div class="col-md-5">
85 
+                <h3>Card</h3>
89 
                 <form role="form">
 86 
                 <form role="form">
90 
                     <div class="form-group">
 87 
                     <div class="form-group">
91 
                         <label for="selected_card">Selected card</label>
 88 
                         <label for="selected_card">Selected card</label>
92 
                         <select class="form-control" id="selected_card"></select>
 89 
                         <select class="form-control" id="selected_card"></select>
93 
                     </div>
 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 
                     <div class="form-group">
 91 
                     <div class="form-group">
104 
                         <label for="card_name">Name</label>
 92 
                         <label for="card_name">Name</label>
105 
                         <input type="text" id="card_title" class="form-control" placeholder="Title" readonly>
 93 
                         <input type="text" id="card_title" class="form-control" placeholder="Title" readonly>
118 
                     <div class="form-group">
 106 
                     <div class="form-group">
119 
                         <label for="card_contents">Contents</label>
 107 
                         <label for="card_contents">Contents</label>
120 
                         <textarea class="form-control" rows="10" id="card_contents" readonly wrap="off">
 108 
                         <textarea class="form-control" rows="10" id="card_contents" readonly wrap="off">
121 
-subtitle | Subtitle text
122 
-rule
123 
-property | Name | Text
124 
                         </textarea>
 109 
                         </textarea>
125 
                     </div>
 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 
                 </form>
 113 
                 </form>
127 
             </div>
 114 
             </div>
128 
             <div class="col-md-4">
 115 
             <div class="col-md-4">
129 
                 <h3>Preview</h3>
 116 
                 <h3>Preview</h3>
117 
+                <div id="preview-container">
118 
+                </div>
130 
             </div>
 119 
             </div>
131 
         </div>
 120 
         </div>
132 
     </div>
 121 
     </div>

+ 7
- 6
generator/js/cards.js 파일 보기

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

+ 16
- 1
generator/js/ui.js 파일 보기

1 
 // Ugly global variable holding the current card deck
 1 
 // Ugly global variable holding the current card deck
2 
 var card_data = [];
 2 
 var card_data = [];
3 
+var card_options = card_default_options();
3
4
4 
 function ui_generate() {
 5 
 function ui_generate() {
5 
     // Generate output HTML
 6 
     // Generate output HTML
95 
         $("#card_title").val(card.title);
 96 
         $("#card_title").val(card.title);
96 
         $("#card_icon").val(card.icon);
 97 
         $("#card_icon").val(card.icon);
97 
         $("#card_contents").val(card.contents.join("\n"));
 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 
 $(document).ready(function () {
 115 
 $(document).ready(function () {
102 
     $("#button-generate").click(ui_generate);
 116 
     $("#button-generate").click(ui_generate);
103 
     $("#button-load").click(function () { $("#file-load").click(); });
 117 
     $("#button-load").click(function () { $("#file-load").click(); });
106 
     $("#button-save").click(ui_save_file);
 120 
     $("#button-save").click(ui_save_file);
107 
     $("#button-add-card").click(ui_add_new_card);
 121 
     $("#button-add-card").click(ui_add_new_card);
108 
     $("#button-delete-card").click(ui_delete_card);
 122 
     $("#button-delete-card").click(ui_delete_card);
123 
+    $("#button-help").click(ui_open_help);
109 
     $("#selected_card").change(ui_update_selected_card);
 124 
     $("#selected_card").change(ui_update_selected_card);
110 
-
125 
+
111 
     ui_update_card_list();
 126 
     ui_update_card_list();
112 
 });
 127 
 });
113
128

Write Preview
Loading…
취소
저장