From 0dc226dbce4e068acc2bf450f778839dd0f27735 Mon Sep 17 00:00:00 2001 From: Laura Aubin Date: Tue, 28 May 2024 15:51:00 -0400 Subject: [PATCH] 2.0.0 - Rebuild ES5 --- ES5/Key/Key.js | 287 +++++++++++-------------------------- ES5/Screw/Screw.js | 59 ++------ ES5/Sound/Sound.js | 30 ++-- ES5/Sound/frequencies.js | 3 +- ES5/Xylophone/Xylophone.js | 174 ++++++++-------------- ES5/Xylophone/index.js | 6 +- 6 files changed, 168 insertions(+), 391 deletions(-) diff --git a/ES5/Key/Key.js b/ES5/Key/Key.js index 28d8ec8..b1c108d 100644 --- a/ES5/Key/Key.js +++ b/ES5/Key/Key.js @@ -1,217 +1,102 @@ "use strict"; +function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } Object.defineProperty(exports, "__esModule", { value: true }); -exports["default"] = void 0; - -var React = _interopRequireWildcard(require("react")); - -var _Screw = _interopRequireDefault(require("../Screw")); - -require("./Key.css"); - +exports["default"] = Key; +var _react = _interopRequireWildcard(require("react")); +var _Screw = _interopRequireDefault(require("../Screw/Screw")); +require("./Key.scss"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - -function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } - -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } - -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } - -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } - -function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } - -function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } - -function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } - -function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } - +function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } +function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; } +function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } +function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } +function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); } +function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } +function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } +function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } +function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } +function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } var DEFAULT_HEIGHT = 200; var MODIFIER = 10; - -var Key = -/*#__PURE__*/ -function (_React$Component) { - _inherits(Key, _React$Component); - - function Key(props) { - var _this; - - _classCallCheck(this, Key); - - _this = _possibleConstructorReturn(this, _getPrototypeOf(Key).call(this, props)); - _this.state = { - pressed: false +function Key(_ref) { + var _ref$identifier = _ref.identifier, + identifier = _ref$identifier === void 0 ? 1 : _ref$identifier, + _ref$shape = _ref.shape, + shape = _ref$shape === void 0 ? 'shrinking' : _ref$shape, + numberOfKeys = _ref.numberOfKeys, + colors = _ref.colors, + _ref$height = _ref.height, + height = _ref$height === void 0 ? DEFAULT_HEIGHT : _ref$height, + width = _ref.width; + var _useState = (0, _react.useState)(false), + _useState2 = _slicedToArray(_useState, 2), + isPressed = _useState2[0], + setPressed = _useState2[1]; + var createStyles = function createStyles() { + var padding = 8; + var defaultStyles = { + display: 'flex', + padding: "".concat(padding, "px 0"), + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'space-between', + borderRadius: '8px' }; - return _this; - } - - _createClass(Key, [{ - key: "render", - value: function render() { - var _this$props = this.props, - _this$props$identifie = _this$props.identifier, - identifier = _this$props$identifie === void 0 ? 1 : _this$props$identifie, - colors = _this$props.colors, - shape = _this$props.shape, - height = _this$props.height, - width = _this$props.width; - return React.createElement("div", { - className: "Key-".concat(identifier), - style: (colors || shape || height || width) && this.createStyles(), - onMouseDown: this.pressKey.bind(this), - onMouseUp: this.releaseKey.bind(this), - onMouseLeave: this.leaveKey.bind(this) - }, React.createElement(_Screw["default"], null), React.createElement(_Screw["default"], null)); - } - }, { - key: "createStyles", - value: function createStyles() { - var colors = this.props.colors; - var padding = 8; - var defaultStyles = { - display: 'flex', - padding: "".concat(padding, "px 0"), - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'space-between', - borderRadius: '8px' - }; - var extraHeight = padding * 2; - - var style = _objectSpread({ - backgroundColor: colors && this.setColor(), - boxShadow: "3px 3px ".concat(colors && this.determineElementToUse('background')), - height: "".concat(this.setHeight() - extraHeight, "px"), - width: "".concat(this.setWidth()) - }, defaultStyles); - - return style; - } - }, { - key: "setColor", - value: function setColor() { - var pressed = this.state.pressed; - return pressed ? this.determineElementToUse('colorPressed') : this.determineElementToUse('color'); - } - }, { - key: "setHeight", - value: function setHeight() { - var _this$props2 = this.props, - shape = _this$props2.shape, - _this$props2$height = _this$props2.height, - height = _this$props2$height === void 0 ? DEFAULT_HEIGHT : _this$props2$height; - return shape == 'flat' ? height : this.calculateHeightBasedOnVaryingShape(); - } - }, { - key: "setWidth", - value: function setWidth() { - var width = this.props.width; - return width ? "".concat(width, "px") : '100%'; - } - }, { - key: "calculateHeightBasedOnVaryingShape", - value: function calculateHeightBasedOnVaryingShape() { - var _this$props$shape = this.props.shape, - shape = _this$props$shape === void 0 ? 'shrinking' : _this$props$shape; - - if (shape == 'shrinking') { - return this.calculateShrinkingHeight(); - } - - if (shape == 'growing') { - return this.calculateGrowingHeight(); - } - } - }, { - key: "calculateGrowingHeight", - value: function calculateGrowingHeight() { - var _this$props3 = this.props, - _this$props3$height = _this$props3.height, - height = _this$props3$height === void 0 ? DEFAULT_HEIGHT : _this$props3$height, - identifier = _this$props3.identifier; - var adjustingHeight = MODIFIER * (identifier - 1); - return height + adjustingHeight; - } - }, { - key: "calculateShrinkingHeight", - value: function calculateShrinkingHeight() { - var _this$props4 = this.props, - _this$props4$height = _this$props4.height, - height = _this$props4$height === void 0 ? DEFAULT_HEIGHT : _this$props4$height, - identifier = _this$props4.identifier, - numberOfKeys = _this$props4.numberOfKeys; + var extraHeight = padding * 2; + var setWidth = width ? "".concat(width, "px") : '100%'; + var setHeight = "".concat((shape == 'flat' ? height : calculateHeightBasedOnVaryingShape()) - extraHeight, "px"); + return _objectSpread({ + backgroundColor: colors && isPressed ? determineElementToUse('colorPressed') : determineElementToUse('color'), + boxShadow: "3px 3px ".concat(colors && determineElementToUse('background')), + height: setHeight, + width: setWidth + }, defaultStyles); + }; + var calculateHeightBasedOnVaryingShape = function calculateHeightBasedOnVaryingShape() { + if (shape == 'shrinking') { var largestKey = height + MODIFIER * numberOfKeys; var adjustingHeight = MODIFIER * identifier; return largestKey - adjustingHeight; } - }, { - key: "determineElementToUse", - value: function determineElementToUse(property) { - var colors = this.props.colors; - var propertyExistsOnElement = this.currentIdentifierElement() && this.currentIdentifierElement().hasOwnProperty(property); - - if (propertyExistsOnElement) { - return this.currentIdentifierElement()[property]; - } - - return this.mostRecentProperty(colors.length - 1, property); - } - }, { - key: "currentIdentifierElement", - value: function currentIdentifierElement() { - var _this$props5 = this.props, - identifier = _this$props5.identifier, - colors = _this$props5.colors; - return colors[identifier - 1]; - } - }, { - key: "mostRecentProperty", - value: function mostRecentProperty(iterator, property) { - var colors = this.props.colors; - - if (colors[iterator].hasOwnProperty(property)) { - return colors[iterator][property]; - } - - return this.mostRecentProperty(iterator - 1, property); - } - }, { - key: "pressKey", - value: function pressKey() { - this.setState({ - pressed: true - }); + if (shape == 'growing') { + var _adjustingHeight = MODIFIER * (identifier - 1); + return height + _adjustingHeight; } - }, { - key: "releaseKey", - value: function releaseKey() { - this.setState({ - pressed: false - }); + }; + var determineElementToUse = function determineElementToUse(property) { + var propertyExistsOnElement = currentIdentifierElement() && currentIdentifierElement().hasOwnProperty(property); + if (propertyExistsOnElement) { + return currentIdentifierElement()[property]; } - }, { - key: "leaveKey", - value: function leaveKey() { - var pressed = this.state.pressed; - pressed && this.setState({ - pressed: false - }); + return mostRecentProperty(colors.length - 1, property); + }; + var currentIdentifierElement = function currentIdentifierElement() { + return colors[identifier - 1]; + }; + var mostRecentProperty = function mostRecentProperty(iterator, property) { + if (colors[iterator].hasOwnProperty(property)) { + return colors[iterator][property]; } - }]); - - return Key; -}(React.Component); - -exports["default"] = Key; \ No newline at end of file + return mostRecentProperty(iterator - 1, property); + }; + var leaveKey = function leaveKey() { + isPressed && setPressed(false); + }; + return /*#__PURE__*/_react["default"].createElement("div", { + className: "Key-".concat(identifier), + style: (colors || shape || height || width) && createStyles(), + onMouseDown: function onMouseDown() { + return setPressed(true); + }, + onMouseUp: function onMouseUp() { + return setPressed(false); + }, + onMouseLeave: leaveKey + }, /*#__PURE__*/_react["default"].createElement(_Screw["default"], null), /*#__PURE__*/_react["default"].createElement(_Screw["default"], null)); +} \ No newline at end of file diff --git a/ES5/Screw/Screw.js b/ES5/Screw/Screw.js index 5c577e7..0c2bcfa 100644 --- a/ES5/Screw/Screw.js +++ b/ES5/Screw/Screw.js @@ -3,53 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports["default"] = void 0; - -var React = _interopRequireWildcard(require("react")); - -require("./Screw.css"); - -function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } - -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } - -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } - -function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } - -function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } - -function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } - -function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } - -var Screw = -/*#__PURE__*/ -function (_React$Component) { - _inherits(Screw, _React$Component); - - function Screw() { - _classCallCheck(this, Screw); - - return _possibleConstructorReturn(this, _getPrototypeOf(Screw).apply(this, arguments)); - } - - _createClass(Screw, [{ - key: "render", - value: function render() { - return React.createElement("div", { - className: "Screw" - }); - } - }]); - - return Screw; -}(React.Component); - -exports["default"] = Screw; \ No newline at end of file +exports["default"] = Screw; +var _react = _interopRequireDefault(require("react")); +require("./Screw.scss"); +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } +function Screw() { + return /*#__PURE__*/_react["default"].createElement("div", { + className: "Screw" + }); +} \ No newline at end of file diff --git a/ES5/Sound/Sound.js b/ES5/Sound/Sound.js index f77839c..c4a9d7d 100644 --- a/ES5/Sound/Sound.js +++ b/ES5/Sound/Sound.js @@ -4,28 +4,23 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = playSound; - var _frequencies = _interopRequireDefault(require("./frequencies")); - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - +function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } - -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } - +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } } +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); } +function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* +Xylophone sounds created using the Web Audio API adapted from +Greg Hovanesyan's creation on Codepen: https://codepen.io/gregh/pen/RKVNgB +*/ var context = new (window.AudioContext || window.webkitAudioContext)(); - -var Sound = -/*#__PURE__*/ -function () { +var Sound = /*#__PURE__*/function () { function Sound(context) { _classCallCheck(this, Sound); - this.context = context; } - _createClass(Sound, [{ key: "setup", value: function setup() { @@ -52,16 +47,15 @@ function () { this.oscillator.stop(this.context.currentTime + 1); } }]); - return Sound; }(); - function playSound(note, octave) { - var sound = new Sound(context); // Example: + var sound = new Sound(context); + + // Example: // ((110 * 2) * 2 * 2) // 2 * 2 * 2 = 2^3 = 8 // Therefore 110 * 8 - var octaveInterval = Math.pow(2, octave); var frequency = _frequencies["default"][note] * octaveInterval; sound.play(frequency); diff --git a/ES5/Sound/frequencies.js b/ES5/Sound/frequencies.js index 0f5e379..0313024 100644 --- a/ES5/Sound/frequencies.js +++ b/ES5/Sound/frequencies.js @@ -13,5 +13,4 @@ var scale = { "A": 220, "B": 247 }; -var _default = scale; -exports["default"] = _default; \ No newline at end of file +var _default = exports["default"] = scale; \ No newline at end of file diff --git a/ES5/Xylophone/Xylophone.js b/ES5/Xylophone/Xylophone.js index af751d1..b0c9e06 100644 --- a/ES5/Xylophone/Xylophone.js +++ b/ES5/Xylophone/Xylophone.js @@ -3,122 +3,66 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports["default"] = void 0; - -var React = _interopRequireWildcard(require("react")); - -var _Key = _interopRequireDefault(require("../Key")); - +exports["default"] = Xylophone; +var _react = _interopRequireDefault(require("react")); +var _Key = _interopRequireDefault(require("../Key/Key")); var _Sound = _interopRequireDefault(require("../Sound/Sound")); - -require("./Xylophone.css"); - +require("./Xylophone.scss"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - -function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } } - -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } - -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } - -function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } - -function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } - -function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } - -function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } - -var Xylophone = -/*#__PURE__*/ -function (_React$Component) { - _inherits(Xylophone, _React$Component); - - function Xylophone(props) { - _classCallCheck(this, Xylophone); - - return _possibleConstructorReturn(this, _getPrototypeOf(Xylophone).call(this, props)); - } - - _createClass(Xylophone, [{ - key: "render", - value: function render() { - return React.createElement("div", { - className: "KeysContainer" - }, this.renderKeys()); - } - }, { - key: "renderKeys", - value: function renderKeys() { - var _this$props = this.props, - _this$props$numberOfK = _this$props.numberOfKeys, - numberOfKeys = _this$props$numberOfK === void 0 ? 8 : _this$props$numberOfK, - colors = _this$props.colors, - shape = _this$props.shape, - height = _this$props.height, - width = _this$props.width; - var growKeys = width ? undefined : { - flexGrow: 1 - }; - var keys = []; - - for (var i = 1; i < numberOfKeys + 1; i++) { - var preventExtraKeys = i >= 13; - - if (!colors && preventExtraKeys) { - break; - } - - keys.push(React.createElement("div", { - className: "Key", - style: growKeys, - onMouseDown: this.pressedKey.bind(this, i), - key: "Key-".concat(i) - }, React.createElement(_Key["default"], { - identifier: i, - colors: colors, - shape: shape, - height: height, - width: width, - numberOfKeys: numberOfKeys - }))); - } - - return keys; +var MAX_KEYS = 13; +function Xylophone(_ref) { + var _ref$keyCount = _ref.keyCount, + keyCount = _ref$keyCount === void 0 ? 8 : _ref$keyCount, + _ref$startingOctave = _ref.startingOctave, + startingOctave = _ref$startingOctave === void 0 ? 2 : _ref$startingOctave, + colors = _ref.colors, + shape = _ref.shape, + height = _ref.height, + width = _ref.width, + pressedKey = _ref.pressedKey; + var handleKeyPress = function handleKeyPress(key) { + var octave = startingOctave > 0 ? startingOctave : 1; + determinePressedNote(key, octave); + pressedKey && pressedKey(key); + }; + + // Assumption: the xylophone always starts at C + var determinePressedNote = function determinePressedNote(key, octave) { + var notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B']; + var numberOfNotes = notes.length; + if (key <= numberOfNotes) { + (0, _Sound["default"])(notes[key - 1], octave); + } else { + determinePressedNote(key - numberOfNotes, octave + 1); } - }, { - key: "pressedKey", - value: function pressedKey(key) { - var _this$props2 = this.props, - pressedKey = _this$props2.pressedKey, - _this$props2$starting = _this$props2.startingOctave, - startingOctave = _this$props2$starting === void 0 ? 2 : _this$props2$starting; - var octave = startingOctave > 0 ? startingOctave : 1; - this.determinePressedNote(key, octave); - pressedKey && pressedKey(key); - } // Assumption: the xylophone always starts at C - - }, { - key: "determinePressedNote", - value: function determinePressedNote(pressedKey, octave) { - var notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B']; - var numberOfNotes = notes.length; - - if (pressedKey <= numberOfNotes) { - (0, _Sound["default"])(notes[pressedKey - 1], octave); - } else { - this.determinePressedNote(pressedKey - numberOfNotes, octave + 1); - } + }; + var keys = []; + var _loop = function _loop(key) { + if (!colors && key >= MAX_KEYS) { + return 1; // break } - }]); - - return Xylophone; -}(React.Component); - -exports["default"] = Xylophone; \ No newline at end of file + keys.push( /*#__PURE__*/_react["default"].createElement("div", { + className: "Key", + style: !width ? { + flexGrow: 1 + } : undefined, + onMouseDown: function onMouseDown() { + return handleKeyPress(key); + }, + key: i + }, /*#__PURE__*/_react["default"].createElement(_Key["default"], { + identifier: key, + colors: colors, + shape: shape, + height: height, + width: width, + numberOfKeys: keyCount + }))); + }; + for (var key = 1; key < keyCount + 1; key++) { + if (_loop(key)) break; + } + return /*#__PURE__*/_react["default"].createElement("div", { + className: "KeysContainer" + }, keys); +} \ No newline at end of file diff --git a/ES5/Xylophone/index.js b/ES5/Xylophone/index.js index cf3cda8..812d42b 100644 --- a/ES5/Xylophone/index.js +++ b/ES5/Xylophone/index.js @@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; - var _Xylophone = _interopRequireDefault(require("./Xylophone")); - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } - -var _default = _Xylophone["default"]; -exports["default"] = _default; \ No newline at end of file +var _default = exports["default"] = _Xylophone["default"]; \ No newline at end of file