feat: add language dropdown

game/end_to_end_tests/base_game_test.py

@@ -87,14 +87,12 @@ def go_to_homepage(self):
     def go_to_level(self, level_name):
         path = reverse("play_default_level", kwargs={"levelName": str(level_name)})
         self._go_to_path(path)
-        self.selenium.execute_script("ocargo.animation.FAST_ANIMATION_DURATION = 1;")
 
         return GamePage(self.selenium)
 
     def go_to_custom_level(self, level):
         path = reverse("play_custom_level", kwargs={"levelId": str(level.id)})
         self._go_to_path(path)
-        self.selenium.execute_script("ocargo.animation.FAST_ANIMATION_DURATION = 1;")
 
         return GamePage(self.selenium)
 
@@ -106,7 +104,6 @@ def go_to_level_editor(self):
     def go_to_episode(self, episodeId):
         path = reverse("start_episode", kwargs={"episodeId": str(episodeId)})
         self._go_to_path(path)
-        self.selenium.execute_script("ocargo.animation.FAST_ANIMATION_DURATION = 1;")
 
         return GamePage(self.selenium)
 

game/end_to_end_tests/game_page.py

@@ -19,8 +19,10 @@ class GamePage(BasePage):
     def __init__(self, browser):
         super(GamePage, self).__init__(browser)
 
-        assert self.on_correct_page("game_page")
+        self.browser.execute_script("ocargo.animation.FAST_ANIMATION_DURATION = 1;")
 
+        assert self.on_correct_page("game_page")
+
         self._dismiss_initial_dialog()
 
     def _dismiss_initial_dialog(self):

game/end_to_end_tests/test_language_dropdown.py

@@ -0,0 +1,14 @@
+from game.end_to_end_tests.base_game_test import BaseGameTest
+
+from selenium.webdriver.common.by import By
+
+class TestLanguageDropdown(BaseGameTest):
+    def test_level_language_dropdown(self):
+        page = self.go_to_level(1)
+        assert page.element_exists_by_id("language_dropdown")
+
+        self.selenium.find_element(By.ID, "language_dropdown").click()
+        self.selenium.find_element(By.ID, f"language_dropdown_fr").click()
+
+        text_count = len(self.selenium.find_elements(By.XPATH, ("//*[contains(text(),'Move forwards')]")))
+        assert text_count == 0

game/static/game/css/game_screen.css

@@ -430,6 +430,16 @@ div.no-print div.tab label {
   background: rgba(255, 255, 255, 0.25);
 }
 
+.tab select:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.tab select {
+  color: black;
+  border: none;
+  font-weight: bold;
+}
+
 #console {
   z-index: 100;
   display: flex;

game/static/game/js/blockly/msg/js/en-gb.js

@@ -433,4 +433,7 @@ Blockly.Msg["VARIABLES_HUE"] = "330";
 Blockly.Msg["TEXTS_HUE"] = "160";
 Blockly.Msg["PROCEDURES_HUE"] = "290";
 Blockly.Msg["COLOUR_HUE"] = "20";
-Blockly.Msg["VARIABLES_DYNAMIC_HUE"] = "310";
+Blockly.Msg["VARIABLES_DYNAMIC_HUE"] = "310";
+
+Blockly.Msg["MOVE_FORWARDS_TITLE"] = "mouve fourwards";
+Blockly.Msg["MOVE_FORWARDS_TOOLTIP"] = "Move the van forwards but British";

game/static/game/js/blockly/msg/js/en.js

@@ -433,4 +433,7 @@ Blockly.Msg["VARIABLES_HUE"] = "330";
 Blockly.Msg["TEXTS_HUE"] = "160";
 Blockly.Msg["PROCEDURES_HUE"] = "290";
 Blockly.Msg["COLOUR_HUE"] = "20";
-Blockly.Msg["VARIABLES_DYNAMIC_HUE"] = "310";
+Blockly.Msg["VARIABLES_DYNAMIC_HUE"] = "310";
+
+Blockly.Msg["MOVE_FORWARDS_TITLE"] = "move forwards";
+Blockly.Msg["MOVE_FORWARDS_TOOLTIP"] = "Move the van forwards";

game/static/game/js/blockly/msg/js/fr.js

@@ -433,4 +433,7 @@ Blockly.Msg["VARIABLES_HUE"] = "330";
 Blockly.Msg["TEXTS_HUE"] = "160";
 Blockly.Msg["PROCEDURES_HUE"] = "290";
 Blockly.Msg["COLOUR_HUE"] = "20";
-Blockly.Msg["VARIABLES_DYNAMIC_HUE"] = "310";
+Blockly.Msg["VARIABLES_DYNAMIC_HUE"] = "310";
+
+Blockly.Msg["MOVE_FORWARDS_TITLE"] = "avancer";
+Blockly.Msg["MOVE_FORWARDS_TOOLTIP"] = "Faire avancer la camionnette";

game/static/game/js/blocklyControl.js

@@ -8,6 +8,7 @@ ocargo.BlocklyControl = function () {
   this.blocklyCustomisations.setupLimitedBlocks();
   this.blocklyDiv = document.getElementById("blockly_holder");
   this.toolbox = document.getElementById("blockly_toolbox");
+
   Blockly.inject(this.blocklyDiv, {
     path: "/static/game/js/blockly/",
     toolbox: BLOCKLY_XML,
@@ -52,6 +53,12 @@ ocargo.BlocklyControl.prototype.prepare = function (blocks) {
   }
 };
 
+ocargo.BlocklyControl.prototype.updateBlockLanguage = function (language_code) {
+  loadLanguage("/static/game/js/blockly/msg/js/", language_code, function() {
+    reloadWorkspace(Blockly.mainWorkspace);
+  });
+};
+
 ocargo.BlocklyControl.prototype.redrawBlockly = function () {
   Blockly.svgResize(Blockly.mainWorkspace);
 };
@@ -434,4 +441,4 @@ ocargo.BlockHandler.prototype.deselectCurrent = function () {
     this.setBlockSelected(this.selectedBlock, false);
     this.selectedBlock = null;
   }
-};
+};

game/static/game/js/blocklyCustomBlocks.js

@@ -39,7 +39,7 @@ function initCustomBlocksDescription() {
     init: function () {
       this.setColour(160);
       this.appendDummyInput()
-        .appendField(gettext("move forwards"))
+        .appendField(Blockly.Msg.MOVE_FORWARDS_TITLE)
         .appendField(
           new Blockly.FieldImage(
             ocargo.Drawing.imageDir + "actions/forward.svg",
@@ -49,7 +49,7 @@ function initCustomBlocksDescription() {
         );
       this.setPreviousStatement(true, "Action");
       this.setNextStatement(true, "Action");
-      this.setTooltip(gettext("Move the van forwards"));
+      this.setTooltip(Blockly.Msg.MOVE_FORWARDS_TOOLTIP);
     },
   };
 

game/static/game/js/game.js

@@ -10,26 +10,30 @@ ocargo.Game = function () {
 }
 
 ocargo.Game.prototype.setup = function () {
+  loadLanguage("/static/game/js/blockly/msg/js/", navigator.language.toLowerCase(), function() {
+    reloadWorkspace(Blockly.mainWorkspace);
+  });
+
   if(new Date().getMonth() === 11) {
     $("#paper").css('background-color', '#eef7ff')
   }
 
-  if (NIGHT_MODE_FEATURE_ENABLED) {
-    if (NIGHT_MODE) {
-      $('#paper').css('background-color', 'black')
-    }
+    if (NIGHT_MODE_FEATURE_ENABLED) {
+      if (NIGHT_MODE) {
+        $('#paper').css('background-color', 'black')
+      }
 
-    if (!ANONYMOUS) {
-      $('#nightmode_tab').show()
+      if (!ANONYMOUS) {
+        $('#nightmode_tab').show()
+      }
     }
-  }
 
 
-// Function being called when there is a change in game level.
-ocargo.Game.prototype.onLevelChange = function() {
-  const currentLevelId = LEVEL_ID;
-  localStorage.setItem('currentEpisode', EPISODE);
-}
+  // Function being called when there is a change in game level.
+  ocargo.Game.prototype.onLevelChange = function() {
+    const currentLevelId = LEVEL_ID;
+    localStorage.setItem('currentEpisode', EPISODE);
+  }
 
   restoreCmsLogin()
   initCustomBlocks()
@@ -38,20 +42,21 @@ ocargo.Game.prototype.onLevelChange = function() {
   ocargo.pythonControl = new ocargo.PythonControl()
   ocargo.blocklyCompiler = new ocargo.BlocklyCompiler()
   ocargo.model = new ocargo.Model(
-    PATH,
-    ORIGIN,
-    DESTINATIONS,
-    TRAFFIC_LIGHTS,
-    COWS,
-    MAX_FUEL
+      PATH,
+      ORIGIN,
+      DESTINATIONS,
+      TRAFFIC_LIGHTS,
+      COWS,
+      MAX_FUEL
   )
+
   this.drawing = new ocargo.Drawing(ocargo.model.startingPosition())
   this.drawing.preloadRoadTiles()
   ocargo.animation = new ocargo.Animation(ocargo.model, DECOR, this.drawing)
   this.saving = new ocargo.Saving()
   this.sharing = new ocargo.Sharing(
-    () => parseInt(LEVEL_ID),
-    () => true
+      () => parseInt(LEVEL_ID),
+      () => true
   )
 
   // Setup the blockly workspace
@@ -79,20 +84,20 @@ ocargo.Game.prototype.onLevelChange = function() {
   // Setup blockly to python
   Blockly.Python.init(Blockly.getMainWorkspace())
   window.addEventListener(
-    'unload',
-    function (event) {
-      ocargo.pythonControl.teardown()
-      ocargo.blocklyControl.teardown()
-    }.bind(this)
+      'unload',
+      function (event) {
+        ocargo.pythonControl.teardown()
+        ocargo.blocklyControl.teardown()
+      }.bind(this)
   )
 
   var loggedOutWarning = ''
   // Check if logged on
   if (USER_STATUS == 'UNTRACKED') {
     loggedOutWarning =
-      '<br><span class="popup__text--warning">' +
-      gettext("You are not logged in. Your progress won't be saved.") +
-      '</span>'
+        '<br><span class="popup__text--warning">' +
+        gettext("You are not logged in. Your progress won't be saved.") +
+        '</span>'
   }
   // Start the popup
   var title = gettext('Try solving this one...')
@@ -113,11 +118,11 @@ ocargo.Game.prototype.onLevelChange = function() {
   var message
   if (NIGHT_MODE) {
     message =
-      '<br>' +
-      gettext(
-        'In Night Mode you can only see a very short distance. ' +
-          "We've given you more blocks to help you find your way!"
-      )
+        '<br>' +
+        gettext(
+            'In Night Mode you can only see a very short distance. ' +
+            "We've given you more blocks to help you find your way!"
+        )
   } else {
     message = loggedOutWarning
   }
@@ -127,15 +132,15 @@ ocargo.Game.prototype.onLevelChange = function() {
   const showMascot = BLOCKLY_ENABLED && !PYTHON_VIEW_ENABLED && LEVEL_NAME <= 80; // show mascot on Blockly-only levels that are not above 80
 
   ocargo.Drawing.startPopup(
-    title,
-    LESSON,
-    message,
-    showMascot,
-    [
-      ocargo.button.dismissButtonHtml("prev_button", gettext("Previous level")),
-      ocargo.button.dismissButtonHtml('play_button', gettext('Play')),
-      ocargo.button.dismissButtonHtml("next_button", gettext("Next level"))
-    ]
+      title,
+      LESSON,
+      message,
+      showMascot,
+      [
+        ocargo.button.dismissButtonHtml("prev_button", gettext("Previous level")),
+        ocargo.button.dismissButtonHtml('play_button', gettext('Play')),
+        ocargo.button.dismissButtonHtml("next_button", gettext("Next level"))
+      ]
   )
 }
 
@@ -624,6 +629,7 @@ ocargo.Game.prototype.isInPythonWorkspace = function () {
 
 ocargo.Game.prototype._setupTabs = function () {
   this.tabs = []
+
   this.tabs.blockly = new ocargo.Tab(
     $('#blockly_radio'),
     $('#blockly_radio + label'),
@@ -1387,8 +1393,14 @@ function setMutedCookie(mute) {
   }
 }
 
+function gameUpdateBlockLanguage(language_code) {
+  ocargo.blocklyControl.updateBlockLanguage(language_code);
+}
+
 $(document).ready(function () {
   ocargo.game = new ocargo.Game()
   ocargo.game.setup()
   ocargo.game.mute(ocargo.game.isMuted)
 })
+
+

game/static/game/js/loadLanguages.js

@@ -0,0 +1,21 @@
+function loadLanguage(path, langStr, callback) {
+  var xobj = new XMLHttpRequest();
+  xobj.overrideMimeType("application/javascript");
+  xobj.open('GET', path + langStr + '.js', true);
+  xobj.onreadystatechange = function () {
+    if (xobj.readyState == 4 && xobj.status == "200") {
+      eval(xobj.responseText);
+      callback();
+    } else if (xobj.status == "404") {
+      loadLanguage(path, "en", callback);
+    }
+  };
+  xobj.send(null);
+};
+
+function reloadWorkspace(workspace) {
+  var blocklyDom = Blockly.Xml.workspaceToDom(workspace);
+  workspace.clear();
+  Blockly.Xml.domToWorkspace(blocklyDom, workspace);
+  workspace.updateToolbox(BLOCKLY_XML);
+};

game/templates/game/game.html

@@ -104,6 +104,7 @@
   <script defer type="text/javascript" src="{% static 'game/js/blocklyCompiler.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/blocklyCustomBlocks.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/blocklyCustomisations.js' %}"></script>
+  <script defer type="text/javascript" src="{% static 'game/js/loadLanguages.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/blocklyMessages.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/model.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/pathFinder.js' %}"></script>
@@ -143,6 +144,7 @@
 
 {% block content %}
 {{ block.super }}
+
 <div style='position: fixed; top: 0; right: 0; background: black; z-index: 99'>
   <div id='fps' style='font-size: 2em; color: white'></div>
 </div>
@@ -158,6 +160,16 @@
         <span>{% trans "Blockly" %}</span>
       </label>
     </div>
+    <div id="language_tab" class="tab">
+      <select name="language_dropdown" class="tab selectable bg--{{level.difficulty}}" id="language_dropdown" onchange="gameUpdateBlockLanguage(this.value)">
+        {% for language_code, language in available_language_dict.items %}
+          <option id="language_dropdown_{{language_code}}" value="{{language_code}}">{{language}}</option>
+        {% endfor %}
+      </select>
+    </div>
+
+    <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">
@@ -487,4 +499,12 @@ <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/shar
   </div>
 </div>
 
-{% endblock %}
+<script>
+  document.getElementById("language_dropdown").value = navigator.language.toLowerCase();
+
+  if (document.getElementById("language_dropdown").value == "") {
+    document.getElementById("language_dropdown").value = "en";
+  }
+</script>
+
+{% endblock %}