gobstones-board 1.8.5 → 1.8.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Rakefile +1 -0
- data/app/assets/htmls/components/boom.png +0 -0
- data/app/assets/htmls/components/cell-dresser.html +57 -0
- data/app/assets/htmls/components/demo/board-demo.html +216 -0
- data/app/assets/htmls/components/gs-board.html +441 -0
- data/app/assets/htmls/components/gs-cell.html +188 -0
- data/app/assets/htmls/components/gs-stone.html +202 -0
- data/app/assets/htmls/components/key-tracker.html +53 -0
- data/app/assets/htmls/components/op_bolita_azul.svg +17 -0
- data/app/assets/htmls/components/op_bolita_negra.svg +17 -0
- data/app/assets/htmls/components/op_bolita_roja.svg +18 -0
- data/app/assets/htmls/components/op_bolita_verde.svg +17 -0
- data/lib/gobstones/board/version.rb +1 -1
- metadata +12 -1
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
<link rel="import" href="gs-stone.html">
|
|
2
|
+
<link rel="import" href="cell-dresser.html">
|
|
3
|
+
<dom-module id="gs-cell">
|
|
4
|
+
<template>
|
|
5
|
+
<style>
|
|
6
|
+
.gbs_pointer {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.gbs_unselectable {
|
|
11
|
+
-webkit-touch-callout: none;
|
|
12
|
+
-webkit-user-select: none;
|
|
13
|
+
-khtml-user-select: none;
|
|
14
|
+
-moz-user-select: none;
|
|
15
|
+
-ms-user-select: none;
|
|
16
|
+
user-select: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.gbs_gh {
|
|
20
|
+
/* position of the header in the board */
|
|
21
|
+
background: rgba(221, 221, 136, 0.7);
|
|
22
|
+
outline: 3px solid #cc0000;
|
|
23
|
+
outline-style: var(--outline-style);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
div.gbs_gc {
|
|
27
|
+
background-image: var(--background-url);
|
|
28
|
+
background-repeat: no-repeat;
|
|
29
|
+
background-position: center;
|
|
30
|
+
background-size: cover;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
table.gbs_gc {
|
|
34
|
+
/* cell table */
|
|
35
|
+
border-style: none;
|
|
36
|
+
border: solid black 0px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.gbs_gc tr {
|
|
40
|
+
border-style: none;
|
|
41
|
+
border: 0px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.gbs_gc td {
|
|
45
|
+
visibility: var(--stones-visibility);
|
|
46
|
+
border-style: none;
|
|
47
|
+
border: solid black 0px;
|
|
48
|
+
width: 15px;
|
|
49
|
+
height: 15px;
|
|
50
|
+
text-align: center;
|
|
51
|
+
color: #F3F3E9;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.gbs_gc td div {
|
|
55
|
+
line-height: 2;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/*# sourceMappingURL=style.css.map */
|
|
59
|
+
|
|
60
|
+
</style>
|
|
61
|
+
|
|
62
|
+
<cell-dresser id="dresser"></cell-dresser>
|
|
63
|
+
|
|
64
|
+
<template is="dom-if" if="true">
|
|
65
|
+
<!-- // ^ (otherwise, the cssClass() does not refresh itself) -->
|
|
66
|
+
<div class$="gbs_gc {{cssClass(header)}}">
|
|
67
|
+
<table>
|
|
68
|
+
<tbody>
|
|
69
|
+
<tr>
|
|
70
|
+
<td>
|
|
71
|
+
<gs-stone color="blue" amount="{{cell.blue}}" options="{{options}}"></gs-stone>
|
|
72
|
+
</td>
|
|
73
|
+
<td>
|
|
74
|
+
<gs-stone color="black" amount="{{cell.black}}" options="{{options}}"></gs-stone>
|
|
75
|
+
</td>
|
|
76
|
+
</tr>
|
|
77
|
+
<tr>
|
|
78
|
+
<td>
|
|
79
|
+
<gs-stone color="red" amount="{{cell.red}}" options="{{options}}"></gs-stone>
|
|
80
|
+
</td>
|
|
81
|
+
<td>
|
|
82
|
+
<gs-stone color="green" amount="{{cell.green}}" options="{{options}}"></gs-stone>
|
|
83
|
+
</td>
|
|
84
|
+
</tr>
|
|
85
|
+
</tbody>
|
|
86
|
+
</table>
|
|
87
|
+
</div>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
</template>
|
|
91
|
+
<script>
|
|
92
|
+
Polymer({
|
|
93
|
+
is: 'gs-cell',
|
|
94
|
+
properties: {
|
|
95
|
+
cellIndex: Number,
|
|
96
|
+
rowIndex: Number,
|
|
97
|
+
cell: Object,
|
|
98
|
+
table: Array,
|
|
99
|
+
attire: Object,
|
|
100
|
+
boom: Boolean,
|
|
101
|
+
backgroundUrl: String,
|
|
102
|
+
header: {
|
|
103
|
+
type: Object,
|
|
104
|
+
notify: true
|
|
105
|
+
},
|
|
106
|
+
options: Object
|
|
107
|
+
},
|
|
108
|
+
listeners: {
|
|
109
|
+
click: "_leftClick"
|
|
110
|
+
},
|
|
111
|
+
observers: ['_updateStyles(table.*, attire.*, rowIndex, cellIndex, header.*, boom)'],
|
|
112
|
+
ready: function() {
|
|
113
|
+
return this._validateData();
|
|
114
|
+
},
|
|
115
|
+
cssClass: function(header) {
|
|
116
|
+
var isHeader;
|
|
117
|
+
if (header == null) {
|
|
118
|
+
return "";
|
|
119
|
+
}
|
|
120
|
+
isHeader = this.x() === header.x && this.y() === header.y;
|
|
121
|
+
if (isHeader && !this.boom) {
|
|
122
|
+
return "gbs_gh";
|
|
123
|
+
} else {
|
|
124
|
+
return "";
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
x: function() {
|
|
128
|
+
return this.cellIndex;
|
|
129
|
+
},
|
|
130
|
+
y: function() {
|
|
131
|
+
return this.domHost.getRowNumber(this.table, this.rowIndex);
|
|
132
|
+
},
|
|
133
|
+
_leftClick: function(event) {
|
|
134
|
+
if (!this.options.editable) {
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
if (this.domHost.isCtrlPressed()) {
|
|
138
|
+
this.header = {
|
|
139
|
+
x: this.x(),
|
|
140
|
+
y: this.y()
|
|
141
|
+
};
|
|
142
|
+
return this.fire("board-changed");
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
_validateData: function() {
|
|
146
|
+
if (this.table == null) {
|
|
147
|
+
throw new Error("The table is required");
|
|
148
|
+
}
|
|
149
|
+
if (this.header == null) {
|
|
150
|
+
throw new Error("The header is required");
|
|
151
|
+
}
|
|
152
|
+
if (this.options == null) {
|
|
153
|
+
throw new Error("The options are required");
|
|
154
|
+
}
|
|
155
|
+
if (this.cell == null) {
|
|
156
|
+
throw new Error("The cell is required");
|
|
157
|
+
}
|
|
158
|
+
if ((this.cellIndex == null) || (this.rowIndex == null)) {
|
|
159
|
+
throw new Error("The coordinates are required");
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
_updateStyles: function(_arg, _arg1, rowIndex, cellIndex, _arg2, boom) {
|
|
163
|
+
var attire, cell, header, isHeader, rule, table, url, x, y, _ref, _ref1;
|
|
164
|
+
table = _arg.base;
|
|
165
|
+
attire = _arg1.base;
|
|
166
|
+
header = _arg2.base;
|
|
167
|
+
cell = (_ref = table[rowIndex]) != null ? _ref[cellIndex] : void 0;
|
|
168
|
+
if ((cell == null) || (header == null)) {
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
x = cellIndex;
|
|
172
|
+
y = table.length - 1 - rowIndex;
|
|
173
|
+
isHeader = x === header.x && y === header.y;
|
|
174
|
+
rule = this.$.dresser.getRule(cell, isHeader, attire);
|
|
175
|
+
url = rule != null ? rule.image : void 0;
|
|
176
|
+
this.customStyle["--stones-visibility"] = (url != null) || boom ? "hidden" : "visible";
|
|
177
|
+
this.customStyle["--outline-style"] = (url != null) && ((rule != null ? (_ref1 = rule.when) != null ? _ref1.head : void 0 : void 0) != null) ? "none" : "solid";
|
|
178
|
+
if (url != null) {
|
|
179
|
+
this.customStyle["--background-url"] = "url(" + url + ")";
|
|
180
|
+
} else {
|
|
181
|
+
delete this.customStyle["--background-url"];
|
|
182
|
+
}
|
|
183
|
+
return this.updateStyles();
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
|
|
187
|
+
</script>
|
|
188
|
+
</dom-module>
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<dom-module id="gs-stone">
|
|
2
|
+
<template>
|
|
3
|
+
<style>
|
|
4
|
+
.gbs_pointer {
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.gbs_unselectable, .gbs_stone {
|
|
9
|
+
-webkit-touch-callout: none;
|
|
10
|
+
-webkit-user-select: none;
|
|
11
|
+
-khtml-user-select: none;
|
|
12
|
+
-moz-user-select: none;
|
|
13
|
+
-ms-user-select: none;
|
|
14
|
+
user-select: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.gbs_color-blue, ::content div.gbs_blue, .gbs_ghost-blue:hover {
|
|
18
|
+
background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20id%3D%22svg2%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2250mm%22%20width%3D%2250mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20viewBox%3D%220%200%20177.16535%20177.16535%22%3E%0A%20%3Cmetadata%20id%3D%22metadata4%22%3E%0A%20%20%3Crdf%3ARDF%3E%0A%20%20%20%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%20%20%20%20%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22/%3E%0A%20%20%20%20%3Cdc%3Atitle/%3E%0A%20%20%20%3C/cc%3AWork%3E%0A%20%20%3C/rdf%3ARDF%3E%0A%20%3C/metadata%3E%0A%20%3Cellipse%20id%3D%22ellipse8%22%20rx%3D%2288.184%22%20ry%3D%2288.715%22%20cy%3D%2288.64%22%20cx%3D%2288.641%22%20fill%3D%22%232a7fff%22/%3E%0A%20%3Cpath%20id%3D%22path10%22%20d%3D%22m171.5%2059.51c3.8341%209.671%205.9385%2020.183%205.9385%2031.178%200%2047.861-39.767%2086.675-88.804%2086.675-49.035%200-88.802-38.814-88.802-86.675%200-11.546%202.321-22.563%206.5203-32.638%200.65931%201.4104%201.2522%202.2175%202.3526%203.2916%200.35416%201.0386%200.78421%201.6358%201.3755%202.1681-7.3662%2020.277-6.1393%2043.028%203.4436%2062.435%2054.759-46.096%2078.905%2015.358%20153.35-15.895%205.0041-18.979%207.0041-31.152-1.2712-50.54h5.8942z%22%20fill%3D%22%230055d4%22/%3E%0A%20%3Cellipse%20id%3D%22ellipse12%22%20rx%3D%227.2374%22%20ry%3D%227.2809%22%20cy%3D%2240.65%22%20cx%3D%2255.881%22%20fill%3D%22%23fff%22/%3E%0A%20%3Cellipse%20id%3D%22ellipse14%22%20rx%3D%224.0266%22%20ry%3D%224.0508%22%20cy%3D%2231.7%22%20cx%3D%2260.102%22%20fill%3D%22%23fff%22/%3E%0A%20%3Cpath%20id%3D%22path16%22%20d%3D%22m170.51%2094.27c-0.7628%204.8812-1.991%209.9925-3.5039%2015.73-22.254%209.3418-40.012%2010.398-55.438%208.5215a61.964%2057.5%200%200%200%20-11.02%2032.707%2061.964%2057.5%200%200%200%205.9121%2024.359c38.986-7.6985%2068.715-40.328%2070.965-80.098a61.964%2057.5%200%200%200%20-6.916%20-1.2207z%22%20fill%3D%22%2304a%22/%3E%0A%3C/svg%3E%0A);
|
|
19
|
+
background-size: 20px 20px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.gbs_color-black, ::content div.gbs_black, .gbs_ghost-black:hover {
|
|
23
|
+
background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20id%3D%22svg2%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2250mm%22%20width%3D%2250mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20viewBox%3D%220%200%20177.16535%20177.16535%22%3E%0A%20%3Cmetadata%20id%3D%22metadata4%22%3E%0A%20%20%3Crdf%3ARDF%3E%0A%20%20%20%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%20%20%20%20%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22/%3E%0A%20%20%20%20%3Cdc%3Atitle/%3E%0A%20%20%20%3C/cc%3AWork%3E%0A%20%20%3C/rdf%3ARDF%3E%0A%20%3C/metadata%3E%0A%20%3Cellipse%20id%3D%22ellipse8%22%20rx%3D%2288.184%22%20ry%3D%2288.715%22%20cy%3D%2288.64%22%20cx%3D%2288.641%22%20fill%3D%22%23292929%22/%3E%0A%20%3Cpath%20id%3D%22path10%22%20d%3D%22m171.5%2059.51c3.8341%209.671%205.9385%2020.183%205.9385%2031.178%200%2047.861-39.767%2086.675-88.804%2086.675-49.035%200-88.802-38.814-88.802-86.675%200-11.546%202.321-22.563%206.5203-32.638%200.65931%201.4104%201.2522%202.2175%202.3526%203.2916%200.35416%201.0386%200.78421%201.6358%201.3755%202.1681-7.3662%2020.277-6.1393%2043.028%203.4436%2062.435%2054.759-46.096%2078.905%2015.358%20153.35-15.895%205.0041-18.979%207.0041-31.152-1.2712-50.54h5.8942z%22%20fill%3D%22%23202020%22/%3E%0A%20%3Cellipse%20id%3D%22ellipse12%22%20rx%3D%227.2374%22%20ry%3D%227.2809%22%20cy%3D%2240.65%22%20cx%3D%2255.881%22%20fill%3D%22%23fff%22/%3E%0A%20%3Cellipse%20id%3D%22ellipse14%22%20rx%3D%224.0266%22%20ry%3D%224.0508%22%20cy%3D%2231.7%22%20cx%3D%2260.102%22%20fill%3D%22%23fff%22/%3E%0A%20%3Cpath%20id%3D%22path16%22%20d%3D%22m170.51%2094.27c-0.7628%204.8812-1.991%209.9925-3.5039%2015.73-22.254%209.3418-40.012%2010.398-55.438%208.5215a61.964%2057.5%200%200%200%20-11.02%2032.707%2061.964%2057.5%200%200%200%205.9121%2024.359c38.986-7.6985%2068.715-40.328%2070.965-80.098a61.964%2057.5%200%200%200%20-6.916%20-1.2207z%22%20fill%3D%22%23131313%22/%3E%0A%3C/svg%3E%0A);
|
|
24
|
+
background-size: 20px 20px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.gbs_color-red, ::content div.gbs_red, .gbs_ghost-red:hover {
|
|
28
|
+
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2250mm%22%20width%3D%2250mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20viewBox%3D%220%200%20177.16535%20177.16535%22%3E%0A%3Cmetadata%3E%0A%3Crdf%3ARDF%3E%0A%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0A%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22/%3E%0A%3Cdc%3Atitle/%3E%0A%3C/cc%3AWork%3E%0A%3C/rdf%3ARDF%3E%0A%3C/metadata%3E%0A%3Cg%20transform%3D%22translate%280%20-875.2%29%22%3E%0A%3Cellipse%20rx%3D%2288.184%22%20ry%3D%2288.715%22%20cy%3D%22963.84%22%20cx%3D%2288.641%22%20fill%3D%22%23d40000%22/%3E%0A%3Cpath%20fill%3D%22%23b10000%22%20d%3D%22m171.5%20934.71c3.8341%209.671%205.9385%2020.183%205.9385%2031.178%200%2047.861-39.767%2086.675-88.804%2086.675-49.035%200-88.802-38.814-88.802-86.675%200-11.546%202.321-22.563%206.5203-32.638%200.65931%201.4104%201.2522%202.2175%202.3526%203.2916%200.35416%201.0386%200.78421%201.6358%201.3755%202.1681-7.3662%2020.277-6.1393%2043.028%203.4436%2062.435%2054.759-46.096%2078.905%2015.358%20153.35-15.895%205.0041-18.979%207.0041-31.152-1.2712-50.54h5.8942z%22/%3E%0A%3Cellipse%20rx%3D%227.2374%22%20ry%3D%227.2809%22%20cy%3D%22915.85%22%20cx%3D%2255.881%22%20fill%3D%22%23fff%22/%3E%0A%3Cellipse%20rx%3D%224.0266%22%20ry%3D%224.0508%22%20cy%3D%22906.9%22%20cx%3D%2260.102%22%20fill%3D%22%23fff%22/%3E%0A%3Cpath%20fill%3D%22%23800%22%20d%3D%22m170.51%20969.47c-0.7628%204.8812-1.991%209.9925-3.5039%2015.73-22.254%209.3418-40.012%2010.398-55.438%208.5215a61.964%2057.5%200%200%200%20-11.02%2032.707%2061.964%2057.5%200%200%200%205.9121%2024.359c38.986-7.6985%2068.715-40.328%2070.965-80.098a61.964%2057.5%200%200%200%20-6.916%20-1.2207z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A);
|
|
29
|
+
background-size: 20px 20px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.gbs_color-green, ::content div.gbs_green, .gbs_ghost-green:hover {
|
|
33
|
+
background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20id%3D%22svg2%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2250mm%22%20width%3D%2250mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20viewBox%3D%220%200%20177.16535%20177.16535%22%3E%0A%20%3Cmetadata%20id%3D%22metadata4%22%3E%0A%20%20%3Crdf%3ARDF%3E%0A%20%20%20%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%20%20%20%20%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22/%3E%0A%20%20%20%20%3Cdc%3Atitle/%3E%0A%20%20%20%3C/cc%3AWork%3E%0A%20%20%3C/rdf%3ARDF%3E%0A%20%3C/metadata%3E%0A%20%3Cellipse%20id%3D%22ellipse8%22%20rx%3D%2288.184%22%20ry%3D%2288.715%22%20cy%3D%2288.64%22%20cx%3D%2288.641%22%20fill%3D%22%2337c837%22/%3E%0A%20%3Cpath%20id%3D%22path10%22%20d%3D%22m171.5%2059.51c3.8341%209.671%205.9385%2020.183%205.9385%2031.178%200%2047.861-39.767%2086.675-88.804%2086.675-49.035%200-88.802-38.814-88.802-86.675%200-11.546%202.321-22.563%206.5203-32.638%200.65931%201.4104%201.2522%202.2175%202.3526%203.2916%200.35416%201.0386%200.78421%201.6358%201.3755%202.1681-7.3662%2020.277-6.1393%2043.028%203.4436%2062.435%2054.759-46.096%2078.905%2015.358%20153.35-15.895%205.0041-18.979%207.0041-31.152-1.2712-50.54h5.8942z%22%20fill%3D%22%232ca02c%22/%3E%0A%20%3Cellipse%20id%3D%22ellipse12%22%20rx%3D%227.2374%22%20ry%3D%227.2809%22%20cy%3D%2240.65%22%20cx%3D%2255.881%22%20fill%3D%22%23fff%22/%3E%0A%20%3Cellipse%20id%3D%22ellipse14%22%20rx%3D%224.0266%22%20ry%3D%224.0508%22%20cy%3D%2231.7%22%20cx%3D%2260.102%22%20fill%3D%22%23fff%22/%3E%0A%20%3Cpath%20id%3D%22path16%22%20d%3D%22m170.51%2094.27c-0.7628%204.8812-1.991%209.9925-3.5039%2015.73-22.254%209.3418-40.012%2010.398-55.438%208.5215a61.964%2057.5%200%200%200%20-11.02%2032.707%2061.964%2057.5%200%200%200%205.9121%2024.359c38.986-7.6985%2068.715-40.328%2070.965-80.098a61.964%2057.5%200%200%200%20-6.916%20-1.2207z%22%20fill%3D%22%23217821%22/%3E%0A%3C/svg%3E%0A);
|
|
34
|
+
background-size: 20px 20px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
::content div.gbs_O {
|
|
38
|
+
background: white;
|
|
39
|
+
opacity: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.gbs_hidden {
|
|
43
|
+
visibility: hidden;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.gbs_stone {
|
|
47
|
+
font-weight: bold;
|
|
48
|
+
font-size: 8pt;
|
|
49
|
+
width: 20px;
|
|
50
|
+
height: 20px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.gbs_stone_amount {
|
|
54
|
+
vertical-align: sub;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.gbs_ghost-color, .gbs_ghost-blue:hover, .gbs_ghost-black:hover, .gbs_ghost-red:hover, .gbs_ghost-green:hover {
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
opacity: 0.5 !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Tooltip container */
|
|
63
|
+
.gbs_tooltip {
|
|
64
|
+
position: relative;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Tooltip text */
|
|
68
|
+
.gbs_tooltip .gbs_tooltiptext {
|
|
69
|
+
visibility: hidden;
|
|
70
|
+
width: 50px;
|
|
71
|
+
background-color: #555;
|
|
72
|
+
color: #fff;
|
|
73
|
+
text-align: center;
|
|
74
|
+
padding: 5px 0;
|
|
75
|
+
border-radius: 6px;
|
|
76
|
+
/* Position the tooltip text */
|
|
77
|
+
position: absolute;
|
|
78
|
+
z-index: 1;
|
|
79
|
+
bottom: 125%;
|
|
80
|
+
left: 50%;
|
|
81
|
+
margin-left: -25px;
|
|
82
|
+
/* Fade in tooltip */
|
|
83
|
+
opacity: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Tooltip arrow */
|
|
87
|
+
.gbs_tooltip .gbs_tooltiptext::after {
|
|
88
|
+
content: "";
|
|
89
|
+
position: absolute;
|
|
90
|
+
top: 100%;
|
|
91
|
+
left: 50%;
|
|
92
|
+
margin-left: -5px;
|
|
93
|
+
border-width: 5px;
|
|
94
|
+
border-style: solid;
|
|
95
|
+
border-color: #555 transparent transparent transparent;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Show the tooltip text when you mouse over the tooltip container */
|
|
99
|
+
.gbs_tooltip:hover .gbs_tooltiptext {
|
|
100
|
+
visibility: visible;
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/*# sourceMappingURL=style.css.map */
|
|
105
|
+
|
|
106
|
+
</style>
|
|
107
|
+
|
|
108
|
+
<template is="dom-if" if="{{amount}}">
|
|
109
|
+
<div class$="gbs_stone gbs_tooltip gbs_{{color}} {{cssClass(color, amount)}}">
|
|
110
|
+
<span class="gbs_stone_amount">{{amountText(amount)}}</span>
|
|
111
|
+
|
|
112
|
+
<template is="dom-if" if="{{hasBigAmount(amount)}}">
|
|
113
|
+
<span class="gbs_tooltiptext">{{amount}}</span>
|
|
114
|
+
</template>
|
|
115
|
+
</div>
|
|
116
|
+
</template>
|
|
117
|
+
|
|
118
|
+
<template is="dom-if" if="{{!amount}}">
|
|
119
|
+
<div class$="gbs_stone gbs_O {{cssClass(color, amount)}}"></div>
|
|
120
|
+
</template>
|
|
121
|
+
|
|
122
|
+
</template>
|
|
123
|
+
<script>
|
|
124
|
+
Polymer({
|
|
125
|
+
is: 'gs-stone',
|
|
126
|
+
properties: {
|
|
127
|
+
color: String,
|
|
128
|
+
amount: {
|
|
129
|
+
type: Number,
|
|
130
|
+
value: 0,
|
|
131
|
+
notify: true,
|
|
132
|
+
observer: "_sanitizeAmount"
|
|
133
|
+
},
|
|
134
|
+
options: Object
|
|
135
|
+
},
|
|
136
|
+
listeners: {
|
|
137
|
+
click: "_leftClick",
|
|
138
|
+
contextmenu: "_rightClick"
|
|
139
|
+
},
|
|
140
|
+
ready: function() {
|
|
141
|
+
this._sanitizeAmount();
|
|
142
|
+
if (this.options == null) {
|
|
143
|
+
throw new Error("The options are required");
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
amountText: function(amount) {
|
|
147
|
+
if (this.hasBigAmount(amount)) {
|
|
148
|
+
return "*";
|
|
149
|
+
} else {
|
|
150
|
+
return amount;
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
cssClass: function(color, amount) {
|
|
154
|
+
if (this.options.editable) {
|
|
155
|
+
if (amount > 0) {
|
|
156
|
+
return "gbs_pointer";
|
|
157
|
+
} else {
|
|
158
|
+
return "gbs_ghost-" + color;
|
|
159
|
+
}
|
|
160
|
+
} else {
|
|
161
|
+
return "";
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
hasBigAmount: (function(_this) {
|
|
165
|
+
return function(amount) {
|
|
166
|
+
return amount > 99;
|
|
167
|
+
};
|
|
168
|
+
})(this),
|
|
169
|
+
_sanitizeAmount: function() {
|
|
170
|
+
if (!(typeof this.amount === "number" && this.amount >= 0)) {
|
|
171
|
+
return this.amount = 0;
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
_leftClick: function(event) {
|
|
175
|
+
var board;
|
|
176
|
+
board = this.domHost.domHost;
|
|
177
|
+
if (!this.options.editable || board.isCtrlPressed()) {
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
this.fire("board-changed");
|
|
181
|
+
this.amount += this._clickAmount();
|
|
182
|
+
return event.stopPropagation();
|
|
183
|
+
},
|
|
184
|
+
_rightClick: function(event) {
|
|
185
|
+
if (!this.options.editable) {
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
event.preventDefault();
|
|
189
|
+
this.fire("board-changed");
|
|
190
|
+
return this.amount -= this._clickAmount();
|
|
191
|
+
},
|
|
192
|
+
_clickAmount: function() {
|
|
193
|
+
if (this.domHost.domHost.isShiftPressed()) {
|
|
194
|
+
return 10;
|
|
195
|
+
} else {
|
|
196
|
+
return 1;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
</script>
|
|
202
|
+
</dom-module>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<dom-module id="key-tracker">
|
|
2
|
+
<template>
|
|
3
|
+
<style>
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
/*# sourceMappingURL=style.css.map */
|
|
7
|
+
|
|
8
|
+
</style>
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
</template>
|
|
12
|
+
<script>
|
|
13
|
+
Polymer({
|
|
14
|
+
is: 'key-tracker',
|
|
15
|
+
ready: function() {
|
|
16
|
+
this._pressedKeys = [];
|
|
17
|
+
this._listenTo("keydown", (function(_this) {
|
|
18
|
+
return function(ev) {
|
|
19
|
+
var key;
|
|
20
|
+
key = ev.key || ev.keyIdentifier;
|
|
21
|
+
if (!_this.isPressed(key)) {
|
|
22
|
+
return _this._pressedKeys.push(key);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
})(this));
|
|
26
|
+
this._listenTo("keyup", (function(_this) {
|
|
27
|
+
return function(ev) {
|
|
28
|
+
var key;
|
|
29
|
+
key = ev.key || ev.keyIdentifier;
|
|
30
|
+
if (_this.isPressed(key)) {
|
|
31
|
+
return _this._pressedKeys.splice(_this._indexOf(key), 1);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
})(this));
|
|
35
|
+
return window.addEventListener("blur", (function(_this) {
|
|
36
|
+
return function() {
|
|
37
|
+
return _this._pressedKeys = [];
|
|
38
|
+
};
|
|
39
|
+
})(this));
|
|
40
|
+
},
|
|
41
|
+
isPressed: function(key) {
|
|
42
|
+
return this._indexOf(key) !== -1;
|
|
43
|
+
},
|
|
44
|
+
_indexOf: function(key) {
|
|
45
|
+
return this._pressedKeys.indexOf(key);
|
|
46
|
+
},
|
|
47
|
+
_listenTo: function(eventName, handler) {
|
|
48
|
+
return window.addEventListener(eventName, handler);
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
</script>
|
|
53
|
+
</dom-module>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="50mm" width="50mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 177.16535 177.16535">
|
|
3
|
+
<metadata id="metadata4">
|
|
4
|
+
<rdf:RDF>
|
|
5
|
+
<cc:Work rdf:about="">
|
|
6
|
+
<dc:format>image/svg+xml</dc:format>
|
|
7
|
+
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
|
8
|
+
<dc:title/>
|
|
9
|
+
</cc:Work>
|
|
10
|
+
</rdf:RDF>
|
|
11
|
+
</metadata>
|
|
12
|
+
<ellipse id="ellipse8" rx="88.184" ry="88.715" cy="88.64" cx="88.641" fill="#2a7fff"/>
|
|
13
|
+
<path id="path10" d="m171.5 59.51c3.8341 9.671 5.9385 20.183 5.9385 31.178 0 47.861-39.767 86.675-88.804 86.675-49.035 0-88.802-38.814-88.802-86.675 0-11.546 2.321-22.563 6.5203-32.638 0.65931 1.4104 1.2522 2.2175 2.3526 3.2916 0.35416 1.0386 0.78421 1.6358 1.3755 2.1681-7.3662 20.277-6.1393 43.028 3.4436 62.435 54.759-46.096 78.905 15.358 153.35-15.895 5.0041-18.979 7.0041-31.152-1.2712-50.54h5.8942z" fill="#0055d4"/>
|
|
14
|
+
<ellipse id="ellipse12" rx="7.2374" ry="7.2809" cy="40.65" cx="55.881" fill="#fff"/>
|
|
15
|
+
<ellipse id="ellipse14" rx="4.0266" ry="4.0508" cy="31.7" cx="60.102" fill="#fff"/>
|
|
16
|
+
<path id="path16" d="m170.51 94.27c-0.7628 4.8812-1.991 9.9925-3.5039 15.73-22.254 9.3418-40.012 10.398-55.438 8.5215a61.964 57.5 0 0 0 -11.02 32.707 61.964 57.5 0 0 0 5.9121 24.359c38.986-7.6985 68.715-40.328 70.965-80.098a61.964 57.5 0 0 0 -6.916 -1.2207z" fill="#04a"/>
|
|
17
|
+
</svg>
|