mumuki-gobstones-board 1.20.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e9455779809eec267bf2c156cb107df3cd36da55ba25c2cedae320ae116d4842
+  data.tar.gz: 31ace012e36ef7758ac16239f8847bedaab7c4743669085d874ab82f32a778d0
+SHA512:
+  metadata.gz: 899a0019cc1165fa5197780fe36a3b412b1fd76d4d04b0a674628e02085af0e89db2944c760953e0612060afabd58865d2ea80437579cdf815c8a8687c9f9d82
+  data.tar.gz: e724b257a05fce1fd6c5e29bcc91571de31a2050f77578484c94037706603d22d4a90c2fd6a269a570ede4eca9e4d4f3077020cc1885d646cc22b26da28d38bc

data/README.md

@@ -0,0 +1,150 @@
+# gs-board
+
+Gobstones Board: A Polymer component that renders a board.
+
+## install
+
+```
+npm install
+npm install -g grunt-cli bower
+bower install
+gem install sass
+```
+
+## run
+
+```
+# build and start live demo
+grunt
+
+# just build
+grunt dist
+```
+
+## usage
+
+### install
+```
+bower install --save gobstones/gs-board
+```
+
+### one-file compiled version
+It is bundled every time `grunt` runs. See `test.html` for an example.
+
+### import
+```html
+<link rel="import" href="{BOWER_COMPONENTS}/gs-board/dist/components/gs-board.html">
+```
+
+### simple board (from GBB)
+```html
+<gs-board>
+  GBB/1.0
+  size 4 3
+  cell 1 2 Azul 0 Negro 0 Rojo 8 Verde 0
+  cell 3 2 Azul 2 Negro 0 Rojo 5 Verde 1
+  cell 2 1 Azul 0 Negro 6 Rojo 0 Verde 0
+  head 1 2
+</gs-board>
+```
+
+### initial board (editable)
+```html
+<gs-board size='{ "x": 4, "y": 4 }' options='{ "editable": true }'></gs-board>
+```
+
+### final board (fixed)
+```html
+<template is="dom-if" if="{{finalState}}" restamp="true">
+  <gs-board table='{{finalState.table}}' header="{{finalState.header}}"></gs-board>
+</template>
+```
+```
+finalState.table = [[{}, { "red": 3 }], [{ "black": 1 }, {}]]
+```
+
+### setting header position
+```html
+<gs-board size='{ "x": 4, "y": 4 }' header='{ "x": 1, "y": 3 }'></gs-board>
+```
+
+### with attire
+```html
+<gs-board size='{ "x": 4, "y": 4 }' attire="{{attire}}"></gs-board>
+```
+
+### boom
+```html
+<gs-board boom></gs-board>
+```
+
+#### Example of attire definition:
+```json
+{
+  "enabled": true,
+  "rules": [
+    {
+      "when": { "blue": "*", "black": "+", "red": 4, "green": "*" },
+      "image": "https://cloud.githubusercontent.com/assets/1631752/19217961/ef2e0d4c-8dea-11e6-960d-69585778f89d.png"
+    },
+    {
+      "when": { "blue": 3, "black": 0, "red": 1, "green": 0 },
+      "text": "hi!"
+    },
+    {
+      "when": { "blue": 0, "black": 0, "red": 0, "green": 0 },
+      "image": "https://cloud.githubusercontent.com/assets/1631752/19217956/ef1d928c-8dea-11e6-8b53-8d2495cdd3e9.png"
+    },
+    {
+      "when": { "blue": 0, "black": 0, "red": 0, "green": 1 },
+      "image": "https://cloud.githubusercontent.com/assets/1631752/19217959/ef27e822-8dea-11e6-9bb0-57892593c9d8.png"
+    },
+    {
+      "when": { "blue": 1, "black": 0, "red": 0, "green": 0 },
+      "image": "https://cloud.githubusercontent.com/assets/1631752/19217958/ef245892-8dea-11e6-80f4-aeb5d1862b1c.png"
+    },
+    {
+      "when": { "blue": 0, "black": 1, "red": 0, "green": 0 },
+      "image": "https://cloud.githubusercontent.com/assets/1631752/19217957/ef20120a-8dea-11e6-825c-23e7773269b0.png"
+    },
+    {
+      "when": { "blue": 0, "black": 0, "red": 1, "green": 0, "head": true },
+      "image": "https://user-images.githubusercontent.com/1631752/33194059-c9794fb0-d0d5-11e7-81dc-65a0f7472a94.png"
+    },
+    {
+      "when": { "blue": 0, "black": 0, "red": 1, "green": 0 },
+      "image": "https://cloud.githubusercontent.com/assets/1631752/19217960/ef2ad3c0-8dea-11e6-8434-ff9152b76f3b.png"
+    }
+  ],
+  "borders": {
+    "bottom": "https://user-images.githubusercontent.com/1631752/37176618-94629ef6-2325-11e8-9e11-6cf6846bbbc3.png",
+    "bottomLeft": "https://user-images.githubusercontent.com/1631752/37176647-9cb96b98-2325-11e8-9244-17e65f8236bc.png",
+    "bottomRight": "https://user-images.githubusercontent.com/1631752/37176659-a85c71b6-2325-11e8-8698-952cfbdf73f5.png",
+    "left": "https://user-images.githubusercontent.com/1631752/37176682-c09ae398-2325-11e8-90d6-d1793b8c20fd.png",
+    "right": "https://user-images.githubusercontent.com/1631752/37176696-c8628ea0-2325-11e8-9fb0-39805f2b810d.png",
+    "top": "https://user-images.githubusercontent.com/1631752/37176705-d5459ee6-2325-11e8-8100-23a4b89a064c.png",
+    "topLeft": "https://user-images.githubusercontent.com/1631752/37176714-dec70f54-2325-11e8-9589-4b3feaa21a2f.png",
+    "topRight": "https://user-images.githubusercontent.com/1631752/37176725-e747cbe6-2325-11e8-8c3b-873501ce0a18.png"
+  }
+}
+```
+
+## considerations
+- To update the board, don't mutate the properties directly. **You must use the `update(table, header)` method**.
+
+## Gem wrapper
+
+This module can also be deployed a ruby gem. `mumuki-gobstones-board` works with Ruby >= 2.3.1
+
+```bash
+cd gem
+rake wrapper:wrap
+bundle install
+bundle exec rspec
+```
+
+## Tagging and releasing
+
+```bash
+./tag.sh
+```

data/Rakefile

@@ -0,0 +1,33 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec
+
+namespace :wrapper do
+  desc 'Wrap styles assets into this gem'
+  task wrap: :clean do
+    # readme
+    cp_r '../README.md', 'README.md'
+
+    #  gs-board
+    cp_r '../dist/gs-board.html', 'app/assets/htmls'
+    cp_r '../dist/components', 'app/assets/htmls'
+
+    # polymer
+    cp_r '../bower_components/polymer/polymer.html', 'app/assets/htmls/vendor'
+    cp_r '../bower_components/polymer/polymer-mini.html', 'app/assets/htmls/vendor'
+    cp_r '../bower_components/polymer/polymer-micro.html', 'app/assets/htmls/vendor'
+
+    # webcomponents
+    cp_r '../bower_components/webcomponentsjs/webcomponents.min.js', 'app/assets/javascripts/vendor'
+  end
+
+  task :clean do
+    rm_rf 'app'
+    mkdir_p 'app/assets/htmls'
+    mkdir_p 'app/assets/htmls/vendor'
+    mkdir_p 'app/assets/javascripts/vendor'
+  end
+end

data/app/assets/htmls/components/cell-dresser.html

@@ -0,0 +1,57 @@
+<dom-module id="cell-dresser">
+  <template>
+    <style>
+      
+
+      /*# sourceMappingURL=style.css.map */
+
+    </style>
+
+
+  </template>
+  <script>
+    Polymer({
+      is: 'cell-dresser',
+      getRule: function(cell, isHeader, attire) {
+        if ((attire == null) || !attire.enabled) {
+          return;
+        }
+        return attire != null ? attire.rules.filter((function(_this) {
+          return function(rule) {
+            return _this._doesSatisfyRule(cell, isHeader, rule);
+          };
+        })(this))[0] : void 0;
+      },
+      _doesSatisfyRule: function(cell, isHeader, rule) {
+        var itSatisfies;
+        itSatisfies = (function(_this) {
+          return function(color) {
+            return _this._doesSatisfyQuantity(cell[color], rule.when[color]) && _this._doesSatisfyHeader(isHeader, rule.when.head);
+          };
+        })(this);
+        return ["red", "blue", "green", "black"].reduce((function(_this) {
+          return function(previousCondition, color) {
+            return previousCondition && itSatisfies(color);
+          };
+        })(this), true);
+      },
+      _doesSatisfyQuantity: function(quantity, expectedQuantity) {
+        if (quantity == null) {
+          quantity = 0;
+        }
+        switch (expectedQuantity) {
+          case "*":
+            return true;
+          case "+":
+            return quantity > 0;
+          default:
+            return quantity === expectedQuantity;
+        }
+      },
+      _doesSatisfyHeader: function(isHeader, expectedHeader) {
+        return (expectedHeader == null) || expectedHeader === isHeader;
+      }
+    });
+
+  </script>
+</dom-module>

data/app/assets/htmls/components/demo/board-demo.html

@@ -0,0 +1,308 @@
+<dom-module id="board-demo">
+  <template>
+    <style>
+      
+
+      /*# sourceMappingURL=style.css.map */
+
+    </style>
+
+    <div>
+      <h3>
+        with gbb:
+      </h3>
+      <gs-board>
+        GBB/1.0
+        size 4 3
+        cell 1 2 Azul 0 Negro 0 Rojo 8 Verde 0
+        cell 3 2 Azul 2 Negro 0 Rojo 5 Verde 1
+        cell 2 1 Azul 0 Negro 6 Rojo 0 Verde 0
+        head 1 2
+      </gs-board>
+    </div>
+
+    <div>
+      <h3>
+        with boom:
+      </h3>
+      <gs-board boom></gs-board>
+    </div>
+
+    <div>
+      <h3>
+        without header:
+      </h3>
+      <gs-board without-header>
+        GBB/1.0
+        size 4 3
+        cell 1 2 Azul 0 Negro 0 Rojo 8 Verde 0
+        cell 3 2 Azul 2 Negro 0 Rojo 5 Verde 1
+        cell 2 1 Azul 0 Negro 6 Rojo 0 Verde 0
+        head 1 2
+      </gs-board>
+    </div>
+
+    <div>
+      <h3>
+        with gbb and text inside the attire:
+      </h3>
+      <gs-board attire='{{attire2}}'>
+        GBB/1.0
+        size 4 3
+        cell 1 2 Azul 0 Negro 0 Rojo 8 Verde 0
+        cell 3 2 Azul 3 Negro 0 Rojo 1 Verde 0
+        cell 2 1 Azul 0 Negro 6 Rojo 0 Verde 0
+        head 1 2
+      </gs-board>
+    </div>
+
+    <!--
+    <div>
+      <gs-board attire-src="mines">
+        GBB/1.0
+        size 4 3
+        cell 1 2 Azul 0 Negro 0 Rojo 8 Verde 0
+        cell 3 2 Azul 2 Negro 0 Rojo 5 Verde 1
+        cell 2 1 Azul 0 Negro 6 Rojo 0 Verde 0
+        head 1 2
+      </gs-board>
+    </div>
+     -->
+
+    <div>
+      <h3>
+        with table:
+      </h3>
+      <gs-board table="{{model.table}}" options='{ "editable": false }'></gs-board>
+    </div>
+    <div>
+      <h3>
+        with attire:
+      </h3>
+      <gs-board size='{ "x": 4, "y": 4 }' options='{ "editable": false }' attire="{{attire2}}"></gs-board>
+    </div>
+    <div>
+      <h3>
+        with 3x5 size:
+      </h3>
+      <gs-board size='{ "x": 3, "y": 5 }' options='{ "editable": true }'></gs-board>
+    </div>
+    <div>
+      <h3>
+        with id and 2x2 size:
+      </h3>
+      <gs-board id="thing" size='{ "x": 2, "y": 2 }' options='{ "editable": true }'></gs-board>
+    </div>
+    <div>
+      <hr>
+      <gs-board table="{{modelWithAttire.table}}" options='{ "editable": false }' attire='{{attire}}'></gs-board>
+      <hr>
+    </div>
+    <div class="board-wrap-json">
+      <juicy-jsoneditor id="jsoneditor" style="height: 300px;" json="{{jsonModel}}"></juicy-jsoneditor>
+    </div>
+
+  </template>
+  <script>
+    var model, modelWithAttire;
+
+    model = {
+      table: [
+        [{}, {}, {}, {}], [{}, {}, {}, {}], [
+          {
+            black: 1
+          }, {
+            blue: 87493312
+          }, {
+            green: 2
+          }, {}
+        ], [
+          {
+            red: 3,
+            black: 4
+          }, {}, {}, {}
+        ]
+      ]
+    };
+
+    modelWithAttire = {
+      table: [
+        [
+          {
+            green: 1
+          }, {}, {}, {
+            blue: 1
+          }
+        ], [
+          {}, {
+            red: 4,
+            black: 1
+          }, {
+            red: 4,
+            black: 2
+          }, {}
+        ], [
+          {}, {
+            red: 1
+          }, {
+            red: 4,
+            black: 3
+          }, {}
+        ], [
+          {
+            red: 1
+          }, {}, {}, {
+            black: 1
+          }
+        ]
+      ]
+    };
+
+    Polymer({
+      is: 'board-demo',
+      properties: {
+        model: {
+          type: Object,
+          value: model,
+          notify: true
+        },
+        modelWithAttire: {
+          type: Object,
+          value: modelWithAttire,
+          notify: true
+        },
+        jsonModel: {
+          type: Object,
+          value: model
+        },
+        attire: {
+          type: Object
+        },
+        attire2: {
+          type: Object
+        }
+      },
+      ready: function() {
+        this.attire = {
+          "enabled": true,
+          "rules": [
+            {
+              "when": {
+                "blue": "*",
+                "black": "+",
+                "red": 4,
+                "green": "*"
+              },
+              "image": "https://cloud.githubusercontent.com/assets/1631752/19217961/ef2e0d4c-8dea-11e6-960d-69585778f89d.png"
+            }, {
+              "when": {
+                "blue": 0,
+                "black": 0,
+                "red": 0,
+                "green": 0
+              },
+              "image": "https://cloud.githubusercontent.com/assets/1631752/19217956/ef1d928c-8dea-11e6-8b53-8d2495cdd3e9.png"
+            }, {
+              "when": {
+                "blue": 0,
+                "black": 0,
+                "red": 0,
+                "green": 1
+              },
+              "image": "https://cloud.githubusercontent.com/assets/1631752/19217959/ef27e822-8dea-11e6-9bb0-57892593c9d8.png"
+            }, {
+              "when": {
+                "blue": 1,
+                "black": 0,
+                "red": 0,
+                "green": 0
+              },
+              "image": "https://cloud.githubusercontent.com/assets/1631752/19217958/ef245892-8dea-11e6-80f4-aeb5d1862b1c.png"
+            }, {
+              "when": {
+                "blue": 0,
+                "black": 1,
+                "red": 0,
+                "green": 0
+              },
+              "image": "https://cloud.githubusercontent.com/assets/1631752/19217957/ef20120a-8dea-11e6-825c-23e7773269b0.png"
+            }, {
+              "when": {
+                "blue": 0,
+                "black": 0,
+                "red": 1,
+                "green": 0,
+                "head": true
+              },
+              "image": "https://user-images.githubusercontent.com/1631752/33194059-c9794fb0-d0d5-11e7-81dc-65a0f7472a94.png"
+            }, {
+              "when": {
+                "blue": 0,
+                "black": 0,
+                "red": 1,
+                "green": 0
+              },
+              "image": "https://cloud.githubusercontent.com/assets/1631752/19217960/ef2ad3c0-8dea-11e6-8434-ff9152b76f3b.png"
+            }
+          ],
+          "borders": {
+            "bottom": "https://user-images.githubusercontent.com/1631752/37176618-94629ef6-2325-11e8-9e11-6cf6846bbbc3.png",
+            "bottomLeft": "https://user-images.githubusercontent.com/1631752/37176647-9cb96b98-2325-11e8-9244-17e65f8236bc.png",
+            "bottomRight": "https://user-images.githubusercontent.com/1631752/37176659-a85c71b6-2325-11e8-8698-952cfbdf73f5.png",
+            "left": "https://user-images.githubusercontent.com/1631752/37176682-c09ae398-2325-11e8-90d6-d1793b8c20fd.png",
+            "right": "https://user-images.githubusercontent.com/1631752/37176696-c8628ea0-2325-11e8-9fb0-39805f2b810d.png",
+            "top": "https://user-images.githubusercontent.com/1631752/37176705-d5459ee6-2325-11e8-8100-23a4b89a064c.png",
+            "topLeft": "https://user-images.githubusercontent.com/1631752/37176714-dec70f54-2325-11e8-9589-4b3feaa21a2f.png",
+            "topRight": "https://user-images.githubusercontent.com/1631752/37176725-e747cbe6-2325-11e8-8c3b-873501ce0a18.png"
+          }
+        };
+        this.attire2 = {
+          "enabled": false,
+          "rules": [
+            {
+              "when": {
+                "blue": 3,
+                "black": 0,
+                "red": 1,
+                "green": 0
+              },
+              "text": "hey"
+            }, {
+              "when": {
+                "blue": "*",
+                "black": "*",
+                "red": "*",
+                "green": "*"
+              },
+              "image": "https://user-images.githubusercontent.com/677436/39197564-2d4b04e6-47bb-11e8-82f2-814a62dafdf6.png"
+            }
+          ]
+        };
+        setTimeout((function(_this) {
+          return function() {
+            return _this.set("attire2.enabled", true);
+          };
+        })(this), 500);
+        return setInterval((function(_this) {
+          return function() {
+            return _this.set("attire.enabled", !_this.attire.enabled);
+          };
+        })(this), 2000);
+      },
+      listeners: {
+        'jsoneditor.change': '_jsonChange'
+      },
+      _jsonChange: function() {
+        return this.async(this._forceRender, 0);
+      },
+      _forceRender: function() {
+        this.model = null;
+        return this.async(this._setModel, 0);
+      },
+      _setModel: function() {
+        return this.model = model;
+      }
+    });
+
+  </script>
+</dom-module>