okos
/
rpg-cards
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

wip

crobi 10 лет назад
Родитель
0db22d85e7
Сommit
13214a8995
4 измененных файлов: 86 добавлений и 0 удалений
Разделённый вид Показать статистику Diff
  1. 3
    0
      generator/components-test.html
  2. 44
    0
      generator/components/card-fill.html
  3. 37
    0
      generator/components/card-section.html
  4. 2
    0
      generator/components/card.html

+ 3
- 0
generator/components-test.html Просмотреть файл 

@@ -23,6 +23,9 @@
23 23 
             <card-property><h4>Components</h4><p>V,S,Some obscure long named material</p></card-property>
24 24 
             <card-rule></card-rule>
25 25 
             <card-description><h4>Mechanics</h4><p>Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes 3d6 fire damage on a failed save, or half as much damage on a successful one.</p></card-description>
26 
+            <card-fill size="2"></card-fill>
27 
+            <card-section>At higher levels</card-section>
28 
+            <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
26 29 
         </card-contents>
27 30 
     </card-front>
28 31 
     &nbsp;

+ 44
- 0
generator/components/card-fill.html Просмотреть файл 

@@ -0,0 +1,44 @@
1 
+<template id="card-fill">
2 
+    <style id="style">
3 
+        :host {flex: 1;}
4 
+    </style>
5 
+
6 
+</template>
7 
+
8 
+<script>
9 
+    (function(window, document) {
10 
+        var elemName = 'card-fill';
11 
+        var mainDoc = document;
12 
+        var importDoc = document.currentScript.ownerDocument;
13 
+
14 
+        var proto = Object.create(HTMLElement.prototype);
15 
+        Object.defineProperty(proto, "size", {
16 
+            get: function() {
17 
+                return "";
18 
+            },
19 
+            set: function (value) {
20 
+                this.setAttribute('size', value);
21 
+
22 
+                var root = this.shadowRoot;
23 
+                var style = root.getElementById("style");
24 
+                style.innerHTML = ":host{flex:"+value+"}"
25 
+            }
26 
+        });
27 
+        proto.createdCallback = function () {
28 
+            var template = importDoc.getElementById(elemName);
29 
+            var clone = mainDoc.importNode(template.content, true);
30 
+            var root = this.createShadowRoot();
31 
+            root.appendChild(clone);
32 
+
33 
+            this.size = this.getAttribute('size') || "1";
34 
+        }
35 
+        proto.attributeChangedCallback = function (name, oldValue, newValue) {
36 
+            switch (name) {
37 
+                case "size": this.size = newValue;
38 
+            }
39 
+        }
40 
+
41 
+        mainDoc.registerElement(elemName, { prototype: proto });
42 
+
43 
+    })(window, document);
44 
+</script>

+ 37
- 0
generator/components/card-section.html Просмотреть файл 

@@ -0,0 +1,37 @@
1 
+<link href='http://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
2 
+
3 
+<template id="card-section">
4 
+    <style>
5 
+        :host {
6 
+            border-bottom: 1px solid;
7 
+            font-size: 10pt;
8 
+            font-variant: small-caps;
9 
+            font-weight: normal;
10 
+            letter-spacing: 1px;
11 
+            margin: 0;
12 
+            border-color: inherit;
13 
+        }
14 
+    </style>
15 
+
16 
+    <content></content>
17 
+
18 
+</template>
19 
+
20 
+<script>
21 
+    (function(window, document) {
22 
+        var elemName = 'card-section';
23 
+        var mainDoc = document;
24 
+        var importDoc = document.currentScript.ownerDocument;
25 
+
26 
+        var proto = Object.create(HTMLElement.prototype);
27 
+        proto.createdCallback = function () {
28 
+            var template = importDoc.getElementById(elemName);
29 
+            var clone = mainDoc.importNode(template.content, true);
30 
+            var root = this.createShadowRoot();
31 
+            root.appendChild(clone);
32 
+        }
33 
+
34 
+        mainDoc.registerElement(elemName, { prototype: proto });
35 
+
36 
+    })(window, document);
37 
+</script>

+ 2
- 0
generator/components/card.html Просмотреть файл 

@@ -10,6 +10,8 @@
10 10 
     <link rel="import" href="./card-subtitle.html">
11 11 
     <link rel="import" href="./card-property.html">
12 12 
     <link rel="import" href="./card-description.html">
13 
+    <link rel="import" href="./card-fill.html">
14 
+    <link rel="import" href="./card-section.html">
13 15 
 </head>
14 16 
 <body>
15 17

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить