From e642e919b5bf7b6191147ffb2effe916d40f9121 Mon Sep 17 00:00:00 2001
From: Pierre Jarriges <pierre.jarriges@tutanota.com>
Date: Mon, 8 Nov 2021 17:53:51 +0100
Subject: [PATCH] play button loading state
---
public/games/games.js | 16 +++++++++---
public/style/style.css | 25 +------------------
.../pages/games/components/game-article.js | 16 +++++++++---
3 files changed, 25 insertions(+), 32 deletions(-)
diff --git a/public/games/games.js b/public/games/games.js
index 23f3b74..573b115 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 61b9838..3a5bebb 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 e8ace45..6308e65 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;
}
}
--
GitLab