okos
/
rpg-cards
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

wip

crobi 10 年前
父节点
d561a25f24
当前提交
e9fbe3b841
共有 2 个文件被更改，包括 60 次插入 和 130 次删除
合并视图 显示文件统计
  1. 3
    8
      generator/generate.html
  2. 57
    122
      generator/js/cards.js

+ 3
- 8
generator/generate.html 查看文件

23 
     <script type="text/javascript" defer src="js/ui.js"></script>
 23 
     <script type="text/javascript" defer src="js/ui.js"></script>
24 
     <!-- CSS -->
 24 
     <!-- CSS -->
25 
     <link href="css/ui.css" rel="stylesheet" />
 25 
     <link href="css/ui.css" rel="stylesheet" />
26 
-    <link href="css/cards.css" rel="stylesheet" />
27 
     <link href="css/card-size.css" rel="stylesheet" />
 26 
     <link href="css/card-size.css" rel="stylesheet" />
28 
-    <link href="css/icons.css" rel="stylesheet" />
29 
-	<link href="css/class-icons.css" rel="stylesheet" />
30 
-    <link href="css/custom-icons.css" rel="stylesheet" />
31 
-    <!-- Fonts -->
32 
-    <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
33 
-    <link href='https://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
27 
+    <!-- Components -->
28 
+    <link rel="import" href="components/card.html">
34 
 </head>
 29 
 </head>
35 
 <body>
 30 
 <body>
36 
     <div class="container-fluid">
 31 
     <div class="container-fluid">
361 
                         <li>If you find a bug or have a feature request, post them at the <a href="https://github.com/crobi/rpg-cards/issues">Github project site</a>.</li>
 356 
                         <li>If you find a bug or have a feature request, post them at the <a href="https://github.com/crobi/rpg-cards/issues">Github project site</a>.</li>
362 
                         <li>
 357 
                         <li>
363 
                             The user interface consists of three columns:
358 
                             The user interface consists of three columns:
364 
-                            <img alt="help" src="img/help/help.png" style="max-width:95%; display:block; padding: 5px; margin: 10px 0 10px 0; border: 1px solid #ebebeb; box-shadow: 0 0 5px #ebebeb;"/>
359 
+                            <img alt="help" src="img/help.png" style="max-width:95%; display:block; padding: 5px; margin: 10px 0 10px 0; border: 1px solid #ebebeb; box-shadow: 0 0 5px #ebebeb;"/>
365 
                             The left column contains the menu and global settings.
 360 
                             The left column contains the menu and global settings.
366 
                             In the middle menu, you can select and edit individual cards.
 361 
                             In the middle menu, you can select and edit individual cards.
367 
                             The right column contains a preview of the selected card.
 362 
                             The right column contains a preview of the selected card.

+ 57
- 122
generator/js/cards.js 查看文件

84
84
85 
 function card_element_title(card_data, options) {
 85 
 function card_element_title(card_data, options) {
86 
     var title = card_data.title || "";
 86 
     var title = card_data.title || "";
87 
-    var title_size = card_data.title_size || options.default_title_size || 'normal';
88 
-    return '<div class="card-title card-title-' + title_size + '">' + title + '</div>';
89 
-}
90 
-
91 
-function card_element_icon(card_data, options) {
92 
-    var icon = card_data_icon_front(card_data, options);
93 
-    var classname = "icon";
94 
-    if (options.icon_inline) {
95 
-        classname = "inlineicon";
96 
-    }
87 
+    var title_size = card_data.title_size || options.default_title_size || '13';
88 
+    var icon = card_data_icon_front(card_data, options) + ".svg";
97
89
98 
     var result = "";
 90 
     var result = "";
99 
-    result += '<div class="card-title-' + classname + '-container">';
100 
-    result += '    <div class="card-title-' + classname + ' icon-' + icon + '">';
101 
-    result += '    </div>';
102 
-    result += '</div>';
91 
+    result += '<card-title size="' + title_size + '">';
92 
+    result += '   <h1>' + title + '</h1>';
93 
+    result += '   <h2>' + "" + '</h2>';
94 
+    result += '   <card-icon src="/icons/' + icon + '"></card-icon>';
95 
+    result += '</card-title>';
103 
     return result;
 96 
     return result;
97 
+
98 
+    return '<div class="card-title card-title-' + title_size + '">' + title + '</div>';
104 
 }
 99 
 }
105
100
106 
 function card_element_subtitle(params, card_data, options) {
 101 
 function card_element_subtitle(params, card_data, options) {
107 
-    var subtitle = params[0] || "";
108 
-    return '<div class="card-element card-subtitle">' + subtitle + '</div>';
102 
+    var text = params[0] || "";
103 
+    return '<card-subtitle>' + text + '</card-subtitle>';
109 
 }
 104 
 }
110
105
111 
 function card_element_ruler(params, card_data, options) {
 106 
 function card_element_ruler(params, card_data, options) {
112 
-    var color = card_data_color_front(card_data, options);
113 
-    var fill = 'fill="' + color + '"';
114 
-    var stroke = 'stroke="' + color + '"';
115 
-
116 
-    var result = "";
117 
-    result += '<svg class="card-ruler" height="1" width="100" viewbox="0 0 100 1" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg">';
118 
-    result += '    <polyline points="0,0 100,0.5 0,1" ' + fill + '></polyline>';
119 
-    result += '</svg>';
120 
-    return result;
107 
+    return '<card-rule></card-rule>';
121 
 }
 108 
 }
122
109
123 
 function card_element_boxes(params, card_data, options) {
 110 
 function card_element_boxes(params, card_data, options) {
124 
-    var color = card_data_color_front(card_data, options);
125 
-    var fill = ' fill="none"';
126 
-    var stroke = ' stroke="' + color + '"';
127 
     var count = params[0] || 1;
 111 
     var count = params[0] || 1;
128 
     var size = params[1] || 3;
 112 
     var size = params[1] || 3;
129 
-    var style = 'style="width:' + size + 'em;height:' + size + 'em"';
130 
-
131 
-    var result = "";
132 
-    result += '<div class="card-element card-description-line">';
133 
-    for (var i = 0; i < count; ++i) {
134 
-        result += '<svg class="card-box" height="100" width="100" viewbox="0 0 100 100" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg" ' + style + '>';
135 
-        result += '    <rect x="5" y="5" width="90" height="90" ' + fill + stroke + ' style="stroke-width:10">';
136 
-        result += '</svg>';
137 
-    }
138 
-    result += '</div>';
139 
-    return result;
113 
+    return '<card-boxes size="' + size + '" count="' + count + '"></card-boxes>';
140 
 }
 114 
 }
141
115
142 
 function card_element_property(params, card_data, options) {
 116 
 function card_element_property(params, card_data, options) {
117 
+    var header = params[0] || "";
118 
+    var text = params[1] || "";
143 
     var result = "";
 119 
     var result = "";
144 
-    result += '<div class="card-element card-property-line">';
145 
-    result += '   <h4 class="card-property-name">' + params[0] + '</h4>';
146 
-    result += '   <p class="card-p card-property-text">' + params[1] + '</p>';
147 
-    result += '</div>';
120 
+    result += '<card-property>';
121 
+    result += '   <h4>' + header + '</h4>';
122 
+    result += '   <p>' + text + '</p>';
123 
+    result += '</card-property>';
148 
     return result;
 124 
     return result;
149 
 }
 125 
 }
150
126
151 
 function card_element_description(params, card_data, options) {
 127 
 function card_element_description(params, card_data, options) {
128 
+    var header = params[0] || "";
129 
+    var text = params[1] || "";
152 
     var result = "";
 130 
     var result = "";
153 
-    result += '<div class="card-element card-description-line">';
154 
-    result += '   <h4 class="card-description-name">' + params[0] + '</h4>';
155 
-    result += '   <p class="card-p card-description-text">' + params[1] + '</p>';
156 
-    result += '</div>';
131 
+    result += '<card-description>';
132 
+    result += '   <h4>' + header + '</h4>';
133 
+    result += '   <p>' + text + '</p>';
134 
+    result += '</card-description>';
157 
     return result;
 135 
     return result;
158 
 }
 136 
 }
159
137
160 
 function card_element_text(params, card_data, options) {
 138 
 function card_element_text(params, card_data, options) {
139 
+    var text = params[0] || "";
161 
     var result = "";
 140 
     var result = "";
162 
-    result += '<div class="card-element card-description-line">';
163 
-    result += '   <p class="card-p card-description-text">' + params[0] + '</p>';
164 
-    result += '</div>';
141 
+    result += '<card-description>';
142 
+    result += '   <p>' + text + '</p>';
143 
+    result += '</card-description>';
165 
     return result;
 144 
     return result;
166 
 }
 145 
 }
167
146
168 
 function card_element_dndstats(params, card_data, options) {
 147 
 function card_element_dndstats(params, card_data, options) {
169 
-    var stats = [10, 10, 10, 10, 10, 10];
170 
-    var mods = [0,0,0,0,0,0];
171 
-    for (var i = 0; i < 6; ++i) {
172 
-        stats[i] = parseInt(params[i], 10) || 0;
173 
-        var mod = Math.floor(((stats[i] - 10) / 2));
174 
-        if (mod >= 0) {
175 
-            mod = "+" + mod;
176 
-        } else {
177 
-            mod = "" + mod;
178 
-        }
179 
-        mods[i] = "&nbsp;(" + mod + ")";
180 
-    }
181 
-
182 
     var result = "";
 148 
     var result = "";
183 
-    result += '<table class="card-stats">';
184 
-    result += '    <tbody><tr>';
185 
-    result += '      <th class="card-stats-header">STR</th>';
186 
-    result += '      <th class="card-stats-header">DEX</th>';
187 
-    result += '      <th class="card-stats-header">CON</th>';
188 
-    result += '      <th class="card-stats-header">INT</th>';
189 
-    result += '      <th class="card-stats-header">WIS</th>';
190 
-    result += '      <th class="card-stats-header">CHA</th>';
191 
-    result += '    </tr>';
192 
-    result += '    <tr>';
193 
-    result += '      <td class="card-stats-cell">' + stats[0] + mods[0] + '</td>';
194 
-    result += '      <td class="card-stats-cell">' + stats[1] + mods[1] + '</td>';
195 
-    result += '      <td class="card-stats-cell">' + stats[2] + mods[2] + '</td>';
196 
-    result += '      <td class="card-stats-cell">' + stats[3] + mods[3] + '</td>';
197 
-    result += '      <td class="card-stats-cell">' + stats[4] + mods[4] + '</td>';
198 
-    result += '      <td class="card-stats-cell">' + stats[5] + mods[5] + '</td>';
199 
-    result += '    </tr>';
200 
-    result += '  </tbody>';
201 
-    result += '</table>';
149 
+    result += '<card-dndstats';
150 
+    result += ' str="' + (parseInt(params[0], 10) || "") + '"';
151 
+    result += ' dex="' + (parseInt(params[1], 10) || "") + '"';
152 
+    result += ' con="' + (parseInt(params[2], 10) || "") + '"';
153 
+    result += ' int="' + (parseInt(params[3], 10) || "") + '"';
154 
+    result += ' wis="' + (parseInt(params[4], 10) || "") + '"';
155 
+    result += ' cha="' + (parseInt(params[5], 10) || "") + '"';
156 
+    result += '><card-dndstats>';
202 
     return result;
 157 
     return result;
203 
 }
 158 
 }
204
159
205 
 function card_element_bullet(params, card_data, options) {
 160 
 function card_element_bullet(params, card_data, options) {
206 
-    var result = "";
207 
-    result += '<ul class="card-element card-bullet-line">';
208 
-    result += '   <li class="card-bullet">' + params[0] + '</li>';
209 
-    result += '</ul>';
210 
-    return result;
161 
+    var text = params[0] || "";
162 
+    return '<card-bullet>' + text + '</card-bullet>';
211 
 }
 163 
 }
212
164
213 
 function card_element_section(params, card_data, options) {
 165 
 function card_element_section(params, card_data, options) {
214 
-    var color = card_data_color_front(card_data, options);
215 
-    var section = params[0] || "";
216 
-    return '<h3 class="card-section" style="color:' + color + '">' + section + '</h3>';
166 
+    var text = params[0] || "";
167 
+    return '<card-section>' + text + '</card-section>';
217 
 }
 168 
 }
218
169
219 
 function card_element_fill(params, card_data, options) {
 170 
 function card_element_fill(params, card_data, options) {
220 
-    var flex = params[0] || "1";
221 
-    return '<span class="card-fill" style="flex:' + flex + '"></span>';
171 
+    var size = params[0] || "1";
172 
+    return '<card-fill size="' + size + '"></card-fill>';
222 
 }
 173 
 }
223
174
224 
 function card_element_unknown(params, card_data, options) {
 175 
 function card_element_unknown(params, card_data, options) {
225 
-    return '<div>Unknown element: ' + params.join('<br />') + '</div>';
176 
+    var text = params.join('|');
177 
+    return '<card-description><p>' + text + '</p></card-description>';
226 
 }
 178 
 }
227
179
228 
 function card_element_empty(params, card_data, options) {
 180 
 function card_element_empty(params, card_data, options) {
250
202
251 
 function card_generate_contents(contents, card_data, options) {
 203 
 function card_generate_contents(contents, card_data, options) {
252 
     var result = "";
 204 
     var result = "";
253 
-    result += '<div class="card-content-container">';
205 
+    result += '<card-contents>';
254 
     result += contents.map(function (value) {
 206 
     result += contents.map(function (value) {
255 
         var parts = card_data_split_params(value);
 207 
         var parts = card_data_split_params(value);
256 
         var element_name = parts[0];
 208 
         var element_name = parts[0];
262 
             return card_element_unknown(element_params, card_data, options);
 214 
             return card_element_unknown(element_params, card_data, options);
263 
         }
 215 
         }
264 
     }).join("\n");
 216 
     }).join("\n");
265 
-    result += '</div>';
217 
+    result += '</card-contents>';
266 
     return result;
 218 
     return result;
267 
 }
 219 
 }
268
220
274 
     return result;
 226 
     return result;
275 
 }
 227 
 }
276
228
277 
-function card_generate_color_style(color, options) {
278 
-    return 'style="color:' + color + '; border-color:' + color + '; background-color:' + color + '"';
279 
-}
280 
-
281 
-function card_generate_color_gradient_style(color, options) {
282 
-    return 'style="background: radial-gradient(ellipse at center, white 20%, ' + color + ' 120%)"';
283 
-}
284 
-
285 
 function card_generate_front(data, options) {
 229 
 function card_generate_front(data, options) {
286 
     var color = card_data_color_front(data, options);
 230 
     var color = card_data_color_front(data, options);
287 
-    var style_color = card_generate_color_style(color, options);
288
231
289 
     var result = "";
 232 
     var result = "";
290 
-    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
291 
-    result += card_element_icon(data, options);
233 
+    result += '<rpg-card color="' + color + '" class="card-size-' + options.card_size + '">';
292 
     result += card_element_title(data, options);
 234 
     result += card_element_title(data, options);
293 
     result += card_generate_contents(data.contents, data, options);
 235 
     result += card_generate_contents(data.contents, data, options);
294 
-    result += '</div>';
295 
-
236 
+    result += '</rpg-card>';
296 
     return result;
 237 
     return result;
297 
 }
 238 
 }
298
239
299 
 function card_generate_back(data, options) {
 240 
 function card_generate_back(data, options) {
300 
     var color = card_data_color_back(data, options)
 241 
     var color = card_data_color_back(data, options)
301 
-    var style_color = card_generate_color_style(color, options);
302 
-    var style_gradient = card_generate_color_gradient_style(color, options);
303 
-    var icon = card_data_icon_back(data, options);
242 
+    var icon = card_data_icon_back(data, options) + ".svg";
304
243
305 
     var result = "";
 244 
     var result = "";
306 
-    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
307 
-    result += '  <div class="card-back" ' + style_gradient + '>';
308 
-    result += '    <div class="card-back-inner">';
309 
-    result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
310 
-    result += '    </div>';
311 
-    result += '  </div>';
312 
-    result += '</div>';
313 
-
245 
+    result += '<rpg-card color="' + color + '">';
246 
+    result += '   <card-back>';
247 
+    result += '       <card-icon src="/icons/' + icon + '"></card-icon>';
248 
+    result += '   </card-back>';
249 
+    result += '</rpg-card>';
314 
     return result;
 250 
     return result;
315 
 }
 251 
 }
316
252
318 
     var style_color = card_generate_color_style("white");
 254 
     var style_color = card_generate_color_style("white");
319
255
320 
     var result = "";
 256 
     var result = "";
321 
-    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
322 
-    result += '</div>';
323 
-
257 
+    result += '<rpg-card color="' + color + '">';
258 
+    result += '</rpg-card>';
324 
     return card_repeat(result, count);
 259 
     return card_repeat(result, count);
325 
 }
 260 
 }
326
261

撰写 预览
正在加载...
取消
保存