Changes in accordion state

ocadotechnology · Nov 28, 2023 · 804ed12 · 804ed12
1 parent d5146ae
commit 804ed12
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 0 deletions.
diff --git a/game/static/game/js/game.js b/game/static/game/js/game.js
@@ -20,6 +20,36 @@ ocargo.Game.prototype.setup = function () {
     }
   }
 
+document.addEventListener("DOMContentLoaded", function() {
+  var dataElement = document.getElementById('data');
+  var currentEpisode = dataElement ? dataElement.getAttribute('data-episode') : null;
+
+  if (currentEpisode) {
+    localStorage.setItem('currentEpisode', currentEpisode);
+  }
+
+});
+
+ocargo.Game.prototype.onLevelChange = function() {
+  var currentLevelId = LEVEL_ID; 
+  var currentEpisode = this.determineEpisodeFromLevel(currentLevelId);
+  localStorage.setItem('currentEpisode', currentEpisode);  
+}
+
+ocargo.Game.prototype.determineEpisodeFromLevel = function(levelId) {
+  if(levelId <= 12) return "1";
+  else if(levelId <= 18) return "2";
+  else if(levelId <= 28) return "3";
+  else if(levelId <= 32) return "4";
+  else if(levelId <= 43) return "5";
+  else if(levelId <= 50) return "6";
+  else if(levelId <= 60) return "7";
+  else if(levelId <= 67) return "8";
+  else if(levelId <= 79) return "9";
+  else if(levelId <= 91) return "10";
+  else if(levelId <= 109) return "11";
+}
+
   restoreCmsLogin()
   initCustomBlocks()
   ocargo.solutionLoaded = false

diff --git a/game/templates/game/game.html b/game/templates/game/game.html
@@ -79,6 +79,18 @@
     var PYTHON_WORKSPACE = {% if python_workspace == None %}null{% else %}"{{python_workspace|linebreaksbr}}"{% endif %};
   </script>
 
+<script>
+  document.addEventListener("DOMContentLoaded", function(){
+      var dataElement = document.getElementById('data');
+      var currentEpisode = dataElement ? dataElement.getAttribute('data-episode') : null;
+
+      if (currentEpisode) {
+          localStorage.setItem('currentEpisode', currentEpisode);
+      }
+  });
+
+</script>
+
 
   <script defer type="text/javascript" src="{% static 'game/js/utils.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/skulpt/skulpt.min.js' %}"></script>

diff --git a/game/templates/game/level_selection.html b/game/templates/game/level_selection.html
@@ -41,6 +41,51 @@
     {% endfor %}
 </script>
 
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    var storedEpisode = localStorage.getItem('currentEpisode');
+    var allCollapsibles = document.querySelectorAll('.collapse');
+
+    // Function to close all except the given ID
+    function closeAllExcept(openId) {
+        allCollapsibles.forEach(function(collapsible) {
+            if (collapsible.id !== openId) {
+                collapsible.classList.remove('in');
+                var toggle = document.querySelector(`[data-target="#${collapsible.id}"]`);
+                toggle.classList.add('collapsed');
+                toggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
+
+    // Open the accordion for the stored episode
+    var accordionToOpen = storedEpisode ? document.querySelector(`#collapse-${storedEpisode}`) : null;
+    if (accordionToOpen) {
+        accordionToOpen.classList.add('in');
+        var toggle = document.querySelector(`[data-target="#${accordionToOpen.id}"]`);
+        toggle.classList.remove('collapsed');
+        toggle.setAttribute('aria-expanded', 'true');
+    } else {
+        closeAllExcept(); // Close all if no stored episode
+    }
+
+    // Set up event listeners for accordion toggles
+    var accordionToggles = document.querySelectorAll('.episode-title');
+    accordionToggles.forEach(function(toggle) {
+        toggle.addEventListener('click', function() {
+            var collapseId = toggle.getAttribute('data-target').replace('#', '');
+            var isOpened = toggle.getAttribute('aria-expanded') === 'false'; // Notice the change here
+            localStorage.setItem('currentEpisode', isOpened ? collapseId.split('-')[1] : null);
+            if (isOpened) {
+                closeAllExcept(collapseId);
+            }
+        });
+    });
+
+});
+
+</script>
+
 <script src="{% static "game/js/level_selection.js" %}"></script>
 {% endblock %}