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

Use inline SVG rulers

crobi 10 years ago
parent
3258fc9ab2
commit
531313cf84
7 changed files with 37 additions and 77 deletions
Split View Show Diff Stats
  1. 2
    6
      generator/css/cards.css
  2. 0
    4
      generator/css/icons.css
  3. BIN
      generator/img/ruler.png
  4. 0
    3
      generator/img/ruler.svg
  5. BIN
      generator/img/ruler2.png
  6. 0
    57
      generator/img/ruler2.svg
  7. 35
    7
      generator/js/cards.js

+ 2
- 6
generator/css/cards.css View File 

@@ -139,12 +139,8 @@ p {
139 139 
 }
140 140
141 141 
 .ruler {
142 
-    /*content: url(../img/ruler.svg);*/
143 
-    width: 60mm;
144 
-    height: 1.5mm;
142 
+    width: 100%;
143 
+    height: 1.0mm;
145 144 
     margin-top: 0.5em;
146 145 
     margin-bottom: 0.2em;
147 
-    background-repeat: no-repeat;
148 
-    background-size: 100% 100%;
149 
-    background-image: url(../img/ruler2.svg);
150 146 
 }

+ 0
- 4
generator/css/icons.css View File 

@@ -940,10 +940,6 @@
940 940 
 .round-shield-transparent { background-image: url../img/round-shield-transparent.png;}
941 941 
 .round-shield { background-image: url../img/round-shield.png;}
942 942 
 .rss { background-image: url../img/rss.png;}
943 
-.ruler { background-image: url../img/ruler.png;}
944 
-.ruler.svg { background-image: url../img/ruler.svg.png;}
945 
-.ruler2 { background-image: url../img/ruler2.png;}
946 
-.ruler2.svg { background-image: url../img/ruler2.svg.png;}
947 943 
 .run { background-image: url../img/run.png;}
948 944 
 .rune-stone { background-image: url../img/rune-stone.png;}
949 945 
 .rune-sword { background-image: url../img/rune-sword.png;}

BIN
generator/img/ruler.png View File


+ 0
- 3
generator/img/ruler.svg View File 

@@ -1,3 +0,0 @@
1 
-<svg height="5" width="375"  xmlns="http://www.w3.org/2000/svg">
2 
-    <polyline points="0,0 375,2.5 0,5" fill="#600a15" stroke="#600a15"></polyline>
3 
-</svg>

BIN
generator/img/ruler2.png View File


+ 0
- 57
generator/img/ruler2.svg View File 

@@ -1,57 +0,0 @@
1 
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 
-<svg
3 
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
4 
-   xmlns:cc="http://creativecommons.org/ns#"
5 
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
6 
-   xmlns:svg="http://www.w3.org/2000/svg"
7 
-   xmlns="http://www.w3.org/2000/svg"
8 
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9 
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 
-   height="5"
11 
-   width="375"
12 
-   id="svg3006"
13 
-   version="1.1"
14 
-   inkscape:version="0.48.5 r10040"
15 
-   sodipodi:docname="ruler2.svg"
16 
-   inkscape:export-filename="C:\Users\chrissy\Documents\projects\dnd5e-cards\html\ruler.png"
17 
-   inkscape:export-xdpi="900"
18 
-   inkscape:export-ydpi="900">
19 
-  <metadata
20 
-     id="metadata3014">
21 
-    <rdf:RDF>
22 
-      <cc:Work
23 
-         rdf:about="">
24 
-        <dc:format>image/svg+xml</dc:format>
25 
-        <dc:type
26 
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
27 
-        <dc:title></dc:title>
28 
-      </cc:Work>
29 
-    </rdf:RDF>
30 
-  </metadata>
31 
-  <defs
32 
-     id="defs3012" />
33 
-  <sodipodi:namedview
34 
-     pagecolor="#ffffff"
35 
-     bordercolor="#666666"
36 
-     borderopacity="1"
37 
-     objecttolerance="10"
38 
-     gridtolerance="10"
39 
-     guidetolerance="10"
40 
-     inkscape:pageopacity="0"
41 
-     inkscape:pageshadow="2"
42 
-     inkscape:window-width="1440"
43 
-     inkscape:window-height="837"
44 
-     id="namedview3010"
45 
-     showgrid="false"
46 
-     inkscape:zoom="1.4219109"
47 
-     inkscape:cx="255.12356"
48 
-     inkscape:cy="-6.0999049"
49 
-     inkscape:window-x="-8"
50 
-     inkscape:window-y="-8"
51 
-     inkscape:window-maximized="1"
52 
-     inkscape:current-layer="svg3006" />
53 
-  <path
54 
-     style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1.50940429999999990px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
55 
-     d="M -12.40625 -29.9375 L -12.40625 40.96875 L 390.8125 40.96875 L 390.8125 -29.9375 L -12.40625 -29.9375 z M 0 0 L 375 2.5 L 0 5 L 0 0 z "
56 
-     id="rect3016" />
57 
-</svg>

+ 35
- 7
generator/js/cards.js View File 

@@ -1,3 +1,23 @@
1 
+// ============================================================================
2 
+// Card definition related functions
3 
+// ============================================================================
4 
+
5 
+function card_data_color_front(card_data) {
6 
+    return card_data.color_front || card_data.color || "black";
7 
+}
8 
+
9 
+function card_data_color_back(card_data) {
10 
+    return card_data.color_back || card_data.color || "black";
11 
+}
12 
+
13 
+function card_data_icon_front(card_data) {
14 
+    return card_data.icon_front || card_data.icon || "ace";
15 
+}
16 
+
17 
+function card_data_icon_back(card_data) {
18 
+    return card_data.icon_back || card_data.icon || "ace";
19 
+}
20 
+
1 21 
 // ============================================================================
2 22 
 // Card element generating functions
3 23 
 // ============================================================================
 
@@ -8,7 +28,7 @@ function card_element_title(card_data) {
8 28 
 }
9 29
10 30 
 function card_element_icon(card_data) {
11 
-    var icon = card_data.icon_front || card_data.icon;
31 
+    var icon = card_data_icon_front(card_data);
12 32 
     var result = "";
13 33 
     if (icon) {
14 34 
         result += '<div class="title-icon-container">';
 
@@ -25,7 +45,15 @@ function card_element_subtitle(params, card_data) {
25 45 
 }
26 46
27 47 
 function card_element_ruler(params, card_data) {
28 
-    return '<div class="ruler"></div>';
48 
+    var color = card_data_color_front(card_data);
49 
+    var fill = 'fill="' + color + '"';
50 
+    var stroke = 'stroke="' + color + '"';
51 
+
52 
+    var result = "";
53 
+    result += '<svg class="ruler" height="1" width="100" viewbox="0 0 100 1" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg">';
54 
+    result += '    <polyline points="0,0 100,0.5 0,1" ' + fill + '></polyline>';
55 
+    result += '</svg>';
56 
+    return result;
29 57 
 }
30 58
31 59 
 function card_element_property(params, card_data) {
 
@@ -75,7 +103,8 @@ var card_element_generators = {
75 103 
     rule: card_element_ruler,
76 104 
     description: card_element_description,
77 105 
     text: card_element_text,
78 
-    fill: card_element_fill
106 
+    fill: card_element_fill,
107 
+    section: card_element_section
79 108 
 };
80 109
81 110 
 // ============================================================================
 
@@ -117,9 +146,8 @@ function card_generate_color_gradient_style(color) {
117 146 
 }
118 147
119 148 
 function card_generate_front(data) {
120 
-    var color = data.color_front || data.color || "black";
149 
+    var color = card_data_color_front(data);
121 150 
     var style_color = card_generate_color_style(color);
122 
-    var icon = data.icon_front || data.icon || "";
123 151 
     var count = data.count || 1;
124 152
125 153 
     var result = "";
 
@@ -133,10 +161,10 @@ function card_generate_front(data) {
133 161 
 }
134 162
135 163 
 function card_generate_back(data) {
136 
-    var color = data.color_back || data.color || "black";
164 
+    var color = card_data_color_back(data)
137 165 
     var style_color = card_generate_color_style(color);
138 166 
     var style_gradient = card_generate_color_gradient_style(color);
139 
-    var icon = data.icon_back || data.icon || "ace";
167 
+    var icon = card_data_icon_back(data);
140 168 
     var count = data.count || 1;
141 169
142 170 
     var result = "";

Write Preview
Loading…
Cancel
Save