fix: While loop final checks (#1513)

* fix: Rename level 109 and make popup buttons match styles

* Grey out coming soon episodes

* Merge branch 'master' into while_loop_final_checks

* Lighter grey and fix typo

* Merge remote-tracking branch 'origin/while_loop_final_checks' into while_loop_final_checks

* Remove chevron

* Merge branch 'master' into while_loop_final_checks

game/messages.py

@@ -2339,12 +2339,12 @@ def hint_level108():
 
 
 def title_level109():
-    return "Final challenge!"
+    return "Spiral challenge!"
 
 
 def description_level109():
     message = (
-        "For the last challenge, the road straight line sections of road start off increasing "
+        "For this challenge, the road straight line sections of road start off increasing "
         "by 1 after each turn and then switch to dividing by 2 with a twist!"
     )
     return build_description(title_level109(), message)
@@ -2458,7 +2458,7 @@ def hint_level109():
     lambda: "Wiggle while you work",
     lambda: build_description(
         title_level117(),
-        "This time is's a little harder. We've added the directions back in."
+        "This time it's a little harder. We've added the directions back in."
         "<br>"
         "Can you put them in the right place?"
         "<br><br>"

game/static/game/css/backgrounds.css

@@ -31,3 +31,7 @@
 .bg--loops {
     background: #3F3F3F;
 }
+
+.bg--loops-coming-soon {
+    background: #CBCBCB;
+}

game/static/game/css/level_selection.css

@@ -73,13 +73,13 @@
   margin-left: 15px;
 }
 
-#episodes .collapsed.episode_range_text::after {
+#episodes .panel-header:not(.bg--loops-coming-soon) .collapsed.episode_range_text::after {
   content: "\e250";
   font-family: "Glyphicons Halflings";
   margin-left: 10px;
 }
 
-#episodes .episode_range_text::after {
+#episodes .panel-header:not(.bg--loops-coming-soon) .episode_range_text::after {
   content: "\e252";
   font-family: "Glyphicons Halflings";
   margin-left: 10px;

game/static/game/js/drawing.js

@@ -1050,25 +1050,28 @@ ocargo.Drawing.startPopup = function (
   if (youtubeVideo[0]) {
     $("#modal-mascot").hide()
   }
+
+  // create a wrapper for the buttons that will be appended
+  let buttonDiv = $("<div>").addClass("modal-buttons")
+
+  const icons = [
+    $("<span>").addClass("iconify icon").attr("data-icon", "mdi:chevron-left"),
+    "NOT USED",
+    $("<span>").addClass("iconify icon").attr("data-icon", "mdi:chevron-right"),
+  ]
+
   // buttons are passed as html string..
   // hence this terribleness
   // check if we pass an array of buttons or just one button
   if (Array.isArray(buttons)) {
-    const icons = [
-      $("<span>").addClass("iconify icon").attr("data-icon", "mdi:chevron-left"),
-      "NOT USED",
-      $("<span>").addClass("iconify icon").attr("data-icon", "mdi:chevron-right"),
-    ]
-
     const links = [
       PREV_LEVEL_URL,
       "",
       NEXT_LEVEL_URL,
     ]
 
     const regexID = /id=\"*\w+_\w+\"/
-    // create a wrapper for the buttons that will be appended
-    let buttonDiv = $("<div>").addClass("modal-buttons")
+
     for (let i = 0; i < buttons.length; i++) {
       // get id with regex by stripping the html content
       let currentID = buttons[i].match(regexID)[0].slice(3).replaceAll('"', '')
@@ -1094,10 +1097,26 @@ ocargo.Drawing.startPopup = function (
 
   else if (buttons) {
     $('#modal-buttons').html(buttons)
+
+    let tryAgainButton = $("#try_again_button")
+    tryAgainButton.removeClass().addClass("navigation_button_portal long_button rapid-router-welcome")
+    buttonDiv.append(tryAgainButton)
+
+    let nextLevelButton = $("#next_level_button")
+    nextLevelButton.removeClass().addClass("navigation_button_portal_secondary long_button rapid-router-welcome button--icon")
+    nextLevelButton.append(icons[2])
+    buttonDiv.append(nextLevelButton)
+
+    $("#modal-buttons").html(buttonDiv)
   } else {
     $('#modal-buttons').html(
       ocargo.button.dismissButtonHtml('close_button', gettext('Close'))
     )
+
+    let closeButton = $("#close_button")
+    closeButton.removeClass().addClass("navigation_button_portal long_button rapid-router-welcome")
+    buttonDiv.append(closeButton)
+    $("#modal-buttons").html(buttonDiv)
   }
   // Show popup
   $("#myModal").show()

game/templates/game/level_selection.html

@@ -173,13 +173,18 @@ <h4>Python levels</h4>
         </div>
         {% for episode in pythonEpisodes %}
             {% if episode.difficulty == "loops" %}
-                <div 
-                    class="panel" 
+                <div
+                    class="panel"
                     {% if "coming soon" in episode.name %}
                         style="pointer-events:none;"
                     {% endif %}
                 >
-                    <div class="panel-header bg--{{ episode.difficulty }}" id="episode-{{episode.id}}">
+                    <div {% if "coming soon" in episode.name %}
+                            class="panel-header bg--loops-coming-soon"
+                        {% else %}
+                            class="panel-header bg--{{ episode.difficulty }}"
+                        {% endif %}
+                        id="episode-{{episode.id}}">
                         <p class="episode-title" data-toggle="collapse" data-target="#collapse-{{episode.id}}" aria-expanded="false" aria-controls="collapse-{{episode.id}}" data-parent="#episodes">
                             {{episode.name}}
                             <span class="episode_range_text collapsed" data-toggle="collapse" data-target="#collapse-{{episode.id}}" aria-expanded="false" aria-controls="collapse-{{episode.id}}" data-parent="#episodes">
@@ -307,4 +312,4 @@ <h6>Owned by {{ teacher|make_into_username }}</h6>
         {% endif %}
     </div>
 </div>
-{% endblock content %}
+{% endblock content %}