okos
/
rpg-cards
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

wip

crobi 10 anos atrás
pai
89e6105efe
commit
54c85a6b54
6 arquivos alterados com 187 adições e 8 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 14
    7
      generator/components-test.html
  2. 76
    0
      generator/components/card-back.html
  3. 2
    0
      generator/components/card-boxes.html
  4. 1
    0
      generator/components/card-icon.html
  5. 2
    1
      generator/components/card.html
  6. 92
    0
      generator/components/rpg-card.html

+ 14
- 7
generator/components-test.html Ver arquivo 

@@ -9,7 +9,7 @@
9 9 
     <link rel="import" href="components/card.html">
10 10 
 </head>
11 11 
 <body class="page-background">
12 
-    <card-front class="card-size-25x35" color="maroon">
12 
+    <rpg-card class="card-size-25x35" color="maroon">
13 13 
         <card-title>
14 14 
             <h1>Burning Hands</h1>
15 15 
             <h2>1</h2>
 
@@ -28,9 +28,9 @@
28 28 
             <card-section>At higher levels</card-section>
29 29 
             <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
30 30 
         </card-contents>
31 
-    </card-front>
31 
+    </rpg-card>
32 32 
     &nbsp;
33 
-    <card-front class="card-size-25x35" color="saddlebrown">
33 
+    <rpg-card class="card-size-25x35" color="saddlebrown">
34 34 
         <card-title>
35 35 
             <h1>Brown bear</h1>
36 36 
             <h2>2</h2>
 
@@ -54,9 +54,9 @@
54 54 
             <h1>Druid thingy</h1>
55 55 
             <card-icon src="/icons/stag-head.svg"></card-icon>
56 56 
         </card-title>
57 
-    </card-front>
57 
+    </rpg-card>
58 58 
     &nbsp;
59 
-    <card-front class="card-size-25x35" color="indigo">
59 
+    <rpg-card class="card-size-25x35" color="indigo">
60 60 
         <card-title size="12">
61 61 
             <h1>Wand of Magic Missile</h1>
62 62 
             <card-icon src="/icons/crossed-swords.svg"></card-icon>
 
@@ -73,8 +73,15 @@
73 73 
             <card-bullet>Magic missile</card-bullet>
74 74 
             <card-bullet>Magic missile</card-bullet>
75 75 
             <card-fill size="3"></card-fill>
76 
-            <card-boxes size="2" count="7"></card-boxes>
76 
+            <card-boxes size="2.5" count="7"></card-boxes>
77 
+            <card-boxes size="2.5" count="7"></card-boxes>
77 78 
         </card-contents>
78 
-    </card-front>
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>
79 86 
 </body>
80 87 
 </html>

+ 76
- 0
generator/components/card-back.html Ver arquivo 

@@ -0,0 +1,76 @@
1 
+<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
2 
+
3 
+<template id="card-back">
4 
+    <style type='text/css'>
5 
+        :host {
6 
+            flex: 1;
7 
+            display: flex;
8 
+            border-color: inherit;
9 
+            background-color: inherit;
10 
+        }
11 
+
12 
+        #outer{
13 
+            border-radius: 12px;
14 
+            border-color: inherit;
15 
+            margin: 9px;
16 
+            flex: 1;
17 
+            display: flex;
18 
+        }
19 
+
20 
+        #inner {
21 
+            margin: 9px;
22 
+            border: 3px solid;
23 
+            border-color: inherit;
24 
+            border-radius: 12px;
25 
+            flex: 1;
26 
+            display: flex;
27 
+            flex-direction: row;
28 
+            flex-wrap: wrap;
29 
+            justify-content: center;
30 
+            align-items: center;
31 
+        }
32 
+
33 
+        #icon {
34 
+            border: 12px solid;
35 
+            border-color: inherit;
36 
+            border-radius: 12px;
37 
+            width: 80px;
38 
+            height: 80px;
39 
+            box-sizing: content-box;
40 
+        }
41 
+
42 
+        ::content > card-icon {
43 
+            height: 80px;
44 
+            width: 80px;
45 
+        }
46 
+    </style>
47 
+
48 
+
49 
+    <div id="outer">
50 
+        <div id="inner">
51 
+            <div id="icon">
52 
+                <content></content>
53 
+            </div>
54 
+        </div>
55 
+    </div>
56 
+
57 
+</template>
58 
+
59 
+<script>
60 
+    (function (window, document) {
61 
+        var elemName = 'card-back';
62 
+        var mainDoc = document;
63 
+        var importDoc = document.currentScript.ownerDocument;
64 
+
65 
+        var proto = Object.create(HTMLElement.prototype);
66 
+        proto.createdCallback = function () {
67 
+            var template = importDoc.getElementById(elemName);
68 
+            var clone = mainDoc.importNode(template.content, true);
69 
+            var root = this.createShadowRoot();
70 
+            root.appendChild(clone);
71 
+        }
72 
+
73 
+        mainDoc.registerElement(elemName, { prototype: proto });
74 
+
75 
+    })(window, document);
76 
+</script>

+ 2
- 0
generator/components/card-boxes.html Ver arquivo 

@@ -3,11 +3,13 @@
3 3 
         :host {
4 4 
             display: inline-block;
5 5 
             vertical-align: top;
6 
+            margin-top: 0.5em;
6 7 
         }
7 8 
         .box {
8 9 
             width: 100%;
9 10 
             height: 100%;
10 11 
             border: 2px solid;
12 
+            border-radius: 4px;
11 13 
             box-sizing: border-box;
12 14 
             vertical-align: middle;
13 15 
             text-align: center;

+ 1
- 0
generator/components/card-icon.html Ver arquivo 

@@ -2,6 +2,7 @@
2 2 
     <style>
3 3 
         #icon-container {
4 4 
             height: 100%;
5 
+            background-color: inherit;
5 6 
         }
6 7
7 8 
         svg {

+ 2
- 1
generator/components/card.html Ver arquivo 

@@ -2,7 +2,8 @@
2 2 
 <html lang="en">
3 3 
 <head>
4 4 
     <title>Component import file</title>
5 
-    <link rel="import" href="./card-front.html">
5 
+    <link rel="import" href="./rpg-card.html">
6 
+    <link rel="import" href="./card-back.html">
6 7 
     <link rel="import" href="./card-title.html">
7 8 
     <link rel="import" href="./card-icon.html">
8 9 
     <link rel="import" href="./card-contents.html">

+ 92
- 0
generator/components/rpg-card.html Ver arquivo 

@@ -0,0 +1,92 @@
1 
+<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
2 
+
3 
+<template id="rpg-card">
4 
+    <style type='text/css'>
5 
+        :host {
6 
+            /* Fill the whole area of the shadow root */
7 
+            width: 100%;
8 
+            height: 100%;
9 
+            /* Border */
10 
+            padding: 6px;
11 
+            border-radius: 4px;
12 
+            box-sizing: border-box;
13 
+            /* Flex display of children */
14 
+            position: relative;
15 
+            display: flex;
16 
+            flex-direction: column;
17 
+            /* Font */
18 
+            font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
19 
+            font-size: 8pt;
20 
+        }
21 
+
22 
+        ::content > card-title:first-child {
23 
+            margin-top: -2px;
24 
+            margin-bottom: 4px;
25 
+        }
26 
+
27 
+        ::content > card-title:last-child {
28 
+            margin-top: 4px;
29 
+            margin-bottom: -2px;
30 
+        }
31 
+    </style>
32 
+
33 
+    <style type='text/css' id="color-style">
34 
+    </style>
35 
+
36 
+    <content></content>
37 
+
38 
+</template>
39 
+
40 
+<script>
41 
+    (function (window, document) {
42 
+        var elemName = 'rpg-card';
43 
+        var mainDoc = document;
44 
+        var importDoc = document.currentScript.ownerDocument;
45 
+
46 
+        var proto = Object.create(HTMLElement.prototype);
47 
+        Object.defineProperty(proto, "color", {
48 
+            get: function () {
49 
+                return "";
50 
+            },
51 
+            set: function (value) {
52 
+                var root = this.shadowRoot;
53 
+                var style = root.getElementById("color-style");
54 
+                style.innerHTML = "\
55 
+                :host {\
56 
+                    color: "+value+";\
57 
+                    background-color: " + value + ";\
58 
+                    border-color: " + value + ";\
59 
+                }\
60 
+                ::content card-rule /deep/ svg {\
61 
+                    fill: " + value + ";\
62 
+                }\
63 
+                ::content card-boxes /deep/ svg rect {\
64 
+                    stroke: " + value + ";\
65 
+                }\
66 
+                ::content card-icon {\
67 
+                    background-color: " + value + ";\
68 
+                }\
69 
+                ::content card-back /deep/ #outer {\
70 
+                    background: radial-gradient(ellipse at center, white 20%, " + value + " 120%);\
71 
+                }\
72 
+                ";
73 
+            }
74 
+        });
75 
+        proto.createdCallback = function () {
76 
+            var template = importDoc.getElementById(elemName);
77 
+            var clone = mainDoc.importNode(template.content, true);
78 
+            var root = this.createShadowRoot();
79 
+            root.appendChild(clone);
80 
+
81 
+            this.color = this.getAttribute('color') || "black";
82 
+        }
83 
+        proto.attributeChangedCallback = function (name, oldValue, newValue) {
84 
+            switch (name) {
85 
+                case "color": this.color = newValue; break;
86 
+            }
87 
+        }
88 
+
89 
+        mainDoc.registerElement(elemName, { prototype: proto });
90 
+
91 
+    })(window, document);
92 
+</script>

Escrever Pré-visualização
Carregando…
Cancelar
Salvar