Clothing => Attire

README.md

@@ -50,12 +50,12 @@ finalState.table = [[{}, { "red": 3 }], [{ "black": 1 }, {}]]
 <gs-board size='{ "x": 4, "y": 4 }' boom></gs-board>
 ```
 
-### with clothing
+### with attire
 ```html
-<gs-board size='{ "x": 4, "y": 4 }' clothing="{{clothing}}"></gs-board>
+<gs-board size='{ "x": 4, "y": 4 }' attire="{{attire}}"></gs-board>
 ```
 
-#### Example of clothing definition:
+#### Example of attire definition:
 ```json
 {
   "rules": [

dist/components/cell-dresser.html

@@ -12,9 +12,9 @@
   <script>
     Polymer({
       is: 'cell-dresser',
-      getImage: function(cell, clothing) {
+      getImage: function(cell, attire) {
         var _ref;
-        return clothing != null ? (_ref = clothing.rules.filter((function(_this) {
+        return attire != null ? (_ref = attire.rules.filter((function(_this) {
           return function(rule) {
             return _this._doesSatisfyRule(cell, rule);
           };

dist/components/demo/board-demo.html

@@ -17,15 +17,15 @@
       <gs-board size='{ "x": 2, "y": 2 }' options='{ "editable": true }'></gs-board>
     </div>
     <div>
-      <gs-board table="{{modelWithClothing.table}}" options='{ "editable": false }' clothing='{{clothing}}'></gs-board>
+      <gs-board table="{{modelWithAttire.table}}" options='{ "editable": false }' attire='{{attire}}'></gs-board>
     </div>
     <div class="board-wrap-json">
       <juicy-jsoneditor id="jsoneditor" style="height: 300px;" json="{{jsonModel}}"></juicy-jsoneditor>
     </div>
 
   </template>
   <script>
-    var model, modelWithClothing;
+    var model, modelWithAttire;
 
     model = {
       table: [
@@ -46,7 +46,7 @@
       ]
     };
 
-    modelWithClothing = {
+    modelWithAttire = {
       table: [
         [
           {
@@ -87,21 +87,21 @@
           value: model,
           notify: true
         },
-        modelWithClothing: {
+        modelWithAttire: {
           type: Object,
-          value: modelWithClothing,
+          value: modelWithAttire,
           notify: true
         },
         jsonModel: {
           type: Object,
           value: model
         },
-        clothing: {
+        attire: {
           type: Object
         }
       },
       ready: function() {
-        return this.clothing = {
+        return this.attire = {
           "rules": [
             {
               "when": {

dist/components/gs-board.html

@@ -115,7 +115,7 @@
             <td class="lv">{{getRowNumber(table, rowIndex)}}</td>
             <template is="dom-repeat" items="{{row}}" as="cell" index-as="cellIndex">
               <td>
-                <gs-cell cell-index="{{cellIndex}}" row-index="{{rowIndex}}" cell="{{cell}}" table="{{table}}" header="{{header}}" options="{{options}}" clothing="{{clothing}}"></gs-cell>
+                <gs-cell cell-index="{{cellIndex}}" row-index="{{rowIndex}}" cell="{{cell}}" table="{{table}}" header="{{header}}" options="{{options}}" attire="{{attire}}"></gs-cell>
               </td>
             </template>
             <td class="lv">{{getRowNumber(table, rowIndex)}}</td>
@@ -157,7 +157,7 @@
           type: Boolean,
           value: false
         },
-        clothing: {
+        attire: {
           type: Object
         }
       },

dist/components/gs-cell.html

@@ -95,7 +95,7 @@
         rowIndex: Number,
         cell: Object,
         table: Array,
-        clothing: {
+        attire: {
           type: Object,
           notify: "_updateBackgroundUrl"
         },
@@ -162,7 +162,7 @@
       },
       _updateBackgroundUrl: function() {
         var url;
-        url = this.$.dresser.getImage(this.cell, this.clothing);
+        url = this.$.dresser.getImage(this.cell, this.attire);
         this.customStyle["--stones-visibility"] = url != null ? "hidden" : "visible";
         if (url != null) {
           this.customStyle["--background-url"] = "url(" + url + ")";
@@ -174,4 +174,4 @@
     });
 
   </script>
-</dom-module>
+</dom-module>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gs-board",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "dependencies": {},
   "devDependencies": {
     "connect-livereload": "^0.4.0",

src/components/cell-dresser/script.coffee

@@ -1,8 +1,8 @@
 Polymer
   is: '#GRUNT_COMPONENT_NAME'
 
-  getImage: (cell, clothing)->
-    clothing?.rules
+  getImage: (cell, attire)->
+    attire?.rules
       .filter(
         (rule) => @_doesSatisfyRule cell, rule
       )[0]?.image

src/components/demo/board-demo/script.coffee

@@ -5,7 +5,7 @@ model = table: [
   [ { red: 3, black: 4 }, {}, {}, {} ]
 ]
 
-modelWithClothing = table: [
+modelWithAttire = table: [
   [ { green: 1 }, {}, {}, { blue: 1 } ]
   [ {}, { red: 4, black: 1 }, { red: 4, black: 2 }, {} ]
   [ {}, { red: 4 }, { red: 4, black: 3 }, {} ]
@@ -21,18 +21,18 @@ Polymer
       type: Object
       value: model
       notify: true
-    modelWithClothing:
+    modelWithAttire:
       type: Object
-      value: modelWithClothing
+      value: modelWithAttire
       notify: true
     jsonModel:
       type: Object
       value: model
-    clothing:
+    attire:
       type: Object
 
   ready: ->
-    @clothing = {
+    @attire = {
       "rules": [
         {
           "when": { "blue": "*", "black": "+", "red": 4, "green": "*" },

src/components/demo/board-demo/template.html

@@ -8,7 +8,7 @@
   <gs-board size='{ "x": 2, "y": 2 }' options='{ "editable": true }'></gs-board>
 </div>
 <div>
-  <gs-board table="{{modelWithClothing.table}}" options='{ "editable": false }' clothing='{{clothing}}'></gs-board>
+  <gs-board table="{{modelWithAttire.table}}" options='{ "editable": false }' attire='{{attire}}'></gs-board>
 </div>
 <div class="board-wrap-json">
   <juicy-jsoneditor id="jsoneditor" style="height: 300px;" json="{{jsonModel}}"></juicy-jsoneditor>

src/components/gs-board/script.coffee

@@ -22,7 +22,7 @@ Polymer
       type: Boolean
       value: false
 
-    clothing:
+    attire:
       type: Object
 
   ready: ->

src/components/gs-board/template.html

@@ -14,7 +14,7 @@
         <td class="lv">{{getRowNumber(table, rowIndex)}}</td>
         <template is="dom-repeat" items="{{row}}" as="cell" index-as="cellIndex">
           <td>
-            <gs-cell cell-index="{{cellIndex}}" row-index="{{rowIndex}}" cell="{{cell}}" table="{{table}}" header="{{header}}" options="{{options}}" clothing="{{clothing}}"></gs-cell>
+            <gs-cell cell-index="{{cellIndex}}" row-index="{{rowIndex}}" cell="{{cell}}" table="{{table}}" header="{{header}}" options="{{options}}" attire="{{attire}}"></gs-cell>
           </td>
         </template>
         <td class="lv">{{getRowNumber(table, rowIndex)}}</td>

src/components/gs-cell/script.coffee

@@ -6,7 +6,7 @@ Polymer
     rowIndex: Number
     cell: Object
     table: Array
-    clothing:
+    attire:
       type: Object
       notify: "_updateBackgroundUrl"
     backgroundUrl: String
@@ -47,7 +47,7 @@ Polymer
     throw new Error("The coordinates are required") if not @cellIndex? or not @rowIndex?
 
   _updateBackgroundUrl: ->
-    url = @$.dresser.getImage @cell, @clothing
+    url = @$.dresser.getImage @cell, @attire
 
     @customStyle["--stones-visibility"] = if url? then "hidden" else "visible"
     if url? then @customStyle["--background-url"] = "url(#{url})"

src/components/gs-cell/style.scss

@@ -7,7 +7,9 @@
 
 div.gc {
   background-image: var(--background-url);
-  background-size: 44px 44px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
 }
 
 table.gc { /* cell table */