esnextbin sketch

## esnextbin.md

      
        

          Raw
        
        
          
            
          
          
            
              esnextbin.md
            
          
        
      
    
  
    made with esnextbin

  

  

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
  <style>
    body{
      background: url(https://camo.githubusercontent.com/23cdd6905e874b869bf03dacc49c119fab21583c/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f323732393338342f323238373135382f62313438666565382d396665392d313165332d383033372d3235356638636231653566342e706e67);
      background-repeat: no-repeat;
      background-position: 60px 60px;
    }
    ul {
      list-style-type: none;
    }
    #value {
      position: relative;
      top: 280px;
      left: -50px;
      font-family:Tahoma;
      font-size:42pt;
      width: 126pt;
      height:1em;
      padding:0;
      margin:0;

      align-items: center;
      justify-content: center;
    }
    button {
      width: 4em;
      height:3.5em;
      border-radius:0.3em;
      border: 1px solid silver;
      padding: 0.3em;
      margin: 0.3em;
      font-variant: small-caps;
      font-weight: bold;
      background-color: rgba(80,80,80,0.4);
    }
    section {
      display: flex;
    }
  </style>
</head>
<body>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
var React = require('react')
const {Component} = React
var ReactDOM = require('react-dom')
var twister = require('mersenne-twister')
var generator = new twister();
const MAX_INT = 4294967295;

function random(skipLast: number, base: number){
  var next = MAX_INT;
  while(next > MAX_INT - skipLast){
    next = generator.random_int();
  }
  return 1 + next % base;
}

function Buttons (props){
  return (
    <section {...props}>
      <ul>
        <li><button>d20</button></li>
        <li><button>d6</button></li>
        <li><button>d8</button></li>
        <li><button>d4</button></li>
      </ul>
      <ul>
        <li><button>d10</button></li>
        <li><button>d12</button></li>
      </ul>
      <ul>
        <li><button>d100</button></li>
      </ul>
    </section>
  );
}
function Result (props){
  const {value, ...rest} = props;
  return <section id="value" {...rest}>{value}</section>
}

class UI extends Component{
  constructor(){
    super()
    this.state = {
      value: 100,
      color: 'black'
    }
  }
  _getNext(e){
    const text = e.target.innerText
    let skipLast = 0;
    let mod = text.replace('d', '') - 0;

    switch(mod){
      case 20:
        skipLast = 15;
      break
      case 6:
        skipLast = 3;
      break
      case 8:
        skipLast = 7
      break
      case 4:
        skipLast = 3;
      break
      case 10:
        skipLast = 5;
      break
      case 12:
        skipLast = 3;
      break
      case 100:
        skipLast = 95;
      break
    }

    const value = random(skipLast, mod)
    let color = 'black'
    if (mod === 20 && value > 18){
      // critical
      color = 'green'
    }
    // fumble!
    if (value === 1) color = 'red'

    this.setState({
      value,
      color
    })
  }
  render(){
    const {value, color} = this.state;

    return (
      <section>
        <Buttons onClick={this._getNext.bind(this)} />
        <Result value={value} style={
          {
            color
          }
        }/>
      </section>
    );
  }
}

var section = document.createElement('section')
document.body.appendChild(section)
ReactDOM.render(<UI />, section)

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "mersenne-twister": "1.0.1",
    "babel-runtime": "6.6.1"
  }
}

## transpiled.js
'use strict';

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
var React = require('react');
var Component = React.Component;

var ReactDOM = require('react-dom');
var twister = require('mersenne-twister');
var generator = new twister();
var MAX_INT = 4294967295;

function random(skipLast, base) {
  var next = MAX_INT;
  while (next > MAX_INT - skipLast) {
    next = generator.random_int();
  }
  return 1 + next % base;
}

function Buttons(props) {
  return React.createElement(
    'section',
    props,
    React.createElement(
      'ul',
      null,
      React.createElement(
        'li',
        null,
        React.createElement(
          'button',
          null,
          'd20'
        )
      ),
      React.createElement(
        'li',
        null,
        React.createElement(
          'button',
          null,
          'd6'
        )
      ),
      React.createElement(
        'li',
        null,
        React.createElement(
          'button',
          null,
          'd8'
        )
      ),
      React.createElement(
        'li',
        null,
        React.createElement(
          'button',
          null,
          'd4'
        )
      )
    ),
    React.createElement(
      'ul',
      null,
      React.createElement(
        'li',
        null,
        React.createElement(
          'button',
          null,
          'd10'
        )
      ),
      React.createElement(
        'li',
        null,
        React.createElement(
          'button',
          null,
          'd12'
        )
      )
    ),
    React.createElement(
      'ul',
      null,
      React.createElement(
        'li',
        null,
        React.createElement(
          'button',
          null,
          'd100'
        )
      )
    )
  );
}
function Result(props) {
  var value = props.value;
  var rest = (0, _objectWithoutProperties3.default)(props, ['value']);

  return React.createElement(
    'section',
    (0, _extends3.default)({ id: 'value' }, rest),
    value
  );
}

var UI = (function (_Component) {
  (0, _inherits3.default)(UI, _Component);

  function UI() {
    (0, _classCallCheck3.default)(this, UI);

    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(UI).call(this));

    _this.state = {
      value: 100,
      color: 'black'
    };
    return _this;
  }

  (0, _createClass3.default)(UI, [{
    key: '_getNext',
    value: function _getNext(e) {
      var text = e.target.innerText;
      var skipLast = 0;
      var mod = text.replace('d', '') - 0;

      switch (mod) {
        case 20:
          skipLast = 15;
          break;
        case 6:
          skipLast = 3;
          break;
        case 8:
          skipLast = 7;
          break;
        case 4:
          skipLast = 3;
          break;
        case 10:
          skipLast = 5;
          break;
        case 12:
          skipLast = 3;
          break;
        case 100:
          skipLast = 95;
          break;
      }

      var value = random(skipLast, mod);
      var color = 'black';
      if (mod === 20 && value > 18) {
        // critical
        color = 'green';
      }
      // fumble!
      if (value === 1) color = 'red';

      this.setState({
        value: value,
        color: color
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state;
      var value = _state.value;
      var color = _state.color;

      return React.createElement(
        'section',
        null,
        React.createElement(Buttons, { onClick: this._getNext.bind(this) }),
        React.createElement(Result, { value: value, style: {
            color: color
          } })
      );
    }
  }]);
  return UI;
})(Component);

var section = document.createElement('section');
document.body.appendChild(section);
ReactDOM.render(React.createElement(UI, null), section);