kentaromiura/esnextbin.md

## 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);
	<!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>
	// 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)
	{
	"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"
	}
	}
	'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);