diff --git a/public/games/games.js b/public/games/games.js index 23f3b749558cb8201b430cc85d3d1df3f023e0c1..573b1150c38ca9fffd9b9750e03827132a0788a1 100644 --- a/public/games/games.js +++ b/public/games/games.js @@ -3507,7 +3507,11 @@ class GameArticle { }; } - load_and_run_mentalo_game(filename) { + load_and_run_mentalo_game(filename, button_element) { + const button_text = button_element.innerHTML; + button_element.innerHTML = "Loading ..."; + button_element.style.pointerEvents = "none"; + fetch_json_or_error_text(`${data_url}/${filename}`) .then(game_data => { const container = document.createElement("div"); @@ -3540,15 +3544,19 @@ class GameArticle { engine.run_game(); }) .catch(err => console.log(err)) + .finally(() => { + button_element.innerHTML = button_text; + button_element.style.pointerEvents = "unset"; + }); } - handle_click_play(filename, engine) { + handle_click_play(filename, engine, e) { switch (engine) { case "mentalo": - this.load_and_run_mentalo_game(filename); + this.load_and_run_mentalo_game(filename, e.target); break; default: - alert("Error, unkown engine") + console.log("Error, unkown engine") return; } } diff --git a/public/style/style.css b/public/style/style.css index 61b98382bd929ba2cd3c22ffdd731a0192bb19e1..3a5bebbd60c34e95366d34385e1915791bad3e04 100644 --- a/public/style/style.css +++ b/public/style/style.css @@ -388,6 +388,7 @@ main #page-container .article-details ul.details-list { main #page-container .article-details ul.details-list .detail { display: grid; grid-template-columns: 1fr auto; + gap: 20px; font-size: 12px; border-bottom: 1px solid #d4d9dd; padding: 5px 0; @@ -396,30 +397,6 @@ main #page-container .article-details ul.details-list .detail label { font-weight: bold; color: #6b7880; } -main #page-container .article-details ul.details-list .detail ul { - display: flex; - flex-wrap: wrap; - gap: 10px; -} -main #page-container .article-details .detail { - display: grid; - grid-template-columns: 1fr auto; - font-size: 12px; - border-bottom: 1px solid #d4d9dd; - padding: 5px 0; -} -main #page-container .article-details .detail label { - font-weight: bold; - color: #6b7880; -} -main #page-container .article-details .detail .label { - color: #aabbc8; -} -main #page-container .article-details .detail ul { - display: flex; - flex-wrap: wrap; - gap: 10px; -} main #page-container #home-page { display: flex; flex-direction: column; diff --git a/website/src/pages/games/components/game-article.js b/website/src/pages/games/components/game-article.js index e8ace45e991d2187bf261219fc2435ed9e46f13f..6308e65a25509cbdc3752dfeec0b43fc4579c990 100644 --- a/website/src/pages/games/components/game-article.js +++ b/website/src/pages/games/components/game-article.js @@ -33,7 +33,11 @@ class GameArticle { }; } - load_and_run_mentalo_game(filename) { + load_and_run_mentalo_game(filename, button_element) { + const button_text = button_element.innerHTML; + button_element.innerHTML = "Loading ..."; + button_element.style.pointerEvents = "none"; + fetch_json_or_error_text(`${data_url}/${filename}`) .then(game_data => { const container = document.createElement("div"); @@ -66,15 +70,19 @@ class GameArticle { engine.run_game(); }) .catch(err => console.log(err)) + .finally(() => { + button_element.innerHTML = button_text; + button_element.style.pointerEvents = "unset"; + }); } - handle_click_play(filename, engine) { + handle_click_play(filename, engine, e) { switch (engine) { case "mentalo": - this.load_and_run_mentalo_game(filename); + this.load_and_run_mentalo_game(filename, e.target); break; default: - alert("Error, unkown engine") + console.log("Error, unkown engine") return; } }