Дмитрий Винокуров

Давно не заходил, решил так:

const calculateCoordinate = (count, r, cx, cy) => {
    const sectors = [];
    let startAngle = -90;
    let endAngle = 0;
    let maxCard = 6;
    for (let i=0; i<count; i++)  {
        if (i<=maxCard-1){
            const angle = 360/maxCard;
            endAngle += angle;
            const rad = Math.PI / 180;
            const x = cx + r * Math.cos(startAngle * rad);
            const y = cy + r * Math.sin(startAngle * rad);
            startAngle += angle;
            sectors.push({x, y});
        } else {
            const angle = 360/(count-maxCard);
            endAngle += angle;
            const rad = Math.PI / 180;
            const x = cx + r * 2 * Math.cos(startAngle * rad);
            const y = cy + r * 2 * Math.sin(startAngle * rad);
            startAngle += angle;
            sectors.push({x, y});
        }
    }
    return sectors;
};

При реализации учитывал максимальное кол-во фишек - 20шт. Максимальное кол-во радиусов - 2

Если кому интересно как реализовал:
1 - вешаю реф и записываю в глобальный стейт координаты по центру элемента (компоненты знают где они находятся по осям x,y)
2 - пропсами кидаю координаты мыши относительно родителя (теперь компоненты знают где курсор);
3 - Установил размер максимального увеличения и минимальное расстояние для срабатывания.
4 - Увеличиваю размер в процентном соотношении, от растояния ( например максимальное увеличение W и H 50px,
расстояние срабатывания 80 - это 0% , а в центре это 100%)

как-то так