JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

<svg id="tournament"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"/>

SASS

html,
body
  padding: 0
  margin: 0
  width: 100%
  height: 100%
  
#tournament
  width: 100%
  height: 100%
  background-color: #0000001a
  
#tournament .rect:hover
  fill: #fc0

JavaScript

var svg = document.getElementById("tournament");
const NS = "http://www.w3.org/2000/svg";

function createRect(opts) {
  let el = document.createElementNS(NS, "rect");

  el.setAttributeNS(null, "data-self", opts.self);
  el.setAttributeNS(null, "data-mate", opts.mate);
  el.setAttributeNS(null, "class", "rect");
  el.setAttributeNS(null, "x", opts.x);
  el.setAttributeNS(null, "y", opts.y);
  el.setAttributeNS(null, "width", 100);
  el.setAttributeNS(null, "height", 50);
  el.setAttributeNS(null, "fill", "none");
  el.setAttributeNS(null, "stroke", "#000000");

  return el;
}

const W = 100;
const H = 50;
const M = 10;
svg.appendChild(createRect({ x: 10, y: M * 1 + H * 0, self: '1', mate: '2' }));
svg.appendChild(createRect({ x: 10, y: M * 2 + H * 1, self: '2', mate: '1' }));
svg.appendChild(createRect({ x: 10, y: M * 3 + H * 2, self: '3', mate: '4' }));
svg.appendChild(createRect({ x: 10, y: M * 4 + H * 3, self: '4', mate: '3' }));

let s = svg.querySelectorAll('.rect').forEach(rect => {
  rect.addEventListener('click', function(e) {
  	let self = e.target;
    let mate = svg.querySelector(`[data-self='${self.getAttribute('data-mate')}']`);
    
		let selfCenter = (function() {
    	let size = self.getBoundingClientRect();
   		return size.top  + size.height / 2
		})();
    
		let mateCenter = (function() {
    	let size = mate.getBoundingClientRect();
   		return size.top  + size.height / 2
		})();
    
    let center = (mateCenter - selfCenter) / 2;
    svg.appendChild(createRect({ x: M * 2 + W * 1, y: (selfCenter + center) - H / 2, self: '1', mate: '' }));
  })
});