├── README.md
├── _redirects
├── input.txt
└── src
├── app
└── app.js
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | https://cqxg.github.io/Work_with_arrays/
2 |
3 | Это небольшое, но довольно интересное приложение.
4 | Его цель - показать умение работать с массивами, а не впечатлять внешним видом интерфейса.
5 | В этом приложении я считываю информацию (абстрактно, «псевдо-координаты») из файла input.txt, анализирую их согласно определенным правилам и, соответственно, заполняю массивы определенными символами. Отображая их на экране, я получаю рисунок.
6 |
7 | C - размер поля для рисования
8 | L - нарисовать линию
9 | R - создать прямоугольник
10 | B - аналог инструмента «Заливка»
11 |
12 | This is a small, but rather entertaining application, was once created as a test task.
13 | Its purpose is to show the ability to work with arrays, and not impress the appearance of the interface.
14 | In this application, I read information (abstractly, "pseudo-coordinates") from the input.txt file, parsing them according to certain rules, and accordingly fill the arrays. By displaying them on the screen, I get a picture.
15 |
16 | C - size of the field for drawing
17 | L - draw a line
18 | R - create a rectangle
19 | B - an analogue of the tool "bucket"
20 |
--------------------------------------------------------------------------------
/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
--------------------------------------------------------------------------------
/input.txt:
--------------------------------------------------------------------------------
1 | C 20 4
2 | L 1 2 6 2
3 | L 6 3 6 4
4 | R 16 1 20 3
5 | B 10 3 o
--------------------------------------------------------------------------------
/src/app/app.js:
--------------------------------------------------------------------------------
1 | const App = () => {
2 | const draw = document.querySelector('.draw');
3 | const goInput = document.querySelector('.goInput');
4 | const ctxContent = document.querySelector('.ctx_content');
5 | const inputContent = document.querySelector('.input_content');
6 |
7 | const RULES = {
8 | C: {
9 | w: '',
10 | h: '',
11 | },
12 |
13 | L: {
14 | x1: '',
15 | y1: '',
16 | x2: '',
17 | y2: '',
18 | },
19 |
20 | R: {
21 | x_top: '',
22 | y_top: '',
23 | x_bottom: '',
24 | y_bottom: '',
25 | },
26 |
27 | B: {
28 | x: '',
29 | y: '',
30 | color: '',
31 | }
32 | };
33 |
34 | const TOOLBOX = {
35 | EMPTY_SPACE: ' ',
36 | HOR_LINE: '-',
37 | VER_LINE: '|',
38 | FILL_LINE: 'x',
39 | }
40 |
41 | const newRules = [];
42 | const arrOfArr = [];
43 |
44 | const request = (data, parse) => {
45 | fetch(data)
46 | .then(res => res.text())
47 | .then(response => {
48 | parse(response);
49 | })
50 | .catch(err => console.log(err));
51 | };
52 |
53 | const makeNums = ({ x, y }) => ({
54 | num_x: Number(x),
55 | num_y: Number(y),
56 | });
57 |
58 | const inRange = (x, y) => {
59 | if (x < 0 || x > arrOfArr.length) {
60 | return false;
61 | } else if (y < 0 || y > arrOfArr[0].length) {
62 | return false;
63 | } else {
64 | return true;
65 | }
66 | };
67 |
68 | const border = ({ x, y }) => {
69 | const rangedArray = [
70 | [x - 1, y - 1],
71 | [x - 1, y],
72 | [x, y],
73 | [x - 1, y + 1],
74 | [x, y + 1],
75 | [x, y - 1],
76 | [x + 1, y],
77 | [x + 1, y + 1],
78 | [x + 1, y - 1]
79 | ];
80 |
81 | const filteredArray = rangedArray.filter(([x, y]) => inRange({ x, y }));
82 |
83 | return filteredArray;
84 | };
85 |
86 | const createRules = element => {
87 | const arr = [...element];
88 | const type = arr.shift().toUpperCase();
89 | const rule = RULES[type];
90 |
91 | const newRule = { ...rule };
92 |
93 | Object.keys(newRule).forEach((e, index) => {
94 | newRule[e] = arr[index];
95 | });
96 |
97 | newRules.push({
98 | type,
99 | command: newRule,
100 | });
101 | };
102 |
103 | const makeFinalString = (arr) => {
104 | const total = arr.reduce((tempString, curr) => {
105 | const string = curr.join('');
106 | return tempString + string + '\n';
107 | }, '');
108 |
109 | return total;
110 | };
111 |
112 | const parseInput = (response) => {
113 | const splitResponse = response.split('\n');
114 | const parsedResponse = splitResponse.map(command => command.split(" "));
115 |
116 | parsedResponse.forEach(element => createRules(element));
117 | inputContent.innerText = response;
118 | };
119 |
120 | const drawing = () => {
121 | for (let i = 0; i < newRules.length; i++) {
122 | const { type, command } = newRules[i];
123 | switch (type) {
124 | case 'C':
125 | arrOfArr.push(...drawCanvas(command));
126 | break;
127 |
128 | case 'L':
129 | drawLine(command);
130 | break;
131 |
132 | case 'R':
133 | drawRect(command);
134 | break;
135 |
136 | case 'B':
137 | fillColour(command);
138 | break;
139 | };
140 | };
141 |
142 | ctxContent.innerText += makeFinalString(arrOfArr);
143 | };
144 |
145 | const drawCanvas = ({ w, h }) => {
146 | const { HOR_LINE, VER_LINE, EMPTY_SPACE } = TOOLBOX;
147 |
148 | const closeLine = HOR_LINE.repeat(w).split('');
149 | const contentLine = [];
150 | for (let i = 0; i <= h - 1; i++) {
151 | const tempLine = (VER_LINE + EMPTY_SPACE.repeat(w - 2) + VER_LINE).split('');
152 | contentLine.push(tempLine);
153 | };
154 |
155 | const resultLines = [
156 | closeLine,
157 | ...contentLine,
158 | closeLine,
159 | ];
160 |
161 | return resultLines;
162 | };
163 |
164 | const drawLine = ({ x1, y1, x2, y2 }) => {
165 | const { FILL_LINE } = TOOLBOX;
166 |
167 | if (x1 === x2) {
168 | for (let i = y1; i <= y2; i++) {
169 | arrOfArr[i].fill(FILL_LINE, x1 - 1, x1);
170 | }
171 | }
172 | else if (x1 !== x2) {
173 | arrOfArr[y1].fill(FILL_LINE, x1 - 1, x2);
174 | };
175 | };
176 |
177 | const drawRect = ({ x_top, y_top, x_bottom, y_bottom }) => {
178 | const { FILL_LINE } = TOOLBOX;
179 |
180 | arrOfArr[y_bottom].fill(FILL_LINE, x_top - 1, x_bottom);
181 |
182 | arrOfArr[y_top].fill(FILL_LINE, x_top - 1, x_bottom);
183 |
184 | for (let i = y_top; i <= y_bottom; i++) {
185 | arrOfArr[i].fill(FILL_LINE, x_top - 1, x_top);
186 | };
187 |
188 | for (let j = y_top; j <= y_bottom; j++) {
189 | arrOfArr[j].fill(FILL_LINE, x_bottom - 1, x_bottom);
190 | };
191 | };
192 |
193 | const fillColour = ({ x, y, color }) => {
194 | const { EMPTY_SPACE } = TOOLBOX;
195 |
196 | const { num_x, num_y } = makeNums({ x, y });
197 |
198 | if (arrOfArr[num_y][num_x] == EMPTY_SPACE) {
199 | arrOfArr[num_y][num_x] = 'o';
200 |
201 | const result = border({ x: num_x, y: num_y });
202 |
203 | result.forEach(([x, y]) => fillColour({ x, y, color }));
204 | };
205 | };
206 |
207 | goInput.addEventListener('click', () => request('../input.txt', parseInput));
208 | draw.addEventListener('click', drawing, { once: true });
209 | };
210 |
211 | document.addEventListener('DOMContentLoaded', App);
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | For CodeX
10 |
11 |
12 |
13 |
14 |
15 |
16 | Это небольшое, но довольно интересное приложение.
17 | Его цель - показать умение работать с массивами, а не впечатлять внешним видом интерфейса.
18 |
19 |
20 | В этом приложении я считываю информацию (абстрактно, «псевдо-координаты») из файла input.txt, анализирую
21 | их согласно определенным правилам и, соответственно, заполняю массивы определенными символами. Отображая
22 | их на экране, я получаю
23 | рисунок.
24 |
25 |
26 |
27 | C - размер поля для рисования
28 | L - нарисовать линию
29 | R - создать прямоугольник
30 | B - аналог инструмента «Заливка»
31 |