diff --git a/index.html b/index.html
index 9354c69..bee371f 100644
--- a/index.html
+++ b/index.html
@@ -13,16 +13,19 @@
-
-
-
- | Naam |
- Beschrijving |
-
-
-
-
-
+
+
+
+
+ | Thumbnail |
+ Naam |
+ Beschrijving |
+
+
+
+
+
+
diff --git a/scripts/main.js b/scripts/main.js
index 7017c8a..184352a 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -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])
}
}
\ No newline at end of file