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

Card size options

crobi 10 jaren geleden
bovenliggende
a966fd8d1e
commit
e58c269a92
7 gewijzigde bestanden met toevoegingen van 110 en 66 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 70
    0
      generator/css/card-size.css
  2. 1
    3
      generator/css/cards.css
  3. 24
    0
      generator/css/output.css
  4. 0
    51
      generator/css/page.css
  5. 2
    1
      generator/generate.html
  6. 10
    9
      generator/js/cards.js
  7. 3
    2
      generator/output.html

+ 70
- 0
generator/css/card-size.css Bestand weergeven 

@@ -0,0 +1,70 @@
1 
+/*
2 
+    Full page printing CSS
3 
+    ======================
4 
+
5 
+    Since we want precisely specify the card sizes, we must not allow the user to scale the content to fit a sheet of paper.
6 
+    We must also make sure the browser does not add randomly sized margins to the page.
7 
+
8 
+    Instead, we use absolute sizes for all content, such that it fills a sheet of paper:
9 
+    1) Remove all page margins (using the @page CSS rule). The borders of the document will be outside of the printable area,
10 
+       however, we will cluster all content around the center, so that we won't crop anything.
11 
+    2) Fill the document with <page> elements which have an absolute size equal to the full area of the paper.
12 
+    3) Fill each page with cards, arranged around the center of the page.
13 
+*/
14 
+
15 
+/* Remove page margins */
16 
+@page {
17 
+    margin: 0;
18 
+    padding: 0;
19 
+}
20 
+
21 
+/* Center all content within a page */
22 
+.page {
23 
+    display: flex;
24 
+    align-content: center;
25 
+    justify-content: center;
26 
+    flex-direction: row;
27 
+    flex-wrap: wrap;
28 
+    page-break-after: always;
29 
+    padding: 0mm;
30 
+}
31 
+
32 
+/* A4 paper area (minus epsilon for rounding) */
33 
+page[size="A4"] {
34 
+    width:  209.5mm; /* full: 210.0mm */
35 
+    height: 296.5mm; /* full: 297.0mm */
36 
+}
37 
+
38 
+/* US letter area (minus epsilon for rounding) */
39 
+page[size="Letter"] {
40 
+    width:  215.4mm; /* full: 215.9mm (8.5in) */
41 
+    height: 278.9mm; /* full: 279.4mm (11.0in) */
42 
+}
43 
+
44 
+/* Default card size */
45 
+.card {
46 
+    width:2.5in;
47 
+    min-width:2.5in;
48 
+    height:3.5in;
49 
+}
50 
+
51 
+/* Poker / Magic card size */
52 
+.card-size-25x35 {
53 
+    width:2.5in;
54 
+    min-width:2.5in;
55 
+    height:3.5in;
56 
+}
57 
+
58 
+/* Poker / Magic card size */
59 
+.card-size-35x50 {
60 
+    width:3.5in;
61 
+    min-width:3.5in;
62 
+    height:5.0in;
63 
+}
64 
+
65 
+/* Landscape big card */
66 
+.card-size-75x50 {
67 
+    width:7.5in;
68 
+    min-width:7.5in;
69 
+    height:5.0in;
70 
+}

+ 1
- 3
generator/css/cards.css Bestand weergeven 

@@ -1,9 +1,7 @@
1 1 
 .card {
2 
-    width:66mm;
3 
-    min-width:66mm;
4 
-    height:95mm;
5 2 
     border: 2mm solid;
6 3 
     border-radius: 4px;
4 
+    box-sizing: border-box;
7 5 
     position: relative;
8 6 
     display: flex;
9 7 
     flex-direction: column;

+ 24
- 0
generator/css/output.css Bestand weergeven 

@@ -0,0 +1,24 @@
1 
+.page-background {
2 
+  background: rgb(204,204,204);
3 
+}
4 
+
5 
+.page-preview {
6 
+    background: white;
7 
+    margin: 0 auto;
8 
+    margin-bottom: 16px;
9 
+    box-shadow: 0 0 8px rgba(0,0,0,0.5);
10 
+}
11 
+
12 
+@media print {
13 
+  .page-preview {
14 
+    margin: 0;
15 
+    box-shadow: 0;
16 
+    background-color: white;
17 
+  }
18 
+  .page-background {
19 
+    margin: 0;
20 
+    box-shadow: 0;
21 
+    /* Set the background to gray to visualize the page size in the print preview */
22 
+    background-color: gray;
23 
+  }
24 
+}

+ 0
- 51
generator/css/page.css Bestand weergeven 

@@ -1,51 +0,0 @@
1 
-body {
2 
-  background: rgb(204,204,204);
3 
-}
4 
-
5 
-page[size="A4"] {
6 
-    background: white;
7 
-    width: 210mm;
8 
-    height: 297mm;
9 
-    display: block;
10 
-    margin: 0 auto;
11 
-    margin-bottom: 16px;
12 
-    box-shadow: 0 0 8px rgba(0,0,0,0.5);
13 
-    display: flex;
14 
-    align-content: center;
15 
-    justify-content: center;
16 
-    flex-direction: row;
17 
-    flex-wrap: wrap;
18 
-    page-break-after: always;
19 
-}
20 
-
21 
-#output-frame {
22 
-    border: 0;
23 
-    width: 100%;
24 
-}
25 
-
26 
-@media print {
27 
-  body, page[size="A4"] {
28 
-    margin: 0;
29 
-    box-shadow: 0;
30 
-    background-color: white;
31 
-  }
32 
-  #input-container {
33 
-      display: none;
34 
-  }
35 
-  #output-container {
36 
-      margin: 0;
37 
-      padding: 0;
38 
-  }
39 
-}
40 
-
41 
-.input-button {
42 
-    display:block;
43 
-    height: 40px;
44 
-    font-size: 24px;
45 
-    width: 100%;
46 
-    margin-bottom: 10px;
47 
-}
48 
-
49 
-.input-data {
50 
-    width: 100%;
51 
-}

+ 2
- 1
generator/generate.html Bestand weergeven 

@@ -1,4 +1,4 @@
1 
-<!DOCTYPE html>
1 
+<!DOCTYPE html>
2 2 
 <html lang="en">
3 3 
 <head>
4 4 
     <title>RPG cards</title>
 
@@ -24,6 +24,7 @@
24 24 
     <!-- CSS -->
25 25 
     <link href="css/ui.css" rel="stylesheet" />
26 26 
     <link href="css/cards.css" rel="stylesheet" />
27 
+    <link href="css/card-size.css" rel="stylesheet" />
27 28 
     <link href="css/icons.css" rel="stylesheet" />
28 29 
     <link href="css/custom-icons.css" rel="stylesheet" />
29 30 
     <!-- Fonts -->

+ 10
- 9
generator/js/cards.js Bestand weergeven 

@@ -9,6 +9,7 @@ function card_default_options() {
9 9 
         page_size: "A4",
10 10 
         page_rows: 3,
11 11 
         page_columns: 3,
12 
+        card_size: "25x35",
12 13 
         icon_inline: true
13 14 
     }
14 15 
 }
 
@@ -191,7 +192,7 @@ function card_generate_front(data, options) {
191 192 
     var style_color = card_generate_color_style(color, options);
192 193
193 194 
     var result = "";
194 
-    result += '<div class="card" ' + style_color + '>';
195 
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
195 196 
     result += card_element_icon(data, options);
196 197 
     result += card_element_title(data, options);
197 198 
     result += card_generate_contents(data.contents, data, options);
 
@@ -207,7 +208,7 @@ function card_generate_back(data, options) {
207 208 
     var icon = card_data_icon_back(data, options);
208 209
209 210 
     var result = "";
210 
-    result += '<div class="card" ' + style_color + '>';
211 
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
211 212 
     result += '  <div class="card-back" ' + style_gradient + '>';
212 213 
     result += '    <div class="card-back-inner">';
213 214 
     result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
 
@@ -222,7 +223,7 @@ function card_generate_empty(count, options) {
222 223 
     var style_color = card_generate_color_style("white");
223 224
224 225 
     var result = "";
225 
-    result += '<div class="card" ' + style_color + '>';
226 
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
226 227 
     result += '</div>';
227 228
228 229 
     return card_repeat(result, count);
 
@@ -262,11 +263,11 @@ function cards_pages_flip_left_right(cards, rows, cols) {
262 263 
     return result;
263 264 
 }
264 265
265 
-function card_pages_add_padding(cards, rows, cols) {
266 
-    var cards_per_page = rows * cols;
266 
+function card_pages_add_padding(cards, options) {
267 
+    var cards_per_page = options.page_rows * options.page_columns;
267 268 
     var last_page_cards = cards.length % cards_per_page;
268 269 
     if (last_page_cards !== 0) {
269 
-        return cards.concat(card_generate_empty(cards_per_page - last_page_cards));
270 
+        return cards.concat(card_generate_empty(cards_per_page - last_page_cards, options));
270 271 
     } else {
271 272 
         return cards;
272 273 
     }
 
@@ -277,7 +278,7 @@ function card_pages_wrap(pages, options) {
277 278
278 279 
     var result = "";
279 280 
     for (var i = 0; i < pages.length; ++i) {
280 
-        result += '<page size="' + size + '">\n';
281 
+        result += '<page class="page page-preview" size="' + size + '">\n';
281 282 
         result += pages[i].join("\n");
282 283 
         result += '</page>\n';
283 284 
     }
 
@@ -301,8 +302,8 @@ function card_pages_generate_html(card_data, options) {
301 302 
     });
302 303
303 304 
     // Add padding cards so that the last page is full of cards
304 
-    front_cards = card_pages_add_padding(front_cards, rows, cols);
305 
-    back_cards = card_pages_add_padding(back_cards, rows, cols);
305 
+    front_cards = card_pages_add_padding(front_cards, options);
306 
+    back_cards = card_pages_add_padding(back_cards, options);
306 307
307 308 
     // Split cards to pages
308 309 
     var front_pages = card_pages_split(front_cards, rows, cols);

+ 3
- 2
generator/output.html Bestand weergeven 

@@ -5,14 +5,15 @@
5 5 
     <!-- Javascript -->
6 6 
     <script type="text/javascript" src="js/output.js"></script>
7 7 
     <!-- CSS -->
8 
-    <link rel=" stylesheet" type="text/css" href="css/page.css">
8 
+    <link rel=" stylesheet" type="text/css" href="css/output.css">
9 9 
     <link rel="stylesheet" type="text/css" href="css/cards.css">
10 
+    <link rel="stylesheet" type="text/css" href="css/card-size.css">
10 11 
     <link rel="stylesheet" type="text/css" href="css/icons.css">
11 12 
     <link rel="stylesheet" type="text/css" href="css/custom-icons.css">
12 13 
     <!-- Fonts -->
13 14 
     <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
14 15 
     <link href='https://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
15 16 
 </head>
16 
-<body>
17 
+<body class="page-background">
17 18 
 </body>
18 19 
 </html>

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan