Skip to content

Instantly share code, notes, and snippets.

@theadam

theadam/esnextbin.md

Last active October 14, 2016 21:07
Show Gist options
  • Save theadam/7e0cf9ac2d7b76d2876599c0e6ec2653 to your computer and use it in GitHub Desktop.
Save theadam/7e0cf9ac2d7b76d2876599c0e6ec2653 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>
<style>
body {
background-color: black;
}
.grid {
margin: 40px;
}
.cell {
display: inline-block;
width: 40px;
height: 40px;
background-color: black;
color: white;
position: relative;
}
.ball {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
border-radius: 1000px;
margin: auto;
}
.row {
display: block;
height: 40px;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
Raw
index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { range as r } from 'lodash'
const xs = r(5, -6);
const ys = r(5, -6);
class Grid extends Component {
state ={
time: 0,
}
componentWillMount() {
this.schedule();
}
schedule() {
this.id = requestAnimationFrame(s => {
if (s - this.state.time > 400) return this.schedule();
this.setState({ time: s });
this.schedule();
});
}
componentWillUnmount() {
clearAnimationFrame(this.id)
}
render() {
const { time } = this.state;
return (
<div className="grid">
{ys.map(y => <Row key={y} y={y} time={-time/400} />)}
</div>
);
}
}
class Row extends Component {
render() {
const { y, time } = this.props;
return (
<div className="row">
{xs.map(x => <Cell key={x} x={x} y={y} time={time} />)}
</div>
);
}
}
const distance = (x, y) => Math.sqrt(x * x + y * y)
class Cell extends Component {
render() {
const { x, y, time } = this.props;
const size = ((Math.sin(distance(x, y)/1.3 + time) / 2) + .5) * 50 + 20 + '%';
return (
<div className="cell">
<div className="ball" style={{ height: size, width: size }} />
</div>
);
}
}
render(<Grid />, document.getElementById('app'));
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.3.2",
"react-dom": "15.3.2",
"lodash": "4.16.4",
"babel-runtime": "6.11.6"
}
}
Raw
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _lodash = require('lodash');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var xs = (0, _lodash.range)(5, -6);
var ys = (0, _lodash.range)(5, -6);
var Grid = function (_Component) {
(0, _inherits3.default)(Grid, _Component);
function Grid() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, Grid);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(Grid)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
time: 0
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(Grid, [{
key: 'componentWillMount',
value: function componentWillMount() {
this.schedule();
}
}, {
key: 'schedule',
value: function schedule() {
var _this2 = this;
this.id = requestAnimationFrame(function (s) {
if (s - _this2.state.time > 400) return _this2.schedule();
_this2.setState({ time: s });
_this2.schedule();
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
clearAnimationFrame(this.id);
}
}, {
key: 'render',
value: function render() {
var time = this.state.time;
return _react2.default.createElement(
'div',
{ className: 'grid' },
ys.map(function (y) {
return _react2.default.createElement(Row, { key: y, y: y, time: -time / 400 });
})
);
}
}]);
return Grid;
}(_react.Component);
var Row = function (_Component2) {
(0, _inherits3.default)(Row, _Component2);
function Row() {
(0, _classCallCheck3.default)(this, Row);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Row).apply(this, arguments));
}
(0, _createClass3.default)(Row, [{
key: 'render',
value: function render() {
var _props = this.props;
var y = _props.y;
var time = _props.time;
return _react2.default.createElement(
'div',
{ className: 'row' },
xs.map(function (x) {
return _react2.default.createElement(Cell, { key: x, x: x, y: y, time: time });
})
);
}
}]);
return Row;
}(_react.Component);
var distance = function distance(x, y) {
return Math.sqrt(x * x + y * y);
};
var Cell = function (_Component3) {
(0, _inherits3.default)(Cell, _Component3);
function Cell() {
(0, _classCallCheck3.default)(this, Cell);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Cell).apply(this, arguments));
}
(0, _createClass3.default)(Cell, [{
key: 'render',
value: function render() {
var _props2 = this.props;
var x = _props2.x;
var y = _props2.y;
var time = _props2.time;
var size = (Math.sin(distance(x, y) / 1.3 + time) / 2 + .5) * 50 + 20 + '%';
return _react2.default.createElement(
'div',
{ className: 'cell' },
_react2.default.createElement('div', { className: 'ball', style: { height: size, width: size } })
);
}
}]);
return Cell;
}(_react.Component);
(0, _reactDom.render)(_react2.default.createElement(Grid, null), document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment