diff options
| author | Andrew Shitov <andy@shitov.ru> | 2020-09-11 00:10:16 +0200 |
|---|---|---|
| committer | Andrew Shitov <andy@shitov.ru> | 2020-09-11 00:10:16 +0200 |
| commit | b84595a43e09b00411ae617ee297912a14084da7 (patch) | |
| tree | c077e5065c69542e192b54673d6b065e09a732e7 /challenge-077/ash/javascript/ch-2.html | |
| parent | 35adb782583a35b0ae54e249d33474a584a00c95 (diff) | |
| download | perlweeklychallenge-club-b84595a43e09b00411ae617ee297912a14084da7.tar.gz perlweeklychallenge-club-b84595a43e09b00411ae617ee297912a14084da7.tar.bz2 perlweeklychallenge-club-b84595a43e09b00411ae617ee297912a14084da7.zip | |
An HTML+JS visual solution for 77-2
Diffstat (limited to 'challenge-077/ash/javascript/ch-2.html')
| -rw-r--r-- | challenge-077/ash/javascript/ch-2.html | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/challenge-077/ash/javascript/ch-2.html b/challenge-077/ash/javascript/ch-2.html new file mode 100644 index 0000000000..e2cfd19d28 --- /dev/null +++ b/challenge-077/ash/javascript/ch-2.html @@ -0,0 +1,107 @@ +<html> + +<!-- + Task 2 from + https://perlweeklychallenge.org/blog/perl-weekly-challenge-077/ + + Comments: https://andrewshitov.com/2020/09/08/lonely-x-the-weekly-challenge-77-task-2/ +--> + +<head> + <meta charset="UTF-8"/> + <title>Lonely X</title> + <style> + * { + text-align: center; + font-family: Arial, sans-serif; + } + #Shape table { + margin: auto; + /* border-collapse: collapse; */ + } + #Shape table tr td input { + width: 50px; + height: 50px; + } + #Shape table tr td { + border: 5px solid white; + + } + #Shape table tr td.lonely { + border: 5px solid green; + } + </style> +</head> +<body> + <p> + <input type="text" name="width" id="MatrixWidth" size="3" value="3" /> + × + <input type="text" name="height" id="MatrixHeight" size="3" value="3" /> + + <input type="submit" value="Set the shape" onclick="set_shape()" /> + </p> + + <div id="Shape"></div> + + <p>Note: Lonely X is marked green.</p> + + <script> + let w = 0; + let h = 0; + + function set_shape() { + w = parseInt(document.getElementById('MatrixWidth').value); + h = parseInt(document.getElementById('MatrixHeight').value); + + let table = '<table>'; + for (let y = 0; y != h; y++) { + table += '<tr>'; + for (let x = 0; x != w; x++) { + table += '<td><input type="checkbox" data-x="' + x + '" data-y="' + y + '" onclick="update_lonely()" /></td>'; + } + table += '</tr>'; + } + table += '</table>'; + document.getElementById('Shape').innerHTML = table; + } + + function update_lonely() { + let cells = document.getElementById('Shape').getElementsByTagName('input'); + + let neigbours = [[0, 1], [0, -1], [1, 0], [-1, 0], [1, 1], [-1, -1], [1, -1], [-1, 1]]; + + for (let i = 0; i != cells.length; i++) { + cells[i].parentNode.className = ''; + + if (!cells[i].checked) continue; + let x = parseInt(cells[i].getAttribute('data-x')); + let y = parseInt(cells[i].getAttribute('data-y')); + + let is_ok = true; + for (let c = 0; c != neigbours.length; c++) { + if (!test_cell(x + neigbours[c][0], y + neigbours[c][1])) { + is_ok = false; + break; + } + } + + if (is_ok) { + cells[i].parentNode.className = 'lonely'; + } + } + } + + function test_cell(x, y) { + if (x < 0 || y < 0 || x >= w || y >= h) { + return true; + } + else { + let cell = document.querySelector('#Shape tr td input[data-x="'+ x + '"][data-y="' + y + '"]'); + return !cell.checked; + } + } + + set_shape(); + </script> +</body> +</html> |