Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
esnextbin sketch
<!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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.