Skip to content

Instantly share code, notes, and snippets.

@kentaromiura

kentaromiura/esnextbin.md

Created March 24, 2016 01:07
Show Gist options
  • Save kentaromiura/2714904fa20af3a7baa8 to your computer and use it in GitHub Desktop.
Save kentaromiura/2714904fa20af3a7baa8 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
<style>
body{
}
ul {
list-style-type: none;
}
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>
Raw
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 Result (props){
const {values, ...rest} = props;
return <section id="value" {...rest}>{values.map((obj, i) => {
const colorValue = (255 / 62 * obj.position).toFixed(0);
return <div style={{
color:`rgb(${colorValue}, ${colorValue}, ${colorValue})`
}}>{'[' + obj.value + ']'}</div>
})}</section>
}
class UI extends Component{
constructor(){
super()
this.state = {
values: Array.from(Array(52)).map((x, i) => {
return {value: i+1, position: i};
})
}
}
_getNextShuffle(){
const decksize = this.state.values.length;
const skipLast = MAX_INT % decksize;
this.setState({
values: this.state.values.map(x => {
x.random = random(skipLast, decksize);
return x
}).sort((a, b) => {
return a.random > b.random ? 1: -1
}).map(x => {
delete x.random;
return x
})
})
}
render(){
const {values} = this.state;
return (
<section>
<button onClick={this._getNextShuffle.bind(this)}>Next Shuffle</button>
<Result values={values} />
</section>
);
}
}
var section = document.createElement('section')
document.body.appendChild(section)
ReactDOM.render(<UI />, section)
Raw
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"
}
}
Raw
transpiled.js
'use strict';
var _from = require('babel-runtime/core-js/array/from');
var _from2 = _interopRequireDefault(_from);
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 Result(props) {
var values = props.values;
var rest = (0, _objectWithoutProperties3.default)(props, ['values']);
return React.createElement(
'section',
(0, _extends3.default)({ id: 'value' }, rest),
values.map(function (obj, i) {
var colorValue = (255 / 62 * obj.position).toFixed(0);
return React.createElement(
'div',
{ style: {
color: 'rgb(' + colorValue + ', ' + colorValue + ', ' + colorValue + ')'
} },
'[' + obj.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 = {
values: (0, _from2.default)(Array(52)).map(function (x, i) {
return { value: i + 1, position: i };
})
};
return _this;
}
(0, _createClass3.default)(UI, [{
key: '_getNextShuffle',
value: function _getNextShuffle() {
var decksize = this.state.values.length;
var skipLast = MAX_INT % decksize;
this.setState({
values: this.state.values.map(function (x) {
x.random = random(skipLast, decksize);
return x;
}).sort(function (a, b) {
return a.random > b.random ? 1 : -1;
}).map(function (x) {
delete x.random;
return x;
})
});
}
}, {
key: 'render',
value: function render() {
var values = this.state.values;
return React.createElement(
'section',
null,
React.createElement(
'button',
{ onClick: this._getNextShuffle.bind(this) },
'Next Shuffle'
),
React.createElement(Result, { values: values })
);
}
}]);
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