JSFiddle - React, Tailwind, and code Playground

by Alfie

HTML

<input type="text" placeholder="Player name" id="name" />
<input type="button" id="add" value="Add" />
<input type="button" value="reshuffle" id="reshuffle" />
<input type="checkbox" id="check" name="check" checked/>
<label for="check">More than one table?</label>
<input type="button" id="reset" value="reset" />
<div class="container">
    <div id="container"></div>
    <div id="container1"></div>
</div>

CSS

body {
    padding: 2em;
    font-family: Arial, Liberation Sans, DejaVu Sans, sans-serif;
}
#container {
    width: 500px;
    height:500px;
    border: 1px solid #000;
    float:left;
    position:relative;
}
#container1 {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    float:left;
    position:relative;
}
.field {
    position:absolute
}
.field:hover {
    z-index:10001;
}
.circleBase {
    border-radius: 50%;
}
.type2 {
    width: 15%;
    height: 15%;
    background: #FFF;
    border: 2px solid grey;
}
.circleBase p {
    text-align:center;
    margin-top:40%;
    color:grey;
    position:relative;
}

JavaScript

var players = [];
$('#add').on('click', function () {
    add();
});
$('#check').on('change', function () {
    this.checked ? $('#container1').show() : $('#container1').hide();
    shuffle(players);
    placePlayers();
});
$('#reshuffle').on('click', function () {
    shuffle(players);
    placePlayers();
});
$("#name").on('click', function () {
    this.select();
}).on('keypress', function (e) {
    if (e.which == 13) {
        add();
        this.value = "";
    }
});
$('#reset').on('click', function () {
    players = [];
    $('.field').remove();
});

function add() {
    if ($('#name').val() != "") {
        players.push($('#name').val());
        shuffle(players);
        placePlayers();
    }
}

function shuffle(o) {
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

function placePlayers() {
    $('.field').remove();
    var tablecount = "";
    for (var i = 0; i < players.length; i++) {
        console.log(parseInt(players.length / 2));
        i >= parseInt(players.length / 2) ? tablecount = 1 : tablecount = "";
        var chk = $('#check').prop('checked');
        chk == false ? tablecount = "" : tablecount = tablecount;
        $('<div>', {
            class: "circleBase type2 field"
        }).append($('<p>', {
            html: players[i]
        })).appendTo('#container' + tablecount);
    }
    var radius = 200;
    var fields = $('.field'),
        container = $('[id^="container"]'),
        width = container.width(),
        height = container.height();
    var angle = 0

    container.each(function () {
        angle = 0;
        step = (2 * Math.PI) / $(this).find('.field').length;
        $(this).find('.field').each(function () {
            var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
            var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
            console.log($(this).text(), x, y);
         ...