Ghoststones

gobstones · Feb 14, 2017 · 1731426 · 1731426
1 parent 3063f62
commit 1731426
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 29 deletions.
diff --git a/dist/components/gs-stone.html b/dist/components/gs-stone.html
@@ -14,22 +14,26 @@
         user-select: none;
       }
 
-      ::content div.blue {
+      .color-blue, ::content div.blue, .ghost-blue:hover {
         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);
         background-size: 20px 20px;
       }
-      ::content div.black {
+
+      .color-black, ::content div.black, .ghost-black:hover {
         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);
         background-size: 20px 20px;
       }
-      ::content div.red {
+
+      .color-red, ::content div.red, .ghost-red:hover {
         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);
         background-size: 20px 20px;
       }
-      ::content div.green {
+
+      .color-green, ::content div.green, .ghost-green:hover {
         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);
         background-size: 20px 20px;
       }
+
       ::content div.O {
         background: white;
         opacity: 0;
@@ -50,18 +54,23 @@
         vertical-align: sub;
       }
 
+      .ghost-color, .ghost-blue:hover, .ghost-black:hover, .ghost-red:hover, .ghost-green:hover {
+        cursor: pointer;
+        opacity: 0.5 !important;
+      }
+
       /*# sourceMappingURL=style.css.map */
 
     </style>
 
     <template is="dom-if" if="{{amount}}">
-      <div class$="gbs_stone {{color}} {{cssClass()}}">
+      <div class$="gbs_stone {{color}} {{cssClass(color, amount)}}">
         <span class="stone_amount">{{amount}}</span>
       </div>
     </template>
 
     <template is="dom-if" if="{{!amount}}">
-      <div class$="gbs_stone O {{cssClass()}}"></div>
+      <div class$="gbs_stone O {{cssClass(color, amount)}}"></div>
     </template>
 
   </template>
@@ -88,9 +97,13 @@
           throw new Error("The options are required");
         }
       },
-      cssClass: function() {
+      cssClass: function(color, amount) {
         if (this.options.editable) {
-          return "pointer";
+          if (amount > 0) {
+            return "pointer";
+          } else {
+            return "ghost-" + color;
+          }
         } else {
           return "";
         }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gs-board",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "dependencies": {},
   "devDependencies": {
     "connect-livereload": "^0.4.0",

diff --git a/src/components/gs-stone/script.coffee b/src/components/gs-stone/script.coffee
@@ -18,8 +18,9 @@ Polymer
     @_sanitizeAmount()
     throw new Error("The options are required") if not @options?
 
-  cssClass: ->
-    if @options.editable then "pointer"
+  cssClass: (color, amount) ->
+    if @options.editable
+      if amount > 0 then "pointer" else "ghost-#{color}"
     else ""
 
   _sanitizeAmount: ->