refactoring: svg stuff in own class

Author: RomanSixty

03/solve.js

@@ -170,39 +170,19 @@ adventofcode.day3_get_bounds = function(node_1, node_2) {
  * @param {object[]} crossings found crossings [x,y,node1,node2]
  */
 adventofcode.day3_print_svg = function(paths, crossings) {
-    let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('version', '1.1');
-    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svg.setAttribute('viewBox', (this.day3_min_x - 50) + ' ' + (this.day3_min_y - 50) + ' ' + (this.day3_max_x + Math.abs(this.day3_min_x) + 100) + ' ' + (this.day3_max_y + Math.abs(this.day3_min_y) + 100));
-
-    let path_1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path_1.setAttribute('d', 'M' + paths[0].map(node => node.x+','+node.y).join(" "));
-    path_1.setAttribute('stroke', 'red');
-    path_1.setAttribute('stroke-width', '30');
-    path_1.setAttribute('fill', 'none');
-    svg.appendChild(path_1);
-
-    let path_2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path_2.setAttribute('d', 'M' + paths[1].map(node => node.x+','+node.y).join(" "));
-    path_2.setAttribute('stroke', 'green');
-    path_2.setAttribute('stroke-width', '30');
-    path_2.setAttribute('fill', 'none');
-    svg.appendChild(path_2);
-
-    let origin = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-    origin.setAttribute('cx', '0');
-    origin.setAttribute('cy', '0');
-    origin.setAttribute('r', '100');
-    origin.setAttribute('fill', 'black');
-    svg.appendChild(origin);
+    let svg = aoc_svg.svg(
+        this.day3_max_x + Math.abs(this.day3_min_x) + 100,
+        this.day3_max_y + Math.abs(this.day3_min_y) + 100,
+        this.day3_min_x - 50,
+        this.day3_min_y - 50
+    );
+
+    svg.appendChild(aoc_svg.path(paths[0].map(node => node.x+','+node.y), 30, 'red'));
+    svg.appendChild(aoc_svg.path(paths[1].map(node => node.x+','+node.y), 30, 'green'));
+    svg.appendChild(aoc_svg.circle(0, 0, 100));
 
     crossings.forEach(crossing => {
-        let dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        dot.setAttribute('cx', crossing.x);
-        dot.setAttribute('cy', crossing.y);
-        dot.setAttribute('r', '70');
-        dot.setAttribute('fill', 'blue');
-        svg.appendChild(dot);
+        svg.appendChild(aoc_svg.circle(crossing.x, crossing.y, 70, 'blue'));
     });
 
     document.querySelector('#output_area').appendChild(svg);

08/solve.js

@@ -60,29 +60,19 @@ adventofcode.day8_build_layers = function(input) {
 };
 
 adventofcode.day8_print_svg = function(layers) {
-    let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('version', '1.1');
-    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svg.setAttribute('viewBox', '0 0 ' + this.day8_width + ' ' + this.day8_height);
+    let svg = aoc_svg.svg(this.day8_width, this.day8_height);
 
     layers = layers.reverse();
 
     layers.forEach(layer => {
-        let layergroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        let layergroup = aoc_svg.group();
 
         layer.split("").forEach((color,idx) => {
             if (color < 2) {
                 const y = Math.floor(idx / this.day8_width);
                 const x = idx % this.day8_width;
 
-                let pixel = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-                pixel.setAttribute('x', x);
-                pixel.setAttribute('y', y);
-                pixel.setAttribute('width', 1);
-                pixel.setAttribute('height', 1);
-                pixel.setAttribute('fill', color === '0' ? 'white' : 'black');
-
-                layergroup.appendChild(pixel);
+                layergroup.appendChild(aoc_svg.rect(x, y, 1, 1, color === '0' ? 'white' : 'black'));
             }
         });
 

11/solve.js

@@ -74,14 +74,10 @@ adventofcode.day11_paint_hull = function(tiles) {
         min_y = 0,
         max_y = 0;
 
-    svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('version', '1.1');
-    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-
-    let background = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-    background.setAttribute('fill', 'black');
-    background.setAttribute('width', '100%');
-    background.setAttribute('height', '100%');
+    let svg = aoc_svg.svg();
+
+    let background = aoc_svg.rect();
+
     svg.appendChild(background);
 
     tiles.forEach(tile => {
@@ -90,18 +86,11 @@ adventofcode.day11_paint_hull = function(tiles) {
         min_y = Math.min(min_y, tile.y);
         max_y = Math.max(max_y, tile.y);
 
-        if (tile.color === 1) {
-            let pixel = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-            pixel.setAttribute('x', tile.x);
-            pixel.setAttribute('y', tile.y);
-            pixel.setAttribute('width', '1');
-            pixel.setAttribute('height', '1');
-            pixel.setAttribute('fill', 'white');
-            svg.appendChild(pixel);
-        }
+        if (tile.color === 1)
+            svg.appendChild(aoc_svg.rect(tile.x, tile.y, 1, 1, 'white'));
     });
 
-    svg.setAttribute('viewBox', min_x + ' ' + min_y +' ' + (max_x - min_x + 1) + ' ' + (max_y - min_y + 1));
+    aoc_svg.setViewBox(svg, max_x - min_x + 1, max_y - min_y + 1, min_x, min_y);
 
     document.querySelector('#output_area').appendChild(svg);
 };

13/solve.js

@@ -79,40 +79,16 @@ adventofcode.day13_print_screen = function(tiles, max_x, max_y) {
     if (document.querySelector('#game_area'))
         svg = document.querySelector('#game_area');
     else
-    {
-        svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('id', 'game_area');
-        svg.setAttribute('version', '1.1');
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        svg.setAttribute('viewBox', '0 0 ' + (max_x * 20 + 20) + ' ' + (max_y * 20 + 20));
-    }
+        svg = aoc_svg.svg(max_x + 1, max_y + 1);
 
-    tiles[0].forEach(tile => svg.appendChild(this.day13_get_svg_pixel(tile, 'black')));
-    tiles[1].forEach(tile => svg.appendChild(this.day13_get_svg_pixel(tile, 'gray')));
-    tiles[2].forEach(tile => svg.appendChild(this.day13_get_svg_pixel(tile, 'yellow')));
-    tiles[3].forEach(tile => svg.appendChild(this.day13_get_svg_pixel(tile, 'blue')));
+    tiles[0].forEach(tile => svg.appendChild(aoc_svg.rect(tile.x, tile.y, 1, 1, 'black')));
+    tiles[1].forEach(tile => svg.appendChild(aoc_svg.rect(tile.x, tile.y, 1, 1, 'gray')));
+    tiles[2].forEach(tile => svg.appendChild(aoc_svg.rect(tile.x, tile.y, 1, 1, 'yellow')));
+    tiles[3].forEach(tile => svg.appendChild(aoc_svg.rect(tile.x, tile.y, 1, 1, 'blue')));
 
     tiles[4].forEach(tile => {
-        let ball = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        ball.setAttribute('cx', tile.x * 20 + 10);
-        ball.setAttribute('cy', tile.y * 20 + 10);
-        ball.setAttribute('r', '8');
-        ball.setAttribute('fill', 'red');
-        svg.appendChild(ball);
+        svg.appendChild(aoc_svg.circle(parseInt(tile.x) + .5, parseInt(tile.y) + .5, .5, 'red'));
     });
 
     document.querySelector('#output_area').appendChild(svg);
-};
-
-adventofcode.day13_get_svg_pixel = function(tile, color) {
-    let pixel = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-
-    pixel.setAttribute('x', tile.x * 20);
-    pixel.setAttribute('y', tile.y * 20);
-    pixel.setAttribute('width',  '19');
-    pixel.setAttribute('height', '19');
-
-    pixel.setAttribute('fill', color);
-
-    return pixel;
 };

15/solve.js

@@ -99,19 +99,15 @@ adventofcode.day15_get_move_queue = function(last_move) {
 };
 
 adventofcode.day15_draw_map = function(map) {
-    let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('version', '1.1');
-    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    let svg = aoc_svg.svg();
 
     let min_x = 0,
         min_y = 0,
         max_x = 0,
         max_y = 0;
 
-    let background = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-    background.setAttribute('width', '100%');
-    background.setAttribute('height', '100%');
-    background.setAttribute('fill', 'grey');
+    let background = aoc_svg.rect(0, 0, '100%', '100%', 'grey');
+
     svg.appendChild(background);
 
     map.forEach(cell => {
@@ -120,32 +116,21 @@ adventofcode.day15_draw_map = function(map) {
         min_y = Math.min(min_y, cell.y);
         max_y = Math.max(max_y, cell.y);
 
-        let pixel = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        pixel.setAttribute('x', cell.x);
-        pixel.setAttribute('y', cell.y);
-        pixel.setAttribute('width', '1');
-        pixel.setAttribute('height', '1');
+        let color = 'black';
 
         switch (cell.state) {
-            case 0: pixel.setAttribute('fill', 'grey'); break;
-            case 1: pixel.setAttribute('fill', 'black'); break;
-            case 2: pixel.setAttribute('fill', 'red'); break;
+            case 0: color = 'grey'; break;
+            case 1: color = 'black'; break;
+            case 2: color = 'red'; break;
         }
 
-        svg.appendChild(pixel);
+        svg.appendChild(aoc_svg.rect(cell.x, cell.y, 1, 1, color));
     });
 
-    background.setAttribute('x', min_x);
-    background.setAttribute('y', min_y);
-
-    let origin = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-    origin.setAttribute('cx', .5);
-    origin.setAttribute('cy', .5);
-    origin.setAttribute('r', .5);
-    origin.setAttribute('fill','green');
-    svg.appendChild(origin);
+    svg.appendChild(aoc_svg.circle(.5, .5, .5, 'green'));
 
-    svg.setAttribute('viewBox', min_x + ' ' + min_y + ' ' + (max_x - min_x + 1) + ' ' + (max_y - min_y + 1));
+    aoc_svg.setViewBox(svg, max_x - min_x + 1, max_y - min_y + 1, min_x, min_y);
+    aoc_svg.setPosition(background, min_x, min_y);
 
     // draw path
     let x = .5,
@@ -163,12 +148,7 @@ adventofcode.day15_draw_map = function(map) {
         nodes.push(x+','+y);
     });
 
-    let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttribute('d', 'M' + nodes.join(" "));
-    path.setAttribute('stroke', 'yellow');
-    path.setAttribute('stroke-width', '.1');
-    path.setAttribute('fill', 'none');
-    svg.appendChild(path);
+    svg.appendChild(aoc_svg.path(nodes, .1, 'yellow'));
 
     document.querySelectorAll("#output_area svg").forEach(elem => elem.remove());
     document.querySelector('#output_area').appendChild(svg);

lib.js

@@ -147,4 +147,68 @@ let aoc_intcode = {
         else
             return program[pointer];
     }
+};
+
+let aoc_svg = {
+    svg: function(width = 100, height = 100, x = 0, y = 0) {
+        let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+        svg.setAttribute('version', '1.1');
+        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+        svg.setAttribute('viewBox', x + ' ' + y + ' ' + width + ' ' + height);
+
+        return svg;
+    },
+    setViewBox: function(svg, width, height, x, y) {
+        svg.setAttribute('viewBox', x + ' ' + y + ' ' + width + ' ' + height);
+    },
+    group: function() {
+        return document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    },
+    rect: function(x = 0, y = 0, width = '100%', height = '100%', fill = 'black') {
+        let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+
+        rect.setAttribute('x', x);
+        rect.setAttribute('y', y);
+
+        rect.setAttribute('width', width);
+        rect.setAttribute('height', height);
+
+        rect.setAttribute('fill', fill);
+
+        return rect;
+    },
+    circle: function(x = 0, y = 0, radius = 1, fill = 'black') {
+        let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+
+        circle.setAttribute('cx', x);
+        circle.setAttribute('cy', y);
+        circle.setAttribute('r', radius);
+
+        circle.setAttribute('fill', fill);
+
+        return circle;
+    },
+    path: function(coordinates = [], width = 1, color = 'black') {
+        let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+        path.setAttribute('d', 'M' + coordinates.join(" "));
+
+        path.setAttribute('stroke', color);
+        path.setAttribute('stroke-width', width);
+
+        path.setAttribute('fill', 'none');
+
+        return path;
+    },
+    setPosition: function(element, x = 0, y = 0) {
+        if (element.nodeName === 'circle') {
+            element.setAttribute('cx', x);
+            element.setAttribute('cy', y);
+        } else {
+            element.setAttribute('x', x);
+            element.setAttribute('y', y);
+        }
+    }
 };