okos
/
rpg-cards
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

wip

Robert Carnecky 10 gadus atpakaļ
vecāks
e63bcedf44
revīzija
3021fd93a8
18 mainītis faili ar 255 papildinājumiem un 131 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  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 Parādīt failu 

@@ -2,86 +2,133 @@
2 2 
 <html lang="en">
3 3 
 <head>
4 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 5 
     <!-- Components -->
9 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 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 133 
 </body>
87 134 
 </html>

+ 1
- 1
generator/components/card-back.html Parādīt failu 

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

+ 2
- 2
generator/components/card-boxes.html Parādīt failu 

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

+ 1
- 1
generator/components/card-contents.html Parādīt failu 

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

+ 1
- 1
generator/components/card-description.html Parādīt failu 

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

+ 1
- 1
generator/components/card-fill.html Parādīt failu 

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

+ 1
- 1
generator/components/card-icon.html Parādīt failu 

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

+ 53
- 0
generator/components/card-page.html Parādīt failu 

@@ -0,0 +1,53 @@
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 Parādīt failu 

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

+ 1
- 1
generator/components/card-rule.html Parādīt failu 

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

+ 1
- 1
generator/components/card-section.html Parādīt failu 

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

+ 1
- 1
generator/components/card-subtitle.html Parādīt failu 

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

+ 1
- 1
generator/components/card-title.html Parādīt failu 

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

+ 1
- 0
generator/components/card.html Parādīt failu 

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

+ 1
- 1
generator/components/rpg-card.html Parādīt failu 

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

+ 60
- 22
generator/js/card.ts Parādīt failu 

@@ -564,6 +564,35 @@ module RpgCards {
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 596 
     export class PageHtmlGenerator {
568 597 
         indent: string;
569 598 
 
@@ -580,14 +609,13 @@ module RpgCards {
580 609 
         }
581 610
582 611 
         private _wrap(pageSet: CardPageSet<string>, options: Options) {
583 
-            var size = options.page_size || "A4";
584 612 
             var result = "";
585 613 
             for (var i = 0; i < pageSet.pages.length; ++i) {
586 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 617 
                 result += page.cards.join("");
590 
-                result += '</page>\n';
618 
+                result += '</card-page>\n';
591 619 
             }
592 620 
             return result;
593 621 
         }
 
@@ -672,24 +700,34 @@ module RpgCards {
672 700 
         }
673 701
674 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 731 
             return result;
694 732 
         }
695 733

+ 1
- 13
generator/js/output.js Parādīt failu 

@@ -4,19 +4,7 @@ function receiveMessage(event) {
4 4 
 }
5 5
6 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 10 
 window.addEventListener("message", receiveMessage, false);

+ 1
- 4
generator/output.html Parādīt failu 

@@ -4,12 +4,9 @@
4 4 
     <title>RPG cards</title>
5 5 
     <!-- Javascript -->
6 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 7 
     <!-- Components -->
11 8 
     <link rel="import" href="components/card.html">
12 9 
 </head>
13 
-<body class="page-background">
10 
+<body>
14 11 
 </body>
15 12 
 </html>

Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt