feat: add language cookie (#1660)

* add language cookie

* try adding delay to tests

* change order of steps

* test something out

* undo changes to see if that fixes the tests

* add back one change

* try new fix

* uncomment code

* try something out

* try something else

* try something else

* Delete cookie on consent withdrawal

* Add missing value arg

* Unmute on cookie delete

* Add logs and remove mute cookie path

* Try simplifying logic

* Remove logs

* Merge branch 'master' into add-language-cookie

* Add try catch around OT code

Co-Authored-By: faucomte97 <f.aucomte@hotmail.co.uk>

game/static/game/js/game.js

@@ -6,11 +6,18 @@ ocargo.Game = function () {
   this.tabs = null
   this.failures = 0
   this.currentlySelectedTab = null
-  this.isMuted = Cookies.get('muted') === 'true'
+
+  if (!hasFunctionalCookiesConsent()) {
+    deleteCookie('muted')
+    deleteCookie('preferredLanguage')
+  }
+  this.preferredLanguage = Cookies.get('preferredLanguage')
 }
 
 ocargo.Game.prototype.setup = function () {
-  gameUpdateBlockLanguage(navigator.language.toLowerCase())
+  document.getElementById("language_dropdown").value = this.preferredLanguage ?? navigator.language.toLowerCase()
+  gameUpdateBlockLanguage(this.preferredLanguage ?? navigator.language.toLowerCase())
+  this.isMuted = Cookies.get('muted') ?? false
 
   if(new Date().getMonth() === 11) {
     $("#paper").css('background-color', '#eef7ff')
@@ -1388,21 +1395,44 @@ function restoreCmsLogin () {
 }
 
 function hasFunctionalCookiesConsent() {
-  return OnetrustActiveGroups && OnetrustActiveGroups.split(',').includes('C0003')
+  try {
+    return OnetrustActiveGroups.split(',').includes('C0003')
+  } catch (e) {
+    console.error(e)
+  }
+  return false
 }
 
 function setMutedCookie(mute) {
   if (hasFunctionalCookiesConsent()) {
-    Cookies.set('muted', mute.toString(), { path: Urls.levels() })
+    if (mute) {
+      Cookies.set('muted', true)
+    }
+    else {
+      deleteCookie('muted')
+    }
   }
 }
 
-function gameUpdateBlockLanguage(language_code) {
+function deleteCookie(name) {
+  // Set cookie expiry to yesterday, browser will remove the cookie.
+  // https://www.quirksmode.org/js/cookies.html
+  Cookies.set(name, "", { expires: -1 })
+}
+
+function gameUpdateBlockLanguage (language_code) {
   loadLanguage("/static/game/js/blockly/msg/js/", language_code, function() {
     reloadWorkspace(Blockly.mainWorkspace);
   });
 }
 
+function gameUpdateBlockLanguageAndCookie (language_code) {
+  if (hasFunctionalCookiesConsent()) {
+    Cookies.set("preferredLanguage", language_code)
+  }
+  gameUpdateBlockLanguage(language_code)
+}
+
 $(document).ready(function () {
   ocargo.game = new ocargo.Game()
   ocargo.game.setup()

game/static/game/js/loadLanguages.js

@@ -11,11 +11,11 @@ function loadLanguage(path, langStr, 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

@@ -162,7 +162,7 @@
       </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="gameUpdateBlockLanguage(this.value)">
+      <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 %}
           <option id="language_dropdown_{{language_code}}" value="{{language_code}}">{{language}}</option>
         {% endfor %}