Board_setup.js

const lines = Array.from(document.querySelectorAll("line"));
const weights=Array.from(document.querySelectorAll(".weight-text"));
const outer_btn = document.querySelectorAll(".button.outer");
const middle_btn = document.querySelectorAll(".button.middle");
const inner_btn = document.querySelectorAll(".button.inner");


const getCenter = (el) => {
    const rect = el.getBoundingClientRect();
    const parent = el.parentElement.getBoundingClientRect();
    return {
        x: rect.left + rect.width / 2 - parent.left,
        y: rect.top + rect.height / 2 - parent.top
    };
};

function updateEdges() {

    const updateLine =(line,text,p1,p2) =>{
        line.setAttribute("x1",p1.x)
        line.setAttribute("y1",p1.y)
        line.setAttribute("x2",p2.x)
        line.setAttribute("y2",p2.y)
        
        const mx = (p1.x + p2.x) / 2;
        const my = (p1.y + p2.y) / 2;

        const dx = p2.x - p1.x;
        const dy = p2.y - p1.y;
        const len=  Math.hypot(dx, dy);

        // Offset perpendicular to the line by 10px
        const offset = 20;
        const ox = -dy / len * offset;
        const oy = dx / len * offset;

        const cx = mx - ox;
        const cy = my - oy;

        const angle = Math.atan2(dy, dx) * 180 / Math.PI;

        text.setAttribute("x", cx);
        text.setAttribute("y", cy);
        text.setAttribute("transform", "");
        text.setAttribute("class", "weight-text"); 
    };
    for (let i = 0; i < 6; i++) {
        const p1 = getCenter(outer_btn[i]);
        const p2 = getCenter(outer_btn[(i + 1) % 6]);
        updateLine(lines[i],document.getElementById(`weight${i+1}`),p1,p2);
    }

    for (let i = 0; i < 6; i++) {
        const p1 = getCenter(middle_btn[i]);
        const p2 = getCenter(middle_btn[(i + 1) % 6]);
        updateLine(lines[i+6],document.getElementById(`weight${i+7}`),p1,p2);
    }

    for (let i = 0; i < 6; i++) {
        const p1 = getCenter(inner_btn[i]);
        const p2 = getCenter(inner_btn[(i + 1) % 6]);
        updateLine(lines[i+12],document.getElementById(`weight${i+13}`),p1,p2);
    }

    //for connecting edges outer-middle
    for (let i=1,j=0; i<6,j<3; i=i+2,j++){
        const p1=getCenter(outer_btn[i]);
        const p2=getCenter(middle_btn[(i+6)%6]);
        updateLine(lines[j+18],document.getElementById(`weight${j+19}`),p1,p2);
    }

    //for connecting edges middle-inner
    for (let i=0,j=0; i<6,j<3; i=i+2,j++){
        const p1=getCenter(middle_btn[i]);
        const p2=getCenter(inner_btn[(i+6)%6]);
        updateLine(lines[j+21],document.getElementById(`weight${j+22}`),p1,p2);
    }
}

window.addEventListener("load", updateEdges);
window.addEventListener("resize", updateEdges);