diff --git a/public/global.css b/public/global.css index ca4a76d..30bd305 100644 --- a/public/global.css +++ b/public/global.css @@ -34,12 +34,9 @@ label { input, button, select, textarea { font-family: inherit; font-size: inherit; - -webkit-padding: 0.4em 0; padding: 0.4em; margin: 0 0 0.5em 0; box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 2px; } input:disabled { diff --git a/public/static/bundle.js b/public/static/bundle.js index cfe4706..6e62a24 100644 --- a/public/static/bundle.js +++ b/public/static/bundle.js @@ -30,16 +30,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), -/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css": -/*!*******************************************************************************************************************************!*\ - !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css ***! - \*******************************************************************************************************************************/ -/***/ ((module, __webpack_exports__, __webpack_require__) => { - -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".beat-settings {\\n padding: 1em;\\n display: none;\\n text-align: center;\\n width: 40em;\\n justify-content: space-evenly;\\n}\\n\\n.beat-settings.visible {\\n display: inline-flex;\\n}\\n\\n.beat-settings-time-sig-up {\\n display: block;\\n}\\n\\n.beat-settings-time-sig-down {\\n display: block;\\n}\\n\\n.beat-settings-option {\\n display: inline-block;\\n}\\n\\n.beat-settings-option-group {\\n align-self: stretch;\\n}\\n\\n.beat-settings-time-sig input {\\n margin: auto;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css\"],\"names\":[],\"mappings\":\"AAAA;IACI,YAAY;IACZ,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,6BAA6B;AACjC;;AAEA;IACI,oBAAoB;AACxB;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,qBAAqB;AACzB;;AAEA;IACI,mBAAmB;AACvB;;AAEA;IACI,YAAY;AAChB\",\"sourcesContent\":[\".beat-settings {\\n padding: 1em;\\n display: none;\\n text-align: center;\\n width: 40em;\\n justify-content: space-evenly;\\n}\\n\\n.beat-settings.visible {\\n display: inline-flex;\\n}\\n\\n.beat-settings-time-sig-up {\\n display: block;\\n}\\n\\n.beat-settings-time-sig-down {\\n display: block;\\n}\\n\\n.beat-settings-option {\\n display: inline-block;\\n}\\n\\n.beat-settings-option-group {\\n align-self: stretch;\\n}\\n\\n.beat-settings-time-sig input {\\n margin: auto;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); - -/***/ }), - /***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css": /*!***********************************************************************************************************************!*\ !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css ***! @@ -50,23 +40,33 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), -/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css": -/*!************************************************************************************************************************************!*\ - !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css ***! - \************************************************************************************************************************************/ +/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroupSettings/BeatGroupSettings.css": +/*!**************************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroupSettings/BeatGroupSettings.css ***! + \**************************************************************************************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".beat-group-settings {\\n}\\n\\n.beat-group-settings-options {\\n padding: 1em;\\n display: inline-flex;\\n width: 40em;\\n justify-content: space-evenly;\\n}\\n\\n.beat-group-settings-option {\\n display: inline-block;\\n text-align: center;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css\"],\"names\":[],\"mappings\":\"AAAA;AACA;;AAEA;IACI,YAAY;IACZ,oBAAoB;IACpB,WAAW;IACX,6BAA6B;AACjC;;AAEA;IACI,qBAAqB;IACrB,kBAAkB;AACtB\",\"sourcesContent\":[\".beat-group-settings {\\n}\\n\\n.beat-group-settings-options {\\n padding: 1em;\\n display: inline-flex;\\n width: 40em;\\n justify-content: space-evenly;\\n}\\n\\n.beat-group-settings-option {\\n display: inline-block;\\n text-align: center;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".beat-group-settings {\\n}\\n\\n.beat-group-settings-options {\\n padding: 1em;\\n display: inline-flex;\\n width: 40em;\\n justify-content: space-evenly;\\n}\\n\\n.beat-group-settings-option {\\n display: inline-block;\\n text-align: center;\\n}\\n\\n.beat-group-settings-option-group {\\n display: none;\\n}\\n.beat-group-settings-option-group.visible {\\n display: inline-block;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/BeatGroupSettings/BeatGroupSettings.css\"],\"names\":[],\"mappings\":\"AAAA;AACA;;AAEA;IACI,YAAY;IACZ,oBAAoB;IACpB,WAAW;IACX,6BAA6B;AACjC;;AAEA;IACI,qBAAqB;IACrB,kBAAkB;AACtB;;AAEA;IACI,aAAa;AACjB;AACA;IACI,qBAAqB;AACzB\",\"sourcesContent\":[\".beat-group-settings {\\n}\\n\\n.beat-group-settings-options {\\n padding: 1em;\\n display: inline-flex;\\n width: 40em;\\n justify-content: space-evenly;\\n}\\n\\n.beat-group-settings-option {\\n display: inline-block;\\n text-align: center;\\n}\\n\\n.beat-group-settings-option-group {\\n display: none;\\n}\\n.beat-group-settings-option-group.visible {\\n display: inline-block;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroupSettings/BeatGroupSettings.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); /***/ }), -/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css": -/*!******************************************************************************************************************************************!*\ - !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css ***! - \******************************************************************************************************************************************/ +/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css": +/*!********************************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css ***! + \********************************************************************************************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".loop-settings-option-group {\\n margin-top: 1em;\\n}\\n\\n.loop-settings-option > label {\\n width: 5em;\\n text-align: left;\\n}\\n\\n.loop-settings > p {\\n margin: 0;\\n text-align: center;\\n}\\n\\n.loop-settings-option {\\n display: flex;\\n}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css\"],\"names\":[],\"mappings\":\"AAAA;IACI,eAAe;AACnB;;AAEA;IACI,UAAU;IACV,gBAAgB;AACpB;;AAEA;IACI,SAAS;IACT,kBAAkB;AACtB;;AAEA;IACI,aAAa;AACjB\",\"sourcesContent\":[\".loop-settings-option-group {\\n margin-top: 1em;\\n}\\n\\n.loop-settings-option > label {\\n width: 5em;\\n text-align: left;\\n}\\n\\n.loop-settings > p {\\n margin: 0;\\n text-align: center;\\n}\\n\\n.loop-settings-option {\\n display: flex;\\n}\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".loop-settings-option-group {\\n margin-top: 1em;\\n}\\n\\n.loop-settings-option > label {\\n width: 5em;\\n text-align: left;\\n}\\n\\n.loop-settings > p {\\n margin: 0;\\n text-align: center;\\n}\\n\\n.loop-settings-option {\\n display: flex;\\n}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css\"],\"names\":[],\"mappings\":\"AAAA;IACI,eAAe;AACnB;;AAEA;IACI,UAAU;IACV,gBAAgB;AACpB;;AAEA;IACI,SAAS;IACT,kBAAkB;AACtB;;AAEA;IACI,aAAa;AACjB\",\"sourcesContent\":[\".loop-settings-option-group {\\n margin-top: 1em;\\n}\\n\\n.loop-settings-option > label {\\n width: 5em;\\n text-align: left;\\n}\\n\\n.loop-settings > p {\\n margin: 0;\\n text-align: center;\\n}\\n\\n.loop-settings-option {\\n display: flex;\\n}\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); + +/***/ }), + +/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatSettings/BeatSettings.css": +/*!****************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatSettings/BeatSettings.css ***! + \****************************************************************************************************************/ +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".beat-settings {\\n padding: 1em;\\n display: none;\\n text-align: center;\\n width: 40em;\\n justify-content: space-evenly;\\n}\\n\\n.beat-settings.visible {\\n display: inline-flex;\\n}\\n\\n.beat-settings-time-sig-up {\\n display: block;\\n}\\n\\n.beat-settings-time-sig-down {\\n display: block;\\n}\\n\\n.beat-settings-option {\\n display: inline-block;\\n}\\n\\n.beat-settings-option-group {\\n align-self: stretch;\\n}\\n\\n.beat-settings-time-sig input {\\n margin: auto;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/BeatSettings/BeatSettings.css\"],\"names\":[],\"mappings\":\"AAAA;IACI,YAAY;IACZ,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,6BAA6B;AACjC;;AAEA;IACI,oBAAoB;AACxB;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,qBAAqB;AACzB;;AAEA;IACI,mBAAmB;AACvB;;AAEA;IACI,YAAY;AAChB\",\"sourcesContent\":[\".beat-settings {\\n padding: 1em;\\n display: none;\\n text-align: center;\\n width: 40em;\\n justify-content: space-evenly;\\n}\\n\\n.beat-settings.visible {\\n display: inline-flex;\\n}\\n\\n.beat-settings-time-sig-up {\\n display: block;\\n}\\n\\n.beat-settings-time-sig-down {\\n display: block;\\n}\\n\\n.beat-settings-option {\\n display: inline-block;\\n}\\n\\n.beat-settings-option-group {\\n align-self: stretch;\\n}\\n\\n.beat-settings-time-sig input {\\n margin: auto;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatSettings/BeatSettings.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); /***/ }), @@ -76,7 +76,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \************************************************************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".root {\\n margin-left: 10em;\\n margin-right: 10em;\\n}\\n\\n.root .title {\\n text-align: center;\\n}\\n\\n.root input[type=\\\"number\\\"] {\\n width: 5em;\\n}\\n\\n* {\\n user-drag: none;\\n user-select: none;\\n}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/Root/Root.css\"],\"names\":[],\"mappings\":\"AAAA;IACI,iBAAiB;IACjB,kBAAkB;AACtB;;AAEA;IACI,kBAAkB;AACtB;;AAEA;IACI,UAAU;AACd;;AAEA;IACI,eAAe;IACf,iBAAiB;AACrB\",\"sourcesContent\":[\".root {\\n margin-left: 10em;\\n margin-right: 10em;\\n}\\n\\n.root .title {\\n text-align: center;\\n}\\n\\n.root input[type=\\\"number\\\"] {\\n width: 5em;\\n}\\n\\n* {\\n user-drag: none;\\n user-select: none;\\n}\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/Root/Root.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \":root {\\n --color-ui-accent-light: #07afb6;\\n --color-ui-accent-dark: #00888b;\\n --color-ui-neutral-light: #fdfdfe;\\n --color-ui-neutral-dark: #8b8b8b;\\n --color-ui-neutral-dark-hover: #a1a1a1;\\n --color-bg-light: #464646;\\n --color-bg-dark: #282828;\\n --color-p-light: #fafafa;\\n --color-p-dark: #282828;\\n --color-title-light: #fafafa;\\n --color-title-dark: #282828;\\n}\\n\\nbody {\\n background-color: var(--color-bg-dark);\\n color: var(--color-p-light);\\n}\\n\\n.root {\\n background-color: var(--color-bg-light);\\n margin-left: 10em;\\n margin-right: 10em;\\n}\\n\\n.root-title {\\n color: var(--color-title-light);\\n text-align: center;\\n}\\n\\ninput[type=\\\"checkbox\\\"] {\\n position: relative;\\n width: 2em;\\n height: 1em;\\n padding: 0;\\n margin: 0;\\n -webkit-appearance: none;\\n -moz-appearance: none;\\n appearance: none;\\n}\\n\\ninput[type=\\\"checkbox\\\"]::before {\\n width: 2em;\\n height: 1em;\\n border-radius: 1em;\\n background-color: var(--color-ui-accent-dark);\\n display: block;\\n content: \\\"\\\";\\n z-index: 0;\\n position: absolute;\\n transition: background-color 200ms;\\n}\\n\\ninput[type=\\\"checkbox\\\"]:checked::before {\\n background-color: var(--color-ui-accent-light);\\n}\\n\\ninput[type=\\\"checkbox\\\"]::after {\\n position: absolute;\\n width: 1em;\\n height: 1em;\\n border-radius: 1em;\\n border-color: var(--color-ui-neutral-dark);\\n border-width: 1px;\\n background-color: var(--color-ui-neutral-light);\\n display: block;\\n content: \\\"\\\";\\n z-index: 1;\\n right: 1em;\\n transition: right 200ms;\\n}\\n\\ninput[type=\\\"checkbox\\\"]:checked::after {\\n right: 0;\\n}\\n\\n* {\\n user-drag: none;\\n user-select: none;\\n}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/Root/Root.css\"],\"names\":[],\"mappings\":\"AAAA;IACI,gCAAgC;IAChC,+BAA+B;IAC/B,iCAAiC;IACjC,gCAAgC;IAChC,sCAAsC;IACtC,yBAAyB;IACzB,wBAAwB;IACxB,wBAAwB;IACxB,uBAAuB;IACvB,4BAA4B;IAC5B,2BAA2B;AAC/B;;AAEA;IACI,sCAAsC;IACtC,2BAA2B;AAC/B;;AAEA;IACI,uCAAuC;IACvC,iBAAiB;IACjB,kBAAkB;AACtB;;AAEA;IACI,+BAA+B;IAC/B,kBAAkB;AACtB;;AAEA;IACI,kBAAkB;IAClB,UAAU;IACV,WAAW;IACX,UAAU;IACV,SAAS;IACT,wBAAwB;IACxB,qBAAqB;IACrB,gBAAgB;AACpB;;AAEA;IACI,UAAU;IACV,WAAW;IACX,kBAAkB;IAClB,6CAA6C;IAC7C,cAAc;IACd,WAAW;IACX,UAAU;IACV,kBAAkB;IAClB,kCAAkC;AACtC;;AAEA;IACI,8CAA8C;AAClD;;AAEA;IACI,kBAAkB;IAClB,UAAU;IACV,WAAW;IACX,kBAAkB;IAClB,0CAA0C;IAC1C,iBAAiB;IACjB,+CAA+C;IAC/C,cAAc;IACd,WAAW;IACX,UAAU;IACV,UAAU;IACV,uBAAuB;AAC3B;;AAEA;IACI,QAAQ;AACZ;;AAEA;IACI,eAAe;IACf,iBAAiB;AACrB\",\"sourcesContent\":[\":root {\\n --color-ui-accent-light: #07afb6;\\n --color-ui-accent-dark: #00888b;\\n --color-ui-neutral-light: #fdfdfe;\\n --color-ui-neutral-dark: #8b8b8b;\\n --color-ui-neutral-dark-hover: #a1a1a1;\\n --color-bg-light: #464646;\\n --color-bg-dark: #282828;\\n --color-p-light: #fafafa;\\n --color-p-dark: #282828;\\n --color-title-light: #fafafa;\\n --color-title-dark: #282828;\\n}\\n\\nbody {\\n background-color: var(--color-bg-dark);\\n color: var(--color-p-light);\\n}\\n\\n.root {\\n background-color: var(--color-bg-light);\\n margin-left: 10em;\\n margin-right: 10em;\\n}\\n\\n.root-title {\\n color: var(--color-title-light);\\n text-align: center;\\n}\\n\\ninput[type=\\\"checkbox\\\"] {\\n position: relative;\\n width: 2em;\\n height: 1em;\\n padding: 0;\\n margin: 0;\\n -webkit-appearance: none;\\n -moz-appearance: none;\\n appearance: none;\\n}\\n\\ninput[type=\\\"checkbox\\\"]::before {\\n width: 2em;\\n height: 1em;\\n border-radius: 1em;\\n background-color: var(--color-ui-accent-dark);\\n display: block;\\n content: \\\"\\\";\\n z-index: 0;\\n position: absolute;\\n transition: background-color 200ms;\\n}\\n\\ninput[type=\\\"checkbox\\\"]:checked::before {\\n background-color: var(--color-ui-accent-light);\\n}\\n\\ninput[type=\\\"checkbox\\\"]::after {\\n position: absolute;\\n width: 1em;\\n height: 1em;\\n border-radius: 1em;\\n border-color: var(--color-ui-neutral-dark);\\n border-width: 1px;\\n background-color: var(--color-ui-neutral-light);\\n display: block;\\n content: \\\"\\\";\\n z-index: 1;\\n right: 1em;\\n transition: right 200ms;\\n}\\n\\ninput[type=\\\"checkbox\\\"]:checked::after {\\n right: 0;\\n}\\n\\n* {\\n user-drag: none;\\n user-select: none;\\n}\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/Root/Root.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); + +/***/ }), + +/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/Widgets/NumberInput/NumberInput.css": +/*!**********************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/Widgets/NumberInput/NumberInput.css ***! + \**********************************************************************************************************************/ +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js */ \"./node_modules/css-loader/dist/runtime/cssWithMappingToString.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"input[type=\\\"number\\\"].number-input-input {\\n -webkit-appearance: textfield;\\n -moz-appearance: textfield;\\n text-align: center;\\n width: 3em;\\n border-style: none;\\n border-width: 0;\\n border-radius: 0;\\n background-color: var(--color-ui-neutral-light);\\n color: var(--color-p-dark)\\n}\\n\\ninput[type=\\\"number\\\"].number-input-input::-webkit-inner-spin-button,\\ninput[type=\\\"number\\\"].number-input-input::-webkit-outer-spin-button {\\n -webkit-appearance: none;\\n}\\n\\n.number-input-button {\\n border-width: 0;\\n background-color: var(--color-ui-neutral-dark);\\n color: var(--color-ui-neutral-light);\\n cursor: pointer;\\n}\\n\\n.number-input-button:hover {\\n background-color: var(--color-ui-neutral-dark-hover);\\n}\\n\\n.number-input-inc {\\n border-radius: 0 0.5em 0.5em 0;\\n}\\n\\n.number-input-dec {\\n border-radius: 0.5em 0 0 0.5em;\\n}\\n\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/ui/Widgets/NumberInput/NumberInput.css\"],\"names\":[],\"mappings\":\"AAAA;IACI,6BAA6B;IAC7B,0BAA0B;IAC1B,kBAAkB;IAClB,UAAU;IACV,kBAAkB;IAClB,eAAe;IACf,gBAAgB;IAChB,+CAA+C;IAC/C;AACJ;;AAEA;;IAEI,wBAAwB;AAC5B;;AAEA;IACI,eAAe;IACf,8CAA8C;IAC9C,oCAAoC;IACpC,eAAe;AACnB;;AAEA;IACI,oDAAoD;AACxD;;AAEA;IACI,8BAA8B;AAClC;;AAEA;IACI,8BAA8B;AAClC\",\"sourcesContent\":[\"input[type=\\\"number\\\"].number-input-input {\\n -webkit-appearance: textfield;\\n -moz-appearance: textfield;\\n text-align: center;\\n width: 3em;\\n border-style: none;\\n border-width: 0;\\n border-radius: 0;\\n background-color: var(--color-ui-neutral-light);\\n color: var(--color-p-dark)\\n}\\n\\ninput[type=\\\"number\\\"].number-input-input::-webkit-inner-spin-button,\\ninput[type=\\\"number\\\"].number-input-input::-webkit-outer-spin-button {\\n -webkit-appearance: none;\\n}\\n\\n.number-input-button {\\n border-width: 0;\\n background-color: var(--color-ui-neutral-dark);\\n color: var(--color-ui-neutral-light);\\n cursor: pointer;\\n}\\n\\n.number-input-button:hover {\\n background-color: var(--color-ui-neutral-dark-hover);\\n}\\n\\n.number-input-inc {\\n border-radius: 0 0.5em 0.5em 0;\\n}\\n\\n.number-input-dec {\\n border-radius: 0.5em 0 0 0.5em;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/Widgets/NumberInput/NumberInput.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D"); /***/ }), @@ -120,16 +130,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), -/***/ "./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css": -/*!*************************************************************!*\ - !*** ./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css ***! - \*************************************************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./BeatSettings.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css?"); - -/***/ }), - /***/ "./src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css": /*!*****************************************************!*\ !*** ./src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css ***! @@ -140,23 +140,33 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), -/***/ "./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css": -/*!******************************************************************!*\ - !*** ./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css ***! - \******************************************************************/ +/***/ "./src/ui/BeatGroupSettings/BeatGroupSettings.css": +/*!********************************************************!*\ + !*** ./src/ui/BeatGroupSettings/BeatGroupSettings.css ***! + \********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./BeatGroupSettings.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./BeatGroupSettings.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroupSettings/BeatGroupSettings.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroupSettings/BeatGroupSettings.css?"); /***/ }), -/***/ "./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css": -/*!************************************************************************!*\ - !*** ./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css ***! - \************************************************************************/ +/***/ "./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css": +/*!**************************************************************!*\ + !*** ./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css ***! + \**************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./BeatLikeLoopSettings.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./BeatLikeLoopSettings.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css?"); + +/***/ }), + +/***/ "./src/ui/BeatSettings/BeatSettings.css": +/*!**********************************************!*\ + !*** ./src/ui/BeatSettings/BeatSettings.css ***! + \**********************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./BeatSettings.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/BeatSettings/BeatSettings.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_BeatSettings_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatSettings/BeatSettings.css?"); /***/ }), @@ -170,6 +180,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), +/***/ "./src/ui/Widgets/NumberInput/NumberInput.css": +/*!****************************************************!*\ + !*** ./src/ui/Widgets/NumberInput/NumberInput.css ***! + \****************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_NumberInput_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./NumberInput.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/ui/Widgets/NumberInput/NumberInput.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_NumberInput_css__WEBPACK_IMPORTED_MODULE_6__.default, options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_NumberInput_css__WEBPACK_IMPORTED_MODULE_6__.default && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_NumberInput_css__WEBPACK_IMPORTED_MODULE_6__.default.locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_NumberInput_css__WEBPACK_IMPORTED_MODULE_6__.default.locals : undefined);\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/Widgets/NumberInput/NumberInput.css?"); + +/***/ }), + /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": /*!****************************************************************************!*\ !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! @@ -236,7 +256,7 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, style) {\ \*********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"BeatEvents\": () => (/* binding */ BeatEvents),\n/* harmony export */ \"default\": () => (/* binding */ Beat)\n/* harmony export */ });\n/* harmony import */ var _BeatUnit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BeatUnit */ \"./src/BeatUnit.ts\");\n/* harmony import */ var _Publisher__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Publisher */ \"./src/Publisher.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n\n\n\nvar BeatEvents;\n(function (BeatEvents) {\n BeatEvents[BeatEvents[\"NewTimeSig\"] = 0] = \"NewTimeSig\";\n BeatEvents[BeatEvents[\"NewBarCount\"] = 1] = \"NewBarCount\";\n BeatEvents[BeatEvents[\"NewName\"] = 2] = \"NewName\";\n BeatEvents[BeatEvents[\"UnitChanged\"] = 3] = \"UnitChanged\";\n BeatEvents[BeatEvents[\"DisplayTypeChanged\"] = 4] = \"DisplayTypeChanged\";\n BeatEvents[BeatEvents[\"LoopLengthChanged\"] = 5] = \"LoopLengthChanged\";\n})(BeatEvents || (BeatEvents = {}));\nclass Beat {\n static count = 0;\n key;\n name;\n timeSigUp = 4;\n timeSigDown = 4;\n unitRecord = [];\n barCount = 1;\n publisher = new _Publisher__WEBPACK_IMPORTED_MODULE_1__.Publisher();\n loopLength;\n looping;\n constructor(options) {\n this.key = `Beat-${Beat.count}`;\n this.name = options?.name ?? this.key;\n this.setTimeSignature({ up: options?.timeSig?.up ?? 4, down: options?.timeSig?.down ?? 4 });\n this.setBarCount(options?.bars ?? 4);\n Beat.count++;\n this.loopLength = options?.loopLength ?? this.timeSigUp * this.barCount;\n this.looping = options?.isLooping ?? false;\n }\n setLoopLength(loopLength) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(loopLength) || loopLength < 2) {\n return;\n }\n this.loopLength = loopLength | 0;\n this.publisher.notifySubs(BeatEvents.LoopLengthChanged);\n }\n setLooping(isLooping) {\n this.looping = isLooping;\n this.publisher.notifySubs(BeatEvents.DisplayTypeChanged);\n }\n addSubscriber(subscriber, eventType) {\n return this.publisher.addSubscriber(subscriber, eventType);\n }\n setTimeSignature(timeSig) {\n if (timeSig.up && Beat.isValidTimeSigRange(timeSig.up)) {\n this.timeSigUp = timeSig.up | 0;\n this.loopLength = this.timeSigUp * this.barCount;\n }\n if (timeSig.down && Beat.isValidTimeSigRange(timeSig.down)) {\n this.timeSigDown = timeSig.down | 0;\n }\n this.updateBeatUnitLength();\n this.publisher.notifySubs(BeatEvents.NewTimeSig);\n }\n setBarCount(barCount) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(barCount) || barCount == this.barCount) {\n return;\n }\n this.barCount = barCount;\n this.loopLength = this.timeSigUp * this.barCount;\n this.updateBeatUnitLength();\n this.publisher.notifySubs(BeatEvents.NewBarCount);\n }\n getUnitByIndex(index) {\n if (this.looping) {\n return this.unitRecord[index % this.loopLength];\n }\n return this.unitRecord[index] ?? null;\n }\n updateBeatUnitLength() {\n const newBarCount = this.barCount * this.timeSigUp;\n if (newBarCount < this.unitRecord.length) {\n this.unitRecord.splice(this.barCount * this.timeSigUp, this.unitRecord.length - newBarCount);\n }\n else if (newBarCount > this.unitRecord.length) {\n const barsToAdd = newBarCount - this.unitRecord.length;\n for (let i = 0; i < barsToAdd; i++) {\n this.unitRecord.push(new _BeatUnit__WEBPACK_IMPORTED_MODULE_0__.default());\n }\n }\n }\n getTimeSigUp() {\n return this.timeSigUp;\n }\n getTimeSigDown() {\n return this.timeSigDown;\n }\n turnUnitOn(index) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(index)) {\n return;\n }\n const unit = this.getUnit(index);\n if (unit) {\n unit.setOn(true);\n this.publisher.notifySubs(BeatEvents.UnitChanged);\n }\n }\n turnUnitOff(index) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(index)) {\n return;\n }\n const unit = this.getUnit(index);\n if (unit) {\n unit.setOn(false);\n this.publisher.notifySubs(BeatEvents.UnitChanged);\n }\n }\n toggleUnit(index) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(index)) {\n return;\n }\n const unit = this.getUnit(index);\n if (unit) {\n unit.toggle();\n this.publisher.notifySubs(BeatEvents.UnitChanged);\n }\n }\n setUnitType(index, type) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(index)) {\n return;\n }\n this.getUnit(index).setType(type);\n this.publisher.notifySubs(BeatEvents.UnitChanged);\n }\n unitIsOn(index) {\n return this.getUnit(index)?.isOn();\n }\n unitType(index) {\n return this.getUnit(index)?.getType();\n }\n getUnit(index) {\n if (!this.unitRecord[index]) {\n throw new Error(`Invalid beat unit index! - ${index}`);\n }\n return this.unitRecord[index];\n }\n getBarCount() {\n return this.barCount;\n }\n getKey() {\n return this.key;\n }\n static isValidTimeSigRange(sig) {\n return sig >= 2 && sig <= 64;\n }\n setName(newName) {\n this.name = newName;\n this.publisher.notifySubs(BeatEvents.NewName);\n }\n getName() {\n return this.name;\n }\n isLooping() {\n return this.looping;\n }\n getLoopLength() {\n return this.loopLength;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/Beat.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Beat)\n/* harmony export */ });\n/* harmony import */ var _BeatUnit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BeatUnit */ \"./src/BeatUnit.ts\");\n/* harmony import */ var _Publisher__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Publisher */ \"./src/Publisher.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n\n\n\nclass Beat {\n static count = 0;\n key;\n name;\n timeSigUp = 4;\n timeSigDown = 4;\n unitRecord = [];\n barCount = 1;\n publisher = new _Publisher__WEBPACK_IMPORTED_MODULE_1__.Publisher();\n loopLength;\n looping;\n constructor(options) {\n this.key = `Beat-${Beat.count}`;\n this.name = options?.name ?? this.key;\n this.setTimeSignature({ up: options?.timeSig?.up ?? 4, down: options?.timeSig?.down ?? 4 });\n this.setBarCount(options?.bars ?? 4);\n Beat.count++;\n this.loopLength = options?.loopLength ?? this.timeSigUp * this.barCount;\n this.looping = options?.isLooping ?? false;\n }\n setLoopLength(loopLength) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(loopLength) || loopLength < 2) {\n loopLength = this.loopLength;\n }\n this.loopLength = loopLength;\n this.publisher.notifySubs(\"BE4\" /* LoopLengthChanged */);\n }\n setLooping(isLooping) {\n this.looping = isLooping;\n this.publisher.notifySubs(\"BE3\" /* DisplayTypeChanged */);\n }\n addSubscriber(subscriber, eventType) {\n return this.publisher.addSubscriber(subscriber, eventType);\n }\n setTimeSignature(timeSig) {\n if (timeSig.up && Beat.isValidTimeSigRange(timeSig.up)) {\n this.timeSigUp = timeSig.up | 0;\n }\n if (timeSig.down && Beat.isValidTimeSigRange(timeSig.down)) {\n this.timeSigDown = timeSig.down | 0;\n }\n this.updateBeatUnitLength();\n this.publisher.notifySubs(\"BE0\" /* NewTimeSig */);\n }\n setTimeSigUp(timeSigUp) {\n this.setTimeSignature({ up: timeSigUp });\n }\n setTimeSigDown(timeSigUp) {\n this.setTimeSignature({ down: timeSigUp });\n }\n setBarCount(barCount) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(barCount) || barCount == this.barCount) {\n barCount = this.barCount;\n }\n this.barCount = barCount;\n this.updateBeatUnitLength();\n this.publisher.notifySubs(\"BE1\" /* NewBarCount */);\n }\n getUnitByIndex(index) {\n if (this.looping) {\n index %= this.loopLength;\n }\n return this.unitRecord[index] ?? null;\n }\n updateBeatUnitLength() {\n const newBarCount = this.barCount * this.timeSigUp;\n if (newBarCount < this.unitRecord.length) {\n this.unitRecord.splice(this.barCount * this.timeSigUp, this.unitRecord.length - newBarCount);\n }\n else if (newBarCount > this.unitRecord.length) {\n const barsToAdd = newBarCount - this.unitRecord.length;\n for (let i = 0; i < barsToAdd; i++) {\n this.unitRecord.push(new _BeatUnit__WEBPACK_IMPORTED_MODULE_0__.default());\n }\n }\n }\n getTimeSigUp() {\n return this.timeSigUp;\n }\n getTimeSigDown() {\n return this.timeSigDown;\n }\n getBarCount() {\n return this.barCount;\n }\n getKey() {\n return this.key;\n }\n static isValidTimeSigRange(sig) {\n return sig >= 2 && sig <= 32;\n }\n setName(newName) {\n this.name = newName;\n this.publisher.notifySubs(\"BE2\" /* NewName */);\n }\n getName() {\n return this.name;\n }\n isLooping() {\n return this.looping;\n }\n getLoopLength() {\n return this.loopLength;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/Beat.ts?"); /***/ }), @@ -246,7 +266,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \**************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatGroup)\n/* harmony export */ });\n/* harmony import */ var _Beat__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Beat */ \"./src/Beat.ts\");\n/* harmony import */ var _Publisher__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Publisher */ \"./src/Publisher.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n\n\n\nclass BeatGroup {\n beats = [];\n beatKeyMap = {};\n publisher = new _Publisher__WEBPACK_IMPORTED_MODULE_1__.Publisher();\n globalBarCount;\n globalTimeSigUp;\n globalLoopLength;\n globalIsLooping;\n constructor(options) {\n if (options?.beats) {\n for (const beatOptions of options.beats) {\n const newBeat = new _Beat__WEBPACK_IMPORTED_MODULE_0__.default(beatOptions);\n this.beats.push(newBeat);\n this.beatKeyMap[newBeat.getKey()] = this.beats.length - 1;\n }\n }\n this.globalBarCount = options?.barCount ?? 4;\n this.globalTimeSigUp = options?.timeSigUp ?? 4;\n this.globalLoopLength = options?.loopLength ?? this.globalBarCount * this.globalTimeSigUp;\n this.globalIsLooping = options?.isLooping ?? false;\n }\n addSubscriber(subscriber, eventType) {\n return this.publisher.addSubscriber(subscriber, eventType);\n }\n setBarCount(barCount) {\n if (barCount <= 0 || (barCount | 0) !== barCount) {\n return;\n }\n this.globalBarCount = barCount;\n for (const beat of this.beats) {\n beat.setBarCount(barCount);\n }\n this.publisher.notifySubs(2 /* GlobalBarCountChanged */);\n }\n getBarCount() {\n return this.globalBarCount;\n }\n setLoopLength(loopLength) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(loopLength)) {\n return;\n }\n this.globalLoopLength = loopLength;\n for (const beat of this.beats) {\n beat.setLoopLength(loopLength);\n }\n this.publisher.notifySubs(_Beat__WEBPACK_IMPORTED_MODULE_0__.BeatEvents.LoopLengthChanged);\n }\n getLoopLength() {\n return this.globalLoopLength;\n }\n setLooping(isLooping) {\n this.globalIsLooping = isLooping;\n for (const beat of this.beats) {\n beat.setLooping(isLooping);\n }\n this.publisher.notifySubs(_Beat__WEBPACK_IMPORTED_MODULE_0__.BeatEvents.DisplayTypeChanged);\n }\n isLooping() {\n return this.globalIsLooping;\n }\n setGlobalTimeSigUp(timeSigUp) {\n if (!_Beat__WEBPACK_IMPORTED_MODULE_0__.default.isValidTimeSigRange(timeSigUp)) {\n return;\n }\n this.globalTimeSigUp = timeSigUp;\n for (const beat of this.beats) {\n beat.setTimeSignature({ up: timeSigUp });\n }\n this.publisher.notifySubs(3 /* GlobalTimeSigUpChanged */);\n }\n getBeatByKey(beatKey) {\n if (typeof this.beatKeyMap[beatKey] === \"undefined\") {\n throw new Error(`Could not find the beat with key: ${beatKey}`);\n }\n return this.getBeatByIndex(this.beatKeyMap[beatKey]);\n }\n getBeatByIndex(beatIndex) {\n if (!this.beats[beatIndex]) {\n throw new Error(`Could not find the beat with index: ${beatIndex}`);\n }\n return this.beats[beatIndex];\n }\n getBeatCount() {\n return this.beats.length;\n }\n getBeatKeys() {\n return this.beats.map(beat => beat.getKey());\n }\n swapBeatsByIndices(beatIndex1, beatIndex2) {\n const beat1 = this.getBeatByIndex(beatIndex1);\n const beat2 = this.getBeatByIndex(beatIndex2);\n this.beats[beatIndex1] = beat2;\n this.beats[beatIndex2] = beat1;\n this.beatKeyMap[beat1.getKey()] = beatIndex2;\n this.beatKeyMap[beat2.getKey()] = beatIndex1;\n this.publisher.notifySubs(0 /* BeatOrderChanged */);\n }\n swapBeatsByKeys(beatKey1, beatKey2) {\n const index1 = this.beatKeyMap[this.getBeatByKey(beatKey1).getKey()];\n const index2 = this.beatKeyMap[this.getBeatByKey(beatKey2).getKey()];\n this.swapBeatsByIndices(index1, index2);\n }\n moveBeatBack(beatKey) {\n const index = this.beatKeyMap[beatKey];\n if (typeof index !== \"undefined\" && index > 0) {\n this.swapBeatsByIndices(index, index - 1);\n }\n this.publisher.notifySubs(0 /* BeatOrderChanged */);\n }\n moveBeatForward(beatKey) {\n const index = this.beatKeyMap[beatKey];\n if (typeof index !== \"undefined\" && index < this.getBeatCount()) {\n this.swapBeatsByIndices(index, index + 1);\n }\n this.publisher.notifySubs(0 /* BeatOrderChanged */);\n }\n canMoveBeatBack(beatKey) {\n return this.beatKeyMap[beatKey] > 0;\n }\n canMoveBeatForward(beatKey) {\n return this.beatKeyMap[beatKey] < this.beats.length - 1;\n }\n addBeat(options) {\n const newBeat = new _Beat__WEBPACK_IMPORTED_MODULE_0__.default(options);\n this.beats.push(newBeat);\n this.beatKeyMap[newBeat.getKey()] = this.beats.length;\n this.publisher.notifySubs(1 /* BeatListChanged */);\n return newBeat;\n }\n removeBeat(beatKey) {\n const beat = this.getBeatByKey(beatKey);\n this.publisher.notifySubs(1 /* BeatListChanged */);\n this.beats.splice(this.beats.indexOf(beat), 1);\n }\n setBeatName(beatKey, newName) {\n this.getBeatByKey(beatKey).setName(newName);\n this.publisher.notifySubs(0 /* BeatOrderChanged */);\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/BeatGroup.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatGroup)\n/* harmony export */ });\n/* harmony import */ var _Beat__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Beat */ \"./src/Beat.ts\");\n/* harmony import */ var _Publisher__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Publisher */ \"./src/Publisher.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\n\n\n\nclass BeatGroup {\n beats = [];\n beatKeyMap = {};\n publisher = new _Publisher__WEBPACK_IMPORTED_MODULE_1__.Publisher();\n barCount;\n timeSigUp;\n globalLoopLength;\n globalIsLooping;\n forceFullBars;\n useAutoBeatLength;\n constructor(options) {\n if (options?.beats) {\n for (const beatOptions of options.beats) {\n const newBeat = new _Beat__WEBPACK_IMPORTED_MODULE_0__.default(beatOptions);\n this.beats.push(newBeat);\n this.beatKeyMap[newBeat.getKey()] = this.beats.length - 1;\n }\n }\n this.barCount = options?.barCount ?? 4;\n this.timeSigUp = options?.timeSigUp ?? 4;\n this.globalLoopLength = options?.loopLength ?? this.barCount * this.timeSigUp;\n this.globalIsLooping = options?.isLooping ?? false;\n this.useAutoBeatLength = options?.useAutoBeatLength ?? false;\n this.forceFullBars = options?.forceFullBars ?? true;\n }\n notify(publisher, event) {\n if (event === \"BE4\" /* LoopLengthChanged */) {\n this.autoBeatLength();\n }\n }\n addSubscriber(subscriber, eventType) {\n return this.publisher.addSubscriber(subscriber, eventType);\n }\n setBarCount(barCount) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(barCount)) {\n barCount = this.barCount;\n }\n this.barCount = barCount;\n for (const beat of this.beats) {\n beat.setBarCount(barCount);\n }\n this.publisher.notifySubs(\"BGE2\" /* BarCountChanged */);\n }\n getBarCount() {\n return this.barCount;\n }\n setLoopLength(loopLength) {\n if (!(0,_utils__WEBPACK_IMPORTED_MODULE_2__.isPosInt)(loopLength)) {\n return;\n }\n this.globalLoopLength = loopLength;\n for (const beat of this.beats) {\n beat.setLoopLength(loopLength);\n }\n this.publisher.notifySubs(\"BE4\" /* LoopLengthChanged */);\n }\n getLoopLength() {\n return this.globalLoopLength;\n }\n setLooping(isLooping) {\n this.globalIsLooping = isLooping;\n for (const beat of this.beats) {\n beat.setLooping(isLooping);\n }\n if (isLooping) {\n this.autoBeatLength();\n }\n this.publisher.notifySubs(\"BE3\" /* DisplayTypeChanged */);\n }\n isLooping() {\n return this.globalIsLooping;\n }\n findSmallestLoopLength() {\n const loopLengths = [];\n const denominators = [];\n for (const beat of this.beats) {\n loopLengths.push(beat.getLoopLength());\n }\n if (this.forceFullBars) {\n loopLengths.push(this.timeSigUp);\n }\n for (let i = 0; i < loopLengths.length; i++) {\n let isFactor = false;\n for (let j = 0; j < loopLengths.length; j++) {\n if (j !== i && loopLengths[j] % loopLengths[i] === 0 && loopLengths[j] !== loopLengths[i]) {\n isFactor = true;\n break;\n }\n }\n if (!isFactor && denominators.indexOf(loopLengths[i]) === -1) {\n denominators.push(loopLengths[i]);\n }\n }\n return denominators.reduce((prev, curr) => prev * curr, 1);\n }\n setTimeSigUp(timeSigUp) {\n if (!_Beat__WEBPACK_IMPORTED_MODULE_0__.default.isValidTimeSigRange(timeSigUp)) {\n timeSigUp = this.timeSigUp;\n }\n this.timeSigUp = timeSigUp;\n for (const beat of this.beats) {\n beat.setTimeSignature({ up: timeSigUp });\n }\n this.publisher.notifySubs(\"BGE3\" /* TimeSigUpChanged */);\n }\n getTimeSigUp() {\n return this.timeSigUp;\n }\n getBeatByKey(beatKey) {\n if (typeof this.beatKeyMap[beatKey] === \"undefined\") {\n throw new Error(`Could not find the beat with key: ${beatKey}`);\n }\n return this.getBeatByIndex(this.beatKeyMap[beatKey]);\n }\n getBeatByIndex(beatIndex) {\n if (!this.beats[beatIndex]) {\n throw new Error(`Could not find the beat with index: ${beatIndex}`);\n }\n return this.beats[beatIndex];\n }\n getBeatCount() {\n return this.beats.length;\n }\n getBeatKeys() {\n return this.beats.map(beat => beat.getKey());\n }\n swapBeatsByIndices(beatIndex1, beatIndex2) {\n const beat1 = this.getBeatByIndex(beatIndex1);\n const beat2 = this.getBeatByIndex(beatIndex2);\n this.beats[beatIndex1] = beat2;\n this.beats[beatIndex2] = beat1;\n this.beatKeyMap[beat1.getKey()] = beatIndex2;\n this.beatKeyMap[beat2.getKey()] = beatIndex1;\n this.publisher.notifySubs(\"BGE0\" /* BeatOrderChanged */);\n }\n swapBeatsByKeys(beatKey1, beatKey2) {\n const index1 = this.beatKeyMap[this.getBeatByKey(beatKey1).getKey()];\n const index2 = this.beatKeyMap[this.getBeatByKey(beatKey2).getKey()];\n this.swapBeatsByIndices(index1, index2);\n }\n moveBeatBack(beatKey) {\n const index = this.beatKeyMap[beatKey];\n if (typeof index !== \"undefined\" && index > 0) {\n this.swapBeatsByIndices(index, index - 1);\n }\n this.publisher.notifySubs(\"BGE0\" /* BeatOrderChanged */);\n }\n moveBeatForward(beatKey) {\n const index = this.beatKeyMap[beatKey];\n if (typeof index !== \"undefined\" && index < this.getBeatCount()) {\n this.swapBeatsByIndices(index, index + 1);\n }\n this.publisher.notifySubs(\"BGE0\" /* BeatOrderChanged */);\n }\n canMoveBeatBack(beatKey) {\n return this.beatKeyMap[beatKey] > 0;\n }\n canMoveBeatForward(beatKey) {\n return this.beatKeyMap[beatKey] < this.beats.length - 1;\n }\n addBeat(options) {\n const newBeat = new _Beat__WEBPACK_IMPORTED_MODULE_0__.default(options);\n this.beats.push(newBeat);\n this.beatKeyMap[newBeat.getKey()] = this.beats.length;\n newBeat.addSubscriber(this, [\"BE4\" /* LoopLengthChanged */]);\n this.publisher.notifySubs(\"BGE1\" /* BeatListChanged */);\n return newBeat;\n }\n removeBeat(beatKey) {\n const beat = this.getBeatByKey(beatKey);\n this.publisher.notifySubs(\"BGE1\" /* BeatListChanged */);\n this.beats.splice(this.beats.indexOf(beat), 1);\n }\n setBeatName(beatKey, newName) {\n this.getBeatByKey(beatKey).setName(newName);\n this.publisher.notifySubs(\"BGE0\" /* BeatOrderChanged */);\n }\n autoBeatLengthOn() {\n return this.useAutoBeatLength;\n }\n forcesFullBars() {\n return this.forceFullBars;\n }\n autoBeatLength() {\n if (this.useAutoBeatLength && this.globalIsLooping) {\n this.setBarCount(this.findSmallestLoopLength() / this.timeSigUp);\n }\n }\n setIsUsingAutoBeatLength(isOn) {\n this.useAutoBeatLength = isOn;\n this.autoBeatLength();\n this.publisher.notifySubs(\"BGE4\" /* AutoBeatSettingsChanged */);\n }\n setForcesFullBars(force) {\n this.forceFullBars = force;\n this.autoBeatLength();\n this.publisher.notifySubs(\"BGE4\" /* AutoBeatSettingsChanged */);\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/BeatGroup.ts?"); /***/ }), @@ -280,16 +300,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mai /***/ }), -/***/ "./src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts": -/*!****************************************************************!*\ - !*** ./src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts ***! - \****************************************************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatSettingsView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _Beat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../Beat */ \"./src/Beat.ts\");\n/* harmony import */ var _BeatSettings_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BeatSettings.css */ \"./src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css\");\n/* harmony import */ var _BeatLikeLoopSettings_BeatLikeLoopSettingsView__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../BeatLikeLoopSettings/BeatLikeLoopSettingsView */ \"./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts\");\n\n\n\n\nclass BeatSettingsView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n beat;\n visible = false;\n timeSigUp;\n timeSigDown;\n barCountInput;\n loopSettingsView;\n constructor(options) {\n super(options);\n this.beat = options.beat;\n this.setupBindings();\n }\n setupBindings() {\n this.beat.addSubscriber(this, \"all\");\n }\n notify(publisher, event) {\n if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.NewTimeSig) {\n this.timeSigUp.value = this.beat.getTimeSigUp().toString();\n this.timeSigDown.value = this.beat.getTimeSigDown().toString();\n }\n else if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.NewBarCount) {\n this.barCountInput.value = this.beat.getBarCount().toString();\n }\n }\n toggleVisible() {\n this.visible = !this.visible;\n if (this.visible) {\n this.node?.classList.add(\"visible\");\n }\n else {\n this.node?.classList.remove(\"visible\");\n }\n }\n isOpen() {\n return this.visible;\n }\n rebuild() {\n this.loopSettingsView = new _BeatLikeLoopSettings_BeatLikeLoopSettingsView__WEBPACK_IMPORTED_MODULE_3__.default({ beatLike: this.beat });\n this.timeSigUp = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"input\", {\n classes: [\"time-sig-up\"],\n type: \"number\",\n value: this.beat.getTimeSigUp().toString(),\n oninput: (event) => {\n this.beat.setTimeSignature({ up: Number(event.target.value) });\n },\n });\n this.timeSigDown = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"input\", {\n classes: [\"beat-settings-time-sig-down\"],\n type: \"number\",\n value: this.beat.getTimeSigDown().toString(),\n oninput: (event) => {\n this.beat.setTimeSignature({ down: Number(event.target.value) });\n },\n });\n this.barCountInput = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"input\", {\n classes: [\"beat-settings-bars-count\"],\n type: \"number\",\n value: this.beat.getBarCount().toString(),\n oninput: (event) => {\n this.beat.setBarCount(Number(event.target.value));\n },\n });\n this.node = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-settings\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-settings-time-sig\", \"beat-settings-option-group\", \"beat-settings-option\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"label\", { innerText: \"Time Signature:\" }),\n this.timeSigUp,\n this.timeSigDown,\n ]\n }),\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-settings-bar\", \"beat-settings-option-group\", \"beat-settings-option\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"label\", { innerText: \"Bar Count:\" }),\n this.barCountInput,\n ],\n }),\n this.loopSettingsView.render(),\n ],\n });\n return this.node;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts?"); - -/***/ }), - /***/ "./src/ui/BeatGroup/Beat/BeatUnit/BeatUnitView.ts": /*!********************************************************!*\ !*** ./src/ui/BeatGroup/Beat/BeatUnit/BeatUnitView.ts ***! @@ -306,17 +316,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _Beat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../Beat */ \"./src/Beat.ts\");\n/* harmony import */ var _BeatSettings_BeatSettingsView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BeatSettings/BeatSettingsView */ \"./src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts\");\n/* harmony import */ var _BeatUnit_BeatUnitView__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./BeatUnit/BeatUnitView */ \"./src/ui/BeatGroup/Beat/BeatUnit/BeatUnitView.ts\");\n/* harmony import */ var _Beat_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Beat.css */ \"./src/ui/BeatGroup/Beat/Beat.css\");\n\n\n\n\n\nclass BeatView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n beat;\n title;\n settingsView;\n settingsToggleButton;\n beatUnitViews = [];\n beatUnitViewBlock = null;\n lastHoveredBeatUnitView = null;\n static deselectingUnits = false;\n static selectingUnits = false;\n constructor(options) {\n super(options);\n this.beat = options.beat;\n this.setupBindings();\n }\n setupBindings() {\n this.beat.addSubscriber(this, \"all\");\n }\n notify(publisher, event) {\n if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.NewName) {\n this.title.innerText = this.beat.getName();\n }\n else if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.NewTimeSig) {\n this.setupBeatUnits();\n }\n else if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.NewBarCount) {\n this.setupBeatUnits();\n }\n else if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.DisplayTypeChanged) {\n this.setupBeatUnits();\n }\n else if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.LoopLengthChanged) {\n this.setupBeatUnits();\n }\n }\n toggleSettings() {\n this.settingsView.toggleVisible();\n if (this.settingsView.isOpen()) {\n this.settingsToggleButton.classList.add(\"active\");\n }\n else {\n this.settingsToggleButton.classList.remove(\"active\");\n }\n }\n rebuildBeatUnitViews() {\n const beatUnitCount = this.beat.getBarCount() * this.beat.getTimeSigUp();\n this.beatUnitViews.splice(beatUnitCount, this.beatUnitViews.length - beatUnitCount);\n for (let i = 0; i < beatUnitCount; i++) {\n const beatUnit = this.beat.getUnitByIndex(i);\n if (beatUnit) {\n let view;\n if (this.beatUnitViews[i]) {\n view = this.beatUnitViews[i];\n view.setUnit(beatUnit);\n }\n else {\n view = new _BeatUnit_BeatUnitView__WEBPACK_IMPORTED_MODULE_3__.default({ beatUnit });\n this.beatUnitViews.push(view);\n }\n view.onMouseDown((event) => this.onBeatUnitClick(event.button, i));\n window.addEventListener(\"mouseup\", (event) => {\n BeatView.selectingUnits = false;\n BeatView.deselectingUnits = false;\n });\n view.onHover(() => {\n this.lastHoveredBeatUnitView = view;\n if (BeatView.selectingUnits) {\n this.lastHoveredBeatUnitView.turnOn();\n }\n else if (BeatView.deselectingUnits) {\n this.lastHoveredBeatUnitView.turnOff();\n }\n });\n }\n }\n }\n onBeatUnitClick(button, index) {\n if (button === 0) {\n BeatView.selectingUnits = true;\n this.beat.getUnitByIndex(index)?.toggle();\n }\n else if (button === 2) {\n BeatView.deselectingUnits = true;\n this.beat.getUnitByIndex(index)?.setOn(false);\n }\n }\n buildBeatUnitViewBlock() {\n const beatUnitNodes = [];\n for (let i = 0; i < this.beatUnitViews.length; i++) {\n beatUnitNodes.push(this.beatUnitViews[i].render());\n }\n if (this.beatUnitViewBlock) {\n this.beatUnitViewBlock.replaceChildren(...beatUnitNodes);\n }\n else {\n this.beatUnitViewBlock = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-unit-block\"],\n subs: [...beatUnitNodes],\n });\n }\n }\n respaceBeatUnits() {\n if (!this.beatUnitViewBlock) {\n return;\n }\n this.beatUnitViewBlock.querySelectorAll(\".beat-spacer\").forEach(spacer => spacer.remove());\n const barLength = this.beat.getTimeSigUp();\n const barCount = this.beat.getBarCount();\n let bars = 0;\n let i = -1;\n let spacersInserted = false;\n while (!spacersInserted) {\n i += barLength;\n const newSpacer = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", { classes: [\"beat-spacer\"] });\n const leftNeighbour = this.beatUnitViewBlock.children.item(i);\n if (leftNeighbour) {\n leftNeighbour.insertAdjacentElement(\"afterend\", newSpacer);\n }\n else {\n break;\n }\n i++;\n bars++;\n if (bars === barCount) {\n spacersInserted = true;\n }\n }\n }\n setupBeatUnits() {\n this.rebuildBeatUnitViews();\n this.buildBeatUnitViewBlock();\n this.respaceBeatUnits();\n }\n rebuild() {\n this.title = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"h3\", {\n innerText: this.beat.getName(),\n classes: [\"beat-title\"],\n });\n this.setupBeatUnits();\n this.settingsView = new _BeatSettings_BeatSettingsView__WEBPACK_IMPORTED_MODULE_2__.default({ beat: this.beat });\n this.settingsToggleButton = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-settings-btn\"],\n innerText: \"Settings\",\n onclick: () => this.toggleSettings()\n });\n this.node = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-main\"],\n subs: [\n this.title,\n this.beatUnitViewBlock,\n ]\n }),\n this.settingsToggleButton,\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-settings-container\"],\n subs: [this.settingsView.render()],\n }),\n ],\n });\n return this.node;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/Beat/BeatView.ts?"); - -/***/ }), - -/***/ "./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts": -/*!*********************************************************************!*\ - !*** ./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts ***! - \*********************************************************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatGroupSettingsView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _BeatLikeLoopSettings_BeatLikeLoopSettingsView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../BeatLikeLoopSettings/BeatLikeLoopSettingsView */ \"./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts\");\n/* harmony import */ var _BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BeatGroupSettings.css */ \"./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css\");\n\n\n\nclass BeatGroupSettingsView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n beatGroup;\n barCountInput;\n timeSigUpInput;\n loopSettingsView;\n constructor(options) {\n super(options);\n this.beatGroup = options.beatGroup;\n this.beatGroup.addSubscriber(this, [\n 2 /* GlobalBarCountChanged */,\n 3 /* GlobalTimeSigUpChanged */\n ]);\n }\n notify(publisher, event) {\n if (event === 2 /* GlobalBarCountChanged */) {\n this.barCountInput.value = this.beatGroup.getBeatByIndex(0).getBarCount().toString();\n }\n else if (event === 3 /* GlobalTimeSigUpChanged */) {\n this.barCountInput.value = this.beatGroup.getBeatByIndex(0).getBarCount().toString();\n }\n }\n rebuild() {\n this.loopSettingsView = new _BeatLikeLoopSettings_BeatLikeLoopSettingsView__WEBPACK_IMPORTED_MODULE_1__.default({ beatLike: this.beatGroup });\n this.barCountInput = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"input\", {\n type: \"number\",\n value: this.beatGroup.getBeatByIndex(0).getBarCount().toString(),\n oninput: () => {\n this.beatGroup.setBarCount(Number(this.barCountInput.value));\n },\n });\n this.timeSigUpInput = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"input\", {\n type: \"number\",\n value: this.beatGroup.getBeatByIndex(0).getTimeSigUp().toString(),\n oninput: () => {\n this.beatGroup.setGlobalTimeSigUp(Number(this.timeSigUpInput.value));\n },\n });\n this.node = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-group-settings\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"h4\", { innerText: \"Settings for beat\" }),\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-group-settings-options\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-group-settings-bar-count\", \"beat-group-settings-option\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"label\", { innerText: \"Bars:\" }),\n this.barCountInput,\n ],\n }),\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-group-settings-boxes\", \"beat-group-settings-option\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"label\", { innerText: \"Boxes per bar:\" }),\n this.timeSigUpInput,\n ],\n }),\n this.loopSettingsView.render(),\n ],\n }),\n ],\n });\n return this.node;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _BeatUnit_BeatUnitView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BeatUnit/BeatUnitView */ \"./src/ui/BeatGroup/Beat/BeatUnit/BeatUnitView.ts\");\n/* harmony import */ var _Beat_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Beat.css */ \"./src/ui/BeatGroup/Beat/Beat.css\");\n/* harmony import */ var _BeatSettings_BeatSettingsView__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../BeatSettings/BeatSettingsView */ \"./src/ui/BeatSettings/BeatSettingsView.ts\");\n\n\n\n\nclass BeatView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n beat;\n title;\n settingsView;\n settingsToggleButton;\n beatUnitViews = [];\n beatUnitViewBlock = null;\n lastHoveredBeatUnitView = null;\n static deselectingUnits = false;\n static selectingUnits = false;\n constructor(options) {\n super(options);\n this.beat = options.beat;\n this.setupBindings();\n }\n setupBindings() {\n this.beat.addSubscriber(this, \"all\");\n }\n notify(publisher, event) {\n if (event === \"BE2\" /* NewName */) {\n this.title.innerText = this.beat.getName();\n }\n else if (event === \"BE0\" /* NewTimeSig */) {\n this.setupBeatUnits();\n }\n else if (event === \"BE1\" /* NewBarCount */) {\n this.setupBeatUnits();\n }\n else if (event === \"BE3\" /* DisplayTypeChanged */) {\n this.setupBeatUnits();\n }\n else if (event === \"BE4\" /* LoopLengthChanged */) {\n this.setupBeatUnits();\n }\n }\n toggleSettings() {\n this.settingsView.toggleVisible();\n if (this.settingsView.isOpen()) {\n this.settingsToggleButton.classList.add(\"active\");\n }\n else {\n this.settingsToggleButton.classList.remove(\"active\");\n }\n }\n rebuildBeatUnitViews() {\n const beatUnitCount = this.beat.getBarCount() * this.beat.getTimeSigUp();\n this.beatUnitViews.splice(beatUnitCount, this.beatUnitViews.length - beatUnitCount);\n for (let i = 0; i < beatUnitCount; i++) {\n const beatUnit = this.beat.getUnitByIndex(i);\n if (beatUnit) {\n let view;\n if (this.beatUnitViews[i]) {\n view = this.beatUnitViews[i];\n view.setUnit(beatUnit);\n }\n else {\n view = new _BeatUnit_BeatUnitView__WEBPACK_IMPORTED_MODULE_1__.default({ beatUnit });\n this.beatUnitViews.push(view);\n }\n view.onHover(() => {\n this.lastHoveredBeatUnitView = view;\n if (BeatView.selectingUnits) {\n this.lastHoveredBeatUnitView.turnOn();\n }\n else if (BeatView.deselectingUnits) {\n this.lastHoveredBeatUnitView.turnOff();\n }\n });\n view.onMouseDown((event) => this.onBeatUnitClick(event.button, i));\n }\n }\n }\n onBeatUnitClick(button, index) {\n if (button === 0) {\n BeatView.selectingUnits = true;\n this.beat.getUnitByIndex(index)?.toggle();\n }\n else if (button === 2) {\n BeatView.deselectingUnits = true;\n this.beat.getUnitByIndex(index)?.setOn(false);\n }\n }\n buildBeatUnitViewBlock() {\n const beatUnitNodes = [];\n for (let i = 0; i < this.beatUnitViews.length; i++) {\n beatUnitNodes.push(this.beatUnitViews[i].render());\n }\n if (this.beatUnitViewBlock) {\n this.beatUnitViewBlock.replaceChildren(...beatUnitNodes);\n }\n else {\n this.beatUnitViewBlock = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-unit-block\"],\n subs: [...beatUnitNodes],\n });\n }\n }\n respaceBeatUnits() {\n if (!this.beatUnitViewBlock) {\n return;\n }\n this.beatUnitViewBlock.querySelectorAll(\".beat-spacer\").forEach(spacer => spacer.remove());\n const barLength = this.beat.getTimeSigUp();\n const barCount = this.beat.getBarCount();\n let bars = 0;\n let i = -1;\n let spacersInserted = false;\n while (!spacersInserted) {\n i += barLength;\n const newSpacer = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", { classes: [\"beat-spacer\"] });\n const leftNeighbour = this.beatUnitViewBlock.children.item(i);\n if (leftNeighbour) {\n leftNeighbour.insertAdjacentElement(\"afterend\", newSpacer);\n }\n else {\n break;\n }\n i++;\n bars++;\n if (bars === barCount) {\n spacersInserted = true;\n }\n }\n }\n setupBeatUnits() {\n this.rebuildBeatUnitViews();\n this.buildBeatUnitViewBlock();\n this.respaceBeatUnits();\n }\n rebuild() {\n this.title = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"h3\", {\n innerText: this.beat.getName(),\n classes: [\"beat-title\"],\n });\n this.setupBeatUnits();\n if (!this.beatUnitViewBlock) {\n throw new Error(\"Beat unit block setup failed!\");\n }\n this.settingsView = new _BeatSettings_BeatSettingsView__WEBPACK_IMPORTED_MODULE_3__.default({ beat: this.beat });\n this.settingsToggleButton = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-settings-btn\"],\n innerText: \"Settings\",\n onclick: () => this.toggleSettings()\n });\n this.node = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-main\"],\n subs: [\n this.title,\n this.beatUnitViewBlock,\n ]\n }),\n this.settingsToggleButton,\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-settings-container\"],\n subs: [this.settingsView.render()],\n }),\n ],\n });\n return this.node;\n }\n}\nwindow.addEventListener(\"mouseup\", () => {\n BeatView.selectingUnits = false;\n BeatView.deselectingUnits = false;\n});\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/Beat/BeatView.ts?"); /***/ }), @@ -326,17 +326,37 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*******************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatGroupView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _Beat_BeatView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Beat/BeatView */ \"./src/ui/BeatGroup/Beat/BeatView.ts\");\n/* harmony import */ var _BeatGroupSettings_BeatGroupSettingsView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BeatGroupSettings/BeatGroupSettingsView */ \"./src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts\");\n\n\n\nclass BeatGroupView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n title;\n beatGroup;\n beatGroupSettingsView;\n beatViews = [];\n constructor(options) {\n super(options);\n this.beatGroup = options.beatGroup;\n this.title = options.title;\n }\n rebuild() {\n this.beatViews = [];\n for (let i = 0; i < this.beatGroup.getBeatCount(); i++) {\n this.beatViews.push(new _Beat_BeatView__WEBPACK_IMPORTED_MODULE_1__.default({ beat: this.beatGroup.getBeatByIndex(i) }));\n }\n this.beatGroupSettingsView = new _BeatGroupSettings_BeatGroupSettingsView__WEBPACK_IMPORTED_MODULE_2__.default({ beatGroup: this.beatGroup });\n return _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-group\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"h3\", { innerText: this.title }),\n this.beatGroupSettingsView.render(),\n ...this.beatViews.map(bv => bv.render())\n ],\n });\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/BeatGroupView.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatGroupView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _BeatGroupSettings_BeatGroupSettingsView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../BeatGroupSettings/BeatGroupSettingsView */ \"./src/ui/BeatGroupSettings/BeatGroupSettingsView.ts\");\n/* harmony import */ var _Beat_BeatView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Beat/BeatView */ \"./src/ui/BeatGroup/Beat/BeatView.ts\");\n\n\n\nclass BeatGroupView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n title;\n beatGroup;\n beatGroupSettingsView;\n beatViews = [];\n constructor(options) {\n super(options);\n this.beatGroup = options.beatGroup;\n this.title = options.title;\n }\n rebuild() {\n this.beatViews = [];\n for (let i = 0; i < this.beatGroup.getBeatCount(); i++) {\n this.beatViews.push(new _Beat_BeatView__WEBPACK_IMPORTED_MODULE_2__.default({ beat: this.beatGroup.getBeatByIndex(i) }));\n }\n this.beatGroupSettingsView = new _BeatGroupSettings_BeatGroupSettingsView__WEBPACK_IMPORTED_MODULE_1__.default({ beatGroup: this.beatGroup });\n return _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"beat-group\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"h3\", { innerText: this.title }),\n this.beatGroupSettingsView.render(),\n ...this.beatViews.map(bv => bv.render())\n ],\n });\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/BeatGroupView.ts?"); /***/ }), -/***/ "./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts": -/*!***************************************************************************!*\ - !*** ./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts ***! - \***************************************************************************/ +/***/ "./src/ui/BeatGroupSettings/BeatGroupSettingsView.ts": +/*!***********************************************************!*\ + !*** ./src/ui/BeatGroupSettings/BeatGroupSettingsView.ts ***! + \***********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatLikeLoopSettingsView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _Beat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../Beat */ \"./src/Beat.ts\");\n/* harmony import */ var _BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BeatLikeLoopSettings.css */ \"./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css\");\n\n\n\nclass BeatLikeLoopSettingsView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n beatLike;\n loopLengthInput;\n loopCheckbox;\n constructor(options) {\n super(options);\n this.beatLike = options.beatLike;\n this.setupBindings();\n }\n setupBindings() {\n this.beatLike.addSubscriber(this, \"all\");\n }\n notify(publisher, event) {\n if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.LoopLengthChanged) {\n this.loopLengthInput.value = this.beatLike.getLoopLength().toString();\n }\n else if (event === _Beat__WEBPACK_IMPORTED_MODULE_1__.BeatEvents.DisplayTypeChanged) {\n this.loopCheckbox.checked = this.beatLike.isLooping();\n }\n }\n rebuild() {\n this.loopLengthInput = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"input\", {\n classes: [\"loop-settings-loop-length\"],\n type: \"number\",\n value: this.beatLike.getLoopLength().toString(),\n oninput: (event) => {\n this.beatLike.setLoopLength(Number(event.target.value));\n },\n });\n this.loopCheckbox = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"input\", {\n classes: [\"loop-settings-loop-toggle\"],\n type: \"checkbox\",\n checked: this.beatLike.isLooping(),\n oninput: (event) => {\n this.beatLike.setLooping(event.target.checked);\n },\n });\n this.node = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"loop-settings\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"p\", { innerText: \"Looping:\" }),\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"loop-settings-option-group\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"loop-settings-option\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"label\", { innerText: \"Length:\" }),\n this.loopLengthInput,\n ],\n }),\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"loop-settings-option\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"label\", { innerText: \"On:\" }),\n this.loopCheckbox,\n ],\n }),\n ],\n }),\n ]\n });\n return this.node;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatGroupSettingsView)\n/* harmony export */ });\n/* harmony import */ var _BeatLikeLoopSettings_BeatLikeLoopSettingsView__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../BeatLikeLoopSettings/BeatLikeLoopSettingsView */ \"./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts\");\n/* harmony import */ var _BeatGroupSettings_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BeatGroupSettings.css */ \"./src/ui/BeatGroupSettings/BeatGroupSettings.css\");\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Widgets/NumberInput/NumberInputView */ \"./src/ui/Widgets/NumberInput/NumberInputView.ts\");\n\n\n\n\nclass BeatGroupSettingsView extends _UINode__WEBPACK_IMPORTED_MODULE_2__.default {\n beatGroup;\n barCountInput;\n timeSigUpInput;\n loopSettingsView;\n autoBeatLengthCheckbox;\n forceFullBarsCheckbox;\n autoBeatOptions;\n constructor(options) {\n super(options);\n this.beatGroup = options.beatGroup;\n this.beatGroup.addSubscriber(this, [\n \"BGE2\" /* BarCountChanged */,\n \"BGE3\" /* TimeSigUpChanged */,\n \"BE3\" /* DisplayTypeChanged */,\n ]);\n }\n notify(publisher, event) {\n if (event === \"BGE2\" /* BarCountChanged */) {\n this.barCountInput.setValue(this.beatGroup.getBarCount());\n }\n else if (event === \"BGE3\" /* TimeSigUpChanged */) {\n this.timeSigUpInput.setValue(this.beatGroup.getTimeSigUp());\n }\n else if (event === \"BE3\" /* DisplayTypeChanged */) {\n if (this.beatGroup.isLooping()) {\n this.autoBeatOptions.classList.add(\"visible\");\n }\n else {\n this.autoBeatOptions.classList.remove(\"visible\");\n }\n }\n }\n rebuild() {\n this.loopSettingsView = new _BeatLikeLoopSettings_BeatLikeLoopSettingsView__WEBPACK_IMPORTED_MODULE_0__.default({ beatLike: this.beatGroup });\n this.barCountInput = new _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_3__.default({\n label: \"Bars:\",\n initialValue: this.beatGroup.getBarCount(),\n setter: (input) => this.beatGroup.setBarCount(input),\n getter: () => this.beatGroup.getBarCount(),\n });\n this.timeSigUpInput = new _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_3__.default({\n label: \"Boxes per bar:\",\n initialValue: this.beatGroup.getTimeSigUp(),\n setter: (input) => this.beatGroup.setTimeSigUp(input),\n getter: () => this.beatGroup.getTimeSigUp(),\n });\n this.autoBeatLengthCheckbox = _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"input\", {\n type: \"checkbox\",\n checked: this.beatGroup.autoBeatLengthOn(),\n oninput: () => {\n this.beatGroup.setIsUsingAutoBeatLength(this.autoBeatLengthCheckbox.checked);\n },\n });\n this.forceFullBarsCheckbox = _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"input\", {\n type: \"checkbox\",\n checked: this.beatGroup.forcesFullBars(),\n oninput: () => {\n this.beatGroup.setForcesFullBars(this.forceFullBarsCheckbox.checked);\n },\n });\n this.autoBeatOptions = _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"beat-group-settings-option-group\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"label\", { innerText: \"Auto beat length:\" }),\n this.autoBeatLengthCheckbox,\n ],\n }),\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"label\", { innerText: \"Force full bars:\" }),\n this.forceFullBarsCheckbox,\n ],\n }),\n ]\n });\n this.node = _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"beat-group-settings\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", { innerText: \"Settings for beat\" }),\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"beat-group-settings-options\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"beat-group-settings-bar-count\", \"beat-group-settings-option\"],\n subs: [\n this.barCountInput.render(),\n ],\n }),\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"beat-group-settings-boxes\", \"beat-group-settings-option\"],\n subs: [\n this.timeSigUpInput.render(),\n ],\n }),\n this.loopSettingsView.render(),\n this.autoBeatOptions,\n ],\n }),\n ],\n });\n return this.node;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatGroupSettings/BeatGroupSettingsView.ts?"); + +/***/ }), + +/***/ "./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts": +/*!*****************************************************************!*\ + !*** ./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts ***! + \*****************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatLikeLoopSettingsView)\n/* harmony export */ });\n/* harmony import */ var _BeatLikeLoopSettings_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BeatLikeLoopSettings.css */ \"./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css\");\n/* harmony import */ var _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Widgets/NumberInput/NumberInputView */ \"./src/ui/Widgets/NumberInput/NumberInputView.ts\");\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../UINode */ \"./src/ui/UINode.ts\");\n\n\n\nclass BeatLikeLoopSettingsView extends _UINode__WEBPACK_IMPORTED_MODULE_2__.default {\n beatLike;\n loopLengthInput;\n loopCheckbox;\n constructor(options) {\n super(options);\n this.beatLike = options.beatLike;\n this.setupBindings();\n }\n setupBindings() {\n this.beatLike.addSubscriber(this, [\n \"BE4\" /* LoopLengthChanged */,\n \"BE3\" /* DisplayTypeChanged */\n ]);\n }\n notify(publisher, event) {\n if (event === \"BE4\" /* LoopLengthChanged */) {\n this.loopLengthInput.setValue(this.beatLike.getLoopLength());\n }\n else if (event === \"BE3\" /* DisplayTypeChanged */) {\n this.loopCheckbox.checked = this.beatLike.isLooping();\n }\n }\n rebuild() {\n this.loopLengthInput = new _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_1__.default({\n initialValue: this.beatLike.getLoopLength(),\n label: \"Length:\",\n onDecrement: () => this.beatLike.setLoopLength(this.beatLike.getLoopLength() - 1),\n onIncrement: () => this.beatLike.setLoopLength(this.beatLike.getLoopLength() + 1),\n onNewInput: (input) => this.beatLike.setLoopLength(input),\n });\n this.loopCheckbox = _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"input\", {\n classes: [\"loop-settings-loop-toggle\"],\n type: \"checkbox\",\n checked: this.beatLike.isLooping(),\n oninput: (event) => {\n this.beatLike.setLooping(event.target.checked);\n },\n });\n this.node = _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"loop-settings\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"p\", { innerText: \"Looping:\" }),\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"loop-settings-option-group\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"loop-settings-option\"],\n subs: [\n this.loopLengthInput.render(),\n ],\n }),\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"div\", {\n classes: [\"loop-settings-option\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_2__.default.make(\"label\", { innerText: \"On:\" }),\n this.loopCheckbox,\n ],\n }),\n ],\n }),\n ]\n });\n return this.node;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts?"); + +/***/ }), + +/***/ "./src/ui/BeatSettings/BeatSettingsView.ts": +/*!*************************************************!*\ + !*** ./src/ui/BeatSettings/BeatSettingsView.ts ***! + \*************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ BeatSettingsView)\n/* harmony export */ });\n/* harmony import */ var _BeatSettings_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BeatSettings.css */ \"./src/ui/BeatSettings/BeatSettings.css\");\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Widgets/NumberInput/NumberInputView */ \"./src/ui/Widgets/NumberInput/NumberInputView.ts\");\n/* harmony import */ var _BeatLikeLoopSettings_BeatLikeLoopSettingsView__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../BeatLikeLoopSettings/BeatLikeLoopSettingsView */ \"./src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts\");\n\n\n\n\nclass BeatSettingsView extends _UINode__WEBPACK_IMPORTED_MODULE_1__.default {\n beat;\n visible = false;\n timeSigUp;\n timeSigDown;\n barCountInput;\n loopSettingsView;\n constructor(options) {\n super(options);\n this.beat = options.beat;\n this.setupBindings();\n }\n setupBindings() {\n this.beat.addSubscriber(this, \"all\");\n }\n notify(publisher, event) {\n if (event === \"BE0\" /* NewTimeSig */) {\n this.timeSigUp.setValue(this.beat.getTimeSigUp());\n this.timeSigDown.setValue(this.beat.getTimeSigDown());\n }\n else if (event === \"BE1\" /* NewBarCount */) {\n this.barCountInput.setValue(this.beat.getBarCount());\n }\n }\n toggleVisible() {\n this.visible = !this.visible;\n if (this.visible) {\n this.node?.classList.add(\"visible\");\n }\n else {\n this.node?.classList.remove(\"visible\");\n }\n }\n isOpen() {\n return this.visible;\n }\n rebuild() {\n this.loopSettingsView = new _BeatLikeLoopSettings_BeatLikeLoopSettingsView__WEBPACK_IMPORTED_MODULE_3__.default({ beatLike: this.beat });\n this.timeSigUp = new _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_2__.default({\n initialValue: this.beat.getTimeSigUp(),\n setter: (value) => this.beat.setBarCount(value),\n getter: () => this.beat.getBarCount(),\n });\n this.timeSigDown = new _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_2__.default({\n initialValue: this.beat.getTimeSigDown(),\n setter: (value) => this.beat.setBarCount(value),\n getter: () => this.beat.getBarCount(),\n });\n this.barCountInput = new _Widgets_NumberInput_NumberInputView__WEBPACK_IMPORTED_MODULE_2__.default({\n label: \"Bar Count:\",\n initialValue: this.beat.getBarCount(),\n setter: (value) => this.beat.setBarCount(value),\n getter: () => this.beat.getBarCount(),\n });\n this.node = _UINode__WEBPACK_IMPORTED_MODULE_1__.default.make(\"div\", {\n classes: [\"beat-settings\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_1__.default.make(\"div\", {\n classes: [\"beat-settings-time-sig\", \"beat-settings-option-group\", \"beat-settings-option\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_1__.default.make(\"label\", { innerText: \"Time Signature:\" }),\n this.timeSigUp.render(),\n this.timeSigDown.render(),\n ]\n }),\n _UINode__WEBPACK_IMPORTED_MODULE_1__.default.make(\"div\", {\n classes: [\"beat-settings-bar\", \"beat-settings-option-group\", \"beat-settings-option\"],\n subs: [this.barCountInput.render()],\n }),\n this.loopSettingsView.render(),\n ],\n });\n return this.node;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/BeatSettings/BeatSettingsView.ts?"); /***/ }), @@ -346,7 +366,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*********************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ RootView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _BeatGroup_BeatGroupView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../BeatGroup/BeatGroupView */ \"./src/ui/BeatGroup/BeatGroupView.ts\");\n/* harmony import */ var _Root_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Root.css */ \"./src/ui/Root/Root.css\");\n\n\n\nclass RootView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n title;\n beatGroupView;\n mainBeatGroup;\n constructor(options) {\n super(options);\n this.beatGroupView = new _BeatGroup_BeatGroupView__WEBPACK_IMPORTED_MODULE_1__.default({ title: \"THE BEAT\", beatGroup: options.mainBeatGroup });\n this.mainBeatGroup = options.mainBeatGroup;\n this.title = options.title;\n }\n rebuild() {\n return _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"root\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"h1\", { innerText: this.title, classes: [\"title\"] }),\n this.beatGroupView.render(),\n ],\n });\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/Root/RootView.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ RootView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _BeatGroup_BeatGroupView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../BeatGroup/BeatGroupView */ \"./src/ui/BeatGroup/BeatGroupView.ts\");\n/* harmony import */ var _Root_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Root.css */ \"./src/ui/Root/Root.css\");\n\n\n\nclass RootView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n title;\n beatGroupView;\n mainBeatGroup;\n constructor(options) {\n super(options);\n this.beatGroupView = new _BeatGroup_BeatGroupView__WEBPACK_IMPORTED_MODULE_1__.default({ title: \"THE BEAT\", beatGroup: options.mainBeatGroup });\n this.mainBeatGroup = options.mainBeatGroup;\n this.title = options.title;\n }\n rebuild() {\n return _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"root\"],\n subs: [\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"h1\", { innerText: this.title, classes: [\"root-title\"] }),\n this.beatGroupView.render(),\n ],\n });\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/Root/RootView.ts?"); /***/ }), @@ -360,6 +380,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), +/***/ "./src/ui/Widgets/NumberInput/NumberInputView.ts": +/*!*******************************************************!*\ + !*** ./src/ui/Widgets/NumberInput/NumberInputView.ts ***! + \*******************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ NumberInputView)\n/* harmony export */ });\n/* harmony import */ var _UINode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../UINode */ \"./src/ui/UINode.ts\");\n/* harmony import */ var _NumberInput_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./NumberInput.css */ \"./src/ui/Widgets/NumberInput/NumberInput.css\");\n\n\nclass NumberInputView extends _UINode__WEBPACK_IMPORTED_MODULE_0__.default {\n labelElement;\n mainElement;\n inputElement;\n value;\n label;\n onIncrement;\n onDecrement;\n setter;\n getter;\n onNewInput;\n constructor(options) {\n super(options);\n this.label = options.label ?? \"\";\n this.value = options.initialValue ?? 0;\n this.onDecrement = options.onDecrement ?? null;\n this.setter = options.setter ?? null;\n this.getter = options.getter ?? null;\n this.onIncrement = options.onIncrement ?? null;\n this.onNewInput = options.onNewInput ?? null;\n }\n setLabel(newLabel) {\n if (newLabel !== null) {\n this.label = newLabel;\n this.labelElement.innerText = newLabel;\n this.labelElement.classList.add(\"visible\");\n }\n else {\n this.label = newLabel;\n this.labelElement.innerText = \"\";\n this.labelElement.classList.remove(\"visible\");\n }\n }\n setValue(value) {\n this.value = value;\n this.inputElement.valueAsNumber = value;\n }\n rebuild() {\n this.labelElement = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"label\", {\n classes: [\"number-input-label\"],\n innerText: this.label ?? \"\",\n });\n if (this.label !== null) {\n this.labelElement.classList.add(\"visible\");\n }\n this.inputElement = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"input\", {\n type: \"number\",\n classes: [\"number-input-input\"],\n valueAsNumber: this.value,\n oninput: (event) => {\n const input = event.target.valueAsNumber;\n if (!isNaN(input)) {\n if (this.onNewInput) {\n this.onNewInput(input);\n }\n else if (this.setter) {\n this.setter(input);\n }\n }\n },\n });\n this.mainElement = _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"div\", {\n classes: [\"number-input\"],\n subs: [\n this.labelElement,\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"button\", {\n innerText: \"-\",\n classes: [\"number-input-button\", \"number-input-dec\"],\n onclick: () => {\n if (this.onDecrement) {\n this.onDecrement();\n }\n else if (this.setter && this.getter) {\n this.setter(this.getter() - 1);\n }\n },\n }),\n this.inputElement,\n _UINode__WEBPACK_IMPORTED_MODULE_0__.default.make(\"button\", {\n innerText: \"+\",\n classes: [\"number-input-button\", \"number-input-inc\"],\n onclick: () => {\n if (this.onIncrement) {\n this.onIncrement();\n }\n else if (this.setter && this.getter) {\n this.setter(this.getter() + 1);\n }\n },\n }),\n ],\n });\n return this.mainElement;\n }\n}\n\n\n//# sourceURL=webpack://arne-drums/./src/ui/Widgets/NumberInput/NumberInputView.ts?"); + +/***/ }), + /***/ "./src/utils.ts": /*!**********************!*\ !*** ./src/utils.ts ***! diff --git a/src/Beat.ts b/src/Beat.ts index 91b716f..3475308 100644 --- a/src/Beat.ts +++ b/src/Beat.ts @@ -73,6 +73,14 @@ export default class Beat implements IPublisher, BeatLike { this.publisher.notifySubs(BeatEvents.NewTimeSig); } + setTimeSigUp(timeSigUp: number): void { + this.setTimeSignature({up: timeSigUp}); + } + + setTimeSigDown(timeSigUp: number): void { + this.setTimeSignature({down: timeSigUp}); + } + setBarCount(barCount: number): void { if (!isPosInt(barCount) || barCount == this.barCount) { barCount = this.barCount; diff --git a/src/BeatGroup.ts b/src/BeatGroup.ts index 50ff644..dc29ecd 100644 --- a/src/BeatGroup.ts +++ b/src/BeatGroup.ts @@ -139,6 +139,10 @@ export default class BeatGroup implements IPublisher(publisher: IPublisher, event: "all" | T[] | T): void { - if (event === BeatEvents.NewTimeSig) { - this.timeSigUp.value = this.beat.getTimeSigUp().toString(); - this.timeSigDown.value = this.beat.getTimeSigDown().toString(); - } else if (event === BeatEvents.NewBarCount) { - this.barCountInput.value = this.beat.getBarCount().toString(); - } - } - - toggleVisible(): void { - this.visible = !this.visible; - if (this.visible) { - this.node?.classList.add("visible"); - } else { - this.node?.classList.remove("visible"); - } - } - - isOpen(): boolean { - return this.visible; - } - - rebuild(): HTMLElement { - this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat}); - this.timeSigUp = UINode.make("input", { - classes: ["time-sig-up"], - type: "number", - value: this.beat.getTimeSigUp().toString(), - oninput: (event: Event) => { - this.beat.setTimeSignature({up: Number((event.target as HTMLInputElement).value) }); - }, - }); - this.timeSigDown = UINode.make("input", { - classes: ["beat-settings-time-sig-down"], - type: "number", - value: this.beat.getTimeSigDown().toString(), - oninput: (event: Event) => { - this.beat.setTimeSignature({down: Number((event.target as HTMLInputElement).value) }); - }, - }); - this.barCountInput = UINode.make("input", { - classes: ["beat-settings-bars-count"], - type: "number", - value: this.beat.getBarCount().toString(), - oninput: (event: Event) => { - this.beat.setBarCount(Number((event.target as HTMLInputElement).value)); - }, - }); - this.node = UINode.make("div", { - classes: ["beat-settings"], - subs: [ - UINode.make("div", { - classes: ["beat-settings-time-sig", "beat-settings-option-group", "beat-settings-option"], - subs: [ - UINode.make("label", {innerText: "Time Signature:"}), - this.timeSigUp, - this.timeSigDown, - ] - }), - UINode.make("div", { - classes: ["beat-settings-bar", "beat-settings-option-group", "beat-settings-option"], - subs: [ - UINode.make("label", {innerText: "Bar Count:"}), - this.barCountInput, - ], - }), - this.loopSettingsView.render(), - ], - }); - return this.node; - } -} diff --git a/src/ui/BeatGroup/Beat/BeatView.ts b/src/ui/BeatGroup/Beat/BeatView.ts index 57794a2..68e27d4 100644 --- a/src/ui/BeatGroup/Beat/BeatView.ts +++ b/src/ui/BeatGroup/Beat/BeatView.ts @@ -1,10 +1,10 @@ import UINode, {UINodeOptions} from "../../UINode"; import Beat, {BeatEvents} from "../../../Beat"; import {IPublisher} from "../../../Publisher"; -import BeatSettingsView from "./BeatSettings/BeatSettingsView"; import ISubscriber from "../../../Subscriber"; import BeatUnitView from "./BeatUnit/BeatUnitView"; import "./Beat.css"; +import BeatSettingsView from "../../BeatSettings/BeatSettingsView"; export type BeatUINodeOptions = UINodeOptions & { beat: Beat, diff --git a/src/ui/BeatGroup/BeatGroupView.ts b/src/ui/BeatGroup/BeatGroupView.ts index d5f9460..46bd36b 100644 --- a/src/ui/BeatGroup/BeatGroupView.ts +++ b/src/ui/BeatGroup/BeatGroupView.ts @@ -1,7 +1,7 @@ import UINode, {UINodeOptions} from "../UINode"; import BeatGroup from "../../BeatGroup"; +import BeatGroupSettingsView from "../BeatGroupSettings/BeatGroupSettingsView"; import BeatView from "./Beat/BeatView"; -import BeatGroupSettingsView from "./BeatGroupSettings/BeatGroupSettingsView"; export type BeatGroupUINodeOptions = UINodeOptions & { title: string, diff --git a/src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css b/src/ui/BeatGroupSettings/BeatGroupSettings.css similarity index 100% rename from src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css rename to src/ui/BeatGroupSettings/BeatGroupSettings.css diff --git a/src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts b/src/ui/BeatGroupSettings/BeatGroupSettingsView.ts similarity index 72% rename from src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts rename to src/ui/BeatGroupSettings/BeatGroupSettingsView.ts index 36fd928..42d6452 100644 --- a/src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts +++ b/src/ui/BeatGroupSettings/BeatGroupSettingsView.ts @@ -1,11 +1,11 @@ -import BeatGroup from "../../../BeatGroup"; -import UINode, {UINodeOptions} from "../../UINode"; -import ISubscriber from "../../../Subscriber"; -import {IPublisher} from "../../../Publisher"; -import {BeatGroupEvents} from "../../../BeatGroup"; import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView"; import "./BeatGroupSettings.css"; -import {BeatEvents} from "../../../Beat"; +import UINode, {UINodeOptions} from "../UINode"; +import NumberInputView from "../Widgets/NumberInput/NumberInputView"; +import ISubscriber from "../../Subscriber"; +import BeatGroup, {BeatGroupEvents} from "../../BeatGroup"; +import {IPublisher} from "../../Publisher"; +import {BeatEvents} from "../../Beat"; export type BeatGroupSettingsUINodeOptions = UINodeOptions & { beatGroup: BeatGroup, @@ -13,8 +13,8 @@ export type BeatGroupSettingsUINodeOptions = UINodeOptions & { export default class BeatGroupSettingsView extends UINode implements ISubscriber { private beatGroup: BeatGroup; - private barCountInput!: HTMLInputElement; - private timeSigUpInput!: HTMLInputElement; + private barCountInput!: NumberInputView; + private timeSigUpInput!: NumberInputView; private loopSettingsView!: BeatLikeLoopSettingsView; private autoBeatLengthCheckbox!: HTMLInputElement; private forceFullBarsCheckbox!: HTMLInputElement; @@ -32,9 +32,9 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber notify(publisher: IPublisher, event: "all" | T[] | T): void { if (event === BeatGroupEvents.BarCountChanged) { - this.barCountInput.valueAsNumber = this.beatGroup.getBeatByIndex(0).getBarCount(); + this.barCountInput.setValue(this.beatGroup.getBarCount()); } else if (event === BeatGroupEvents.TimeSigUpChanged) { - this.timeSigUpInput.valueAsNumber = this.beatGroup.getBeatByIndex(0).getTimeSigUp(); + this.timeSigUpInput.setValue(this.beatGroup.getTimeSigUp()); } else if (event === BeatEvents.DisplayTypeChanged) { if (this.beatGroup.isLooping()) { this.autoBeatOptions.classList.add("visible"); @@ -46,19 +46,17 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber rebuild(): HTMLElement { this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beatGroup}); - this.barCountInput = UINode.make("input", { - type: "number", - value: this.beatGroup.getBeatByIndex(0).getBarCount().toString(), - oninput: () => { - this.beatGroup.setBarCount(Number(this.barCountInput.value)); - }, + this.barCountInput = new NumberInputView({ + label: "Bars:", + initialValue: this.beatGroup.getBarCount(), + setter: (input: number) => this.beatGroup.setBarCount(input), + getter: () => this.beatGroup.getBarCount(), }); - this.timeSigUpInput = UINode.make("input", { - type: "number", - value: this.beatGroup.getBeatByIndex(0).getTimeSigUp().toString(), - oninput: () => { - this.beatGroup.setTimeSigUp(Number(this.timeSigUpInput.value)); - }, + this.timeSigUpInput = new NumberInputView({ + label: "Boxes per bar:", + initialValue: this.beatGroup.getTimeSigUp(), + setter: (input: number) => this.beatGroup.setTimeSigUp(input), + getter: () => this.beatGroup.getTimeSigUp(), }); this.autoBeatLengthCheckbox = UINode.make("input", { type: "checkbox", @@ -101,15 +99,13 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber UINode.make("div", { classes: ["beat-group-settings-bar-count", "beat-group-settings-option"], subs: [ - UINode.make("label", { innerText: "Bars:" }), - this.barCountInput, + this.barCountInput.render(), ], }), UINode.make("div", { classes: ["beat-group-settings-boxes", "beat-group-settings-option"], subs: [ - UINode.make("label", { innerText: "Boxes per bar:" }), - this.timeSigUpInput, + this.timeSigUpInput.render(), ], }), this.loopSettingsView.render(), diff --git a/src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css b/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css similarity index 100% rename from src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css rename to src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css diff --git a/src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts b/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts similarity index 71% rename from src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts rename to src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts index 7556078..2d1e0fe 100644 --- a/src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts +++ b/src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts @@ -1,9 +1,10 @@ -import BeatLike from "../../../BeatLike"; -import UINode, {UINodeOptions} from "../../UINode"; -import ISubscriber from "../../../Subscriber"; -import {IPublisher} from "../../../Publisher"; -import {BeatEvents} from "../../../Beat"; import "./BeatLikeLoopSettings.css"; +import BeatLike from "../../BeatLike"; +import NumberInputView from "../Widgets/NumberInput/NumberInputView"; +import ISubscriber from "../../Subscriber"; +import UINode, {UINodeOptions} from "../UINode"; +import {BeatEvents} from "../../Beat"; +import {IPublisher} from "../../Publisher"; export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & { beatLike: BeatLike, @@ -11,7 +12,7 @@ export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & { export default class BeatLikeLoopSettingsView extends UINode implements ISubscriber { private beatLike: BeatLike; - private loopLengthInput!: HTMLInputElement; + private loopLengthInput!: NumberInputView; private loopCheckbox!: HTMLInputElement; constructor(options: BeatLikeLoopSettingsViewUINodeOptions) { @@ -29,20 +30,19 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri notify(publisher: IPublisher, event: "all" | T[] | T): void { if (event === BeatEvents.LoopLengthChanged) { - this.loopLengthInput.value = this.beatLike.getLoopLength().toString(); + this.loopLengthInput.setValue(this.beatLike.getLoopLength()); } else if (event === BeatEvents.DisplayTypeChanged) { this.loopCheckbox.checked = this.beatLike.isLooping(); } } rebuild(): HTMLElement { - this.loopLengthInput = UINode.make("input", { - classes: ["loop-settings-loop-length"], - type: "number", - value: this.beatLike.getLoopLength().toString(), - oninput: (event: Event) => { - this.beatLike.setLoopLength(Number((event.target as HTMLInputElement).value)); - }, + this.loopLengthInput = new NumberInputView({ + initialValue: this.beatLike.getLoopLength(), + label: "Length:", + onDecrement: () => this.beatLike.setLoopLength(this.beatLike.getLoopLength() - 1), + onIncrement: () => this.beatLike.setLoopLength(this.beatLike.getLoopLength() + 1), + onNewInput: (input: number) => this.beatLike.setLoopLength(input), }); this.loopCheckbox = UINode.make("input", { classes: ["loop-settings-loop-toggle"], @@ -62,8 +62,7 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri UINode.make("div", { classes: ["loop-settings-option"], subs: [ - UINode.make("label", {innerText: "Length:"}), - this.loopLengthInput, + this.loopLengthInput.render(), ], }), UINode.make("div", { diff --git a/src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css b/src/ui/BeatSettings/BeatSettings.css similarity index 100% rename from src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css rename to src/ui/BeatSettings/BeatSettings.css diff --git a/src/ui/BeatSettings/BeatSettingsView.ts b/src/ui/BeatSettings/BeatSettingsView.ts new file mode 100644 index 0000000..bb5f1bf --- /dev/null +++ b/src/ui/BeatSettings/BeatSettingsView.ts @@ -0,0 +1,91 @@ +import "./BeatSettings.css"; +import Beat, {BeatEvents} from "../../Beat"; +import UINode, {UINodeOptions} from "../UINode"; +import ISubscriber from "../../Subscriber"; +import NumberInputView from "../Widgets/NumberInput/NumberInputView"; +import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView"; +import {IPublisher} from "../../Publisher"; + +export type BeatSettingsViewUINodeOptions = UINodeOptions & { + beat: Beat, +}; + +export default class BeatSettingsView extends UINode implements ISubscriber { + private beat: Beat; + private visible = false; + private timeSigUp!: NumberInputView; + private timeSigDown!: NumberInputView; + private barCountInput!: NumberInputView; + private loopSettingsView!: BeatLikeLoopSettingsView; + + constructor(options: BeatSettingsViewUINodeOptions) { + super(options); + this.beat = options.beat; + this.setupBindings(); + } + + private setupBindings() { + this.beat.addSubscriber(this, "all"); + } + + notify(publisher: IPublisher, event: "all" | T[] | T): void { + if (event === BeatEvents.NewTimeSig) { + this.timeSigUp.setValue(this.beat.getTimeSigUp()); + this.timeSigDown.setValue(this.beat.getTimeSigDown()); + } else if (event === BeatEvents.NewBarCount) { + this.barCountInput.setValue(this.beat.getBarCount()); + } + } + + toggleVisible(): void { + this.visible = !this.visible; + if (this.visible) { + this.node?.classList.add("visible"); + } else { + this.node?.classList.remove("visible"); + } + } + + isOpen(): boolean { + return this.visible; + } + + rebuild(): HTMLElement { + this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat}); + this.timeSigUp = new NumberInputView({ + initialValue: this.beat.getTimeSigUp(), + setter: (value: number) => this.beat.setBarCount(value), + getter: () => this.beat.getBarCount(), + }); + this.timeSigDown = new NumberInputView({ + initialValue: this.beat.getTimeSigDown(), + setter: (value: number) => this.beat.setBarCount(value), + getter: () => this.beat.getBarCount(), + }); + this.barCountInput = new NumberInputView({ + label: "Bar Count:", + initialValue: this.beat.getBarCount(), + setter: (value: number) => this.beat.setBarCount(value), + getter: () => this.beat.getBarCount(), + }); + this.node = UINode.make("div", { + classes: ["beat-settings"], + subs: [ + UINode.make("div", { + classes: ["beat-settings-time-sig", "beat-settings-option-group", "beat-settings-option"], + subs: [ + UINode.make("label", {innerText: "Time Signature:"}), + this.timeSigUp.render(), + this.timeSigDown.render(), + ] + }), + UINode.make("div", { + classes: ["beat-settings-bar", "beat-settings-option-group", "beat-settings-option"], + subs: [this.barCountInput.render()], + }), + this.loopSettingsView.render(), + ], + }); + return this.node; + } +} diff --git a/src/ui/Root/Root.css b/src/ui/Root/Root.css index 2a4c7c2..d404de6 100644 --- a/src/ui/Root/Root.css +++ b/src/ui/Root/Root.css @@ -1,14 +1,77 @@ +:root { + --color-ui-accent-light: #07afb6; + --color-ui-accent-dark: #00888b; + --color-ui-neutral-light: #fdfdfe; + --color-ui-neutral-dark: #8b8b8b; + --color-ui-neutral-dark-hover: #a1a1a1; + --color-bg-light: #464646; + --color-bg-dark: #282828; + --color-p-light: #fafafa; + --color-p-dark: #282828; + --color-title-light: #fafafa; + --color-title-dark: #282828; +} + +body { + background-color: var(--color-bg-dark); + color: var(--color-p-light); +} + .root { + background-color: var(--color-bg-light); margin-left: 10em; margin-right: 10em; } -.root .title { +.root-title { + color: var(--color-title-light); text-align: center; } -.root input[type="number"] { - width: 5em; +input[type="checkbox"] { + position: relative; + width: 2em; + height: 1em; + padding: 0; + margin: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +input[type="checkbox"]::before { + width: 2em; + height: 1em; + border-radius: 1em; + background-color: var(--color-ui-accent-dark); + display: block; + content: ""; + z-index: 0; + position: absolute; + transition: background-color 200ms; +} + +input[type="checkbox"]:checked::before { + background-color: var(--color-ui-accent-light); +} + +input[type="checkbox"]::after { + position: absolute; + width: 1em; + height: 1em; + border-radius: 1em; + border-color: var(--color-ui-neutral-dark); + border-width: 1px; + background-color: var(--color-ui-neutral-light); + display: block; + content: ""; + z-index: 1; + right: 1em; + transition: right 200ms; +} + +input[type="checkbox"]:checked::after { + right: 0; } * { diff --git a/src/ui/Root/RootView.ts b/src/ui/Root/RootView.ts index a33bd34..0556d43 100644 --- a/src/ui/Root/RootView.ts +++ b/src/ui/Root/RootView.ts @@ -24,7 +24,7 @@ export default class RootView extends UINode { return UINode.make("div", { classes: ["root"], subs: [ - UINode.make("h1", {innerText: this.title, classes: ["title"]}), + UINode.make("h1", {innerText: this.title, classes: ["root-title"]}), this.beatGroupView.render(), ], }); diff --git a/src/ui/Widgets/NumberInput/NumberInput.css b/src/ui/Widgets/NumberInput/NumberInput.css new file mode 100644 index 0000000..4f54ebb --- /dev/null +++ b/src/ui/Widgets/NumberInput/NumberInput.css @@ -0,0 +1,35 @@ +input[type="number"].number-input-input { + -webkit-appearance: textfield; + -moz-appearance: textfield; + text-align: center; + width: 3em; + border-style: none; + border-width: 0; + border-radius: 0; + background-color: var(--color-ui-neutral-light); + color: var(--color-p-dark) +} + +input[type="number"].number-input-input::-webkit-inner-spin-button, +input[type="number"].number-input-input::-webkit-outer-spin-button { + -webkit-appearance: none; +} + +.number-input-button { + border-width: 0; + background-color: var(--color-ui-neutral-dark); + color: var(--color-ui-neutral-light); + cursor: pointer; +} + +.number-input-button:hover { + background-color: var(--color-ui-neutral-dark-hover); +} + +.number-input-inc { + border-radius: 0 0.5em 0.5em 0; +} + +.number-input-dec { + border-radius: 0.5em 0 0 0.5em; +} diff --git a/src/ui/Widgets/NumberInput/NumberInputView.ts b/src/ui/Widgets/NumberInput/NumberInputView.ts new file mode 100644 index 0000000..6bd2040 --- /dev/null +++ b/src/ui/Widgets/NumberInput/NumberInputView.ts @@ -0,0 +1,121 @@ +import UINode, { UINodeOptions } from "../../UINode"; +import "./NumberInput.css"; + +type NumberInputUINodeOptionsBase = UINodeOptions & { + label?: string, + initialValue?: number, +} + +type NumberInputUINodeOptionsIncDecInput = NumberInputUINodeOptionsBase & { + onIncrement: () => void, + onDecrement: () => void, + onNewInput: (input: number) => void, + setter?: never, + getter?: never, +}; + +type NumberInputUINodeOptionsGetSet = NumberInputUINodeOptionsBase & { + onIncrement?: never, + onDecrement?: never, + onNewInput?: never, + setter: (input: number) => void, + getter: () => number, +}; + +export type NumberInputUINodeOptions = NumberInputUINodeOptionsGetSet | NumberInputUINodeOptionsIncDecInput; + +export default class NumberInputView extends UINode { + private labelElement!: HTMLLabelElement; + private mainElement!: HTMLDivElement; + private inputElement!: HTMLInputElement; + private value: number; + private label: string | null; + private onIncrement: (() => void) | null; + private onDecrement: (() => void) | null; + private setter: ((input: number) => void) | null; + private getter: (() => number) | null; + private onNewInput: ((input: number) => void) | null; + + constructor(options: NumberInputUINodeOptions) { + super(options); + this.label = options.label ?? ""; + this.value = options.initialValue ?? 0; + this.onDecrement = options.onDecrement ?? null; + this.setter = options.setter ?? null; + this.getter = options.getter ?? null; + this.onIncrement = options.onIncrement ?? null; + this.onNewInput = options.onNewInput ?? null; + } + + setLabel(newLabel: string | null): void { + if (newLabel !== null) { + this.label = newLabel; + this.labelElement.innerText = newLabel; + this.labelElement.classList.add("visible"); + } else { + this.label = newLabel; + this.labelElement.innerText = ""; + this.labelElement.classList.remove("visible"); + } + } + + setValue(value: number): void { + this.value = value; + this.inputElement.valueAsNumber = value; + } + + rebuild(): HTMLDivElement { + this.labelElement = UINode.make("label", { + classes: ["number-input-label"], + innerText: this.label ?? "", + }); + if (this.label !== null) { + this.labelElement.classList.add("visible"); + } + this.inputElement = UINode.make("input", { + type: "number", + classes: ["number-input-input"], + valueAsNumber: this.value, + oninput: (event: Event) => { + const input = (event.target as HTMLInputElement).valueAsNumber; + if (!isNaN(input)) { + if (this.onNewInput) { + this.onNewInput(input); + } else if (this.setter) { + this.setter(input); + } + } + }, + }); + this.mainElement = UINode.make("div", { + classes: ["number-input"], + subs: [ + this.labelElement, + UINode.make("button", { + innerText: "-", + classes: ["number-input-button", "number-input-dec"], + onclick: () => { + if (this.onDecrement) { + this.onDecrement(); + } else if (this.setter && this.getter) { + this.setter(this.getter() - 1); + } + }, + }), + this.inputElement, + UINode.make("button", { + innerText: "+", + classes: ["number-input-button", "number-input-inc"], + onclick: () => { + if (this.onIncrement) { + this.onIncrement(); + } else if (this.setter && this.getter) { + this.setter(this.getter() + 1); + } + }, + }), + ], + }); + return this.mainElement; + } +} \ No newline at end of file