'strict';
const ROWS = 40 ;
const COLUMNS = 30;
const DELTA = 40;
let corps = document.querySelector('svg defs');
const NS = 'http://www.w3.org/2000/svg';

//():Element, string, string, object, Array<string> => void
const addElement = function(parent, ns, type, attributes, classes) {
  const element = document.createElementNS(ns, type);
  for (const ATTRIBUTE in attributes) {
    element.setAttribute(ATTRIBUTE, attributes[ATTRIBUTE]);
  }
  parent.appendChild(element);
};

const lineAttrs = {
  id: 'verBase',
  stroke: 'gray',
  'stroke-size': 0.1,
  x1: 0,
  y1: 0,
  x2: 0,
  y2: DELTA*COLUMNS
};
addElement(corps, NS, 'line', lineAttrs, []);

lineAttrs.id = 'horBase';
lineAttrs.x2 = DELTA*ROWS;
lineAttrs.y2 = 0;
addElement(corps, NS, 'line', lineAttrs, []);

corps = document.querySelector('svg');
const draw = function(size, angle) {
  if (angle === 'vertical') {
    for (let i=0; i<=size; i++) {
      const useAttrs = {
        x: i*DELTA,
        y: 0,
        href: '#verBase',
      };
      addElement(corps, NS, 'use', useAttrs, ['ver']);
    }
  } else if (angle === 'horizontal') {
    for (let i=0; i<=size; i++) {
      const useAttrs = {
        x: 0,
        y: i*DELTA,
        href: '#horBase',
      };
      addElement(corps, NS, 'use', useAttrs, ['hor']);
    }
  } else {
    throw new Error('vertical or horizontal angles only !');
  }
};

draw(ROWS, 'vertical');
draw(COLUMNS, 'horizontal');