feat: Webpack config and basic canvas neon squares
This commit is contained in:
parent
ec9950c094
commit
b79149ad61
8
.editorconfig
Normal file
8
.editorconfig
Normal 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
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
# ignore modules folder
|
||||
node_modules
|
8
dist/index.html
vendored
Normal file
8
dist/index.html
vendored
Normal 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
124
dist/scripts.1c8330d55613e718e434.js
vendored
Normal 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
28
dist/scripts.505252a167c8d79396b2.js
vendored
Normal 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
16
dist/styles.81959a1b4ab88d85b993.css
vendored
Normal 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
33
package.json
Normal 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
8
src/index.ejs
Normal 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
5
src/index.ts
Normal 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
3
src/modules/grid/agent.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export class Agent {
|
||||
constructor() {}
|
||||
}
|
46
src/modules/grid/grid.ts
Normal file
46
src/modules/grid/grid.ts
Normal 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
16
src/styles/main.scss
Normal 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
9
tsconfig.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"noImplicitAny": true,
|
||||
"module": "es6",
|
||||
"target": "es2019",
|
||||
"allowJs": true
|
||||
}
|
||||
}
|
46
webpack.config.js
Normal file
46
webpack.config.js
Normal 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,
|
||||
},
|
||||
};
|
Loading…
Reference in New Issue
Block a user