101 lines
No EOL
3.1 KiB
JavaScript
101 lines
No EOL
3.1 KiB
JavaScript
document.body.onload=loadPlays()
|
|
document.getElementById('plays_nav').classList.add('active')
|
|
|
|
async function loadPlays() {
|
|
|
|
function createPlayCard(play){
|
|
|
|
const card_div = document.createElement('div')
|
|
card_div.classList.add("card")
|
|
card_div.classList.add('h-100')
|
|
|
|
const boardgame_image_linked = document.createElement('a')
|
|
boardgame_image_linked.setAttribute('href', '/boardgame?id=' + play.boardgame.id)
|
|
|
|
const card_image = document.createElement('img')
|
|
card_image.src = play.boardgame.image_url
|
|
card_image.classList.add('card-img-top')
|
|
card_image.classList.add('boardgame_play_card_image')
|
|
|
|
boardgame_image_linked.appendChild(card_image)
|
|
|
|
const card_body = document.createElement('div')
|
|
card_body.classList.add('card-body')
|
|
|
|
const card_title = document.createElement('h4')
|
|
card_title.innerHTML = play.boardgame.name
|
|
card_title.classList.add('card-title')
|
|
|
|
const player_names = document.createElement('p')
|
|
player_names.classList.add('card-text')
|
|
|
|
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(boardgame_image_linked)
|
|
card_div.appendChild(card_body)
|
|
|
|
return card_div
|
|
|
|
}
|
|
|
|
const all_plays = await makeRequest(api_url + '/plays?filter_expansions_out=true')
|
|
|
|
|
|
const row = document.createElement('row')
|
|
row.classList.add('row')
|
|
row.classList.add('row-cols-1')
|
|
row.classList.add('row-cols-md-4')
|
|
|
|
for (let play_index in all_plays){
|
|
let current_play = all_plays[play_index]
|
|
|
|
const column = document.createElement('div')
|
|
column.classList.add('col')
|
|
|
|
let card = createPlayCard(current_play)
|
|
|
|
column.appendChild(card)
|
|
|
|
row.appendChild(column)
|
|
|
|
}
|
|
|
|
|
|
|
|
// 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++) {
|
|
// if(((row_number * MAX_COLUMNS) + column_number) == all_plays.length){
|
|
// break
|
|
// }
|
|
// const column_div = document.createElement('div')
|
|
// column_div.className = "col-sm-" + column_width
|
|
|
|
// const current_play = all_plays[(row_number * MAX_COLUMNS) + column_number]
|
|
// const play_card = createPlayCard(current_play)
|
|
|
|
// column_div.appendChild(play_card)
|
|
// row_div.appendChild(column_div)
|
|
// }
|
|
// document.body.appendChild(row_div)
|
|
// }
|
|
|
|
document.body.append(row)
|
|
|
|
document.getElementById('plays_loading_spinner').remove()
|
|
|
|
} |