diff --git a/README.md b/README.md index 70a0449..c3de2ae 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@
- +

Leaderboard Scores

@@ -56,9 +56,13 @@ **Enlist skill sets and tech stack** - Add template for Leaderboard -- Setup Webpack -- Apply GitFlow +- Setup `Webpack` +- Apply `GitFlow` - Verified Linters +- Read and write to an API +- Implement `Form` for add Scores +- Use Arrow functions +- Using `async` and `await` `Javascript` features.

(back to top)

diff --git a/dist/index.bundle.js b/dist/index.bundle.js index cdcc21d..39c66d2 100644 --- a/dist/index.bundle.js +++ b/dist/index.bundle.js @@ -1,127 +1 @@ -"use strict"; -/* - * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). - * This devtool is neither made for production nor for readable output files. - * It uses "eval()" calls to create a separate source file in the browser devtools. - * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) - * or disable the default devtool with "devtool: false". - * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). - */ -(self["webpackChunkleaderboard"] = self["webpackChunkleaderboard"] || []).push([["index"],{ - -/***/ "./node_modules/css-loader/dist/cjs.js!./src/index.css": -/*!*************************************************************!*\ - !*** ./node_modules/css-loader/dist/cjs.js!./src/index.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_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_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_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\r\\n margin: 0;\\r\\n padding: 0;\\r\\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\\r\\n box-sizing: border-box;\\r\\n}\\r\\n\\r\\nbody {\\r\\n background-color: cornflowerblue;\\r\\n font-size: 16px;\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n align-items: center;\\r\\n justify-content: center;\\r\\n}\\r\\n\\r\\nh2 {\\r\\n font-size: 1.25em;\\r\\n}\\r\\n\\r\\nbutton {\\r\\n cursor: pointer;\\r\\n border: 1px solid #000;\\r\\n box-shadow: 2px 2px;\\r\\n padding: 7px;\\r\\n}\\r\\n\\r\\nul {\\r\\n list-style: none;\\r\\n}\\r\\n\\r\\n.container-width {\\r\\n width: 600px;\\r\\n}\\r\\n\\r\\nheader {\\r\\n margin-top: 50px;\\r\\n background-color: #fff;\\r\\n padding: 10px;\\r\\n}\\r\\n\\r\\nmain {\\r\\n display: flex;\\r\\n flex-direction: row;\\r\\n gap: 25px;\\r\\n background-color: #fff;\\r\\n}\\r\\n\\r\\n.left {\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n width: 50%;\\r\\n gap: 15px;\\r\\n padding: 5px;\\r\\n}\\r\\n\\r\\n.header-left {\\r\\n display: flex;\\r\\n flex-direction: row;\\r\\n justify-content: space-between;\\r\\n}\\r\\n\\r\\n.scores-list {\\r\\n border: 1px solid #000;\\r\\n padding: 10px;\\r\\n}\\r\\n\\r\\n.scores-list ul {\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n gap: 5px;\\r\\n justify-content: space-between;\\r\\n}\\r\\n\\r\\n.scores-list li {\\r\\n display: flex;\\r\\n flex-direction: row;\\r\\n justify-content: space-between;\\r\\n}\\r\\n\\r\\n.scores-list li:nth-child(even) {\\r\\n background-color: rgba(212, 218, 221, 0.89);\\r\\n}\\r\\n\\r\\n.right {\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n gap: 15px;\\r\\n width: 50%;\\r\\n\\r\\n /* text-align: right; */\\r\\n padding: 5px;\\r\\n}\\r\\n\\r\\n.frm-add-score {\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n gap: 10px;\\r\\n text-align: left;\\r\\n}\\r\\n\\r\\n.frm-add-score input {\\r\\n width: 100%;\\r\\n padding: 5px 7px;\\r\\n}\\r\\n\\r\\n.btn-cnt {\\r\\n justify-content: right;\\r\\n text-align: right;\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://leaderboard/./src/index.css?./node_modules/css-loader/dist/cjs.js"); - -/***/ }), - -/***/ "./node_modules/css-loader/dist/runtime/api.js": -/*!*****************************************************!*\ - !*** ./node_modules/css-loader/dist/runtime/api.js ***! - \*****************************************************/ -/***/ ((module) => { - -eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = [];\n\n // return the list of modules as css string\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n content += cssWithMappingToString(item);\n if (needLayer) {\n content += \"}\";\n }\n if (item[2]) {\n content += \"}\";\n }\n if (item[4]) {\n content += \"}\";\n }\n return content;\n }).join(\"\");\n };\n\n // import a list of modules into the list\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n var alreadyImportedModules = {};\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n list.push(item);\n }\n };\n return list;\n};\n\n//# sourceURL=webpack://leaderboard/./node_modules/css-loader/dist/runtime/api.js?"); - -/***/ }), - -/***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js": -/*!**************************************************************!*\ - !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***! - \**************************************************************/ -/***/ ((module) => { - -eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://leaderboard/./node_modules/css-loader/dist/runtime/noSourceMaps.js?"); - -/***/ }), - -/***/ "./src/index.css": -/*!***********************!*\ - !*** ./src/index.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_index_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./index.css */ \"./node_modules/css-loader/dist/cjs.js!./src/index.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_index_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_index_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_index_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_index_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://leaderboard/./src/index.css?"); - -/***/ }), - -/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": -/*!****************************************************************************!*\ - !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! - \****************************************************************************/ -/***/ ((module) => { - -eval("\n\nvar stylesInDOM = [];\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n return result;\n}\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n identifiers.push(identifier);\n }\n return identifiers;\n}\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n return updater;\n}\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n var newLastIdentifiers = modulesToDom(newList, options);\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n var _index = getIndexByIdentifier(_identifier);\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n stylesInDOM.splice(_index, 1);\n }\n }\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?"); - -/***/ }), - -/***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": -/*!********************************************************************!*\ - !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! - \********************************************************************/ -/***/ ((module) => { - -eval("\n\nvar memo = {};\n\n/* istanbul ignore next */\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target);\n\n // Special case to return head of iframe instead of iframe itself\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n memo[target] = styleTarget;\n }\n return memo[target];\n}\n\n/* istanbul ignore next */\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n target.appendChild(style);\n}\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/insertBySelector.js?"); - -/***/ }), - -/***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": -/*!**********************************************************************!*\ - !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! - \**********************************************************************/ -/***/ ((module) => { - -eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/insertStyleElement.js?"); - -/***/ }), - -/***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": -/*!**********************************************************************************!*\ - !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! - \**********************************************************************************/ -/***/ ((module, __unused_webpack_exports, __webpack_require__) => { - -eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = true ? __webpack_require__.nc : 0;\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?"); - -/***/ }), - -/***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": -/*!***************************************************************!*\ - !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! - \***************************************************************/ -/***/ ((module) => { - -eval("\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n var needLayer = typeof obj.layer !== \"undefined\";\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n css += obj.css;\n if (needLayer) {\n css += \"}\";\n }\n if (obj.media) {\n css += \"}\";\n }\n if (obj.supports) {\n css += \"}\";\n }\n var sourceMap = obj.sourceMap;\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n }\n\n // For old IE\n /* istanbul ignore if */\n options.styleTagTransform(css, styleElement, options.options);\n}\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n styleElement.parentNode.removeChild(styleElement);\n}\n\n/* istanbul ignore next */\nfunction domAPI(options) {\n if (typeof document === \"undefined\") {\n return {\n update: function update() {},\n remove: function remove() {}\n };\n }\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/styleDomAPI.js?"); - -/***/ }), - -/***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": -/*!*********************************************************************!*\ - !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! - \*********************************************************************/ -/***/ ((module) => { - -eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n styleElement.appendChild(document.createTextNode(css));\n }\n}\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://leaderboard/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); - -/***/ }), - -/***/ "./src/index.js": -/*!**********************!*\ - !*** ./src/index.js ***! - \**********************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index.css */ \"./src/index.css\");\n// import _ from 'lodash';\n\n\n\n//# sourceURL=webpack://leaderboard/./src/index.js?"); - -/***/ }) - -}, -/******/ __webpack_require__ => { // webpackRuntimeModules -/******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId)) -/******/ var __webpack_exports__ = (__webpack_exec__("./src/index.js")); -/******/ } -]); \ No newline at end of file +"use strict";(self.webpackChunkleaderboard=self.webpackChunkleaderboard||[]).push([[826],{424:(n,r,e)=>{e.d(r,{Z:()=>c});var t=e(81),o=e.n(t),a=e(645),i=e.n(a)()(o());i.push([n.id,"* {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n background-color: cornflowerblue;\r\n font-size: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\nh2 {\r\n font-size: 1.25em;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n border: 1px solid #000;\r\n box-shadow: 2px 2px;\r\n padding: 7px;\r\n}\r\n\r\nul {\r\n list-style: none;\r\n}\r\n\r\n.container-width {\r\n width: 600px;\r\n}\r\n\r\nheader {\r\n margin-top: 50px;\r\n background-color: #fff;\r\n padding: 10px;\r\n}\r\n\r\nmain {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 25px;\r\n background-color: #fff;\r\n}\r\n\r\n.left {\r\n display: flex;\r\n flex-direction: column;\r\n width: 50%;\r\n gap: 15px;\r\n padding: 5px;\r\n}\r\n\r\n.header-left {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n}\r\n\r\n.scores-list {\r\n border: 1px solid #000;\r\n padding: 10px;\r\n}\r\n\r\n#ul-scores {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n justify-content: space-between;\r\n}\r\n\r\n.scores-list li {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n}\r\n\r\n.scores-list li:nth-child(even) {\r\n background-color: rgba(212, 218, 221, 0.89);\r\n}\r\n\r\n.right {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n width: 50%;\r\n\r\n /* text-align: right; */\r\n padding: 5px;\r\n}\r\n\r\n.frm-add-score {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n text-align: left;\r\n}\r\n\r\n.frm-add-score input {\r\n width: 100%;\r\n padding: 5px 7px;\r\n}\r\n\r\n.btn-cnt {\r\n justify-content: right;\r\n text-align: right;\r\n}\r\n",""]);const c=i},645:n=>{n.exports=function(n){var r=[];return r.toString=function(){return this.map((function(r){var e="",t=void 0!==r[5];return r[4]&&(e+="@supports (".concat(r[4],") {")),r[2]&&(e+="@media ".concat(r[2]," {")),t&&(e+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),e+=n(r),t&&(e+="}"),r[2]&&(e+="}"),r[4]&&(e+="}"),e})).join("")},r.i=function(n,e,t,o,a){"string"==typeof n&&(n=[[null,n,void 0]]);var i={};if(t)for(var c=0;c0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),e&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=e):d[2]=e),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),r.push(d))}},r}},81:n=>{n.exports=function(n){return n[1]}},379:n=>{var r=[];function e(n){for(var e=-1,t=0;t{var r={};n.exports=function(n,e){var t=function(n){if(void 0===r[n]){var e=document.querySelector(n);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(n){e=null}r[n]=e}return r[n]}(n);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(e)}},216:n=>{n.exports=function(n){var r=document.createElement("style");return n.setAttributes(r,n.attributes),n.insert(r,n.options),r}},565:(n,r,e)=>{n.exports=function(n){var r=e.nc;r&&n.setAttribute("nonce",r)}},795:n=>{n.exports=function(n){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var r=n.insertStyleElement(n);return{update:function(e){!function(n,r,e){var t="";e.supports&&(t+="@supports (".concat(e.supports,") {")),e.media&&(t+="@media ".concat(e.media," {"));var o=void 0!==e.layer;o&&(t+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),t+=e.css,o&&(t+="}"),e.media&&(t+="}"),e.supports&&(t+="}");var a=e.sourceMap;a&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),r.styleTagTransform(t,n,r.options)}(r,n,e)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(r)}}}},589:n=>{n.exports=function(n,r){if(r.styleSheet)r.styleSheet.cssText=n;else{for(;r.firstChild;)r.removeChild(r.firstChild);r.appendChild(document.createTextNode(n))}}},137:(n,r,e)=>{var t=e(379),o=e.n(t),a=e(795),i=e.n(a),c=e(569),s=e.n(c),l=e(565),d=e.n(l),u=e(216),p=e.n(u),f=e(589),m=e.n(f),h=e(424),x={};x.styleTagTransform=m(),x.setAttributes=d(),x.insert=s().bind(null,"head"),x.domAPI=i(),x.insertStyleElement=p(),o()(h.Z,x),h.Z&&h.Z.locals&&h.Z.locals;const y="https://us-central1-js-capstone-backend.cloudfunctions.net/api/",g="xtbfhjU4cmz4SUgU69Xt",v=async()=>{const n=document,r=n.getElementById("ul-scores");r.innerHTML="";const e=await(async()=>{try{const n=await fetch(`${y}games/${g}/scores/`);return await n.json()}catch(n){return n}})(),{result:t}=e;t.forEach((e=>{const t=n.createElement("li"),o=n.createElement("span"),a=n.createElement("span"),{user:i,score:c}=e;o.textContent=`${i}:`,a.textContent=`${c}`,t.appendChild(o),t.appendChild(a),r.appendChild(t)}))},b=()=>{(()=>{const n=document.getElementById("frm-add-score");n.addEventListener("submit",(async r=>{r.preventDefault();const e=await(async(n,r)=>{try{const e=await fetch(`${y}games/${g}/scores/`,{method:"POST",body:JSON.stringify({user:n,score:r}),headers:{"Content-type":"application/json; charset=UTF-8"}});return await e.json()}catch(n){return n}})(n.name.value,n.score.value);return v(),n.name.value="",n.score.value="",e}))})(),v(),document.getElementById("btn-refresh").addEventListener("click",(()=>{v()}))};window.onload=()=>{b()}}},n=>{n(n.s=137)}]); \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 0f278c8..00709b9 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,42 +1 @@ - - - - - - - - -
-

Leaderboard

-
-
-
-
-

Recent scores

- -
-
-
    -
  • Name: 100
    • -
  • Name: 50
    • -
  • Name: 10
    • -
  • Name: 30
    • -
  • Name: 100
    • -
  • Name: 80
    • -
  • Name: 60
    • -
-
-
-
-

Add your score

-
- - -
- -
-
-
-
- - \ No newline at end of file +Leaderboard Scores - consuming Api

Leaderboard

Recent scores

    Add your score

    \ No newline at end of file diff --git a/dist/runtime.bundle.js b/dist/runtime.bundle.js index 8bdeb6f..1f452d7 100644 --- a/dist/runtime.bundle.js +++ b/dist/runtime.bundle.js @@ -1,175 +1 @@ -/* - * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). - * This devtool is neither made for production nor for readable output files. - * It uses "eval()" calls to create a separate source file in the browser devtools. - * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) - * or disable the default devtool with "devtool: false". - * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). - */ -/******/ (() => { // webpackBootstrap -/******/ "use strict"; -/******/ var __webpack_modules__ = ({}); -/************************************************************************/ -/******/ // The module cache -/******/ var __webpack_module_cache__ = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ // Check if module is in cache -/******/ var cachedModule = __webpack_module_cache__[moduleId]; -/******/ if (cachedModule !== undefined) { -/******/ return cachedModule.exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = __webpack_module_cache__[moduleId] = { -/******/ id: moduleId, -/******/ // no module.loaded needed -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = __webpack_modules__; -/******/ -/************************************************************************/ -/******/ /* webpack/runtime/chunk loaded */ -/******/ (() => { -/******/ var deferred = []; -/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => { -/******/ if(chunkIds) { -/******/ priority = priority || 0; -/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1]; -/******/ deferred[i] = [chunkIds, fn, priority]; -/******/ return; -/******/ } -/******/ var notFulfilled = Infinity; -/******/ for (var i = 0; i < deferred.length; i++) { -/******/ var [chunkIds, fn, priority] = deferred[i]; -/******/ var fulfilled = true; -/******/ for (var j = 0; j < chunkIds.length; j++) { -/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) { -/******/ chunkIds.splice(j--, 1); -/******/ } else { -/******/ fulfilled = false; -/******/ if(priority < notFulfilled) notFulfilled = priority; -/******/ } -/******/ } -/******/ if(fulfilled) { -/******/ deferred.splice(i--, 1) -/******/ var r = fn(); -/******/ if (r !== undefined) result = r; -/******/ } -/******/ } -/******/ return result; -/******/ }; -/******/ })(); -/******/ -/******/ /* webpack/runtime/compat get default export */ -/******/ (() => { -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = (module) => { -/******/ var getter = module && module.__esModule ? -/******/ () => (module['default']) : -/******/ () => (module); -/******/ __webpack_require__.d(getter, { a: getter }); -/******/ return getter; -/******/ }; -/******/ })(); -/******/ -/******/ /* webpack/runtime/define property getters */ -/******/ (() => { -/******/ // define getter functions for harmony exports -/******/ __webpack_require__.d = (exports, definition) => { -/******/ for(var key in definition) { -/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { -/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); -/******/ } -/******/ } -/******/ }; -/******/ })(); -/******/ -/******/ /* webpack/runtime/hasOwnProperty shorthand */ -/******/ (() => { -/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) -/******/ })(); -/******/ -/******/ /* webpack/runtime/make namespace object */ -/******/ (() => { -/******/ // define __esModule on exports -/******/ __webpack_require__.r = (exports) => { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ })(); -/******/ -/******/ /* webpack/runtime/jsonp chunk loading */ -/******/ (() => { -/******/ // no baseURI -/******/ -/******/ // object to store loaded and loading chunks -/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched -/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded -/******/ var installedChunks = { -/******/ "runtime": 0 -/******/ }; -/******/ -/******/ // no chunk on demand loading -/******/ -/******/ // no prefetching -/******/ -/******/ // no preloaded -/******/ -/******/ // no HMR -/******/ -/******/ // no HMR manifest -/******/ -/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0); -/******/ -/******/ // install a JSONP callback for chunk loading -/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => { -/******/ var [chunkIds, moreModules, runtime] = data; -/******/ // add "moreModules" to the modules object, -/******/ // then flag all "chunkIds" as loaded and fire callback -/******/ var moduleId, chunkId, i = 0; -/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) { -/******/ for(moduleId in moreModules) { -/******/ if(__webpack_require__.o(moreModules, moduleId)) { -/******/ __webpack_require__.m[moduleId] = moreModules[moduleId]; -/******/ } -/******/ } -/******/ if(runtime) var result = runtime(__webpack_require__); -/******/ } -/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data); -/******/ for(;i < chunkIds.length; i++) { -/******/ chunkId = chunkIds[i]; -/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) { -/******/ installedChunks[chunkId][0](); -/******/ } -/******/ installedChunks[chunkId] = 0; -/******/ } -/******/ return __webpack_require__.O(result); -/******/ } -/******/ -/******/ var chunkLoadingGlobal = self["webpackChunkleaderboard"] = self["webpackChunkleaderboard"] || []; -/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); -/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); -/******/ })(); -/******/ -/******/ /* webpack/runtime/nonce */ -/******/ (() => { -/******/ __webpack_require__.nc = undefined; -/******/ })(); -/******/ -/************************************************************************/ -/******/ -/******/ -/******/ })() -; \ No newline at end of file +(()=>{"use strict";var r,e={},o={};function a(r){var n=o[r];if(void 0!==n)return n.exports;var t=o[r]={id:r,exports:{}};return e[r](t,t.exports,a),t.exports}a.m=e,r=[],a.O=(e,o,n,t)=>{if(!o){var i=1/0;for(d=0;d=t)&&Object.keys(a.O).every((r=>a.O[r](o[f])))?o.splice(f--,1):(l=!1,t0&&r[d-1][2]>t;d--)r[d]=r[d-1];r[d]=[o,n,t]},a.n=r=>{var e=r&&r.__esModule?()=>r.default:()=>r;return a.d(e,{a:e}),e},a.d=(r,e)=>{for(var o in e)a.o(e,o)&&!a.o(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:e[o]})},a.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={666:0};a.O.j=e=>0===r[e];var e=(e,o)=>{var n,t,[i,l,f]=o,v=0;if(i.some((e=>0!==r[e]))){for(n in l)a.o(l,n)&&(a.m[n]=l[n]);if(f)var d=f(a)}for(e&&e(o);v + Leaderboard Scores - consuming Api
    @@ -13,23 +14,17 @@

    Leaderboard

    Recent scores

    - +
    -
      -
    • Name: 100
      • -
    • Name: 50
      • -
    • Name: 10
      • -
    • Name: 30
      • -
    • Name: 100
      • -
    • Name: 80
      • -
    • Name: 60
      • +
        +

    Add your score

    -
    +
    diff --git a/src/index.js b/src/index.js index ea4cbaa..4f48831 100644 --- a/src/index.js +++ b/src/index.js @@ -1,2 +1,6 @@ -// import _ from 'lodash'; import './index.css'; +import App from './modules/App.js'; + +window.onload = () => { + App(); +}; \ No newline at end of file diff --git a/logo.png b/src/logo.png similarity index 100% rename from logo.png rename to src/logo.png diff --git a/src/modules/Api.js b/src/modules/Api.js new file mode 100644 index 0000000..e15fce7 --- /dev/null +++ b/src/modules/Api.js @@ -0,0 +1,32 @@ +import { API_URL, KEY } from './Vars.js'; + +// function to GET scores +export const getGame = async () => { + try { + const response = await fetch(`${API_URL}games/${KEY}/scores/`); + const json = await response.json(); + return json; + } catch (error) { + return error; + } +}; + +// function to POST new score +export const createScore = async (user, score) => { + try { + const response = await fetch(`${API_URL}games/${KEY}/scores/`, { + method: 'POST', + body: JSON.stringify({ + user, + score, + }), + headers: { + 'Content-type': 'application/json; charset=UTF-8', + }, + }); + const json = await response.json(); + return json; + } catch (error) { + return error; + } +}; diff --git a/src/modules/App.js b/src/modules/App.js new file mode 100644 index 0000000..58a6c00 --- /dev/null +++ b/src/modules/App.js @@ -0,0 +1,53 @@ +import { getGame, createScore } from './Api.js'; + +// Display Scores +const renderList = async () => { + const doc = document; + const ul = doc.getElementById('ul-scores'); + ul.innerHTML = ''; + + const game = await getGame(); + const { result } = game; + + result.forEach((item) => { + const li = doc.createElement('li'); + const spanName = doc.createElement('span'); + const spanScore = doc.createElement('span'); + const { user, score } = item; + spanName.textContent = `${user}:`; + spanScore.textContent = `${score}`; + li.appendChild(spanName); + li.appendChild(spanScore); + ul.appendChild(li); + }); +}; + +// Add new score +const addScores = () => { + const frmScores = document.getElementById('frm-add-score'); + frmScores.addEventListener('submit', async (e) => { + e.preventDefault(); + const output = await createScore(frmScores.name.value, frmScores.score.value); + renderList(); + frmScores.name.value = ''; + frmScores.score.value = ''; + return output; + }); +}; + +// Refresh button +const refresh = () => { + const btnRefresh = document.getElementById('btn-refresh'); + btnRefresh.addEventListener('click', () => { + renderList(); + }); +}; + +// Principal function +const App = () => { + addScores(); + renderList(); + refresh(); +}; + +export default App; \ No newline at end of file diff --git a/src/modules/CreateGame.js b/src/modules/CreateGame.js new file mode 100644 index 0000000..fb6d5ee --- /dev/null +++ b/src/modules/CreateGame.js @@ -0,0 +1,24 @@ +import { API_URL } from './Vars.js'; + +// Script to create the game key, this script is executed only 1 time. use - node CreateGame.js +const createGame = async () => { + try { + const response = await fetch(`${API_URL}games/`, { + method: 'POST', + body: JSON.stringify({ + name: 'Call of Duty Mobile', + }), + headers: { + 'Content-type': 'application/json; charset=UTF-8', + }, + }); + const json = await response.json(); + document.getElementById('ul-scores').innerHTML = json; + } catch (error) { + document.getElementById('ul-scores').innerHTML = error; + } +}; + +createGame(); +// { result: 'Game with ID: LbMCd0gR1f5Ed86nvEJM added.' } +// { result: 'Game with ID: xtbfhjU4cmz4SUgU69Xt added.' } diff --git a/src/modules/Vars.js b/src/modules/Vars.js new file mode 100644 index 0000000..b7ac205 --- /dev/null +++ b/src/modules/Vars.js @@ -0,0 +1,2 @@ +export const API_URL = 'https://us-central1-js-capstone-backend.cloudfunctions.net/api/'; +export const KEY = 'xtbfhjU4cmz4SUgU69Xt'; diff --git a/webpack.config.js b/webpack.config.cjs similarity index 100% rename from webpack.config.js rename to webpack.config.cjs