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

wip

Robert Carnecky 11 years ago
parent
e63bcedf44
commit
3021fd93a8
18 changed files with 255 additions and 131 deletions
Unified View Show Diff Stats
  1. 125
    78
      generator/components-test.html
  2. 1
    1
      generator/components/card-back.html
  3. 2
    2
      generator/components/card-boxes.html
  4. 1
    1
      generator/components/card-contents.html
  5. 1
    1
      generator/components/card-description.html
  6. 1
    1
      generator/components/card-fill.html
  7. 1
    1
      generator/components/card-icon.html
  8. 53
    0
      generator/components/card-page.html
  9. 2
    2
      generator/components/card-property.html
  10. 1
    1
      generator/components/card-rule.html
  11. 1
    1
      generator/components/card-section.html
  12. 1
    1
      generator/components/card-subtitle.html
  13. 1
    1
      generator/components/card-title.html
  14. 1
    0
      generator/components/card.html
  15. 1
    1
      generator/components/rpg-card.html
  16. 60
    22
      generator/js/card.ts
  17. 1
    13
      generator/js/output.js
  18. 1
    4
      generator/output.html

+ 125
- 78
generator/components-test.html View File

2 
 <html lang="en">
 2 
 <html lang="en">
3 
 <head>
 3 
 <head>
4 
     <title>RPG cards</title>
 4 
     <title>RPG cards</title>
5 
-    <!-- CSS -->
6 
-    <link rel=" stylesheet" type="text/css" href="css/output.css">
7 
-    <link rel="stylesheet" type="text/css" href="css/card-size.css">
8 
     <!-- Components -->
 5 
     <!-- Components -->
9 
     <link rel="import" href="components/card.html">
 6 
     <link rel="import" href="components/card.html">
7 
+    <style type="text/css">
8 
+
9 
+        body {
10 
+            display: flex;
11 
+            flex-direction: column;
12 
+            justify-content: center;
13 
+            align-content: center;
14 
+            background: rgb(204,204,204);
15 
+        }
16 
+
17 
+        card-page {
18 
+            width: 210mm;
19 
+            height: 296mm;
20 
+        }
21 
+
22 
+        @media print {
23 
+            html, body {
24 
+                width: 210mm;
25 
+            }
26 
+            body {
27 
+                margin: 0;
28 
+                padding: 0;
29 
+                border: 0;
30 
+            }
31 
+        }
32 
+
33 
+        @page {
34 
+            size: A4;
35 
+            margin: 0;
36 
+        }
37 
+    </style>
38 
+
10 
 </head>
 39 
 </head>
11 
-<body class="page-background">
12 
-    <rpg-card class="card-size-25x35" color="maroon">
13 
-        <card-title>
14 
-            <h1>Burning Hands</h1>
15 
-            <h2>1</h2>
16 
-            <card-icon src="/icons/book-cover.svg"></card-icon>
17 
-        </card-title>
18 
-        <card-contents>
19 
-            <card-subtitle>1st level evocation</card-subtitle>
20 
-            <card-rule></card-rule>
21 
-            <card-property><h4>Casting time</h4><p>1 action</p></card-property>
22 
-            <card-property><h4>Range</h4><p>Self (15ft cone)</p></card-property>
23 
-            <card-property><h4>Components</h4><p>V,S,Some obscure long named material</p></card-property>
24 
-            <card-rule></card-rule>
25 
-            <card-description><h4>Mechanics</h4><p>Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes <b>3d6 fire damage</b> on a failed save, or half as much damage on a successful one.</p></card-description>
26 
-            <card-description><h4>Ignite</h4><p>The fire ignites any flammable objects in the area that aren't being worn or carried.</p></card-description>
27 
-            <card-fill size="2"></card-fill>
28 
-            <card-section>At higher levels</card-section>
29 
-            <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
30 
-        </card-contents>
31 
-    </rpg-card>
32 
-    &nbsp;
33 
-    <rpg-card class="card-size-25x35" color="saddlebrown">
34 
-        <card-title>
35 
-            <h1>Brown bear</h1>
36 
-            <h2>2</h2>
37 
-            <card-icon src="/icons/pawprint.svg"></card-icon>
38 
-        </card-title>
39 
-        <card-contents>
40 
-            <card-subtitle>Medium beast</card-subtitle>
41 
-            <card-rule></card-rule>
42 
-            <card-dndstats mode="both" str="13" dex="10" con="15" int="-" wis="-" cha="-"></card-dndstats>
43 
-            <card-rule></card-rule>
44 
-            <card-property><h4>Armor class</h4><p>12 (natural armor)</p></card-property>
45 
-            <card-property><h4>Hit points</h4><p>7 (2d6)</p></card-property>
46 
-            <card-rule></card-rule>
47 
-            <card-description><h4>Multiattack</h4><p>One bite and one claw.</p></card-description>
48 
-            <card-fill size="2"></card-fill>
49 
-            <card-section>Actions</card-section>
50 
-            <card-description><h4>Bite</h4><p>+4 to hit, 2d6+2 piercing damage.</p></card-description>
51 
-            <card-description><h4>Claw</h4><p>+4 to hit, 1d8+2 piercing damage.</p></card-description>
52 
-        </card-contents>
53 
-        <card-title>
54 
-            <h1>Druid thingy</h1>
55 
-            <card-icon src="/icons/stag-head.svg"></card-icon>
56 
-        </card-title>
57 
-    </rpg-card>
58 
-    &nbsp;
59 
-    <rpg-card class="card-size-25x35" color="indigo">
60 
-        <card-title size="12">
61 
-            <h1>Wand of Magic Missile</h1>
62 
-            <card-icon src="/icons/crossed-swords.svg"></card-icon>
63 
-        </card-title>
64 
-        <card-contents>
65 
-            <card-subtitle>Wondrous item</card-subtitle>
66 
-            <card-rule></card-rule>
67 
-            <card-property><h4>Maximum charges</h4><p>7</p></card-property>
68 
-            <card-property><h4>Recharge</h4><p>1d6+1</p></card-property>
69 
-            <card-rule></card-rule>
70 
-            <card-fill size="2"></card-fill>
71 
-            <card-description><h4>Spells</h4><p>You can use your action to cast the following spells:</p></card-description>
72 
-            <card-bullet>Magic missile</card-bullet>
73 
-            <card-bullet>Magic missile</card-bullet>
74 
-            <card-bullet>Magic missile</card-bullet>
75 
-            <card-fill size="3"></card-fill>
76 
-            <card-boxes size="2.5" count="7"></card-boxes>
77 
-            <card-boxes size="2.5" count="7"></card-boxes>
78 
-        </card-contents>
79 
-    </rpg-card>
80 
-    &nbsp;
81 
-    <rpg-card class="card-size-25x35" color="forestgreen">
82 
-        <card-back>
83 
-            <card-icon src="/icons/robe.svg"></card-icon>
84 
-        </card-back>
85 
-    </rpg-card>
40 
+<body>
41 
+    <card-page>
42 
+        <rpg-card class="card-size-25x35" color="maroon">
43 
+            <card-title>
44 
+                <h1>Burning Hands</h1>
45 
+                <h2>1</h2>
46 
+                <card-icon src="/icons/book-cover.svg"></card-icon>
47 
+            </card-title>
48 
+            <card-contents>
49 
+                <card-subtitle>1st level evocation</card-subtitle>
50 
+                <card-rule></card-rule>
51 
+                <card-property>
52 
+                    <h4>Casting time</h4>
53 
+                    <p>1 action</p></card-property>
54 
+                <card-property>
55 
+                    <h4>Range</h4>
56 
+                    <p>Self (15ft cone)</p></card-property>
57 
+                <card-property>
58 
+                    <h4>Components</h4>
59 
+                    <p>V,S,Some obscure long named material</p></card-property>
60 
+                <card-rule></card-rule>
61 
+                <card-fill size="1"></card-fill>
62 
+                <card-description>
63 
+                    <h4>Mechanics</h4>
64 
+                    <p>Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes <b>3d6 fire damage</b> on a failed save, or half as much damage on a successful one.</p></card-description>
65 
+                <card-description>
66 
+                    <h4>Ignite</h4>
67 
+                    <p>The fire ignites any flammable objects in the area that aren't being worn or carried.</p></card-description>
68 
+                <card-fill size="2"></card-fill>
69 
+                <card-section>At higher levels</card-section>
70 
+                <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
71 
+            </card-contents>
72 
+        </rpg-card>
73 
+        <rpg-card class="card-size-25x35" color="saddlebrown">
74 
+            <card-title>
75 
+                <h1>Brown bear</h1>
76 
+                <h2>2</h2>
77 
+                <card-icon src="/icons/pawprint.svg"></card-icon>
78 
+            </card-title>
79 
+            <card-contents>
80 
+                <card-subtitle>Medium beast</card-subtitle>
81 
+                <card-rule></card-rule>
82 
+                <card-dndstats mode="both" str="13" dex="10" con="15" int="-" wis="-" cha="-"></card-dndstats>
83 
+                <card-rule></card-rule>
84 
+                <card-property><h4>Armor class</h4><p>12 (natural armor)</p></card-property>
85 
+                <card-property><h4>Hit points</h4><p>7 (2d6)</p></card-property>
86 
+                <card-rule></card-rule>
87 
+                <card-description>
88 
+                    <h4>Multiattack</h4>
89 
+                    <p>One bite and one claw.</p></card-description>
90 
+                <card-fill size="2"></card-fill>
91 
+                <card-section>Actions</card-section>
92 
+                <card-description>
93 
+                    <h4>Bite</h4>
94 
+                    <p>+4 to hit, 2d6+2 piercing damage.</p></card-description>
95 
+                <card-description>
96 
+                    <h4>Claw</h4>
97 
+                    <p>+4 to hit, 1d8+2 piercing damage.</p></card-description>
98 
+            </card-contents>
99 
+            <card-title>
100 
+                <h1>Druid thingy</h1>
101 
+                <card-icon src="/icons/stag-head.svg"></card-icon>
102 
+            </card-title>
103 
+        </rpg-card>
104 
+        <rpg-card class="card-size-25x35" color="indigo">
105 
+            <card-title size="12">
106 
+                <h1>Wand of Magic Missile</h1>
107 
+                <card-icon src="/icons/crossed-swords.svg"></card-icon>
108 
+            </card-title>
109 
+            <card-contents>
110 
+                <card-subtitle>Wondrous item</card-subtitle>
111 
+                <card-rule></card-rule>
112 
+                <card-property><h4>Maximum charges</h4><p>7</p></card-property>
113 
+                <card-property><h4>Recharge</h4><p>1d6+1</p></card-property>
114 
+                <card-rule></card-rule>
115 
+                <card-fill size="2"></card-fill>
116 
+                <card-description><h4>Spells</h4><p>You can use your action to cast the following spells:</p></card-description>
117 
+                <card-bullet>Magic missile</card-bullet>
118 
+                <card-bullet>Magic missile</card-bullet>
119 
+                <card-bullet>Magic missile</card-bullet>
120 
+                <card-fill size="3"></card-fill>
121 
+                <card-boxes size="2.5" count="7"></card-boxes>
122 
+                <card-boxes size="2.5" count="7"></card-boxes>
123 
+            </card-contents>
124 
+        </rpg-card>
125 
+        <rpg-card class="card-size-25x35" color="forestgreen">
126 
+            <card-back>
127 
+                <card-icon src="/icons/robe.svg"></card-icon>
128 
+            </card-back>
129 
+        </rpg-card>
130 
+    </card-page>
131 
+    <card-page>
132 
+    </card-page>
86 
 </body>
 133 
 </body>
87 
 </html>
 134 
 </html>

+ 1
- 1
generator/components/card-back.html View File

62 
         var mainDoc = document;
 62 
         var mainDoc = document;
63 
         var importDoc = document.currentScript.ownerDocument;
 63 
         var importDoc = document.currentScript.ownerDocument;
64
64
65 
-        var proto = Object.create(HTMLElement.prototype);
65 
+        var proto = Object.create(HTMLDivElement.prototype);
66 
         proto.createdCallback = function () {
 66 
         proto.createdCallback = function () {
67 
             var template = importDoc.getElementById(elemName);
 67 
             var template = importDoc.getElementById(elemName);
68 
             var clone = mainDoc.importNode(template.content, true);
 68 
             var clone = mainDoc.importNode(template.content, true);

+ 2
- 2
generator/components/card-boxes.html View File

61 
         var mainDoc = document;
 61 
         var mainDoc = document;
62 
         var importDoc = document.currentScript.ownerDocument;
 62 
         var importDoc = document.currentScript.ownerDocument;
63
63
64 
-        var proto = Object.create(HTMLElement.prototype);
64 
+        var proto = Object.create(HTMLDivElement.prototype);
65 
         proto.createdCallback = function () {
 65 
         proto.createdCallback = function () {
66 
             var template = importDoc.getElementById(elemName);
 66 
             var template = importDoc.getElementById(elemName);
67 
             var clone = mainDoc.importNode(template.content, true);
 67 
             var clone = mainDoc.importNode(template.content, true);
87 
             }
 87 
             }
88 
         }
 88 
         }
89
89
90 
-        var proto = Object.create(HTMLElement.prototype);
90 
+        var proto = Object.create(HTMLDivElement.prototype);
91 
         Object.defineProperty(proto, "size", {
 91 
         Object.defineProperty(proto, "size", {
92 
             get: function () {
 92 
             get: function () {
93 
                 return "";
 93 
                 return "";

+ 1
- 1
generator/components/card-contents.html View File

23 
         var mainDoc = document;
 23 
         var mainDoc = document;
24 
         var importDoc = document.currentScript.ownerDocument;
 24 
         var importDoc = document.currentScript.ownerDocument;
25
25
26 
-        var proto = Object.create(HTMLElement.prototype);
26 
+        var proto = Object.create(HTMLDivElement.prototype);
27 
         proto.createdCallback = function () {
 27 
         proto.createdCallback = function () {
28 
             var template = importDoc.getElementById(elemName);
 28 
             var template = importDoc.getElementById(elemName);
29 
             var clone = mainDoc.importNode(template.content, true);
 29 
             var clone = mainDoc.importNode(template.content, true);

+ 1
- 1
generator/components/card-description.html View File

37 
         var mainDoc = document;
 37 
         var mainDoc = document;
38 
         var importDoc = document.currentScript.ownerDocument;
 38 
         var importDoc = document.currentScript.ownerDocument;
39
39
40 
-        var proto = Object.create(HTMLElement.prototype);
40 
+        var proto = Object.create(HTMLDivElement.prototype);
41 
         proto.createdCallback = function () {
 41 
         proto.createdCallback = function () {
42 
             var template = importDoc.getElementById(elemName);
 42 
             var template = importDoc.getElementById(elemName);
43 
             var clone = mainDoc.importNode(template.content, true);
 43 
             var clone = mainDoc.importNode(template.content, true);

+ 1
- 1
generator/components/card-fill.html View File

11 
         var mainDoc = document;
 11 
         var mainDoc = document;
12 
         var importDoc = document.currentScript.ownerDocument;
 12 
         var importDoc = document.currentScript.ownerDocument;
13
13
14 
-        var proto = Object.create(HTMLElement.prototype);
14 
+        var proto = Object.create(HTMLDivElement.prototype);
15 
         Object.defineProperty(proto, "size", {
 15 
         Object.defineProperty(proto, "size", {
16 
             get: function() {
 16 
             get: function() {
17 
                 return "";
 17 
                 return "";

+ 1
- 1
generator/components/card-icon.html View File

26 
         var mainDoc = document;
 26 
         var mainDoc = document;
27 
         var importDoc = document.currentScript.ownerDocument;
 27 
         var importDoc = document.currentScript.ownerDocument;
28
28
29 
-        var proto = Object.create(HTMLElement.prototype);
29 
+        var proto = Object.create(HTMLDivElement.prototype);
30 
         proto.loadSvg = function (src, callback) {
 30 
         proto.loadSvg = function (src, callback) {
31 
             var isLocal = window.location.protocol === 'file:';
 31 
             var isLocal = window.location.protocol === 'file:';
32 
             var httpRequest = new XMLHttpRequest();
 32 
             var httpRequest = new XMLHttpRequest();

+ 53
- 0
generator/components/card-page.html View File

1 
+<template id="card-page">
2 
+    <style type='text/css'>
3 
+        :host {
4 
+            display: flex;
5 
+            align-content: center;
6 
+            justify-content: center;
7 
+            flex-direction: row;
8 
+            flex-wrap: wrap;
9 
+            page-break-before: always;
10 
+            page-break-after: always;
11 
+            padding: 0;
12 
+            border: 0;
13 
+            width: 100%;
14 
+            margin-left: auto;
15 
+            margin-right: auto;
16 
+            margin-top: 0px;
17 
+            margin-bottom: 16px;
18 
+            background-color: white;
19 
+            box-shadow: 0 0 8px rgba(0,0,0,0.5);
20 
+        }
21 
+
22 
+        @media print {
23 
+            :host {
24 
+                margin: 0;
25 
+                padding: 0;
26 
+                border: 0;
27 
+                box-shadow: 0;
28 
+            }
29 
+        }
30 
+    </style>
31 
+
32 
+    <content></content>
33 
+
34 
+</template>
35 
+
36 
+<script>
37 
+    (function (window, document) {
38 
+        var elemName = 'card-page';
39 
+        var mainDoc = document;
40 
+        var importDoc = document.currentScript.ownerDocument;
41 
+
42 
+        var proto = Object.create(HTMLDivElement.prototype);
43 
+        proto.createdCallback = function () {
44 
+            var template = importDoc.getElementById(elemName);
45 
+            var clone = mainDoc.importNode(template.content, true);
46 
+            var root = this.createShadowRoot();
47 
+            root.appendChild(clone);
48 
+        }
49 
+
50 
+        mainDoc.registerElement(elemName, { prototype: proto });
51 
+
52 
+    })(window, document);
53 
+</script>

+ 2
- 2
generator/components/card-property.html View File

23 
         }
 23 
         }
24
24
25 
         ::content > h4 + p {
 25 
         ::content > h4 + p {
26 
-            margin-left: 0.4em;
26 
+            margin-left: 0.0em;
27 
         }
 27 
         }
28 
     </style>
 28 
     </style>
29
29
37 
         var mainDoc = document;
 37 
         var mainDoc = document;
38 
         var importDoc = document.currentScript.ownerDocument;
 38 
         var importDoc = document.currentScript.ownerDocument;
39
39
40 
-        var proto = Object.create(HTMLElement.prototype);
40 
+        var proto = Object.create(HTMLDivElement.prototype);
41 
         proto.createdCallback = function () {
 41 
         proto.createdCallback = function () {
42 
             var template = importDoc.getElementById(elemName);
 42 
             var template = importDoc.getElementById(elemName);
43 
             var clone = mainDoc.importNode(template.content, true);
 43 
             var clone = mainDoc.importNode(template.content, true);

+ 1
- 1
generator/components/card-rule.html View File

24 
         var mainDoc = document;
 24 
         var mainDoc = document;
25 
         var importDoc = document.currentScript.ownerDocument;
 25 
         var importDoc = document.currentScript.ownerDocument;
26
26
27 
-        var proto = Object.create(HTMLElement.prototype);
27 
+        var proto = Object.create(HTMLDivElement.prototype);
28 
         proto.createdCallback = function () {
 28 
         proto.createdCallback = function () {
29 
             var template = importDoc.getElementById(elemName);
 29 
             var template = importDoc.getElementById(elemName);
30 
             var clone = mainDoc.importNode(template.content, true);
 30 
             var clone = mainDoc.importNode(template.content, true);

+ 1
- 1
generator/components/card-section.html View File

23 
         var mainDoc = document;
 23 
         var mainDoc = document;
24 
         var importDoc = document.currentScript.ownerDocument;
 24 
         var importDoc = document.currentScript.ownerDocument;
25
25
26 
-        var proto = Object.create(HTMLElement.prototype);
26 
+        var proto = Object.create(HTMLDivElement.prototype);
27 
         proto.createdCallback = function () {
 27 
         proto.createdCallback = function () {
28 
             var template = importDoc.getElementById(elemName);
 28 
             var template = importDoc.getElementById(elemName);
29 
             var clone = mainDoc.importNode(template.content, true);
 29 
             var clone = mainDoc.importNode(template.content, true);

+ 1
- 1
generator/components/card-subtitle.html View File

21 
         var mainDoc = document;
 21 
         var mainDoc = document;
22 
         var importDoc = document.currentScript.ownerDocument;
 22 
         var importDoc = document.currentScript.ownerDocument;
23
23
24 
-        var proto = Object.create(HTMLElement.prototype);
24 
+        var proto = Object.create(HTMLDivElement.prototype);
25 
         proto.createdCallback = function () {
 25 
         proto.createdCallback = function () {
26 
             var template = importDoc.getElementById(elemName);
 26 
             var template = importDoc.getElementById(elemName);
27 
             var clone = mainDoc.importNode(template.content, true);
 27 
             var clone = mainDoc.importNode(template.content, true);

+ 1
- 1
generator/components/card-title.html View File

50 
         var mainDoc = document;
 50 
         var mainDoc = document;
51 
         var importDoc = document.currentScript.ownerDocument;
 51 
         var importDoc = document.currentScript.ownerDocument;
52
52
53 
-        var proto = Object.create(HTMLElement.prototype);
53 
+        var proto = Object.create(HTMLDivElement.prototype);
54 
         Object.defineProperty(proto, "size", {
 54 
         Object.defineProperty(proto, "size", {
55 
             get: function () {
 55 
             get: function () {
56 
                 return "";
 56 
                 return "";

+ 1
- 0
generator/components/card.html View File

16 
     <link rel="import" href="./card-dndstats.html">
 16 
     <link rel="import" href="./card-dndstats.html">
17 
     <link rel="import" href="./card-bullet.html">
 17 
     <link rel="import" href="./card-bullet.html">
18 
     <link rel="import" href="./card-boxes.html">
 18 
     <link rel="import" href="./card-boxes.html">
19 
+    <link rel="import" href="./card-page.html">
19 
 </head>
 20 
 </head>
20 
 <body>
 21 
 <body>
21
22

+ 1
- 1
generator/components/rpg-card.html View File

44 
         var mainDoc = document;
 44 
         var mainDoc = document;
45 
         var importDoc = document.currentScript.ownerDocument;
 45 
         var importDoc = document.currentScript.ownerDocument;
46
46
47 
-        var proto = Object.create(HTMLElement.prototype);
47 
+        var proto = Object.create(HTMLDivElement.prototype);
48 
         Object.defineProperty(proto, "color", {
 48 
         Object.defineProperty(proto, "color", {
49 
             get: function () {
 49 
             get: function () {
50 
                 return "";
 50 
                 return "";

+ 60
- 22
generator/js/card.ts View File

564 
         }
 564 
         }
565 
     }
 565 
     }
566
566
567 
+    class BoxSize {
568 
+        page: string;
569 
+        width: string;
570 
+        height: string;
571 
+        width_px: number;
572 
+        height_px: number;
573 
+
574 
+        constructor(p: string, w: string, h: string, wpx: number, hpx: number) {
575 
+            this.page = p;
576 
+            this.width = w;
577 
+            this.height = h;
578 
+            this.width_px = Math.floor(wpx);
579 
+            this.height_px = Math.floor(hpx);
580 
+        }
581 
+    }
582 
+
583 
+    var boxSizes: { [id: string]: BoxSize } = {};
584 
+    boxSizes["auto"] = new BoxSize("auto", "auto", "auto", Infinity, Infinity);
585 
+    boxSizes["A2"] = new BoxSize("A2 portrait", "420mm", "594mm", 1587.401575, 2245.03937);
586 
+    boxSizes["A3"] = new BoxSize("A3 portrait", "297mm", "420mm", 1118.740158, 1587.401575);
587 
+    boxSizes["A4"] = new BoxSize("A4 portrait", "210mm", "297mm", 793.700787, 1118.740158);
588 
+    boxSizes["A5"] = new BoxSize("A5 portrait", "148mm", "210mm", 559.370079, 793.700787);
589 
+    boxSizes["Letter"] = new BoxSize("Letter portrait", "8.5in", "11in", 816, 1056);
590 
+    boxSizes["225x35"] = new BoxSize("2.25in 3.5in", "2.25in", "3.5in", 216, 336);
591 
+    boxSizes["25x35"] = new BoxSize("2.5in 3.5in", "2.5in", "3.5in", 240, 336);
592 
+    boxSizes["35x50"] = new BoxSize("3.5in 5.0in", "3.5in", "5.0in", 336, 480);
593 
+    boxSizes["50x70"] = new BoxSize("5.0in 7.0in", "5.0in", "7.0in", 480, 672);
594 
+
595 
+
567 
     export class PageHtmlGenerator {
 596 
     export class PageHtmlGenerator {
568 
         indent: string;
 597 
         indent: string;
569
598
580 
         }
 609 
         }
581
610
582 
         private _wrap(pageSet: CardPageSet<string>, options: Options) {
 611 
         private _wrap(pageSet: CardPageSet<string>, options: Options) {
583 
-            var size = options.page_size || "A4";
584 
             var result = "";
 612 
             var result = "";
585 
             for (var i = 0; i < pageSet.pages.length; ++i) {
 613 
             for (var i = 0; i < pageSet.pages.length; ++i) {
586 
                 var page = pageSet.pages[i];
 614 
                 var page = pageSet.pages[i];
587 
-                var style = 'style="background-color:' + this._pageColor(i, options) + '"';
588 
-                result += '<page class="page page-preview" size="' + size + '" ' + style + '>\n';
615 
+                var style = ' style="background-color:' + this._pageColor(i, options) + '"';
616 
+                result += '<card-page' + style + '>\n';
589 
                 result += page.cards.join("");
 617 
                 result += page.cards.join("");
590 
-                result += '</page>\n';
618 
+                result += '</card-page>\n';
591 
             }
 619 
             }
592 
             return result;
 620 
             return result;
593 
         }
 621 
         }
672 
         }
 700 
         }
673
701
674 
         private _generateStyle(options) {
 702 
         private _generateStyle(options) {
675 
-            var size = "a4";
676 
-            switch (options.page_size) {
677 
-                case "A3": size = "A3 portrait"; break;
678 
-                case "A4": size = "210mm 297mm"; break;
679 
-                case "A5": size = "A5 portrait"; break;
680 
-                case "Letter": size = "letter portrait"; break;
681 
-                case "25x35": size = "2.5in 3.5in"; break;
682 
-                default: size = "auto";
683 
-            }
684 
-
685 
-            var result = "";
686 
-            result += "<style>\n";
687 
-            result += "@page {\n";
688 
-            result += "    margin: 0;\n";
689 
-            result += "    size:" + size + ";\n";
690 
-            result += "    -webkit-print-color-adjust: exact;\n";
691 
-            result += "}\n";
692 
-            result += "</style>\n";
703 
+            var page_box = boxSizes[options.page_size] || boxSizes["auto"];
704 
+
705 
+            var result = '';
706 
+            result += '<style type="text/css">\n';
707 
+            result += 'body {\n';
708 
+            result += '    display: block;\n';
709 
+            result += '    background: rgb(204, 204, 204);\n';
710 
+            result += '}\n';
711 
+            result += 'card-page {\n';
712 
+            result += '    width: ' + (page_box.width_px - 2) + 'px;\n';
713 
+            result += '    height: ' + (page_box.height_px - 2) + 'px;\n';
714 
+            result += '}\n';
715 
+            result += '@media print {\n';
716 
+            result += '   html, body {\n';
717 
+            result += '       width: ' + page_box.width_px + 'px;\n';
718 
+            result += '   }\n';
719 
+            result += '   body {\n';
720 
+            result += '       margin: 0;\n';
721 
+            result += '       padding: 0;\n';
722 
+            result += '       border: 0;\n';
723 
+            result += '    }\n';
724 
+            result += '}\n';
725 
+            result += '@page {\n';
726 
+            result += '    margin: 0;\n';
727 
+            result += '    size:' + page_box.width_px + 'px ' + page_box.height_px + 'px;\n';
728 
+            result += '    -webkit-print-color-adjust: exact;\n';
729 
+            result += '}\n';
730 
+            result += '</style>\n';
693 
             return result;
 731 
             return result;
694 
         }
 732 
         }
695
733

+ 1
- 13
generator/js/output.js View File

4 
 }
 4 
 }
5
5
6 
 function insertCards(html) {
 6 
 function insertCards(html) {
7 
-    // Remove all previous content
8 
-    while (document.body.hasChildNodes()) {
9 
-        document.body.removeChild(document.body.lastChild);
10 
-    }
11 
-
12 
-    // Create a div that holds all the received HTML
13 
-    var div = document.createElement("div");
14 
-    div.setAttribute("class", "output-container");
15 
-    div.id = "output-container";
16 
-    div.innerHTML = html;
17 
-
18 
-    // Add the new div to the document
19 
-    document.body.appendChild(div);
7 
+    document.body.innerHTML = html;
20 
 }
 8 
 }
21
9
22 
 window.addEventListener("message", receiveMessage, false);
 10 
 window.addEventListener("message", receiveMessage, false);

+ 1
- 4
generator/output.html View File

4 
     <title>RPG cards</title>
 4 
     <title>RPG cards</title>
5 
     <!-- Javascript -->
 5 
     <!-- Javascript -->
6 
     <script type="text/javascript" src="js/output.js"></script>
 6 
     <script type="text/javascript" src="js/output.js"></script>
7 
-    <!-- CSS -->
8 
-    <link rel=" stylesheet" type="text/css" href="css/output.css">
9 
-    <link rel="stylesheet" type="text/css" href="css/card-size.css">
10 
     <!-- Components -->
 7 
     <!-- Components -->
11 
     <link rel="import" href="components/card.html">
 8 
     <link rel="import" href="components/card.html">
12 
 </head>
 9 
 </head>
13 
-<body class="page-background">
10 
+<body>
14 
 </body>
 11 
 </body>
15 
 </html>
 12 
 </html>

Write Preview
Loading…
Cancel
Save