@r3l/app
Version:
340 lines (285 loc) • 14.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BigThumb = BigThumb;
exports.Arrows = Arrows;
exports.ArrowTimer = exports.Coin = exports.Arrow = exports.Thumb = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _web = require("../../styled/web");
var _styles = require("../../../styles");
var _styled = require("../../styled");
var _utils = require("../../../utils");
var _styled2 = _interopRequireDefault(require("@emotion/styled"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var isWeb = process.env.BROWSER;
var ThumbImage = (0, _styled2.default)(_web.Image)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n"])), function () {
return (0, _styles.size)([8, 6]);
});
var Thumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
return /*#__PURE__*/_react.default.createElement(_web.View, (0, _extends2.default)({
sx: {
position: 'absolute',
top: 0,
left: '100%'
},
ref: ref
}, props), /*#__PURE__*/_react.default.createElement(ThumbImage, {
src: '/img/thumb-bg.svg'
}), /*#__PURE__*/_react.default.createElement(_styled.Text, {
sx: {
position: 'absolute',
top: '50%',
left: '45%',
fontSize: '14px',
fontWeight: 'bold'
}
}, '+1'));
});
/* Arrow image (big/small/up/down) */
exports.Thumb = Thumb;
var ArrowContainer = (0, _styled2.default)(_web.View)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0;\n left: 100%;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n"])));
var ArrowImage = (0, _styled2.default)(_web.Image)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 50%;\n"])));
var Arrow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
return /*#__PURE__*/_react.default.createElement(ArrowContainer, (0, _extends2.default)({
ref: ref,
bounce: true,
w: props.big ? (0, _styles.sizing)(9) : (0, _styles.sizing)(3),
h: props.big ? (0, _styles.sizing)(9) : (0, _styles.sizing)(3)
}, props, {
bg: props.up ? _styles.colors.green : _styles.colors.red
}), /*#__PURE__*/_react.default.createElement(ArrowImage, {
src: props.up ? '/img/countUp-big-arrow-up.svg' : '/img/countUp-big-arrow-down.svg'
}));
});
exports.Arrow = Arrow;
Arrow.propTypes = {
big: _propTypes.default.bool,
up: _propTypes.default.bool
};
/* Big thumb with score (like box) */
var BigThumbContainer = (0, _styled2.default)(_web.View)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin-left: ", ";\n margin-right: ", ";\n padding-bottom: ", ";\n color: ", ";\n"])), function () {
return (0, _styles.size)([4, 2]);
}, function () {
return (0, _styles.size)([4, 2]);
}, (0, _styles.sizing)(2), _styles.colors.black);
var BigThumbImage = (0, _styled2.default)(_web.View)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50% 50%;\n background-image: url(/img/thumb.svg);\n align-items: center;\n justify-content: center;\n"])), function () {
return (0, _styles.size)([8, 6]);
}, function () {
return (0, _styles.size)([8, 6]);
});
function BigThumb(_ref) {
var score = _ref.score;
return /*#__PURE__*/_react.default.createElement(BigThumbContainer, null, /*#__PURE__*/_react.default.createElement(BigThumbImage, {
src: '/img/thumb.svg'
}, /*#__PURE__*/_react.default.createElement(_styled.NumericalValue, {
sx: {
mt: 18.001,
ml: 1.51 * 8,
fontSize: [2, 17]
}
}, score)));
}
BigThumb.propTypes = {
score: _propTypes.default.number
};
/* Arrows with score (Relevant box) */
var ArrowsContainer = (0, _styled2.default)(_web.View)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: ", ";\n margin-right: ", ";\n"])), function () {
return (0, _styles.size)([2, 1]);
}, function () {
return (0, _styles.size)([2, 1]);
});
var ArrowsImage = (0, _styled2.default)(_web.Image)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n transition: ", ";\n transform: ", ";\n"])), function () {
return (0, _styles.size)([12, 7]);
}, function () {
return (0, _styles.size)([7, 5]);
}, function (p) {
return p.bounce ? 'transform .2 ease-out' : 'transform .7s ease-out';
}, function (p) {
return p.bounce ? 'scale(1.2)' : 'scale(1)';
});
var ArrowsContents = (0, _styled2.default)(_web.View)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n justify-content: center;\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n margin: ", " 0;\n"])), function () {
return (0, _styles.size)([5, 3.5]);
}, (0, _styles.sizing)(5), (0, _styles.sizing)(5), (0, _styles.sizing)(1.5));
function Arrows(_ref2) {
var score = _ref2.score;
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
_score = _useState2[0],
setSize = _useState2[1];
var animate = _score !== score && score !== 0;
if (animate && isWeb) requestAnimationFrame(function () {
return setSize(score);
});
return /*#__PURE__*/_react.default.createElement(ArrowsContainer, null, /*#__PURE__*/_react.default.createElement(ArrowsImage, {
bounce: animate && _score < score,
src: '/img/countUp-big-arrow-up.svg'
}), /*#__PURE__*/_react.default.createElement(ArrowsContents, {
bounce: animate
}, score), /*#__PURE__*/_react.default.createElement(ArrowsImage, {
bounce: animate && _score > score,
src: '/img/countUp-big-arrow-down.svg'
}));
}
Arrows.propTypes = {
score: _propTypes.default.number
};
/* Coin image (flying into betting box) */
var CoinContainer = (0, _styled2.default)(_web.View)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0;\n right: -100px;\n width: 100px;\n height: 100px;\n justify-content: center;\n align-items: center;\n background: ", ";\n color: black;\n border-radius: 50%;\n text-transform: uppercase;\n font-size: ", ";\n"])), _styles.colors.gold, function () {
return (0, _styles.size)([5, 3.5]);
});
var Coin = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
return /*#__PURE__*/_react.default.createElement(CoinContainer, (0, _extends2.default)({
ref: ref
}, props), "BET");
});
/* Arrows with pie chart timer */
exports.Coin = Coin;
var TimerWidth = 45;
var LineWidth = 3.5;
var TimerCanvas = _styled2.default.canvas(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n width: ", "px;\n height: ", "px};\n margin-top: ", ";\n margin-bottom: ", ";\n"])), TimerWidth, TimerWidth, (0, _styles.sizing)(1), (0, _styles.sizing)(1));
var ArrowTimer = /*#__PURE__*/function (_PureComponent) {
(0, _inherits2.default)(ArrowTimer, _PureComponent);
var _super = _createSuper(ArrowTimer);
function ArrowTimer() {
(0, _classCallCheck2.default)(this, ArrowTimer);
return _super.apply(this, arguments);
}
(0, _createClass2.default)(ArrowTimer, [{
key: "componentDidMount",
value: function componentDidMount() {
this.resize();
this.reset();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(oldProps) {
if (this.props.score !== oldProps.score) {
this.animate();
}
if (!this.props.showRank && oldProps.showRank) {
this.resize();
}
}
}, {
key: "resize",
value: function resize() {
var _window = window,
devicePixelRatio = _window.devicePixelRatio;
var w = TimerWidth * devicePixelRatio;
var h = TimerWidth * devicePixelRatio;
this.canvas.width = w;
this.canvas.height = h;
this.canvas.style.width = TimerWidth + 'px';
this.canvas.style.height = TimerWidth + 'px';
}
}, {
key: "reset",
value: function reset(ctx) {
ctx = ctx || this.canvas.getContext('2d');
var w = this.canvas.width;
var h = this.canvas.height;
var lineWidth = LineWidth * devicePixelRatio;
ctx.strokeStyle = '#000';
ctx.lineWidth = lineWidth;
ctx.lineJoin = 'round';
ctx.clearRect(0, 0, w, h);
ctx.beginPath();
ctx.arc(w / 2, h / 2, w / 2 - lineWidth, 0, 2.0 * Math.PI);
ctx.stroke();
}
}, {
key: "animate",
value: function animate() {
var _this = this;
if (!this.canvas) return;
var _this$props = this.props,
delay = _this$props.delay,
duration = _this$props.duration,
score = _this$props.score,
onTimerFinished = _this$props.onTimerFinished;
var ctx = this.canvas.getContext('2d');
var w = this.canvas.width;
var h = this.canvas.height;
var lineWidth = LineWidth * devicePixelRatio;
ctx.fillStyle = '#fff';
ctx.strokeStyle = '#000';
ctx.lineWidth = lineWidth;
ctx.lineJoin = 'round';
_utils.tween.remove(this.t);
this.t = _utils.tween.add({
from: {
angle: 1.5 * Math.PI
},
to: {
angle: 3.5 * Math.PI
},
delay: delay,
duration: duration,
// easing: tween.easing.circIn,
update: function update(_ref3) {
var angle = _ref3.angle;
ctx.clearRect(0, 0, w, h);
ctx.beginPath();
ctx.moveTo(w / 2, h / 2);
ctx.lineTo(w / 2, lineWidth);
ctx.arc(w / 2, h / 2, w / 2 - lineWidth, 1.5 * Math.PI, angle); // ctx.lineTo(w / 2, h / 2);
ctx.closePath();
ctx.stroke();
},
finished: function finished() {
_this.reset(ctx);
if (onTimerFinished) onTimerFinished(score);
}
});
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
showRank = _this$props2.showRank,
postRank = _this$props2.postRank; // to test, add to the TimerCanvas: onClick={() => this.animate()}
return /*#__PURE__*/_react.default.createElement(ArrowsContainer, null, /*#__PURE__*/_react.default.createElement(ArrowsImage, {
src: '/img/countUp-black-arrow-up.svg'
}), /*#__PURE__*/_react.default.createElement(_web.View, {
sx: {
height: 9,
alignItmes: 'center'
}
}, showRank ? /*#__PURE__*/_react.default.createElement(ArrowsContents, null, postRank) : /*#__PURE__*/_react.default.createElement(TimerCanvas, {
ref: function ref(_ref4) {
return _this2.canvas = _ref4;
}
})), /*#__PURE__*/_react.default.createElement(ArrowsImage, {
src: '/img/countUp-black-arrow-down.svg'
}));
}
}]);
return ArrowTimer;
}(_react.PureComponent);
exports.ArrowTimer = ArrowTimer;
ArrowTimer.propTypes = {
showRank: _propTypes.default.bool,
postRank: _propTypes.default.number,
score: _propTypes.default.number,
delay: _propTypes.default.number,
duration: _propTypes.default.number,
onTimerFinished: _propTypes.default.func
};
//# sourceMappingURL=countUp.images.js.map