|
'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); |