I help organise a ‘golf society’ and each week we make a draw to decide who is playing with who, by pulling numbers out of a’ hat’. I am in the process of building a website (app) and want to add a draw function.

The web app is written in NextJS and uses Supabase for auth and member / event data.

So the parameters are:

Total numbers: 4, (not 5), 6 …… up to 32

slot size: 4 or 3 (i.e. preferably 4 i.e teams of 2 x 2 players but can be 3. (How 3 players work is a golf issue not a coding issue)

Table order: The ‘3 balls’ need to be at the top of the table.

My data: Is drawn from Supabase. The query filters on a date and only picks players who have said they will play. A function then adds a random number to each of the players. The final data is an array of ‘members’. Each member being an object including {name: bill, rnd: 0.5565789}

Logic

If the leftOver (see code below) is 3, then I need 1 x 3 players in a row (each with a blank field under column 4) and the rest rows in 4 filled columns.

If the leftOver is 2, then I need 2 rows x 3 columns (each with a blank field under column 4) and the rest in 4 filled columns.

If the leftOver is 1, then I need 3 rows x 3 columns (each with a blank field under column 4) and the rest in 4 filled columns.

If the leftOver is 0, then all rows are all 4 filled columns.

Initial code below. I need to dynamically fill a table with rows of 3 or 4 filled by member.names using the random number to order them.

I am sure I can do it (in a long laborious and messy way) but I am looking for a code efficient solution and hope someone can help.

Thank you

My baseline code is:

const date = await getLatestDate()
        if (!date) { throw Error }

        const members = await getMembers(date)
        if (!members) { throw Error }

        const playingMembers: Member[] = members.filter(
            (members) => members.playing == true)

        const numberPlaying: number = playingMembers.length

        // CODE: won't work with <3 or 5

        playingMembers.forEach(element => {
            element.rnd = Math.random()
        })

        const leftOver = numberPlaying % 4