From 5c581ad3db676ab48e37c21815e6ad12049f1785 Mon Sep 17 00:00:00 2001 From: Aditya Date: Sun, 29 Dec 2024 12:13:26 +0530 Subject: [PATCH 1/4] Add: a spinner at start of color my world activity Signed-off-by: Aditya --- .../ColorMyWorld.activity/css/activity.css | 28 +++++++++++++++++++ activities/ColorMyWorld.activity/index.html | 3 ++ .../ColorMyWorld.activity/js/activity.js | 8 ++++++ 3 files changed, 39 insertions(+) diff --git a/activities/ColorMyWorld.activity/css/activity.css b/activities/ColorMyWorld.activity/css/activity.css index a7d251ef9..21da10941 100644 --- a/activities/ColorMyWorld.activity/css/activity.css +++ b/activities/ColorMyWorld.activity/css/activity.css @@ -451,3 +451,31 @@ body { background-color: #808080; border: 2px solid #808080; } + + +.loader { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8); + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; +} + +.spinner { + border: 8px solid #f3f3f3; + border-top: 8px solid #3498db; + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} \ No newline at end of file diff --git a/activities/ColorMyWorld.activity/index.html b/activities/ColorMyWorld.activity/index.html index 4a0fe61df..df1392181 100644 --- a/activities/ColorMyWorld.activity/index.html +++ b/activities/ColorMyWorld.activity/index.html @@ -70,6 +70,9 @@ --> +
+ +
diff --git a/activities/ColorMyWorld.activity/js/activity.js b/activities/ColorMyWorld.activity/js/activity.js index 40bf9cc32..d19ba9a12 100644 --- a/activities/ColorMyWorld.activity/js/activity.js +++ b/activities/ColorMyWorld.activity/js/activity.js @@ -12,6 +12,14 @@ define([ // Manipulate the DOM only when it is ready. requirejs(['domReady!'], function (doc) { + // Create a loader so that the user knows that the activity is loading while acitvity features are being initialized. + // HACK: Features take 2 seconds to load. + const loader = document.getElementById('loader'); + loader.style.display = 'flex'; // Show the loader + setTimeout(() => { + loader.style.display = 'none'; // Hide the loader after 2 seconds + }, 2000); + // Initialize the activity. activity.setup(); print(colormyworld.test()); From ef107d4e5380ca0c0ce9e2b8e7998eaa2c0eba82 Mon Sep 17 00:00:00 2001 From: Aditya Date: Sun, 29 Dec 2024 23:49:52 +0530 Subject: [PATCH 2/4] Fix spinner in colormyworld activity Signed-off-by: Aditya --- .../ColorMyWorld.activity/css/activity.css | 18 ++---------------- .../img/spinner-light.gif | Bin 0 -> 1924 bytes activities/ColorMyWorld.activity/index.html | 2 +- .../ColorMyWorld.activity/js/activity.js | 8 -------- .../ColorMyWorld.activity/lib/colormyworld.js | 10 ++++++++++ 5 files changed, 13 insertions(+), 25 deletions(-) create mode 100644 activities/ColorMyWorld.activity/img/spinner-light.gif diff --git a/activities/ColorMyWorld.activity/css/activity.css b/activities/ColorMyWorld.activity/css/activity.css index 21da10941..06136bfc7 100644 --- a/activities/ColorMyWorld.activity/css/activity.css +++ b/activities/ColorMyWorld.activity/css/activity.css @@ -455,27 +455,13 @@ body { .loader { position: fixed; - top: 0; + top: 55px; left: 0; width: 100%; height: 100%; - background: rgba(255, 255, 255, 0.8); + background: rgba(255, 255, 255, 0.227); z-index: 1000; display: flex; justify-content: center; align-items: center; -} - -.spinner { - border: 8px solid #f3f3f3; - border-top: 8px solid #3498db; - border-radius: 50%; - width: 50px; - height: 50px; - animation: spin 1s linear infinite; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } } \ No newline at end of file diff --git a/activities/ColorMyWorld.activity/img/spinner-light.gif b/activities/ColorMyWorld.activity/img/spinner-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..ddb7ff1aac1b2fc825667c157873c2c55bbe8db8 GIT binary patch literal 1924 zcmciDX;70#00!U)Urs41ND>$3-?7cZa-C@o`?~}E+$na_sVK~an51Y7o6Am#OJGNBi-|v-0K)zTz!9cZZmYYj zeiQ^4Hx2}<@9us*(zz1hB8-YDCx|yPvMXzQM{_K$!h*iJ(7x2j*bY>E)v;gG zt15c?^oIWX1BxEuJ?E}-N%%X2$C&X)nYafzWBB27BZK9$hH1k@-(v5=%efcJKAYA8 zj{X%G-GGGnp>xBKmtR{qyXkbXi>i|w&^A+i%*o~apB=fnp1EvhyA8i)zT0!ZJK|=f zGujFu=8Q?f@YHB=vJ&Q(Q2ooMB$CxnsQ@;Cl88SakbL=c9-bR}Cd`4o_e-(kkx-G` z1gxmM5nm)f#c{~lR_t33s5hr)1~uEaw)kjKO}BP*)>VmXx>RQ1;1H?TbtLMnaSW#; zj9+XgO*q{nKEpjQb`O`&-Jk8B)-S0R`xoZlkUo^CY4otNIEG*Z>9xBj^;cd~XE!if z=JK3SR%Kh!+&qgwp0nLox=TA*jYs?se%u2xUeoK&1u^$dFrFz~jrhLs@UeBBdpx|M zY)D3CZeBjWKwtxdli{#JJ47_Xo<)bn10rN1&s7)?M_u%xDH4!1ac=bhs)DA9u4+yx zQz*rfNSWBSxTLdtwZlQ%QWxV{Y9-?#zL7M}ttCzze@xWkN1wM3@#hRCqG74qOeC&J z9C^RRzb6jvbS)W0Nd^=G0Xde#v6Z!xx5H+VUZrNmDp2GD$ZAyrrw%!G2FskYEUNL97Eu}MQR$IyrnBkg(h1rW4yIQEM3J@S3&;1KqjvtHc)u##|B-p#vH)WPhuYi^mQjj0C~N7S!=n7H-h z)-{F0|AmmcM>roo8TLt*J%^c#&ZiY1FVl9S>(#+iza>x4q)s+Z@gD1* z@P^eR(w@FoxHWz6T{O`R|GvS0@PW)Hmm#QRgaoFdRCosCuGa!^PcBA73HQUcl65Dr zO|`ePK2pY_S=Cuk0cLN5NYeIMmj@%E-?ilgU&#f%3S_8AdaDu z`F^)`6_9BI%cf+|5|L?q0A9#NmQZLMl$0#@LkamJueh-M5`ik%{!(^MZk{k*qitzz zdsl7?nA3Imb6iI@->x5 zwXc~EZZLz-aKH4hJ%XN<9U8*$f;BXGrEQ^o=8paJ`*iQfV=)}tj7M$B9-E(t0}WI5 ziiH<<@gb})LXWcd=N1SGi;6?d9SD)&II^XLelX2e#DZKujgFz0`cy~Oo<~(uRW#l% zG_=kVdRXZIt%P()d)_@2TRL5aa4qGGD&I4tJNR+p1a_1(jW-f!2MXqTpXs0WExsHx Pn1F;$An(;T&^-PCGf5vc literal 0 HcmV?d00001 diff --git a/activities/ColorMyWorld.activity/index.html b/activities/ColorMyWorld.activity/index.html index df1392181..2e93ba648 100644 --- a/activities/ColorMyWorld.activity/index.html +++ b/activities/ColorMyWorld.activity/index.html @@ -71,7 +71,7 @@ -->
- +
diff --git a/activities/ColorMyWorld.activity/js/activity.js b/activities/ColorMyWorld.activity/js/activity.js index d19ba9a12..40bf9cc32 100644 --- a/activities/ColorMyWorld.activity/js/activity.js +++ b/activities/ColorMyWorld.activity/js/activity.js @@ -12,14 +12,6 @@ define([ // Manipulate the DOM only when it is ready. requirejs(['domReady!'], function (doc) { - // Create a loader so that the user knows that the activity is loading while acitvity features are being initialized. - // HACK: Features take 2 seconds to load. - const loader = document.getElementById('loader'); - loader.style.display = 'flex'; // Show the loader - setTimeout(() => { - loader.style.display = 'none'; // Hide the loader after 2 seconds - }, 2000); - // Initialize the activity. activity.setup(); print(colormyworld.test()); diff --git a/activities/ColorMyWorld.activity/lib/colormyworld.js b/activities/ColorMyWorld.activity/lib/colormyworld.js index 06116679a..f09196743 100644 --- a/activities/ColorMyWorld.activity/lib/colormyworld.js +++ b/activities/ColorMyWorld.activity/lib/colormyworld.js @@ -11,6 +11,7 @@ define(["activity/ol","util","print","l10n","flag"],function(ol,util,print,l10n, me.mode=COLORING; me.DELAY=1500.; me.RUNNING=false; + me.LOADING=false; me.saveStateCB=function(){ print("saveStateCB"); @@ -351,6 +352,11 @@ define(["activity/ol","util","print","l10n","flag"],function(ol,util,print,l10n, me.fill_all_features=function(){ print("fill_all_features"); var categories=me.CATEGORIES['keys']; + var loader = document.getElementById('loader'); + if(!me.LOADING){ + loader.style.display = 'flex'; // Show the loader + me.LOADING=true; + } for(var cidx=0;cidx Date: Sun, 5 Jan 2025 12:07:03 +0530 Subject: [PATCH 3/4] No action on click of run button when loading Signed-off-by: Aditya --- activities/ColorMyWorld.activity/lib/colormyworld.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/activities/ColorMyWorld.activity/lib/colormyworld.js b/activities/ColorMyWorld.activity/lib/colormyworld.js index f09196743..281b62010 100644 --- a/activities/ColorMyWorld.activity/lib/colormyworld.js +++ b/activities/ColorMyWorld.activity/lib/colormyworld.js @@ -11,7 +11,7 @@ define(["activity/ol","util","print","l10n","flag"],function(ol,util,print,l10n, me.mode=COLORING; me.DELAY=1500.; me.RUNNING=false; - me.LOADING=false; + me.LOADING=true; me.saveStateCB=function(){ print("saveStateCB"); @@ -481,6 +481,9 @@ define(["activity/ol","util","print","l10n","flag"],function(ol,util,print,l10n, me.RUNNING=val; } me.toggleRunning=function(){ + if (me.LOADING) { + return; + } if (me.mode==COLORING) { me.setMode(TOUR); document.getElementById("modelabel").innerHTML=l10n.get(MODE_NAMES[me.mode]); From 1c35c105d95886d92168946c2c607f50753f2bbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lionel=20Lask=C3=A9?= Date: Wed, 8 Jan 2025 22:43:42 +0100 Subject: [PATCH 4/4] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f0f75be5c..b81be0b7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,6 +37,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Vertical bar are broken in Chart/Gears activities on Windows #1646 - In the activity of food chain, the picture of frog shows incomplete #1191 - Unusual Draw in Chess Activity #1678 +- Pressing the start button in ColorMyWorld activity immediately shows "Congratulations! You finished!" #1691 ## [1.8.0] - 2024-04-10 ### Added