Added Polymer

rpg-docs/public/bower_components/core-animation/.bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "core-animation",
+  "private": true,
+  "dependencies": {
+    "polymer": "Polymer/polymer#^0.5.0",
+    "web-animations-next": "web-animations/web-animations-next#master"
+  },
+  "version": "0.5.1",
+  "homepage": "https://github.com/Polymer/core-animation",
+  "_release": "0.5.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "0.5.1",
+    "commit": "3f36bd913cbc59676b8fb1dcf7248ad95c4faa47"
+  },
+  "_source": "git://github.com/Polymer/core-animation.git",
+  "_target": "^0.5.0",
+  "_originalSource": "Polymer/core-animation"
+}

rpg-docs/public/bower_components/core-animation/README.md

@@ -0,0 +1,4 @@
+core-animation
+==============
+
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-animation) for more information.

rpg-docs/public/bower_components/core-animation/bower.json

@@ -0,0 +1,9 @@
+{
+  "name": "core-animation",
+  "private": true,
+  "dependencies": {
+    "polymer": "Polymer/polymer#^0.5.0",
+    "web-animations-next": "web-animations/web-animations-next#master"
+  },
+  "version": "0.5.1"
+}

rpg-docs/public/bower_components/core-animation/core-animation-group.html

@@ -0,0 +1,169 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="core-animation.html">
+
+<!--
+@group Polymer Core Elements
+
+`core-animation-group` combines `core-animation` or `core-animation-group` elements to
+create a grouped web animation. The group may be parallel (type is `par`) or sequential
+(type is `seq`). Parallel groups play all the children elements simultaneously, and
+sequential groups play the children one after another.
+
+Example of an animation group to rotate and then fade an element:
+
+    <core-animation-group type="seq">
+      <core-animation id="fadeout" duration="500">
+        <core-animation-keyframe>
+          <core-animation-prop name="transform" value="rotate(0deg)"></core-animation-prop>
+          <core-animation-prop name="transform" value="rotate(45deg)"></core-animation-prop>
+        </core-animation-keyframe>
+      </core-animation>
+      <core-animation id="fadeout" duration="500">
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="1"></core-animation-prop>
+        </core-animation-keyframe>
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="0"></core-animation-prop>
+        </core-animation-keyframe>
+      </core-animation>
+    </core-animation-group>
+
+@element core-animation-group
+@status beta
+@homepage github.io
+-->
+<polymer-element name="core-animation-group" constructor="CoreAnimationGroup" extends="core-animation" attributes="type">
+  <script>
+    (function() {
+
+      var ANIMATION_GROUPS = {
+        'par': AnimationGroup,
+        'seq': AnimationSequence
+      };
+
+      Polymer({
+
+        publish: {
+          /**
+           * If target is set, any children without a target will be assigned the group's
+           * target when this property is set.
+           *
+           * @property target
+           * @type HTMLElement|Node|Array|Array<HTMLElement|Node>
+           */
+
+          /**
+           * For a `core-animation-group`, a duration of "auto" means the duration should
+           * be the specified duration of its children. If set to anything other than
+           * "auto", any children without a set duration will be assigned the group's duration.
+           *
+           * @property duration
+           * @type number
+           * @default "auto"
+           */
+          duration: {value: 'auto', reflect: true},
+
+          /**
+           * The type of the animation group. 'par' creates a parallel group and 'seq' creates
+           * a sequential group.
+           *
+           * @property type
+           * @type String
+           * @default 'par'
+           */
+          type: {value: 'par', reflect: true}
+        },
+
+        typeChanged: function() {
+          this.apply();
+        },
+
+        targetChanged: function() {
+          // Only propagate target to children animations if it's defined.
+          if (this.target) {
+            this.doOnChildren(function(c) {
+              c.target = this.target;
+            }.bind(this));
+          }
+        },
+
+        durationChanged: function() {
+          if (this.duration && this.duration !== 'auto') {
+            this.doOnChildren(function(c) {
+              // Propagate to children that is not a group and has no
+              // duration specified.
+              if (!c.type && (!c.duration || c.duration === 'auto')) {
+                c.duration = this.duration;
+              }
+            }.bind(this));
+          }
+        },
+
+        doOnChildren: function(inFn) {
+          var children = this.children;
+          if (!children.length) {
+            children = this.shadowRoot ? this.shadowRoot.childNodes : [];
+          }
+          Array.prototype.forEach.call(children, function(c) {
+            // TODO <template> in the way
+            c.apply && inFn(c);
+          }, this);
+        },
+
+        makeAnimation: function() {
+          return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
+        },
+
+        hasTarget: function() {
+          var ht = this.target !== null;
+          if (!ht) {
+            this.doOnChildren(function(c) {
+              ht = ht || c.hasTarget();
+            }.bind(this));
+          }
+          return ht;
+        },
+
+        apply: function() {
+          // Propagate target and duration to child animations first.
+          this.durationChanged();
+          this.targetChanged();
+          this.doOnChildren(function(c) {
+            c.apply();
+          });
+          return this.super();
+        },
+
+        get childAnimationElements() {
+          var list = [];
+          this.doOnChildren(function(c) {
+            if (c.makeAnimation) {
+              list.push(c);
+            }
+          });
+          return list;
+        },
+
+        get childAnimations() {
+          var list = [];
+          this.doOnChildren(function(c) {
+            if (c.animation) {
+              list.push(c.animation);
+            }
+          });
+          return list;
+        }
+      });
+
+    })();
+  </script>
+</polymer-element>

rpg-docs/public/bower_components/core-animation/core-animation.html

@@ -0,0 +1,525 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="web-animations.html">
+
+<!--
+@group Polymer Core Elements
+
+`core-animation` is a convenience element to use web animations with Polymer elements. It
+allows you to create a web animation declaratively. You can extend this class to create
+new types of animations and combine them with `core-animation-group`.
+
+Example to create animation to fade out an element over 500ms:
+
+    <core-animation id="fadeout" duration="500">
+      <core-animation-keyframe>
+        <core-animation-prop name="opacity" value="1"></core-animation-prop>
+      </core-animation-keyframe>
+      <core-animation-keyframe>
+        <core-animation-prop name="opacity" value="0"></core-animation-prop>
+      </core-animation-keyframe>
+    </core-animation>
+
+    <div id="el">Fade me out</div>
+
+    <script>
+      var animation = document.getElementById('fadeout');
+      animation.target = document.getElementById('el');
+      animation.play();
+    </script>
+
+Or do the same imperatively:
+
+    var animation = new CoreAnimation();
+    animation.duration = 500;
+    animation.keyframes = [
+      {opacity: 1},
+      {opacity: 0}
+    ];
+    animation.target = document.getElementById('el');
+    animation.play();
+
+You can also provide a javascript function instead of keyframes to the animation. This
+behaves essentially the same as `requestAnimationFrame`:
+
+    var animation = new CoreAnimation();
+    animation.customEffect = function(timeFraction, target, animation) {
+      // do something custom
+    };
+    animation.play();
+
+Elements that are targets to a `core-animation` are given the `core-animation-target` class.
+
+@element core-animation
+@status beta
+@homepage github.io
+-->
+<polymer-element name="core-animation" constructor="CoreAnimation" attributes="target keyframes customEffect composite duration fill easing iterationStart iterationCount delay direction autoplay targetSelector">
+  <script>
+    (function() {
+
+      function toNumber(value, allowInfinity) {
+        return (allowInfinity && value === 'Infinity') ? Number.POSITIVE_INFINITY : Number(value);
+      };
+
+      Polymer({
+       /**
+        * Fired when the animation completes.
+        *
+        * @event core-animation-finish
+        */
+
+       /**
+        *
+        * Fired when the web animation object changes.
+        *
+        * @event core-animation-change
+        */
+
+        publish: {
+
+          /**
+           * One or more nodes to animate.
+           *
+           * @property target
+           * @type HTMLElement|Node|Array<HTMLElement|Node>
+           */
+          target: {value: null, reflect: true},
+
+          /**
+           * Animation keyframes specified as an array of dictionaries of
+           * &lt;css properties&gt;:&lt;array of values&gt; pairs. For example,
+           *
+           * @property keyframes
+           * @type Object
+           */
+          keyframes: {value: null, reflect: true},
+
+          /**
+           * A custom animation function. Either provide this or `keyframes`. The signature
+           * of the callback is `EffectsCallback(timeFraction, target, animation)`
+           *
+           * @property customEffect
+           * @type Function(number, Object, Object)
+           */
+          customEffect: {value: null, reflect: true},
+
+          /**
+           * Controls the composition behavior. If set to "replace", the effect overrides
+           * the underlying value for the target. If set the "add", the effect is added to
+           * the underlying value for the target. If set to "accumulate", the effect is
+           * accumulated to the underlying value for the target.
+           *
+           * In cases such as numbers or lengths, "add" and "accumulate" produce the same
+           * value. In list values, "add" is appending to the list, while "accumulate" is
+           * adding the individual components of the list.
+           *
+           * For example, adding `translateX(10px)` and `translateX(25px)` produces
+           * `translateX(10px) translateX(25px)` and accumulating produces `translateX(35px)`.
+           *
+           * @property composite
+           * @type "replace"|"add"|"accumulate"
+           * @default "replace"
+           */
+          composite: {value: 'replace', reflect: true},
+
+          /**
+           * Animation duration in milliseconds, "Infinity", or "auto". "auto" is
+           * equivalent to 0.
+           *
+           * @property duration
+           * @type number|"Infinity"
+           * @default "auto"
+           */
+          duration: {value: 'auto', reflect: true},
+
+          /**
+           * Controls the effect the animation has on the target when it's not playing.
+           * The possible values are "none", "forwards", "backwards", "both" or "auto".
+           *
+           * "none" means the animation has no effect when it's not playing.
+           *
+           * "forwards" applies the value at the end of the animation after it's finished.
+           *
+           * "backwards" applies the value at the start of the animation to the target
+           * before it starts playing and has no effect when the animation finishes.
+           *
+           * "both" means "forwards" and "backwards". "auto" is equivalent to "none".
+           *
+           * @property fill
+           * @type "none"|"forwards"|"backwards"|"both"|"auto"
+           * @default "auto"
+           */
+          fill: {value: 'auto', reflect: true},
+
+          /**
+           * A transition timing function. The values are equivalent to the CSS
+           * counterparts.
+           *
+           * @property easing
+           * @type string
+           * @default "linear"
+           */
+          easing: {value: 'linear', reflect: true},
+
+          /**
+           * The number of milliseconds to delay before beginning the animation.
+           *
+           * @property delay
+           * @type Number
+           * @default 0
+           */
+          delay: {value: 0, reflect: true},
+
+          /**
+           * The number of milliseconds to wait after the animation finishes. This is
+           * useful, for example, in an animation group to wait for some time before
+           * beginning the next item in the animation group.
+           *
+           * @property endDelay
+           * @type number
+           * @default 0
+           */
+          endDelay: {value: 0, reflect: true},
+
+          /**
+           * The number of iterations this animation should run for.
+           *
+           * @property iterations
+           * @type Number|'Infinity'
+           * @default 1
+           */
+          iterations: {value: 1, reflect: true},
+
+          /**
+           * Number of iterations into the animation in which to begin the effect.
+           * For example, setting this property to 0.5 and `iterations` to 2 will
+           * cause the animation to begin halfway through the first iteration but still
+           * run twice.
+           *
+           * @property iterationStart
+           * @type Number
+           * @default 0
+           */
+          iterationStart: {value: 0, reflect: true},
+
+          /**
+           * (not working in web animations polyfill---do not use)
+           *
+           * Controls the iteration composition behavior. If set to "replace", the effect for
+           * every iteration is independent of each other. If set to "accumulate", the effect
+           * for iterations of the animation will build upon the value in the previous iteration.
+           *
+           * Example:
+           *
+           *    // Moves the target 50px on the x-axis over 5 iterations.
+           *    <core-animation iterations="5" iterationComposite="accumulate">
+           *      <core-animation-keyframe>
+           *        <core-animation-prop name="transform" value="translateX(10px)"></core-animation-prop>
+           *      </core-animation-keyframe>
+           *    </core-animation>
+           *
+           * @property iterationComposite
+           * @type "replace"|"accumulate"
+           * @default false
+           */
+          iterationComposite: {value: 'replace', reflect: true},
+
+          /**
+           * The playback direction of the animation. "normal" plays the animation in the
+           * normal direction. "reverse" plays it in the reverse direction. "alternate"
+           * alternates the playback direction every iteration such that even iterations are
+           * played normally and odd iterations are reversed. "alternate-reverse" plays
+           * even iterations in the reverse direction and odd iterations in the normal
+           * direction.
+           *
+           * @property direction
+           * @type "normal"|"reverse"|"alternate"|"alternate-reverse"
+           * @default "normal"
+           */
+          direction: {value: 'normal', reflect: true},
+
+          /**
+           * A multiplier to the playback rate to the animation.
+           *
+           * @property playbackRate
+           * @type number
+           * @default 1
+           */
+          playbackRate: {value: 1, reflect: true},
+
+          /**
+           * If set to true, play the animation when it is created or a property is updated.
+           *
+           * @property autoplay
+           * @type boolean
+           * @default false
+           */
+          autoplay: {value: false, reflect: true}
+
+        },
+
+        animation: false,
+
+        observe: {
+          target: 'apply',
+          keyframes: 'apply',
+          customEffect: 'apply',
+          composite: 'apply',
+          duration: 'apply',
+          fill: 'apply',
+          easing: 'apply',
+          iterations: 'apply',
+          iterationStart: 'apply',
+          iterationComposite: 'apply',
+          delay: 'apply',
+          endDelay: 'apply',
+          direction: 'apply',
+          playbackRate: 'apply',
+          autoplay: 'apply'
+        },
+
+        ready: function() {
+          this.apply();
+        },
+
+        /**
+         * Plays the animation. If the animation is currently paused, seeks the animation
+         * to the beginning before starting playback.
+         *
+         * @method play
+         * @return AnimationPlayer The animation player.
+         */
+        play: function() {
+          this.apply();
+          if (this.animation && !this.autoplay) {
+            this.player = document.timeline.play(this.animation);
+            this.player.onfinish = this.animationFinishHandler.bind(this);
+            return this.player;
+          }
+        },
+
+        /**
+         * Stops the animation and clears all effects on the target.
+         *
+         * @method cancel
+         */
+        cancel: function() {
+          if (this.player) {
+            this.player.cancel();
+          }
+        },
+
+        /**
+         * Seeks the animation to the end.
+         *
+         * @method finish
+         */
+        finish: function() {
+          if (this.player) {
+            this.player.finish();
+          }
+        },
+
+        /**
+         * Pauses the animation.
+         *
+         * @method pause
+         */
+        pause: function() {
+          if (this.player) {
+            this.player.pause();
+          }
+        },
+
+        /**
+         * @method hasTarget
+         * @return boolean True if `target` is defined.
+         */
+        hasTarget: function() {
+          return this.target !== null;
+        },
+
+        /**
+         * Creates a web animations object based on this object's properties, and
+         * plays it if autoplay is true.
+         *
+         * @method apply
+         * @return Object A web animation.
+         */
+        apply: function() {
+          this.animation = this.makeAnimation();
+          if (this.autoplay && this.animation) {
+            this.play();
+          }
+          return this.animation;
+        },
+
+        makeSingleAnimation: function(target) {
+          // XXX(yvonne): for selecting all the animated elements.
+          target.classList.add('core-animation-target');
+          return new Animation(target, this.animationEffect, this.timingProps);
+        },
+
+        makeAnimation: function() {
+          if (!this.target) {
+            return null;
+          }
+          var animation;
+          if (Array.isArray(this.target)) {
+            var array = [];
+            this.target.forEach(function(t) {
+              array.push(this.makeSingleAnimation(t));
+            }.bind(this));
+            animation = new AnimationGroup(array);
+          } else {
+            animation = this.makeSingleAnimation(this.target);
+          }
+          return animation;
+        },
+
+        animationChanged: function() {
+          // Sending 'this' with the event so you can always get the animation object
+          // that fired the event, due to event retargetting in shadow DOM.
+          this.fire('core-animation-change', this);
+        },
+
+        targetChanged: function(old) {
+          if (old) {
+            old.classList.remove('core-animation-target');
+          }
+        },
+
+        get timingProps() {
+          var props = {};
+          var timing = {
+            delay: {isNumber: true},
+            endDelay: {isNumber: true},
+            fill: {},
+            iterationStart: {isNumber: true},
+            iterations: {isNumber: true, allowInfinity: true},
+            duration: {isNumber: true},
+            playbackRate: {isNumber: true},
+            direction: {},
+            easing: {}
+          };
+          for (t in timing) {
+            if (this[t] !== null) {
+              var name = timing[t].property || t;
+              props[name] = timing[t].isNumber && this[t] !== 'auto' ?
+                  toNumber(this[t], timing[t].allowInfinity) : this[t];
+            }
+          }
+          return props;
+        },
+
+        get animationEffect() {
+          var props = {};
+          var frames = [];
+          var effect;
+          if (this.keyframes) {
+            frames = this.keyframes;
+          } else if (!this.customEffect) {
+            var children = this.querySelectorAll('core-animation-keyframe');
+            if (children.length === 0 && this.shadowRoot) {
+              children = this.shadowRoot.querySelectorAll('core-animation-keyframe');
+            }
+            Array.prototype.forEach.call(children, function(c) {
+              frames.push(c.properties);
+            });
+          }
+          if (this.customEffect) {
+            effect = this.customEffect;
+          } else {
+            // effect = new KeyframeEffect(frames, this.composite);
+            effect = frames;
+          }
+          return effect;
+        },
+
+        animationFinishHandler: function() {
+          this.fire('core-animation-finish');
+        }
+
+      });
+    })();
+  </script>
+</polymer-element>
+
+<!--
+`core-animation-keyframe` represents a keyframe in a `core-animation`. Use them as children of
+`core-animation` elements to create web animations declaratively. If the `offset` property is
+unset, the keyframes will be distributed evenly within the animation duration. Use
+`core-animation-prop` elements as children of this element to specify the CSS properties for
+the animation.
+
+@element core-animation-keyframe
+@status beta
+@homepage github.io
+-->
+<polymer-element name="core-animation-keyframe" attributes="offset">
+  <script>
+    Polymer({
+      publish: {
+        /**
+         * An offset from 0 to 1.
+         *
+         * @property offset
+         * @type Number
+         */
+        offset: {value: null, reflect: true}
+      },
+      get properties() {
+        var props = {};
+        var children = this.querySelectorAll('core-animation-prop');
+        Array.prototype.forEach.call(children, function(c) {
+          props[c.name] = c.value;
+        });
+        if (this.offset !== null) {
+          props.offset = this.offset;
+        }
+        return props;
+      }
+    });
+  </script>
+</polymer-element>
+
+<!--
+`core-animation-prop` represents a CSS property and value pair to use with
+`core-animation-keyframe`.
+
+@element core-animation-prop
+@status beta
+@homepage github.io
+-->
+<polymer-element name="core-animation-prop" attributes="name value">
+  <script>
+    Polymer({
+      publish: {
+        /**
+         * A CSS property name.
+         *
+         * @property name
+         * @type string
+         */
+        name: {value: '', reflect: true},
+
+        /**
+         * The value for the CSS property.
+         *
+         * @property value
+         * @type string|number
+         */
+        value: {value: '', reflect: true}
+      }
+    });
+  </script>
+</polymer-element>

rpg-docs/public/bower_components/core-animation/demo.html

@@ -0,0 +1,193 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <title>core-animation</title>
+
+  <script src="../webcomponentsjs/webcomponents.js"></script>
+
+  <link href="../font-roboto/roboto.html" rel="import">
+  <link href="../core-icon/core-icon.html" rel="import">
+  <link href="../core-icons/core-icons.html" rel="import">
+
+  <link href="core-animation.html" rel="import">
+  <link href="core-animation-group.html" rel="import">
+
+  <style shim-shadowdom>
+
+    body {
+      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+      font-size: 14px;
+      margin: 0;
+      padding: 24px;
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+      -webkit-touch-callout: none;
+    }
+
+    section {
+      padding: 20px 0;
+    }
+
+    section > div {
+      padding: 14px;
+      font-size: 16px;
+    }
+
+    html /deep/ core-icon {
+      height: 48px;
+      width: 48px;
+    }
+
+    #target {
+      display: inline-block;
+      font-size: 32px;
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+
+  </style>
+
+</head>
+<body unresolved onclick="clickAction(event);">
+
+  <section>
+
+    <div>
+      <div id="target" layout horizontal center>
+        <core-icon icon="polymer"></core-icon>
+        <span>polymer</span>
+      </div>
+    </div>
+
+    <button>
+      opacity
+      <core-animation id="raw" duration="1000">
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="1">
+          </core-animation-prop>
+        </core-animation-keyframe>
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="0.3">
+          </core-animation-prop>
+        </core-animation-keyframe>
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="1">
+          </core-animation-prop>
+        </core-animation-keyframe>
+      </core-animation>
+    </button>
+
+    <button>
+      group: opacity + scale
+      <core-animation-group type="seq">
+        <core-animation duration="300">
+          <core-animation-keyframe>
+            <core-animation-prop name="opacity" value="1">
+            </core-animation-prop>
+          </core-animation-keyframe>
+          <core-animation-keyframe>
+            <core-animation-prop name="opacity" value="0.3">
+            </core-animation-prop>
+          </core-animation-keyframe>
+          <core-animation-keyframe>
+            <core-animation-prop name="opacity" value="1">
+            </core-animation-prop>
+          </core-animation-keyframe>
+        </core-animation>
+        <core-animation duration="300">
+          <core-animation-keyframe>
+            <core-animation-prop name="transform" value="scale(1)">
+            </core-animation-prop>
+          </core-animation-keyframe>
+          <core-animation-keyframe>
+            <core-animation-prop name="transform" value="scale(1.2)">
+            </core-animation-prop>
+          </core-animation-keyframe>
+          <core-animation-keyframe>
+            <core-animation-prop name="transform" value="scale(1)">
+            </core-animation-prop>
+          </core-animation-keyframe>
+        </core-animation>
+      </core-animation-group>
+    </button>
+
+    <button>
+      infinite duration
+      <core-animation duration="1000" iterations="Infinity" direction="alternate">
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="1">
+          </core-animation-prop>
+        </core-animation-keyframe>
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="0.3">
+          </core-animation-prop>
+        </core-animation-keyframe>
+      </core-animation>
+    </button>
+
+    <button>
+      custom effect
+      <core-animation id="custom-animation" duration="500"></core-animation>
+    </button>
+
+  </section>
+
+  <script>
+    var player;
+
+    document.body.addEventListener('core-animation-finish', function(e) {
+      console.log('core-animation-finish');
+      if (player) {
+        player.cancel();
+        player = null;
+        target.querySelector('span').textContent = 'polymer';
+      }
+    });
+
+    var customAnimationFn = function(timeFraction, target) {
+      // var colors = [
+      //   '#db4437',
+      //   '#ff9800',
+      //   '#ffeb3b',
+      //   '#0f9d58',
+      //   '#4285f4',
+      //   '#3f51b5',
+      //   '#9c27b0'
+      // ];
+      target.querySelector('span').textContent = timeFraction;
+    };
+
+
+    function clickAction(e) {
+      var t = e.target;
+      if (e.target.localName !== 'button') {
+        return;
+      }
+
+      if (player) {
+        player.cancel();
+      }
+
+      var a = t.querySelector('core-animation,core-animation-group');
+      if (a.id === 'custom-animation') {
+        a.customEffect = customAnimationFn;
+      }
+
+      a.target = document.getElementById('target');
+      player = a.play();
+    }
+  </script>
+</body>
+</html>

rpg-docs/public/bower_components/core-animation/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+<html>
+<head>
+
+  <script src="../webcomponentsjs/webcomponents.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+
+</head>
+<body unresolved>
+
+  <core-component-page sources='["core-animation.html", "core-animation-group.html"]'></core-component-page>
+
+</body>
+</html>

rpg-docs/public/bower_components/core-animation/test/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>core-animation tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      // 'basic.html'
+    ]);
+  </script>
+</body>
+</html>

rpg-docs/public/bower_components/core-animation/web-animations.html

@@ -0,0 +1,10 @@
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../web-animations-next/web-animations.html">