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

23
index.html
View file

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

16
scripts/main.js
View file

@ -13,11 +13,17 @@ async function makeAPIRequest(request) {
} }
} }
function add_boardgame_row(html_table, boardgame_json) { function add_boardgame_row(html_tbody, boardgame_json) {
var row = html_table.insertRow() var row = html_tbody.insertRow();
var icon_cell = row.insertCell();
var name_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 name_cell.innerHTML = boardgame_json.name
description_cell.innerHTML = boardgame_json.description description_cell.innerHTML = boardgame_json.description
} }
@ -27,9 +33,9 @@ async function loadOwnedGames() {
all_owned_games = await makeAPIRequest(loadGamesRequest) all_owned_games = await makeAPIRequest(loadGamesRequest)
console.log("Loaded owned games:", all_owned_games) 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++) { 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])
} }
} }