For CodeX

├── _redirects ├── input.txt ├── README.md └── src ├── style.css ├── index.html └── app └── app.js /_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 -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | .desc { 2 | margin: 5px; 3 | padding: 20px; 4 | } 5 | 6 | .desc, 7 | .desc_text, 8 | .desc_sub { 9 | padding: 15px; 10 | display: flex; 11 | text-align: start; 12 | flex-direction: column; 13 | } 14 | 15 | .desc { 16 | max-width: 70%; 17 | margin: 0 auto; 18 | } 19 | 20 | .desc_text-first, 21 | .desc_text-second { 22 | text-align: center; 23 | } 24 | 25 | .desc_sub { 26 | margin: 20px; 27 | align-self: center; 28 | } 29 | 30 | .content_wrapper { 31 | display: flex; 32 | margin: 0 auto; 33 | } 34 | 35 | .get_wrapper, 36 | .draw_wrapper { 37 | width: 50%; 38 | margin: 5px; 39 | display: flex; 40 | text-align: start; 41 | min-height: 200px; 42 | border-radius: 5px; 43 | align-items: center; 44 | flex-direction: column; 45 | } 46 | 47 | button { 48 | width: 50%; 49 | margin-top: 20px; 50 | font-weight: bold; 51 | text-align: center; 52 | border-radius: 5px; 53 | margin-bottom: 20px; 54 | border: 1px solid rgb(0, 0, 0); 55 | background-color: rgb(255, 255, 255); 56 | } 57 | 58 | @media (max-width: 700px) { 59 | .content_wrapper { 60 | min-height: 500px; 61 | } 62 | 63 | .desc { 64 | max-width: 100%; 65 | margin: 0 auto; 66 | } 67 | 68 | .desc_text-first, 69 | .desc_text-second { 70 | text-align: start; 71 | } 72 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | For CodeX 10 | 11 | 12 | 13 | 14 |

15 |

26 |

32 |

33 | 34 |

35 | 36 |

37 | Прочесть input.txt 38 | 39 | 40 |

41 | 42 |

43 | Отрисовать input.txt 44 | 45 |

46 |

47 | 48 |

49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /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); --------------------------------------------------------------------------------