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

first attempt

crobi 10 年前
父节点
c04185eb52
当前提交
83fbdc7ebc
共有 6 个文件被更改，包括 214 次插入 和 0 次删除
分列视图 显示文件统计
  1. 22
    0
      generator/components-test.html
  2. 0
    0
      generator/components/card-back.html
  3. 104
    0
      generator/components/card-front.html
  4. 0
    0
      generator/components/card-line.html
  5. 87
    0
      generator/components/card-title.html
  6. 1
    0
      generator/server.bat

+ 22
- 0
generator/components-test.html 查看文件 

@@ -0,0 +1,22 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+<head>
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 -->
9 
+    <link rel="import" href="components/card-front.html">
10 
+    <link rel="import" href="components/card-title.html">
11 
+</head>
12 
+<body class="page-background">
13 
+    <card-front class="card-size-25x35" color="blue">
14 
+        <card-title size="13">Burning Hands</card-title>
15 
+        <card-contents>
16 
+            <card-subtitle>Mage spell</card-subtitle>
17 
+            <card-ruler></card-ruler>
18 
+            <card-description>Test</card-description>
19 
+        </card-contents>
20 
+    </card-front>
21 
+</body>
22 
+</html>

+ 0
- 0
generator/components/card-back.html 查看文件


+ 104
- 0
generator/components/card-front.html 查看文件 

@@ -0,0 +1,104 @@
1 
+<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
2 
+<link href='http://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
3 
+
4 
+<template id="card-front">
5 
+    <style>
6 
+        #card {
7 
+            /* Fill the whole area of the shadow root */
8 
+            width: 100%;
9 
+            height: 100%;
10 
+            /* Border */
11 
+            border: 2mm solid;
12 
+            border-radius: 4px;
13 
+            box-sizing: border-box;
14 
+            /* Flex display of children */
15 
+            position: relative;
16 
+            display: flex;
17 
+            flex-direction: column;
18 
+            /* Font */
19 
+            font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
20 
+            font-size: 8pt;
21 
+        }
22 
+
23 
+        #content-container {
24 
+            padding:2mm;
25 
+            padding-top:1mm;
26 
+            border-radius: 2mm;
27 
+            margin-top:0px;
28 
+            background-color: white;
29 
+            border-color: inherit;
30 
+            display: flex;
31 
+            flex-direction: column;
32 
+            flex: 1;
33 
+            font-size: inherit;
34 
+        }
35 
+
36 
+        #icon {
37 
+            width: 7mm;
38 
+            height: 7mm;
39 
+            background-repeat: no-repeat;
40 
+            background-size: contain;
41 
+            background-color: inherit;
42 
+            border-color: inherit;
43 
+        }
44 
+
45 
+        #icon-container {
46 
+            position: absolute;
47 
+            right: -1mm;
48 
+            top: -1mm;
49 
+            border: 1mm solid;
50 
+            border-radius: 1mm;
51 
+            background-color: inherit;
52 
+            border-color: inherit;
53 
+        }
54 
+
55 
+    </style>
56 
+
57 
+    <div id="card">
58 
+        <div id="icon-container">
59 
+            <div id="icon"></div>
60 
+        </div>
61 
+
62 
+        <content select="card-title"></content>
63 
+
64 
+        <div id="content-container">
65 
+            <content select="card-contents"></content>
66 
+        </div>
67 
+    </div>
68 
+
69 
+</template>
70 
+
71 
+<script>
72 
+(function(window, document) {
73 
+  var elemName = 'card-front';
74 
+  var thatDoc = document;
75 
+  var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
76 
+  var proto = Object.create(HTMLElement.prototype, {
77 
+    createdCallback: {
78 
+      value: function() {
79 
+        var template = thisDoc.getElementById(elemName);
80 
+        var clone = thatDoc.importNode(template.content, true);
81 
+        this.createShadowRoot().appendChild(clone);
82 
+      }
83 
+    },
84 
+    attachedCallback: {
85 
+        value: function () {
86 
+            var root = this.shadowRoot;
87 
+            var color = "black";
88 
+            for (var i = 0; i < this.attributes.length; i++) {
89 
+                var attribute = this.attributes[i];
90 
+                switch (attribute.name) {
91 
+                    case "color": color = attribute.value;
92 
+                }
93 
+            }
94 
+
95 
+            var cardStyle = root.getElementById("card").style;
96 
+            cardStyle.color = color;
97 
+            cardStyle.backgroundColor = color;
98 
+            cardStyle.borderColor = color;
99 
+        }
100 
+    }
101 
+  });
102 
+  thatDoc.registerElement(elemName, {prototype: proto});
103 
+})(window, document);
104 
+</script>

+ 0
- 0
generator/components/card-line.html 查看文件


+ 87
- 0
generator/components/card-title.html 查看文件 

@@ -0,0 +1,87 @@
1 
+<link href='http://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
2 
+
3 
+<template id="card-title">
4 
+    <style>
5 
+
6 
+        #title {
7 
+            height: 8mm;
8 
+            padding-left: 2mm;
9 
+            font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
10 
+            font-variant: small-caps;
11 
+            font-weight: bold;
12 
+            background-color: inherit;
13 
+            color: white;
14 
+        }
15 
+
16 
+        .title-16 {
17 
+            font-size: 16pt;
18 
+            line-height: 6.5mm;
19 
+        }
20 
+        .title-15 {
21 
+            font-size: 15pt;
22 
+            line-height: 6.5mm;
23 
+        }
24 
+        .title-14 {
25 
+            font-size: 14pt;
26 
+            line-height: 6.5mm;
27 
+        }
28 
+        .title-13 {
29 
+            font-size: 13pt;
30 
+            line-height: 7mm;
31 
+        }
32 
+        .title-12 {
33 
+            font-size: 12pt;
34 
+            line-height: 7mm;
35 
+        }
36 
+        .title-11 {
37 
+            font-size: 11pt;
38 
+            line-height: 7.5mm;
39 
+        }
40 
+        .title-10 {
41 
+            font-size: 10pt;
42 
+            line-height: 7.5mm;
43 
+        }
44 
+    </style>
45 
+
46 
+    <div id="title">
47 
+        <content></content>
48 
+    </div>
49 
+
50 
+</template>
51 
+
52 
+<script>
53 
+    (function(window, document) {
54 
+        var elemName = 'card-title';
55 
+        var mainDoc = document;
56 
+        var importDoc = document.currentScript.ownerDocument;
57 
+
58 
+        var proto = Object.create(HTMLElement.prototype);
59 
+        Object.defineProperty(proto, "size", {
60 
+            get: function() {
61 
+                return "";
62 
+            },
63 
+            set: function (value) {
64 
+                if (value > 16) value = 16;
65 
+                if (value < 10) value = 10;
66 
+                var root = this.shadowRoot;
67 
+                root.querySelector("#title").className = "title-" + value;
68 
+            }
69 
+        });
70 
+        proto.createdCallback = function () {
71 
+            var template = importDoc.getElementById(elemName);
72 
+            var clone = mainDoc.importNode(template.content, true);
73 
+            var root = this.createShadowRoot();
74 
+            root.appendChild(clone);
75 
+
76 
+            this.size = this.getAttribute('size') || 13;
77 
+        }
78 
+        proto.attributeChangedCallback = function (name, value) {
79 
+            switch (name) {
80 
+                case "size": this.size = value;
81 
+            }
82 
+        }
83 
+
84 
+        mainDoc.registerElement(elemName, { prototype: proto });
85 
+
86 
+    })(window, document);
87 
+</script>

+ 1
- 0
generator/server.bat 查看文件 

@@ -0,0 +1 @@
1 
+http-server

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