feat: Update styles of the game pt. 1 (#1356)

* feat: Update colours and images in Rapid Router

* Revert CSP

* Remove unused class

* Improve base indentation

* Added difficulty property

* Added difficulty to levels too

.github/workflows/publish-python-package.yml

@@ -48,7 +48,7 @@ jobs:
           django-admin compilemessages
           popd
       - name: Release rapid-router
-        uses: relekang/python-semantic-release@v7.25.2 # Fix version to avoid this bug https://github.com/relekang/python-semantic-release/issues/442
+        uses: ocadotechnology/python-semantic-release@patch-packaging-error
         with:
           github_token: ${{ secrets.PERSONAL_GITHUB_TOKEN }}
           pypi_token: ${{ secrets.PYPI_TOKEN }}

game/admin.py

@@ -1,11 +1,13 @@
 from django.contrib import admin
+
 from game.models import Level, Block, Episode, Workspace
 
 
 class LevelAdmin(admin.ModelAdmin):
     search_fields = ["name"]
     raw_id_fields = ["next_level"]
     readonly_fields = ["owner"]
+    list_display = ["name", "id", "episode", "owner"]
 
 
 class WorkspaceAdmin(admin.ModelAdmin):

game/csp_config.py

@@ -10,14 +10,14 @@
         f"{domain()}/static/game/js/blockly/media/",
         f"{domain()}/static/icons/",
         "https://cdn.crowdin.com/",
-        "https://crowdin-static.downloads.crowdin.com/"
+        "https://crowdin-static.downloads.crowdin.com/",
     ),
-    "CSP_STYLE_SRC": ("https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css", "https://cdn.crowdin.com/"),
-    "CSP_SCRIPT_SRC": ("'unsafe-eval'", "https://cdn.crowdin.com/"),
-    "CSP_FRAME_SRC": (
-        f"{domain()}/static/game/image/",
-        "https://crowdin.com/"
+    "CSP_STYLE_SRC": (
+        "https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css",
+        "https://cdn.crowdin.com/",
     ),
+    "CSP_SCRIPT_SRC": ("'unsafe-eval'", "https://cdn.crowdin.com/"),
+    "CSP_FRAME_SRC": (f"{domain()}/static/game/image/", "https://crowdin.com/"),
     "CSP_OBJECT_SRC": (f"{domain()}/static/game/image/",),
-    "CSP_CONNECT_SRC": ("https://crowdin.com/",)
+    "CSP_CONNECT_SRC": ("https://crowdin.com/",),
 }

game/models.py

@@ -54,6 +54,28 @@ def levels(self):
 
         return sorted(self.level_set.all(), key=lambda level: int(level.name))
 
+    @property
+    def difficulty(self):
+        """
+        Maps the Episode's id to a difficulty level, used later on to map to CSS classes and different background
+        colours
+        """
+        difficulty_map = {
+            1: "easy",
+            2: "easy",
+            3: "easy",
+            4: "easy",
+            5: "medium",
+            6: "medium",
+            7: "medium-hard",
+            8: "medium-hard",
+            9: "brainteasers",
+            10: "hard",
+            11: "advanced",
+        }
+
+        return difficulty_map.get(self.id, "easy")
+
     def __str__(self):
         return f"Episode: {self.name}"
 
@@ -143,6 +165,10 @@ def character(self, val):
 
         self.character_name = get_character_by_pk(val.pk).name
 
+    @property
+    def difficulty(self):
+        return self.episode.difficulty if self.episode else "easy"
+
 
 class LevelBlock(models.Model):
     type = models.ForeignKey(Block, on_delete=models.CASCADE)

game/static/game/css/backgrounds.css

@@ -0,0 +1,29 @@
+/* Background colours for episodes and game sidebar */
+
+.bg--easy {
+    background: #86ae18;
+}
+
+.bg--medium {
+    background: #00a3e0;
+}
+
+.bg--medium-hard {
+    background: #008cc1;
+}
+
+.bg--brainteasers {
+    background: #c90548;
+}
+
+.bg--hard {
+    background: #8967d3;
+}
+
+.bg--advanced {
+    background: #754fc8;
+}
+
+.bg--shared-levels {
+    background: #f6be00;
+}

game/static/game/css/game.css

@@ -25,10 +25,27 @@
 #tabs {
     width: 95px;
     height: 100%;
-    background-color: #a0c53a;
     float: left;
 }
 
+#tabs span {
+    color: white;
+}
+
+#tabs img {
+    filter: invert(1);
+}
+
+#tabs #blockly_tab span,
+#tabs #python_tab span {
+    color: black;
+}
+
+#tabs #blockly_tab img,
+#tabs #python_tab img {
+    filter: none;
+}
+
 #right {
     position: relative;
     height: 100%;

game/static/game/css/game_screen.css

@@ -318,13 +318,9 @@ table th {
   line-height: 20px;
 }
 
-.tab label:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
-
+.tab label:hover,
 .tab input[type='radio']:checked + label {
-  background: rgba(255, 255, 255, 1);
-  opacity: 1;
+  background: rgba(255, 255, 255, 0.25);
 }
 
 .tab_pane {
@@ -371,11 +367,16 @@ table th {
   margin-right: 0.5em;
 }
 
-#modal-mascot {
+#modal-mascot,
+#modal-mascot--brain {
   float: right;
   width: 20%;
 }
 
+#modal-mascot--brain {
+  transform: scaleX(-1);
+}
+
 #myModal pre {
   margin: 1em 2em 0.3em;
 }

game/static/game/css/level_editor.css

@@ -174,6 +174,14 @@ input {
     float: left;
 }
 
+#tabs .tab span {
+    color: white;
+}
+
+#tabs .tab img {
+    filter: invert(1);
+}
+
 #tab_panes_wrapper {
     margin-left: 120px;
     height: 100%;

game/static/game/css/level_selection.css

@@ -4,28 +4,14 @@
 
 #episodes .panel-header {
   color: #fff;
-  background: #6e7171;
   margin-bottom: 0;
   text-align: left;
   padding-left: 10px;
   letter-spacing: 1.5px;
   font-size: 17px;
 }
 
-#episodes .bg-tertiary {
-  background: #00a3e0; /* color-tertiary-500 */
-}
-
-#episodes .bg-tertiary-dark {
-  background: #008cc1; /* color-tertiary-700 */
-}
-
-#episodes .bg-primary {
-  background: #e0004d; /* color-primary-500 */
-}
-
-#episodes .bg-secondary {
-  background: #f6be00; /* color-secondary-500 */
+#episodes .bg--shared-levels {
   color: #000;
   font-weight: 500;
 }

game/static/game/js/drawing.js

@@ -1036,10 +1036,16 @@ ocargo.Drawing.startPopup = function (
   $('#myModal-lead').html(subtitle)
   $('#myModal-mainText').html(message)
 
+  $('#modal-mascot').hide()
+  $('#modal-mascot--brain').hide()
+
   if (mascot) {
-    $('#modal-mascot').show()
-  } else {
-    $('#modal-mascot').hide()
+    if (EPISODE === 9) {
+      $('#modal-mascot--brain').show()
+    }
+    else {
+      $('#modal-mascot').show()
+    }
   }
 
   if (buttons) {

game/static/game/js/game.js

@@ -116,7 +116,7 @@ ocargo.Game.prototype.setup = function () {
     title,
     LESSON,
     message,
-    true,
+    BLOCKLY_ENABLED && !PYTHON_VIEW_ENABLED, // show mascot on Blockly-only levels
     ocargo.button.dismissButtonHtml('play_button', gettext('Play'))
   )
 }
@@ -786,7 +786,7 @@ ocargo.Game.prototype._setupPythonTab = function () {
 
   $('#van_commands_help').click(
     function (e) {
-      ocargo.Drawing.startPopup(gettext('Python Commands'), leadMsg, '', true)
+      ocargo.Drawing.startPopup(gettext('Python Commands'), leadMsg, '')
     }.bind(this)
   )
 

game/templates/game/base.html

@@ -10,59 +10,68 @@
     <link rel="manifest" href="{% static "manifest.json" %}">
 {% endblock head %}
 
+{% block css %}
+    {{block.super}}
+    <link href="{% static 'game/css/backgrounds.css' %}" rel="stylesheet" type="text/css">
+{% endblock %}
+
 {% block subNav %}
-{{ block.super }}
-{% block header %}
-<div class="banner banner--teacher">
-    <div class="container">
-        <div class="row">
-            <div class="col-sm-12 d-flex">
-                <div>
-                    <h1 class="banner__text--primary">Rapid Router</h1>
-                    <h4>Rapid router has been created to teach the first principles of computer programming.</h4>
-                </div>
-                <div>
-                    <div class="banner--picture"><div class="banner--picture__inside1"><div class="banner--picture__inside2 banner--picture--play"></div></div></div>
+    {{ block.super }}
+    {% block header %}
+        <div class="banner banner--teacher">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-12 d-flex">
+                        <div>
+                            <h1 class="banner__text--primary">Rapid Router</h1>
+                            <h4>Rapid router has been created to teach the first principles of computer programming.</h4>
+                        </div>
+                        <div>
+                            <div class="banner--picture"><div class="banner--picture__inside1"><div class="banner--picture__inside2 banner--picture--play"></div></div></div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</div>
-{% endblock header %}
+    {% endblock header %}
+
+    {% if user|is_logged_in_as_student %}
+        <div class="sub-nav sub-nav--student">
+    {% elif user|is_independent_student %}
+        <div class="sub-nav sub-nav--independent">
+    {% else %}
+        <div class="sub-nav sub-nav--teacher">
+    {% endif %}
 
-{% if user|is_logged_in_as_student %}
-<div class="sub-nav sub-nav--student">
-{% elif user|is_independent_student %}
-<div class="sub-nav sub-nav--independent">
-{% else %}
-<div class="sub-nav sub-nav--teacher">
-{% endif %}
     {% block nav_ocargo_levels %}
         <a class="button button--secondary button--secondary--light" href="{% url 'levels' %}">{% trans "Levels" %}</a>
     {% endblock nav_ocargo_levels %}
+
     {% block nav_ocargo_create %}
         <a class="button button--secondary button--secondary--light" href="{% url 'level_editor' %}">{% trans "Create" %}</a>
     {% endblock nav_ocargo_create %}
+
     {% if user|is_logged_in_as_school_user %}
         {% block nav_ocargo_scoreboard %}
             <a class="button button--secondary button--secondary--light" href="{% url 'scoreboard' %}">{% trans "Scoreboard" %}</a>
         {% endblock nav_ocargo_scoreboard %}
     {% endif %}
+
     {% if user|is_logged_in_as_teacher %}
         {% block nav_ocargo_moderate %}
             <a class="button button--secondary button--secondary--light" href="{% url 'level_moderation' %}">{% trans "Moderate" %}</a>
         {% endblock nav_ocargo_moderate %}
     {% endif %}
-</div>
+    </div>
 
 {% endblock subNav %}
 
 {% block content %}{% endblock %}
 
 {% block scripts %}
-  {{block.super}}
-  <script type='text/javascript' src='{% static 'game/js/foundation/vendor/js.cookie.min.js' %}'></script>
-  <script type='text/javascript' src='{% url 'js-reverse' %}'></script>
-  <script type='text/javascript' src='{% url 'rapid-router/javascript-catalog' %}'></script>
-  <script type='text/javascript' src='{% static 'game/js/jquery.touchy.min.js' %}'></script>
+    {{block.super}}
+    <script type='text/javascript' src='{% static 'game/js/foundation/vendor/js.cookie.min.js' %}'></script>
+    <script type='text/javascript' src='{% url 'js-reverse' %}'></script>
+    <script type='text/javascript' src='{% url 'rapid-router/javascript-catalog' %}'></script>
+    <script type='text/javascript' src='{% static 'game/js/jquery.touchy.min.js' %}'></script>
 {% endblock %}