Help in generating the grid of the tournament?

Question

JavaScript

For a better understanding, I will describe what I want to ask, I will try to make it more or less abstract:
There is a participant (user), he can have a team (team), there is also a list of tournaments (tournaments), each team can take part in one of tournaments available to it, it turns out that games (matches \ match) can take place within the tournament.
Let the tournament algorithm be Single Elimination(playoff, Olympic system).
So, the following results from all this: -
the user joins the team or creates one (everything is clear with this)
- the team applies for the tournament (there are no problems with this either)
- the tournament registration time is coming to an end:
a) registration is closed (how is it better to do this? use Schedule from the java.util.Timer package? for example, registration should close at such and such a time)
b) And then, most likely, a grid is formed that can be obtained on the client (at this stage, too it’s not clear how best to do it, so as not to write some nonsense, which then can’t be refactored normally)
Actually, we need ideas, tips on how to do it better, so that it’s convenient to send it to the client later (it works with angular with rest api), and how to fix all these games/matches. And is the structure correct?

Answer 1

About the first part - I suppose that I would simply calculate the registration end time at the time of the tournament creation, and synchronize it with the client without any timers on the server - what for to load it?
For the second part - here is a ready-made article for you on how to draw a tournament tree using d3 - in my opinion, the simplest and most intelligent solution on js - www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html