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

wip

Robert Carnecky 10 年前
父节点
e63bcedf44
当前提交
3021fd93a8
共有 18 个文件被更改，包括 255 次插入 和 131 次删除
合并视图 显示文件统计
  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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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 查看文件

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>

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