okos
/
rpg-cards
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

wip

crobi 10 jaren geleden
bovenliggende
d561a25f24
commit
e9fbe3b841
2 gewijzigde bestanden met toevoegingen van 60 en 130 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 3
    8
      generator/generate.html
  2. 57
    122
      generator/js/cards.js

+ 3
- 8
generator/generate.html Bestand weergeven 

@@ -23,14 +23,9 @@
23 23 
     <script type="text/javascript" defer src="js/ui.js"></script>
24 24 
     <!-- CSS -->
25 25 
     <link href="css/ui.css" rel="stylesheet" />
26 
-    <link href="css/cards.css" rel="stylesheet" />
27 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 29 
 </head>
35 30 
 <body>
36 31 
     <div class="container-fluid">
 
@@ -361,7 +356,7 @@
361 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 357 
                         <li>
363 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 360 
                             The left column contains the menu and global settings.
366 361 
                             In the middle menu, you can select and edit individual cards.
367 362 
                             The right column contains a preview of the selected card.

+ 57
- 122
generator/js/cards.js Bestand weergeven 

@@ -84,145 +84,97 @@ function card_data_split_params(value) {
84 84
85 85 
 function card_element_title(card_data, options) {
86 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 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 96 
     return result;
97 
+
98 
+    return '<div class="card-title card-title-' + title_size + '">' + title + '</div>';
104 99 
 }
105 100
106 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 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 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 111 
     var count = params[0] || 1;
128 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 116 
 function card_element_property(params, card_data, options) {
117 
+    var header = params[0] || "";
118 
+    var text = params[1] || "";
143 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 124 
     return result;
149 125 
 }
150 126
151 127 
 function card_element_description(params, card_data, options) {
128 
+    var header = params[0] || "";
129 
+    var text = params[1] || "";
152 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 135 
     return result;
158 136 
 }
159 137
160 138 
 function card_element_text(params, card_data, options) {
139 
+    var text = params[0] || "";
161 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 144 
     return result;
166 145 
 }
167 146
168 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 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 157 
     return result;
203 158 
 }
204 159
205 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 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 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 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 180 
 function card_element_empty(params, card_data, options) {
 
@@ -250,7 +202,7 @@ var card_element_generators = {
250 202
251 203 
 function card_generate_contents(contents, card_data, options) {
252 204 
     var result = "";
253 
-    result += '<div class="card-content-container">';
205 
+    result += '<card-contents>';
254 206 
     result += contents.map(function (value) {
255 207 
         var parts = card_data_split_params(value);
256 208 
         var element_name = parts[0];
 
@@ -262,7 +214,7 @@ function card_generate_contents(contents, card_data, options) {
262 214 
             return card_element_unknown(element_params, card_data, options);
263 215 
         }
264 216 
     }).join("\n");
265 
-    result += '</div>';
217 
+    result += '</card-contents>';
266 218 
     return result;
267 219 
 }
268 220 
 
@@ -274,43 +226,27 @@ function card_repeat(card, count) {
274 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 229 
 function card_generate_front(data, options) {
286 230 
     var color = card_data_color_front(data, options);
287 
-    var style_color = card_generate_color_style(color, options);
288 231
289 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 234 
     result += card_element_title(data, options);
293 235 
     result += card_generate_contents(data.contents, data, options);
294 
-    result += '</div>';
295 
-
236 
+    result += '</rpg-card>';
296 237 
     return result;
297 238 
 }
298 239
299 240 
 function card_generate_back(data, options) {
300 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 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 250 
     return result;
315 251 
 }
316 252 
 
@@ -318,9 +254,8 @@ function card_generate_empty(count, options) {
318 254 
     var style_color = card_generate_color_style("white");
319 255
320 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 259 
     return card_repeat(result, count);
325 260 
 }
326 261

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan