s452639/psi
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: Webpack config and basic canvas neon squares

Browse Source
This commit is contained in:
Marcin Czerniak 2021-03-03 22:16:10 +01:00
parent ec9950c094
commit b79149ad61
15 changed files with 2630 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.editorconfig Normal file
View File

@ -0,0 +1,8 @@
root = true
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
# ignore modules folder
node_modules

8
dist/index.html vendored Normal file
View File

@ -0,0 +1,8 @@
<html>
<head>
<title>Projekt Sztuczna inteligencja</title>
<script defer src="scripts.1c8330d55613e718e434.js"></script><script defer src="scripts.505252a167c8d79396b2.js"></script><link href="styles.81959a1b4ab88d85b993.css" rel="stylesheet"></head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

124
dist/scripts.1c8330d55613e718e434.js vendored Normal file
View File

@ -0,0 +1,124 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/modules/grid/grid.ts":
/*!**********************************!*\
!*** ./src/modules/grid/grid.ts ***!
\**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "Grid": () => (/* binding */ Grid)
/* harmony export */ });
class Grid {
constructor(canvas) {
this.ctx = canvas.getContext('2d');
this.setCanvasSize(canvas);
this.processGrid();
this.drawGrid();
}
setCanvasSize(canvas) {
canvas.width = 2000;
canvas.height = 900;
}
processGrid() {
const fact = (a, value = 1) => Array(a).fill(value, 0, a);
const cartesian = (arr1, arr2) => arr1.map(a => (a && arr2) || fact(arr2.length, 0));
this.grid = cartesian([...fact(6), 0, ...fact(6), 0, ...fact(6)], [...fact(1), 0, ...fact(2), 0, ...fact(2), 0, ...fact(1)]);
}
drawGrid() {
for (let [x, line] of this.grid.entries()) {
for (let [y, shouldRender] of line.entries()) {
if (shouldRender) {
this.neonRect(x * 100, y * 100, 100, 100);
}
}
}
}
neonRect(x, y, w, h) {
this.ctx.globalCompositeOperation = 'lighter';
this.ctx.shadowColor = "#fff";
this.ctx.shadowBlur = 10;
this.ctx.strokeStyle = "#fff";
this.ctx.lineWidth = 5;
this.ctx.strokeRect(x, y, w, h);
}
}
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(__webpack_module_cache__[moduleId]) {
/******/ return __webpack_module_cache__[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // 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;
/******/ }
/******/
/************************************************************************/
/******/ /* 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 });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
/*!**********************!*\
!*** ./src/index.ts ***!
\**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _modules_grid_grid__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/grid/grid */ "./src/modules/grid/grid.ts");
const canvas = document.getElementById('canvas');
const grid = new _modules_grid_grid__WEBPACK_IMPORTED_MODULE_0__.Grid(canvas);
})();
/******/ })()
;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9wc2kvLi9zcmMvbW9kdWxlcy9ncmlkL2dyaWQudHMiLCJ3ZWJwYWNrOi8vcHNpL3dlYnBhY2svYm9vdHN0cmFwIiwid2VicGFjazovL3BzaS93ZWJwYWNrL3J1bnRpbWUvZGVmaW5lIHByb3BlcnR5IGdldHRlcnMiLCJ3ZWJwYWNrOi8vcHNpL3dlYnBhY2svcnVudGltZS9oYXNPd25Qcm9wZXJ0eSBzaG9ydGhhbmQiLCJ3ZWJwYWNrOi8vcHNpL3dlYnBhY2svcnVudGltZS9tYWtlIG5hbWVzcGFjZSBvYmplY3QiLCJ3ZWJwYWNrOi8vcHNpLy4vc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7O0FBQU87QUFDUDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Ozs7Ozs7VUNqQ0E7VUFDQTs7VUFFQTtVQUNBO1VBQ0E7VUFDQTtVQUNBO1VBQ0E7VUFDQTtVQUNBO1VBQ0E7VUFDQTtVQUNBO1VBQ0E7O1VBRUE7VUFDQTs7VUFFQTtVQUNBO1VBQ0E7Ozs7O1dDckJBO1dBQ0E7V0FDQTtXQUNBO1dBQ0Esd0NBQXdDLHlDQUF5QztXQUNqRjtXQUNBO1dBQ0EsRTs7Ozs7V0NQQSx3Rjs7Ozs7V0NBQTtXQUNBO1dBQ0E7V0FDQSxzREFBc0Qsa0JBQWtCO1dBQ3hFO1dBQ0EsK0NBQStDLGNBQWM7V0FDN0QsRTs7Ozs7Ozs7Ozs7O0FDTjJDO0FBQzNDO0FBQ0EsaUJBQWlCLG9EQUFJIiwiZmlsZSI6InNjcmlwdHMuMWM4MzMwZDU1NjEzZTcxOGU0MzQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY2xhc3MgR3JpZCB7XHJcbiAgICBjb25zdHJ1Y3RvcihjYW52YXMpIHtcclxuICAgICAgICB0aGlzLmN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpO1xyXG4gICAgICAgIHRoaXMuc2V0Q2FudmFzU2l6ZShjYW52YXMpO1xyXG4gICAgICAgIHRoaXMucHJvY2Vzc0dyaWQoKTtcclxuICAgICAgICB0aGlzLmRyYXdHcmlkKCk7XHJcbiAgICB9XHJcbiAgICBzZXRDYW52YXNTaXplKGNhbnZhcykge1xyXG4gICAgICAgIGNhbnZhcy53aWR0aCA9IDIwMDA7XHJcbiAgICAgICAgY2FudmFzLmhlaWdodCA9IDkwMDtcclxuICAgIH1cclxuICAgIHByb2Nlc3NHcmlkKCkge1xyXG4gICAgICAgIGNvbnN0IGZhY3QgPSAoYSwgdmFsdWUgPSAxKSA9PiBBcnJheShhKS5maWxsKHZhbHVlLCAwLCBhKTtcclxuICAgICAgICBjb25zdCBjYXJ0ZXNpYW4gPSAoYXJyMSwgYXJyMikgPT4gYXJyMS5tYXAoYSA9PiAoYSAmJiBhcnIyKSB8fCBmYWN0KGFycjIubGVuZ3RoLCAwKSk7XHJcbiAgICAgICAgdGhpcy5ncmlkID0gY2FydGVzaWFuKFsuLi5mYWN0KDYpLCAwLCAuLi5mYWN0KDYpLCAwLCAuLi5mYWN0KDYpXSwgWy4uLmZhY3QoMSksIDAsIC4uLmZhY3QoMiksIDAsIC4uLmZhY3QoMiksIDAsIC4uLmZhY3QoMSldKTtcclxuICAgIH1cclxuICAgIGRyYXdHcmlkKCkge1xyXG4gICAgICAgIGZvciAobGV0IFt4LCBsaW5lXSBvZiB0aGlzLmdyaWQuZW50cmllcygpKSB7XHJcbiAgICAgICAgICAgIGZvciAobGV0IFt5LCBzaG91bGRSZW5kZXJdIG9mIGxpbmUuZW50cmllcygpKSB7XHJcbiAgICAgICAgICAgICAgICBpZiAoc2hvdWxkUmVuZGVyKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5uZW9uUmVjdCh4ICogMTAwLCB5ICogMTAwLCAxMDAsIDEwMCk7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICB9XHJcbiAgICBuZW9uUmVjdCh4LCB5LCB3LCBoKSB7XHJcbiAgICAgICAgdGhpcy5jdHguZ2xvYmFsQ29tcG9zaXRlT3BlcmF0aW9uID0gJ2xpZ2h0ZXInO1xyXG4gICAgICAgIHRoaXMuY3R4LnNoYWRvd0NvbG9yID0gXCIjZmZmXCI7XHJcbiAgICAgICAgdGhpcy5jdHguc2hhZG93Qmx1ciA9IDEwO1xyXG4gICAgICAgIHRoaXMuY3R4LnN0cm9rZVN0eWxlID0gXCIjZmZmXCI7XHJcbiAgICAgICAgdGhpcy5jdHgubGluZVdpZHRoID0gNTtcclxuICAgICAgICB0aGlzLmN0eC5zdHJva2VSZWN0KHgsIHksIHcsIGgpO1xyXG4gICAgfVxyXG59XHJcbiIsIi8vIFRoZSBtb2R1bGUgY2FjaGVcbnZhciBfX3dlYnBhY2tfbW9kdWxlX2NhY2hlX18gPSB7fTtcblxuLy8gVGhlIHJlcXVpcmUgZnVuY3Rpb25cbmZ1bmN0aW9uIF9fd2VicGFja19yZXF1aXJlX18obW9kdWxlSWQpIHtcblx0Ly8gQ2hlY2sgaWYgbW9kdWxlIGlzIGluIGNhY2hlXG5cdGlmKF9fd2VicGFja19tb2R1bGVfY2FjaGVfX1ttb2R1bGVJZF0pIHtcblx0XHRyZXR1cm4gX193ZWJwYWNrX21vZHVsZV9jYWNoZV9fW21vZHVsZUlkXS5leHBvcnRzO1xuXHR9XG5cdC8vIENyZWF0ZSBhIG5ldyBtb2R1bGUgKGFuZCBwdXQgaXQgaW50byB0aGUgY2FjaGUpXG5cdHZhciBtb2R1bGUgPSBfX3dlYnBhY2tfbW9kdWxlX2NhY2hlX19bbW9kdWxlSWRdID0ge1xuXHRcdC8vIG5vIG1vZHVsZS5pZCBuZWVkZWRcblx0XHQvLyBubyBtb2R1bGUubG9hZGVkIG5lZWRlZFxuXHRcdGV4cG9ydHM6IHt9XG5cdH07XG5cblx0Ly8gRXhlY3V0ZSB0aGUgbW9kdWxlIGZ1bmN0aW9uXG5cdF9fd2VicGFja19tb2R1bGVzX19bbW9kdWxlSWRdKG1vZHVsZSwgbW9kdWxlLmV4cG9ydHMsIF9fd2VicGFja19yZXF1aXJlX18pO1xuXG5cdC8vIFJldHVybiB0aGUgZXhwb3J0cyBvZiB0aGUgbW9kdWxlXG5cdHJldHVybiBtb2R1bGUuZXhwb3J0cztcbn1cblxuIiwiLy8gZGVmaW5lIGdldHRlciBmdW5jdGlvbnMgZm9yIGhhcm1vbnkgZXhwb3J0c1xuX193ZWJwYWNrX3JlcXVpcmVfXy5kID0gKGV4cG9ydHMsIGRlZmluaXRpb24pID0+IHtcblx0Zm9yKHZhciBrZXkgaW4gZGVmaW5pdGlvbikge1xuXHRcdGlmKF9fd2VicGFja19yZXF1aXJlX18ubyhkZWZpbml0aW9uLCBrZXkpICYmICFfX3dlYnBhY2tfcmVxdWlyZV9fLm8oZXhwb3J0cywga2V5KSkge1xuXHRcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIGtleSwgeyBlbnVtZXJhYmxlOiB0cnVlLCBnZXQ6IGRlZmluaXRpb25ba2V5XSB9KTtcblx0XHR9XG5cdH1cbn07IiwiX193ZWJwYWNrX3JlcXVpcmVfXy5vID0gKG9iaiwgcHJvcCkgPT4gKE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChvYmosIHByb3ApKSIsIi8vIGRlZmluZSBfX2VzTW9kdWxlIG9uIGV4cG9ydHNcbl9fd2VicGFja19yZXF1aXJlX18uciA9IChleHBvcnRzKSA9PiB7XG5cdGlmKHR5cGVvZiBTeW1ib2wgIT09ICd1bmRlZmluZWQnICYmIFN5bWJvbC50b1N0cmluZ1RhZykge1xuXHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCBTeW1ib2wudG9TdHJpbmdUYWcsIHsgdmFsdWU6ICdNb2R1bGUnIH0pO1xuXHR9XG5cdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCAnX19lc01vZHVsZScsIHsgdmFsdWU6IHRydWUgfSk7XG59OyIsImltcG9ydCB7IEdyaWQgfSBmcm9tICcuL21vZHVsZXMvZ3JpZC9ncmlkJztcclxuY29uc3QgY2FudmFzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NhbnZhcycpO1xyXG5jb25zdCBncmlkID0gbmV3IEdyaWQoY2FudmFzKTtcclxuIl0sInNvdXJjZVJvb3QiOiIifQ==

28
dist/scripts.505252a167c8d79396b2.js vendored Normal file
View File

@ -0,0 +1,28 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* 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 });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
/*!******************************!*\
!*** ./src/styles/main.scss ***!
\******************************/
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/******/ })()
;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9wc2kvd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vcHNpL3dlYnBhY2svcnVudGltZS9tYWtlIG5hbWVzcGFjZSBvYmplY3QiLCJ3ZWJwYWNrOi8vcHNpLy4vc3JjL3N0eWxlcy9tYWluLnNjc3M/NTEwNCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztVQUFBO1VBQ0E7Ozs7O1dDREE7V0FDQTtXQUNBO1dBQ0Esc0RBQXNELGtCQUFrQjtXQUN4RTtXQUNBLCtDQUErQyxjQUFjO1dBQzdELEU7Ozs7Ozs7OztBQ05BIiwiZmlsZSI6InNjcmlwdHMuNTA1MjUyYTE2N2M4ZDc5Mzk2YjIuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBUaGUgcmVxdWlyZSBzY29wZVxudmFyIF9fd2VicGFja19yZXF1aXJlX18gPSB7fTtcblxuIiwiLy8gZGVmaW5lIF9fZXNNb2R1bGUgb24gZXhwb3J0c1xuX193ZWJwYWNrX3JlcXVpcmVfXy5yID0gKGV4cG9ydHMpID0+IHtcblx0aWYodHlwZW9mIFN5bWJvbCAhPT0gJ3VuZGVmaW5lZCcgJiYgU3ltYm9sLnRvU3RyaW5nVGFnKSB7XG5cdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFN5bWJvbC50b1N0cmluZ1RhZywgeyB2YWx1ZTogJ01vZHVsZScgfSk7XG5cdH1cblx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsICdfX2VzTW9kdWxlJywgeyB2YWx1ZTogdHJ1ZSB9KTtcbn07IiwiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luXG5leHBvcnQge307Il0sInNvdXJjZVJvb3QiOiIifQ==

16
dist/styles.81959a1b4ab88d85b993.css vendored Normal file
View File

@ -0,0 +1,16 @@
html, body {
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
position: relative;
background-color: #141414;
}
#canvas {
width: 100%;
position: absolute;
bottom: 0;
}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9wc2kvLi9zcmMvc3R5bGVzL21haW4uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQSx5QkFSaUI7QUFPbkI7O0FBSUE7RUFDRTtFQUNBO0VBQ0E7QUFERixDIiwiZmlsZSI6InN0eWxlcy44MTk1OWExYjRhYjg4ZDg1Yjk5My5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIkYmFja2dyb3VuZC1jb2xvcjogIzE0MTQxNDtcclxuXHJcbmh0bWwsIGJvZHkge1xyXG4gIGhlaWdodDogMTAwdmg7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgbWFyZ2luOiAwO1xyXG4gIHBhZGRpbmc6IDA7XHJcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gIGJhY2tncm91bmQtY29sb3I6ICRiYWNrZ3JvdW5kLWNvbG9yO1xyXG59XHJcblxyXG4jY2FudmFzIHtcclxuICB3aWR0aDogMTAwJTtcclxuICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgYm90dG9tOiAwO1xyXG59Il0sInNvdXJjZVJvb3QiOiIifQ==*/

33
package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "psi",
"version": "1.0.0",
"main": "src/index.js",
"repository": "https://git.wmi.amu.edu.pl/s452639/psi",
"author": "",
"license": "MIT",
"scripts": {
"start": "npm-run-all --parallel watch serve",
"watch": "webpack --watch",
"serve": "http-server dist/",
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"@types/html-webpack-plugin": "^3.2.4",
"css-loader": "^5.1.1",
"html-webpack-plugin": "^5.2.0",
"http-server": "^0.12.3",
"mini-css-extract-plugin": "^1.3.9",
"npm-run-all": "^4.1.5",
"postcss-loader": "^5.0.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.17",
"typescript": "^4.2.2",
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0"
},
"dependencies": {
"lodash-es": "^4.17.21"
}
}

8
src/index.ejs Normal file
View File

@ -0,0 +1,8 @@
<html>
<head>
<title>Projekt Sztuczna inteligencja</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

5
src/index.ts Normal file
View File

@ -0,0 +1,5 @@
import { Grid } from './modules/grid/grid';
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const grid = new Grid(canvas);

3
src/modules/grid/agent.ts Normal file
View File

@ -0,0 +1,3 @@
export class Agent {
constructor() {}
}

46
src/modules/grid/grid.ts Normal file
View File

@ -0,0 +1,46 @@
export class Grid {
public grid: number[][];
ctx: CanvasRenderingContext2D;
constructor(canvas: HTMLCanvasElement) {
this.ctx = canvas.getContext('2d');
this.setCanvasSize(canvas);
this.processGrid();
this.drawGrid();
}
private setCanvasSize(canvas: HTMLCanvasElement) {
canvas.width = 2000;
canvas.height = 900;
}
private processGrid() {
const fact = (a: number, value: number = 1) => Array(a).fill(value, 0, a);
const cartesian = (arr1: number[], arr2: number[]) => arr1.map(a => (a && arr2) || fact(arr2.length, 0));
this.grid = cartesian(
[...fact(6), 0, ...fact(6), 0, ...fact(6)],
[...fact(1), 0, ...fact(2), 0, ...fact(2), 0, ...fact(1)]
);
}
private drawGrid() {
for (let [x, line] of this.grid.entries()) {
for (let [y, shouldRender] of line.entries()) {
if (shouldRender) {
this.neonRect(x * 100, y * 100, 100, 100);
}
}
}
}
private neonRect(x: number, y: number, w: number, h: number) {
this.ctx.globalCompositeOperation = 'lighter';
this.ctx.shadowColor = "#fff";
this.ctx.shadowBlur = 10;
this.ctx.strokeStyle= "#fff";
this.ctx.lineWidth = 5;
this.ctx.strokeRect(x, y, w, h);
}
}

16
src/styles/main.scss Normal file
View File

@ -0,0 +1,16 @@
$background-color: #141414;
html, body {
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
position: relative;
background-color: $background-color;
}
#canvas {
width: 100%;
position: absolute;
bottom: 0;
}

9
tsconfig.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es2019",
"allowJs": true
}
}

46
webpack.config.js Normal file
View File

@ -0,0 +1,46 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
entry: {
index: './src/index.ts',
styles: './src/styles/main.scss',
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: "css-loader" },
{ loader: 'postcss-loader' },
{ loader: 'sass-loader' },
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.ejs'
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
})
],
resolve: {
extensions: [ '.ts', '.js' ],
},
output: {
filename: 'scripts.[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};

2278
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff