diff --git a/README.md b/README.md index 5b1d810..5649273 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ If you wish to install these tools I encourage you to look into their documentat - [Flow.js](https://flowtype.org/) (requires .flowconfig file) - [Ramda.js](http://ramdajs.com/) - [Ramda-fantasy](https://github.com/ramda/ramda-fantasy) +- [RxJs](https://rxjs-dev.firebaseapp.com/guide/overview) - [Babel](https://babeljs.io/) (requires extra plugins and .babelrc file) - [Webpack](https://webpack.github.io/docs/) - [Node-SASS](https://github.com/sass/node-sass) diff --git a/bundle/bundle.js b/bundle/bundle.js index 2e1b179..8ed247e 100644 --- a/bundle/bundle.js +++ b/bundle/bundle.js @@ -1,6 +1,30 @@ /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ +/***/ "./bundle/files.js": +/*!*************************!*\ + !*** ./bundle/files.js ***! + \*************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _sass_exercises_sass__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../sass/exercises.sass */ "./sass/exercises.sass"); +/* harmony import */ var _fp_exercises_string_play_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../fp-exercises/string-play.js */ "./fp-exercises/string-play.js"); +/* harmony import */ var _fp_exercises_string_play_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_fp_exercises_string_play_js__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _fp_exercises_array_play_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../fp-exercises/array-play.js */ "./fp-exercises/array-play.js"); +/* harmony import */ var _fp_exercises_array_play_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_fp_exercises_array_play_js__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _fp_exercises_rxjs_play_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../fp-exercises/rxjs-play.js */ "./fp-exercises/rxjs-play.js"); +/* global require: true */ +//Styles + //Exercises + + + + //Projects + +/***/ }), + /***/ "./fp-exercises/array-play.js": /*!************************************!*\ !*** ./fp-exercises/array-play.js ***! @@ -112,6 +136,131 @@ capitalize_button.onclick = function () { /***/ }), +/***/ "./fp-exercises/rxjs-play.js": +/*!***********************************!*\ + !*** ./fp-exercises/rxjs-play.js ***! + \***********************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/internal/observable/fromEvent.js"); +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +/* global require: true */ + +var jsButton = document.querySelector('#jsButton'); +var rxjsButton = document.querySelector('#rxjsButton'); +var startGame = document.querySelector('#startGame'); +var resetGame = document.querySelector('#resetGame'); +var resultDiv = document.querySelector('.button-click'); +var timeElem = document.querySelector('#time'); +var scorerElem = document.querySelector('#scorer'); +var team1Elem = document.querySelector('#team1'); +var team2Elem = document.querySelector('#team2'); +var team1Input = document.querySelector('[name="team1Name"]'); +var team2Input = document.querySelector('[name="team2Name"]'); +jsButton.addEventListener('click', function (e) { + resultDiv.innerHTML = "You clicked JS button"; +}); +rxjs__WEBPACK_IMPORTED_MODULE_0__.fromEvent(rxjsButton, 'click').subscribe(function (e) { + resultDiv.innerHTML = "You clicked RxJs button"; +}); // Live score section + +// _NOTE_ +// Finish reset functionality and playback functionality +// We need to first keep track of time left in a quarter (12 mins.) Yes some of this is borrowed code. +var team1 = { + teamNum: 1, + teamName: "team1", + score: 0 +}; +var team2 = { + teamNum: 2, + teamName: "team2", + score: 0 +}; +var playerList1 = ['Jim Brown', 'Bill Lancer', 'Kevin Basely', 'Shawn Dwight', 'Mike Piere']; +var playerList2 = ['Remelo Smith', 'Quantavious Jackson', 'Blake Booker', 'Devin Walker', 'Mike Monroe']; +var twelveMins = 720000; +var scoreRecord = []; + +function stopInterval(intervalId, clearTime) { + setTimeout(function () { + clearInterval(intervalId); + }, clearTime); +} + +function startTimer(duration) { + var timer = duration, + minutes, + seconds; + var timerId = setInterval(function () { + minutes = parseInt(timer / 60, 10); + seconds = parseInt(timer % 60, 10); + minutes = minutes < 10 ? "0" + minutes : minutes; + seconds = seconds < 10 ? "0" + seconds : seconds; + timeElem.textContent = minutes + ":" + seconds; + + if (--timer < 0) { + timer = duration; + } + }, 1000); + updateScore(); // Clear interval after 12 minutes + + stopInterval(timerId, twelveMins); +} + +function updateScore() { + // Mock an update every 5 seconds + var timerId = setInterval(function () { + // Generate an increase in score by 2 or 3 for either team 1 or team 2 name the player that scored. + var randomTeam = Math.floor(Math.random() * 2) + 1; + var randomIndex = Math.floor(Math.random() * 4) + 0; + var score = Math.floor(Math.random() * 3) + 1; + + switch (randomTeam) { + case 1: + team1.scorer = "".concat(team1.teamName, ": ").concat(playerList1[randomIndex], " ").concat(score, "pts"); + team1.score = score + team1.score; + scoreRecord.push(_objectSpread({}, team1)); + break; + + case 2: + team2.scorer = "".concat(team2.teamName, ": {playerList2[randomIndex]} ").concat(score, "pts"); + team2.score = score + team2.score; + scoreRecord.push(_objectSpread({}, team2)); + + default: + break; + } // insert score update to elements + // debugger + + + team1Elem.innerHTML = "".concat(team1.score); + team2Elem.innerHTML = "".concat(team2.score); + scorerElem.innerHTML = "".concat(scoreRecord.pop().scorer); + }, 5000); // Clear interval after 12 minutes + + stopInterval(timerId, twelveMins); +} + +team2Input.addEventListener('change', function (e) { + team2.teamName = e.target.value; +}); +team1Input.addEventListener('change', function (e) { + team1.teamName = e.target.value; +}); +startGame.addEventListener('click', function () { + startTimer(60 * 12); +}); + +/***/ }), + /***/ "./fp-exercises/string-play.js": /*!*************************************!*\ !*** ./fp-exercises/string-play.js ***! @@ -181,81 +330,131 @@ reverse_button.onclick = function () { /***/ }), -/***/ "./node_modules/css-loader/index.js!./node_modules/sass-loader/dist/cjs.js!./sass/exercises.sass": -/*!*******************************************************************************************************!*\ - !*** ./node_modules/css-loader/index.js!./node_modules/sass-loader/dist/cjs.js!./sass/exercises.sass ***! - \*******************************************************************************************************/ -/***/ ((module, exports, __webpack_require__) => { - -exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(); -// imports - +/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/exercises.sass": +/*!**********************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./sass/exercises.sass ***! + \**********************************************************************************************************/ +/***/ ((module, __webpack_exports__, __webpack_require__) => { -// module -exports.push([module.id, "body {\n background: lightgray !important;\n font-family: Helevetica, sans-serif;\n font-size: 18px; }\n body h1 {\n text-align: center; }\n\n.string-play-section,\n.array-play-section {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 960px;\n min-height: 800px;\n margin: 20px auto;\n padding: 20px;\n border-radius: 5px;\n background-color: white; }\n .string-play-section .string-input,\n .string-play-section .array-input,\n .array-play-section .string-input,\n .array-play-section .array-input {\n width: 400px;\n padding: 10px;\n margin-bottom: 20px;\n border: none;\n border-bottom: 2px solid red;\n font-size: 16px;\n font-weight: bold; }\n .string-play-section .string-input:focus,\n .string-play-section .array-input:focus,\n .array-play-section .string-input:focus,\n .array-play-section .array-input:focus {\n outline: none; }\n .string-play-section .text-display,\n .array-play-section .text-display {\n margin-bottom: 30px; }\n .string-play-section .string-buttons button,\n .string-play-section .array-buttons button,\n .string-play-section .insert-item,\n .array-play-section .string-buttons button,\n .array-play-section .array-buttons button,\n .array-play-section .insert-item {\n background-color: #90a6e8;\n padding: 10px;\n width: 140px;\n border: none;\n font-size: 16px;\n transition: transform .3s ease-in-out; }\n .string-play-section .string-buttons button:hover,\n .string-play-section .array-buttons button:hover,\n .string-play-section .insert-item:hover,\n .array-play-section .string-buttons button:hover,\n .array-play-section .array-buttons button:hover,\n .array-play-section .insert-item:hover {\n cursor: pointer;\n transform: scale(1.07);\n box-shadow: 2px 15px 5px -8px rgba(0, 0, 0, 0.3); }\n .string-play-section .string-buttons button:focus,\n .string-play-section .array-buttons button:focus,\n .string-play-section .insert-item:focus,\n .array-play-section .string-buttons button:focus,\n .array-play-section .array-buttons button:focus,\n .array-play-section .insert-item:focus {\n outline: none; }\n .string-play-section .capitalize-button,\n .string-play-section .insert-item,\n .array-play-section .capitalize-button,\n .array-play-section .insert-item {\n width: 160px !important; }\n .string-play-section .list-display,\n .array-play-section .list-display {\n margin: 40px 0; }\n .string-play-section .list-display li,\n .array-play-section .list-display li {\n list-style: none;\n margin: 10px 0;\n padding: 10px;\n border-bottom: 1px solid gray; }\n", ""]); +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": () => __WEBPACK_DEFAULT_EXPORT__ +/* harmony export */ }); +/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js"); +/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__); +// Imports -// exports +var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(true); +// Module +___CSS_LOADER_EXPORT___.push([module.id, "body {\n background: lightgray !important;\n family: Helevetica, sans-serif;\n size: 18px; }\n body h1 {\n text-align: center; }\n\n.section {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 960px;\n min-height: 800px;\n margin: 20px auto;\n padding: 20px;\n border-radius: 5px;\n background-color: white; }\n .section .intro {\n width: 700px; }\n .section .string-input,\n .section .array-input {\n width: 400px;\n padding: 10px;\n margin-bottom: 20px;\n border: none;\n border-bottom: 2px solid red;\n size: 16px;\n weight: bold; }\n .section .string-input:focus,\n .section .array-input:focus {\n outline: none; }\n .section .text-display {\n margin-bottom: 30px; }\n .section button {\n background-color: #90a6e8;\n padding: 10px;\n width: 140px;\n border: none;\n font-size: 16px;\n transition: transform .3s ease-in-out; }\n .section button:hover {\n cursor: pointer;\n transform: scale(1.07);\n box-shadow: 2px 15px 5px -8px rgba(0, 0, 0, 0.3); }\n .section button:focus {\n outline: none; }\n .section .capitalize-button,\n .section .insert-item {\n width: 160px !important; }\n .section .list-display {\n margin: 40px 0; }\n .section .list-display li {\n list-style: none;\n margin: 10px 0;\n padding: 10px;\n border-bottom: 1px solid gray; }\n", "",{"version":3,"sources":["webpack://sass/exercises.sass","webpack://sass/variables.sass"],"names":[],"mappings":"AAEA;EACE,gCAAgC;EAEhC,8BAA8B;EAC9B,UAAU,EAAA;EAJZ;IAOI,kBAAkB,EAAA;;AAEtB;EACE,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,YAAY;EACZ,iBAAiB;EACjB,iBAAiB;EACjB,aAAa;EACb,kBAAkB;EAClB,uBAAuB,EAAA;EATzB;IAWI,YAAY,EAAA;EAXhB;;IAeI,YAAY;IACZ,aAAa;IACb,mBAAmB;IACnB,YAAY;IACZ,4BAA4B;IAE5B,UAAU;IACV,YAAY,EAAA;IAtBhB;;MAyBM,aAAa,EAAA;EAzBnB;IA4BI,mBAAmB,EAAA;EA5BvB;IA+BI,yBC1CgB;ID2ChB,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,eAAe;IACf,qCAAqC,EAAA;IApCzC;MAuCM,eAAe;MACf,sBAAsB;MACtB,gDAAgD,EAAA;IAzCtD;MA4CM,aAAa,EAAA;EA5CnB;;IAgDI,uBAAsB,EAAA;EAhD1B;IAmDI,cAAc,EAAA;IAnDlB;MAsDM,gBAAgB;MAChB,cAAc;MACd,aAAa;MACb,6BAA6B,EAAA","sourcesContent":["@import \"./variables.sass\";\n\nbody {\n background: lightgray !important;\n font: {}\n family: Helevetica, sans-serif;\n size: 18px;\n\n h1 {\n text-align: center; } }\n\n.section {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 960px;\n min-height: 800px;\n margin: 20px auto;\n padding: 20px;\n border-radius: 5px;\n background-color: white;\n .intro {\n width: 700px; }\n\n .string-input,\n .array-input {\n width: 400px;\n padding: 10px;\n margin-bottom: 20px;\n border: none;\n border-bottom: 2px solid red;\n font: {}\n size: 16px;\n weight: bold;\n\n &:focus {\n outline: none; } }\n\n .text-display {\n margin-bottom: 30px; }\n\n button {\n background-color: $light-blue;\n padding: 10px;\n width: 140px;\n border: none;\n font-size: 16px;\n transition: transform .3s ease-in-out;\n\n &:hover {\n cursor: pointer;\n transform: scale(1.07);\n box-shadow: 2px 15px 5px -8px rgba(0, 0, 0, 0.3); }\n\n &:focus {\n outline: none; } }\n\n .capitalize-button,\n .insert-item {\n width: 160px!important; }\n\n .list-display {\n margin: 40px 0;\n\n li {\n list-style: none;\n margin: 10px 0;\n padding: 10px;\n border-bottom: 1px solid gray; } } }\n","$light-blue: #90a6e8;\n"],"sourceRoot":""}]); +// Exports +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); /***/ }), -/***/ "./node_modules/css-loader/lib/css-base.js": -/*!*************************************************!*\ - !*** ./node_modules/css-loader/lib/css-base.js ***! - \*************************************************/ +/***/ "./node_modules/css-loader/dist/runtime/api.js": +/*!*****************************************************!*\ + !*** ./node_modules/css-loader/dist/runtime/api.js ***! + \*****************************************************/ /***/ ((module) => { +"use strict"; + + /* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra */ // css base code, injected by the css-loader -module.exports = function() { - var list = []; - - // return the list of modules as css string - list.toString = function toString() { - var result = []; - for(var i = 0; i < this.length; i++) { - var item = this[i]; - if(item[2]) { - result.push("@media " + item[2] + "{" + item[1] + "}"); - } else { - result.push(item[1]); - } - } - return result.join(""); - }; - - // import a list of modules into the list - list.i = function(modules, mediaQuery) { - if(typeof modules === "string") - modules = [[null, modules, ""]]; - var alreadyImportedModules = {}; - for(var i = 0; i < this.length; i++) { - var id = this[i][0]; - if(typeof id === "number") - alreadyImportedModules[id] = true; - } - for(i = 0; i < modules.length; i++) { - var item = modules[i]; - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { - if(mediaQuery && !item[2]) { - item[2] = mediaQuery; - } else if(mediaQuery) { - item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; - } - list.push(item); - } - } - }; - return list; +// eslint-disable-next-line func-names +module.exports = function (useSourceMap) { + var list = []; // return the list of modules as css string + + list.toString = function toString() { + return this.map(function (item) { + var content = cssWithMappingToString(item, useSourceMap); + + if (item[2]) { + return "@media ".concat(item[2], " {").concat(content, "}"); + } + + return content; + }).join(''); + }; // import a list of modules into the list + // eslint-disable-next-line func-names + + + list.i = function (modules, mediaQuery, dedupe) { + if (typeof modules === 'string') { + // eslint-disable-next-line no-param-reassign + modules = [[null, modules, '']]; + } + + var alreadyImportedModules = {}; + + if (dedupe) { + for (var i = 0; i < this.length; i++) { + // eslint-disable-next-line prefer-destructuring + var id = this[i][0]; + + if (id != null) { + alreadyImportedModules[id] = true; + } + } + } + + for (var _i = 0; _i < modules.length; _i++) { + var item = [].concat(modules[_i]); + + if (dedupe && alreadyImportedModules[item[0]]) { + // eslint-disable-next-line no-continue + continue; + } + + if (mediaQuery) { + if (!item[2]) { + item[2] = mediaQuery; + } else { + item[2] = "".concat(mediaQuery, " and ").concat(item[2]); + } + } + + list.push(item); + } + }; + + return list; }; +function cssWithMappingToString(item, useSourceMap) { + var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring + + var cssMapping = item[3]; + + if (!cssMapping) { + return content; + } + + if (useSourceMap && typeof btoa === 'function') { + var sourceMapping = toComment(cssMapping); + var sourceURLs = cssMapping.sources.map(function (source) { + return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */"); + }); + return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); + } + + return [content].join('\n'); +} // Adapted from convert-source-map (MIT) + + +function toComment(sourceMap) { + // eslint-disable-next-line no-undef + var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); + var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64); + return "/*# ".concat(data, " */"); +} /***/ }), @@ -14179,321 +14378,1684 @@ module.exports = _curry3(function zipWith(fn, a, b) { /***/ }), -/***/ "./node_modules/style-loader/addStyles.js": -/*!************************************************!*\ - !*** ./node_modules/style-loader/addStyles.js ***! - \************************************************/ -/***/ ((module) => { +/***/ "./node_modules/rxjs/_esm5/internal/Observable.js": +/*!********************************************************!*\ + !*** ./node_modules/rxjs/_esm5/internal/Observable.js ***! + \********************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra -*/ -var stylesInDom = {}, - memoize = function(fn) { - var memo; - return function () { - if (typeof memo === "undefined") memo = fn.apply(this, arguments); - return memo; - }; - }, - isOldIE = memoize(function() { - return /msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase()); - }), - getHeadElement = memoize(function () { - return document.head || document.getElementsByTagName("head")[0]; - }), - singletonElement = null, - singletonCounter = 0, - styleElementsInsertedAtTop = []; - -module.exports = function(list, options) { - if(typeof DEBUG !== "undefined" && DEBUG) { - if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment"); - } - - options = options || {}; - // Force single-tag solution on IE6-9, which has a hard limit on the # of