feat: add python den game pages (#1682)

* add python den game pages * debug test * debug test * debug test * Merge branch 'master' into python-den-game-page * debug test * debug test * debug test * try getting rid of migration * debug test * debug test - blockly_tab * debug test - remove bundle * debug test - remove defer from web component * add back migration * re-add html changes * re-add html changes * change colors in UI * remove IDE references * remove IDE reference * Merge branch 'master' into python-den-game-page * address PR comments * Remove unnecessary classes and exit button * Remove unnecessary styles * Simplify styles and tab Co-Authored-By: Florian Aucomte <[email protected]>
ocadotechnology · Aug 20, 2024 · c6462aa · c6462aa
1 parent 5ccb5df
commit c6462aa
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 36 deletions.
diff --git a/game/models.py b/game/models.py
@@ -86,12 +86,12 @@ def difficulty(self):
             7: "medium-hard",
             8: "medium-hard",
             9: "brainteasers",
-            10: "hard",
-            11: "advanced",
-            12: "loops",
-            13: "loops",
-            14: "loops",
-            15: "loops",
+            10: "split-python",
+            11: "split-python",
+            12: "python",
+            13: "python",
+            14: "python",
+            15: "python",
         }
 
         return difficulty_map.get(self.id, "easy")

diff --git a/game/static/game/css/backgrounds.css b/game/static/game/css/backgrounds.css
@@ -16,22 +16,14 @@
     background-color: #c90548;
 }
 
-.bg--hard {
-    background-color: #8967d3;
-}
-
-.bg--advanced {
-    background-color: #754fc8;
-}
-
 .bg--shared-levels {
     background-color: #f6be00;
 }
 
-.bg--loops {
-    background-color: #3F3F3F;
+.bg--split-python {
+    background-color: #213CE7;
 }
 
-.bg--loops-coming-soon {
-    background-color: #CBCBCB;
+.bg--python {
+    background-color: #152584;
 }
diff --git a/game/static/game/css/game.css b/game/static/game/css/game.css
@@ -393,3 +393,11 @@ div > .navigation_button_kurono {
     bottom: 0px;
     background-image : url('/static/game/image/actions/btn_zoom_in.svg');
 }
+
+/**************/
+/* Python den */
+/**************/
+
+.game-header {
+    width: 100%;
+}
diff --git a/game/static/game/image/python_den_header.svg b/game/static/game/image/python_den_header.svg
diff --git a/game/templates/game/game.html b/game/templates/game/game.html
@@ -152,16 +152,30 @@
 </div>
 
 <div id="wrapper" class="unselectable">
+  {% if level.pythonViewEnabled or level.pythonEnabled %}
+    <img src="{% static 'game/image/python_den_header.svg' %}" class="game-header">
+  {% endif %}
   <span id="game_page"></span>
 
   <div id="tabs" class='no-print bg--{{ level.difficulty }}'>
-    <div id="blockly_tab" class="tab selectable {% if level.blocklyEnabled %}{% else %}hidden{% endif %}">
+
+    <div id="blockly_tab"
+         class="tab selectable {% if not level.blocklyEnabled and not level.pythonViewEnabled %}hidden{% endif %}">
       <input type="radio" name="tabs" id="blockly_radio" checked>
       <label for="blockly_radio">
         <img src="{% static 'game/image/icons/blockly.svg' %}">
         <span>{% trans "Blockly" %}</span>
       </label>
     </div>
+
+    <div id="python_tab" class="tab selectable {% if not level.pythonEnabled %}hidden{% endif %}">
+      <input type="radio" name="tabs" id="python_radio">
+      <label for="python_radio">
+        <img src="{% static 'game/image/icons/python.svg' %}">
+        <span>{% trans "Python Den" %}</span>
+      </label>
+    </div>
+
     <div id="language_tab" class="tab">
       <select name="language_dropdown" class="tab selectable bg--{{level.difficulty}} {% if level.pythonEnabled %}hidden{% endif %}" id="language_dropdown" onchange="gameUpdateBlockLanguageAndCookie(this.value)">
         {% for language_code, language in available_language_dict.items %}
@@ -172,14 +186,6 @@
 
     <div class="tab_break"></div>
 
-    <div id="python_tab" class="tab selectable {% if level.pythonEnabled %}{% else %}hidden{% endif %}">
-      <input type="radio" name="tabs" id="python_radio">
-      <label for="python_radio">
-        <img src="{% static 'game/image/icons/python.svg' %}">
-        <span>{% trans "Python" %}</span>
-      </label>
-    </div>
-
     <div id="clear_tab" class="tab">
       <input type="radio" name="tabs" id="clear_program_radio">
       <label for="clear_program_radio">
@@ -551,12 +557,12 @@ <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/shar
                             <path id="d" fill="#fff" stroke-width="0px" d="M68.91,70.86h-7.35c-.28,0-.48-.26-.42-.53l2.49-10.37c.11-.46-.49-.74-.77-.35l-11.46,16.1c-.2.28,0,.68.35.68h7.35c.28,0,.48.26.42.53l-2.49,10.37c-.11.46.49.74.77.35l11.46-16.1c.2-.28,0-.68-.35-.68Z"/>
                             <g id="e" isolation="isolate">
                               <g isolation="isolate">
-                                <text 
-                                  id="Text_percentage" 
-                                  data-name="Text percentage" 
+                                <text
+                                  id="Text_percentage"
+                                  data-name="Text percentage"
                                   font-family="LilitaOne, 'Lilita One'"
                                   font-size="16px"
-                                  transform="translate(43.2 48.2)" 
+                                  transform="translate(43.2 48.2)"
                                   fill="#4ba0dd">
                                   <tspan id="Text_percentage_value" x="0" y="0">100%</tspan>
                                 </text>
@@ -581,13 +587,13 @@ <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/shar
                               s-.66,8.1-1.87,11.82
                               c-2.52,7.76-7.44,14.42-13.9,19.12Z"
                               />
-                            <circle 
+                            <circle
                               id="emptying_circle"
                               cx="59.79"
                               cy="59.79"
-                              r="43.5" 
-                              stroke-width="11" 
-                              stroke="#213a47" 
+                              r="43.5"
+                              stroke-width="11"
+                              stroke="#213a47"
                               fill="transparent"
                               stroke-dasharray="273.18"
                               stroke-dashoffset="273.18"
@@ -613,4 +619,4 @@ <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/shar
   })
 </script>
 
-{% endblock %}
+{% endblock %}