[UI idea] Show program is waiting (hedyorg#3668)

* Add waiting prompt + key indicator * Update messages * Include "..." in _('pygame_waiting_for_input') * Add animate-keys class to keys * Fix using ask & pressed * Fix "flickering" modals * Add codeContainsInputFunction check * Oops, add codeContainsInputFunctionBeforePygame check * Improve codeContainsInputFunctionBeforePygame check * Change class to id * Update bundles * Update CSS class to partly Tailwind * Add comment * Slightly increase space from right border on animation Co-authored-by: Timon Bakker <[email protected]>
RMerbis · Dec 1, 2022 · 273b7c9 · 273b7c9
1 parent 4615fd1
commit 273b7c9
Show file tree

Hide file tree

Showing 43 changed files with 474 additions and 426 deletions.
diff --git a/build-tools/heroku/tailwind/styles.css b/build-tools/heroku/tailwind/styles.css
@@ -536,3 +536,19 @@ input:checked ~ .toggle-path {
 .current {
   @apply text-white bg-blue-600 !important;
 }
+
+.animate-keys {
+  @apply absolute bottom-1 right-2;
+
+  /* Would be nice to animate this with Tailwind as well, but should be fine for now */
+  animation-name: animate-keys;
+  animation-duration: 1.5s;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: ease-in-out;
+}
+
+/* We could also add this keyframe to tailwind.config.js, but as it is the only one: leave here for now */
+@keyframes animate-keys {
+  0%   {bottom:15px; font-size: 1em; opacity: 1}
+  100% {bottom:100%; font-size: 4em; opacity: 0}
+}
diff --git a/messages.pot b/messages.pot
@@ -8,14 +8,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2022-11-14 09:21+0100\n"
+"POT-Creation-Date: 2022-11-17 13:12+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.10.1\n"
+"Generated-By: Babel 2.11.0\n"
 
 msgid "program_contains_error"
 msgstr ""
@@ -734,6 +734,9 @@ msgstr ""
 msgid "enter"
 msgstr ""
 
+msgid "pygame_waiting_for_input"
+msgstr ""
+
 msgid "already_program_running"
 msgstr ""
 

diff --git a/static/css/generated.css b/static/css/generated.css
diff --git a/static/js/app.ts b/static/js/app.ts
@@ -200,7 +200,7 @@ $(document).on("click", function(event){
           stopit();
           editor.focus(); // Make sure the editor has focus, so we can continue typing
         }
-        if ($('#inline-modal').is (':visible')) $('#inline-modal').hide();
+        if ($('#ask-modal').is (':visible')) $('#inline-modal').hide();
         window.State.disable_run = false;
         $ ('#runit').css('background-color', '');
         window.State.unsaved_changes = true;
@@ -322,6 +322,8 @@ export function stopit() {
       Sk.unbindPygameListeners();
 
       window.State.pygame_running = false;
+      document.onkeydown = null;
+      $('#pygame-modal').hide();
       $('#stopit').hide();
       $('#runit').show();
   }
@@ -335,9 +337,9 @@ export function stopit() {
 
       // This gets a bit complex: if we do have some input modal waiting, fake submit it and hide it
       // This way the Promise is no longer "waiting" and can no longer mess with our next program
-      if ($('#inline-modal').is(":visible")) {
-        $('#inline-modal form').submit();
-        $('#inline-modal').hide();
+      if ($('#ask-modal').is(":visible")) {
+        $('#ask-modal form').submit();
+        $('#ask-modal').hide();
       }
   }
 
@@ -1042,6 +1044,15 @@ export function runPythonProgram(this: any, code: string, hasTurtle: boolean, ha
     initSkulpt4Pygame();
     initCanvas4PyGame();
 
+    const codeContainsInputFunctionBeforePygame = new RegExp(
+      "input\\([\\s\\S]*\\)[\\s\\S]*while not pygame_end", 'gm'
+    ).test(code);
+
+    if (!hasTurtle && !codeContainsInputFunctionBeforePygame) {
+      $('#pygame-modal').show();
+    }
+
+    document.onkeydown = animateKeys;
     window.State.pygame_running = true;
   }
 
@@ -1096,6 +1107,12 @@ export function runPythonProgram(this: any, code: string, hasTurtle: boolean, ha
     load_variables(pythonVariables);
     $('#stopit').hide();
     $('#runit').show();
+
+    if (hasPygame) {
+      document.onkeydown = null;
+      $('#pygame-modal').hide();
+    }
+
     if (hasTurtle) {
       $('#saveFiles').show();
     }
@@ -1183,32 +1200,43 @@ export function runPythonProgram(this: any, code: string, hasTurtle: boolean, ha
     if (storage.getItem("prompt-" + prompt) == null) {
     Sk.execStart = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365);
     $('#turtlecanvas').hide();
+
     if (window.State.pygame_running) {
       Sk.unbindPygameListeners();
+      document.onkeydown = null;
+      $('#pygame-modal').hide();
     }
 
     return new Promise(function(ok) {
       window.State.disable_run = true;
 
-      const input = $('#inline-modal input[type="text"]');
-      $('#inline-modal .caption').text(prompt);
+      const input = $('#ask-modal input[type="text"]');
+      $('#ask-modal .caption').text(prompt);
       input.val('');
       input.attr('placeholder', prompt);
       speak(prompt)
 
       setTimeout(function() {
         input.focus();
       }, 0);
-      $('#inline-modal form').one('submit', function(event) {
+      $('#ask-modal form').one('submit', function(event) {
         window.State.disable_run = false;
         event.preventDefault();
-        $('#inline-modal').hide();
+        $('#ask-modal').hide();
+
         if (hasTurtle) {
           $('#turtlecanvas').show();
         }
+
         if (window.State.pygame_running) {
           Sk.bindPygameListeners();
+          document.onkeydown = animateKeys;
+
+          if (!hasTurtle) {
+            $('#pygame-modal').show();
+          }
         }
+
         // We reset the timer to the present moment.
         Sk.execStart = new Date ();
         // We set a timeout for sending back the input, so that the input box is hidden before processing the program.
@@ -1224,7 +1252,7 @@ export function runPythonProgram(this: any, code: string, hasTurtle: boolean, ha
 
           return false;
         });
-        $('#inline-modal').show();
+        $('#ask-modal').show();
       });
     } else {
       return new Promise(function (ok) {
@@ -1252,6 +1280,24 @@ function resetTurtleTarget() {
     return null;
 }
 
+function animateKeys(event: KeyboardEvent) {
+    const keyColors = ['#cbd5e0', '#bee3f8', '#4299e1', '#ff617b', '#ae81ea', '#68d391'];
+    const output = $("#output");
+
+    if (output !== null) {
+      let keyElement = $("<div></div>");
+      output.append(keyElement);
+
+      keyElement.text(event.key);
+      keyElement.css('color', keyColors[Math.floor(Math.random() * keyColors.length)]);
+      keyElement.addClass('animate-keys')
+
+      setTimeout(function () {
+        keyElement.remove()
+      }, 1500);
+    }
+}
+
 function initCanvas4PyGame() {
     let currentTarget = resetTurtleTarget();
 

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/templates/incl-editor-and-output.html b/templates/incl-editor-and-output.html
@@ -119,8 +119,8 @@
       <!-- tabindex=0 makes the div focusable -->
       <div id="output" tabindex=0 class="flex-1 rounded p-2 px-3 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem"></div>
       <div id="turtlecanvas" class="flex-0 ltr:pl-4 rtl:pr-4"></div>
-      <div id="inline-modal" class="flex-0" style="display: none">
-        <div class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100">
+      <div id="inline-modal" class="flex-0">
+        <div id="ask-modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none">
           <!--Title-->
           <div class="flex justify-between items-center">
             <p class="text-2xl font-bold caption">Header</p>
@@ -133,6 +133,12 @@
             </div>
           </form>
         </div>
+        <div id="pygame-modal" class="py-2 text-left px-3 border-4 border-teal-500 mt-3 rounded bg-green-100" style="display: none">
+          <!--Title-->
+          <div class="flex justify-between items-center">
+            <p class="text-2xl font-bold caption">{{_('pygame_waiting_for_input')}}</p>
+          </div>
+        </div>
       </div>
     </div>
     <!-- Col 2: run button (move below editor in single-column layout), level buttons -->

diff --git a/translations/ar/LC_MESSAGES/messages.po b/translations/ar/LC_MESSAGES/messages.po
@@ -1,3 +1,4 @@
+
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
@@ -7,13 +8,12 @@ msgstr ""
 "Last-Translator: Aseel BaniFadel <[email protected]>\n"
 "Language-Team: ar <[email protected]>\n"
 "Language: ar\n"
+"Language-Team: ar <[email protected]>\n"
+"Plural-Forms: nplurals=6; plural=n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 && n%100<=10 ? 3 : n%100>=11 ? 4 : 5;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=6; plural=n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 "
-"&& n%100<=10 ? 3 : n%100>=11 ? 4 : 5;\n"
-"X-Generator: Weblate 4.15-dev\n"
-"Generated-By: Babel 2.10.1\n"
+"Generated-By: Babel 2.11.0\n"
 
 msgid "program_contains_error"
 msgstr "هذا البرنامج يحتوي على خطأ، هل أنت متأكد من أنك تريد مشاركة البرنامج؟"
@@ -794,6 +794,9 @@ msgstr "أدخل الإجابة هنا..."
 msgid "enter"
 msgstr "إدخال"
 
+msgid "pygame_waiting_for_input"
+msgstr ""
+
 msgid "already_program_running"
 msgstr "هناك بالفعل برنامج اخر تحت التنفيذ، قم بانهاء ذلك البرنامج أولاً."
 
@@ -1650,3 +1653,4 @@ msgstr "هيدي - انضم الى صف"
 
 #~ msgid "only_teacher_create_class"
 #~ msgstr "يمكن للمعلمين فقط انشاء صفوف!"
+
diff --git a/translations/bg/LC_MESSAGES/messages.po b/translations/bg/LC_MESSAGES/messages.po
@@ -1,18 +1,18 @@
+
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2022-11-14 09:21+0100\n"
+"POT-Creation-Date: 2022-11-17 13:12+0000\n"
 "PO-Revision-Date: 2022-11-15 16:36+0000\n"
 "Last-Translator: Anonymous <[email protected]>\n"
-"Language-Team: bg <[email protected]>\n"
 "Language: bg\n"
+"Language-Team: bg <[email protected]>\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=2; plural=n != 1;\n"
-"X-Generator: Weblate 4.15-dev\n"
-"Generated-By: Babel 2.10.1\n"
+"Generated-By: Babel 2.11.0\n"
 
 msgid "program_contains_error"
 msgstr "В тази програма има грешка, сигурни ли сте че искате да я споделите?"
@@ -921,6 +921,9 @@ msgstr "Въведи отговора си тук..."
 msgid "enter"
 msgstr "Въведи"
 
+msgid "pygame_waiting_for_input"
+msgstr ""
+
 #, fuzzy
 msgid "already_program_running"
 msgstr "Start programming"
@@ -1936,3 +1939,4 @@ msgstr "Hedy - Join class"
 
 #~ msgid "only_teacher_create_class"
 #~ msgstr "Only teachers are allowed to create classes!"
+
diff --git a/translations/bn/LC_MESSAGES/messages.po b/translations/bn/LC_MESSAGES/messages.po
@@ -1,18 +1,18 @@
+
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2022-11-14 09:21+0100\n"
+"POT-Creation-Date: 2022-11-17 13:12+0000\n"
 "PO-Revision-Date: 2022-11-15 16:36+0000\n"
 "Last-Translator: Anonymous <[email protected]>\n"
-"Language-Team: bn <[email protected]>\n"
 "Language: bn\n"
+"Language-Team: bn <[email protected]>\n"
+"Plural-Forms: nplurals=2; plural=n > 1;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=2; plural=n > 1;\n"
-"X-Generator: Weblate 4.15-dev\n"
-"Generated-By: Babel 2.10.1\n"
+"Generated-By: Babel 2.11.0\n"
 
 #, fuzzy
 msgid "program_contains_error"
@@ -978,6 +978,9 @@ msgstr "Enter your answer here..."
 msgid "enter"
 msgstr "Enter"
 
+msgid "pygame_waiting_for_input"
+msgstr ""
+
 #, fuzzy
 msgid "already_program_running"
 msgstr "Start programming"
@@ -2040,3 +2043,4 @@ msgstr "Hedy - Join class"
 
 #~ msgid "only_teacher_create_class"
 #~ msgstr "Only teachers are allowed to create classes!"
+
diff --git a/translations/cs/LC_MESSAGES/messages.po b/translations/cs/LC_MESSAGES/messages.po
@@ -1,18 +1,18 @@
+
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2022-11-14 09:21+0100\n"
+"POT-Creation-Date: 2022-11-17 13:12+0000\n"
 "PO-Revision-Date: 2022-11-15 16:36+0000\n"
 "Last-Translator: Anonymous <[email protected]>\n"
-"Language-Team: cs <[email protected]>\n"
 "Language: cs\n"
+"Language-Team: cs <[email protected]>\n"
+"Plural-Forms: nplurals=3; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 2;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=3; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 2;\n"
-"X-Generator: Weblate 4.15-dev\n"
-"Generated-By: Babel 2.10.1\n"
+"Generated-By: Babel 2.11.0\n"
 
 msgid "program_contains_error"
 msgstr "Tento program obsahuje chybu, přesto jej chcete sdílet?"
@@ -930,6 +930,9 @@ msgstr "Zde napiš svou odpověď..."
 msgid "enter"
 msgstr "Enter"
 
+msgid "pygame_waiting_for_input"
+msgstr ""
+
 #, fuzzy
 msgid "already_program_running"
 msgstr "Start programming"
@@ -1922,3 +1925,4 @@ msgstr "Hedy - Join class"
 
 #~ msgid "only_teacher_create_class"
 #~ msgstr "Only teachers are allowed to create classes!"
+