document.body.onload=loadPlays()

async function loadPlays() {

    function createPlayCard(play){
        const card_div = document.createElement('div')
        card_div.className = "card"

        const card_image = document.createElement('img')
        card_image.src = play.boardgame.image_url

        const card_body = document.createElement('div')
        card_body.className = 'card-body'

        const card_title = document.createElement('h4')
        card_title.innerHTML = play.boardgame.name

        const player_names = document.createElement('div')

        for (let player_index in play.players){
            const player = play.players[player_index]
            const player_div = document.createElement('div')
            player_div.innerHTML = player.name

            if (player.has_won) {
                player_div.style.color = "green"
            }

            player_names.appendChild(player_div)
        }
        
        card_body.appendChild(card_title)
        card_body.appendChild(player_names)

        card_div.appendChild(card_image)
        card_div.appendChild(card_body)

        return card_div

    }

    const all_plays = await makeRequest(api_url + '/plays?filter_expansions_out=true')
    
    const MAX_COLUMNS = 4
    const column_width = 12 / MAX_COLUMNS

    const rows_needed = Math.ceil(all_plays.length / MAX_COLUMNS)

    for (let row_number = 0; row_number < rows_needed; row_number++){
        const row_div = document.createElement('div')
        row_div.className = 'row'
        for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
            const column_div = document.createElement('div')
            column_div.className = "col-sm-" + column_width

            const play_card = createPlayCard(all_plays[(row_number * MAX_COLUMNS) + column_number])

            column_div.appendChild(play_card)
            row_div.appendChild(column_div)
        }
        document.body.appendChild(row_div)
    }


}