Yarninator/boardgame_site_v2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Table now loads boardgame thumbnails

Browse source
This commit is contained in:
Yarne Coppens 2024-08-08 16:32:05 +02:00
parent f944e320ef
commit bc494a6133
2 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -13,16 +13,19 @@
<body onload="loadOwnedGames()">
<div class="table-responsive">
<table id="boardgame_table" class="table table-striped">
<thead>
<tr>
<th scope="col">Thumbnail</th>
<th scope="col">Naam</th>
<th scope="col">Beschrijving</th>
</tr>
</thead>
<tbody>
<tbody id="boardgame_table_tbody">
</tbody>
</table>
</div>
</body>

16
scripts/main.js
View file

@ -13,11 +13,17 @@ async function makeAPIRequest(request) {
}
}
function add_boardgame_row(html_table, boardgame_json) {
var row = html_table.insertRow()
function add_boardgame_row(html_tbody, boardgame_json) {
var row = html_tbody.insertRow();
var icon_cell = row.insertCell();
var name_cell = row.insertCell();
var description_cell = row.insertCell()
var description_cell = row.insertCell();
var icon_image = document.createElement('img')
icon_image.src = boardgame_json.thumbnail_url
icon_image.classList.add("img-thumbnail")
icon_cell.appendChild(icon_image)
name_cell.innerHTML = boardgame_json.name
description_cell.innerHTML = boardgame_json.description
}
@ -27,9 +33,9 @@ async function loadOwnedGames() {
all_owned_games = await makeAPIRequest(loadGamesRequest)
console.log("Loaded owned games:", all_owned_games)
var boardgame_table = document.getElementById("boardgame_table")
var boardgame_tbody = document.getElementById("boardgame_table_tbody")
for (index = 0; index < all_owned_games.length; index++) {
add_boardgame_row(boardgame_table, all_owned_games[index])
add_boardgame_row(boardgame_tbody, all_owned_games[index])
}
}