dnd-dice-result.html

<!--
Copyright 2014 Roger Tawa

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../dnd-dice/dnd-dice-helper.html">

<!--
`<dnd-dice-result>` shows the result of D&D dice rolls.  The user can type
dice specifications such as `3d6` or `2d4-1` and the element will calculate
a random value and display it.

The element consists of two UI elements arranged vertically:

1. A `<paper-input>` element to type dice specification.
2. A `<paper-button>` to show the last random value rolled.
  The button can be pressed to re-roll the dice.

The input element can be hidden with the `hideInput` property.

The `spec` property sets the initial dice specification and can also be
changed programmatically.  If `spec` changes, the dice are re-rolled
and the value displayed in the button.  To force a re-roll even if the
specification does not change, use the `setSpec(spec)` method instead.

`<dnd-dice-result>` provides a `roll()` method to programmatic
re-roll the dice specification.  `inc()` and `dec()` methods increment or
decrement the dice specification modifier.

Examples:

    <dnd-dice-result></dnd-dice-result>
    <dnd-dice-result spec="3d6"></dnd-dice-result>
    <dnd-dice-result hide-input></dnd-dice-result>

### Styling

`<dnd-dice-result>` elements can be resized using width and height styles.  If
the size becomes too small, it may also be necessary to adjust the font size
of the button.  The default font size is 500%.

    #my-dnd-dice-result {
      width: 400px;
      height: 300px;
      font-size: 400%;
    }

The paper input and button elements can be styled using standard mechanisms.
For example:

    #my-dnd-dice-result #input {
      /* styles for paper-input */
    }
    #my-dnd-dice-result #button {
      /* styles for paper-button */
    }

@demo
-->
<dom-module id="dnd-dice-result">
  <template>
    <style include="iron-flex iron-flex-alignment">
    :host {
      display: inline-block;
      @apply(--layout-vertical);
    }
    paper-button {
      font-size: 500%;
      margin: 0;
      min-width: 10px;
      padding: 0;
    }
    </style>
    <template is="dom-if" if="[[!hideInput]]">
      <paper-input
          no-label-float
          id="input" pattern="(\d*)d?(\d*)([\+\-]\d+)?"
          label="Enter dice to roll"
          value="{{spec}}" on-change="roll">
      </paper-input>
    </template>
    <paper-button class="flex" id="button" raised noink
        on-tap="roll"></paper-button>
    <dnd-dice-helper id="helper"></dnd-dice-helper>
  </template>
  <script>
    Polymer({
      is: 'dnd-dice-result',

      properties: {
        /** Current dice specification of the element. */
        spec: {type: String, value: '', observer: '_specChanged'},
        /** If true hides the `<paper-input>` element. */
        hideInput: {type: Boolean, value: false}
      },

      _specChanged: function(newValue, oldValue) {
        this.roll();
      },

      /** Rolls the current dice specification and shows the result. */
      roll: function() {
        if (this.spec) {
          this.$.button.innerText =
              this.$.helper.roll(this.$.helper.parseSpec(this.spec)).toString();
        } else {
          this.$.button.innerText = '\u00a0';  // #nbsp;
        }
      },

      /**
       * Sets the current dice specification.
       *
       * @param {string} spec Dice specification of the form NdD+MuS.
       */
      setSpec: function(spec) {
        // Only force a roll if the spec will not change, otherwise the
        // dice will be rolled twice.
        if (spec == this.spec) {
          this.roll();
        } else {
          // Remove any &nbsp; and trim out whitespace.
          this.spec = spec.replace('\u00a0', ' ').trim();
        }
      },

      /**
       * Gets the current dice specification.
       *
       * @return {string} Dice specification of the form "NdD+MuS".
       */
      getValidSpec: function() {
        var parsed = this.$.helper.parseSpec(this.spec);
        return parsed ? this.spec : undefined;
      },

      /** Increments the dice modifier by one and rolls the new dice. */
      inc: function() {
        this._mod(1);
      },

      /** Decrements the dice modifier by one and rolls the new dice. */
      dec: function() {
        this._mod(-1);
      },

      _mod: function(mod) {
        var parsed = this.$.helper.parseSpec(this.spec);
        if (parsed) {
          parsed[2] += mod;
          this.spec = this.$.helper.unparseSpec(parsed);
          this.$.button.innerText = this.$.helper.roll(parsed);
        }
      },

      attached: function() {
        // This hack centers the text vertically.  It's important for the
        // top/bottom margin/padding of |#button| to be zero.
        var style = getComputedStyle(this.$.button);
        this.$.button.style.lineHeight = style.height;
      }
    });
  </script>
</dom-module>