diff --git a/app.py b/app.py index ea86627..fde8165 100644 --- a/app.py +++ b/app.py @@ -17,4 +17,8 @@ def get_boardgame(): @app.get('/statistics') def get_statistics(): - return render_template('statistics.jinja') \ No newline at end of file + return render_template('statistics.jinja') + +@app.get('/plays') +def get_plays(): + return render_template('plays.jinja') \ No newline at end of file diff --git a/static/javascript/main.js b/static/javascript/main.js index 21ed990..f0e6a9f 100644 --- a/static/javascript/main.js +++ b/static/javascript/main.js @@ -195,4 +195,68 @@ async function loadGame() { $('#boardgame_link').attr('href', 'https://boardgamegeek.com/boardgame/' + boardgame_id) +} + +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) + } + + } \ No newline at end of file diff --git a/templates/plays.jinja b/templates/plays.jinja new file mode 100644 index 0000000..0594551 --- /dev/null +++ b/templates/plays.jinja @@ -0,0 +1,23 @@ +{% extends "base.jinja" %} + +{% block body %} + + + + {#
+
+
+ +
+

John Doe

+

Some example text.

+ Bekijk op BGG +
+
+
+

+
#} + + + +{% endblock body %} \ No newline at end of file