Show adventure content in tabs in non-adventure mode

.gitignore

@@ -143,3 +143,4 @@ logs.txt
 # Ignore vim swap files
 *.swp
 *.swo
+.local

app.py

@@ -71,18 +71,14 @@ def load_adventures (lang):
 
 def load_adventure_assignments_per_level(lang, level):
     assignments = []
-    all_adventures = ADVENTURES[lang]
-    adventures = all_adventures['adventures']
-
+    adventures = load_adventures(lang)['adventures']
     for adventure in adventures.values():
-        assignment = {}
-        assignment['name'] = adventure['name']
-        assignment['image'] = adventure['image']
-        try:
-            assignment['text'] = (adventure['levels'][level]['story_text'])
-        except:
-            pass #geen assignment voor dit level? geen probleem hoor
-        assignments.append(assignment)
+        if level in adventure['levels']:
+            assignments.append({
+                'name': adventure['name'],
+                'image': adventure.get('image', None),
+                'text': adventure['levels'][level].get('story_text', 'No Story Text')
+            })
     return assignments
 
 
@@ -405,6 +401,8 @@ def index(level, step):
     else:
         loaded_program = ''
 
+    adventure_assignments = load_adventure_assignments_per_level(g.lang, level)
+
     return hedyweb.render_assignment_editor(
         request=request,
         course=HEDY_COURSE[g.lang],
@@ -413,6 +411,7 @@ def index(level, step):
         menu=render_main_menu('hedy'),
         translations=TRANSLATIONS,
         version=version(),
+        adventure_assignments=adventure_assignments,
         loaded_program=loaded_program)
 
 @app.route('/onlinemasters', methods=['GET'], defaults={'level': 1, 'step': 1})

hedyweb.py

@@ -24,7 +24,7 @@ def get_translations(self, language, section):
     return d
 
 
-def render_assignment_editor(request, course, level_number, assignment_number, menu, translations, version, loaded_program):
+def render_assignment_editor(request, course, level_number, assignment_number, menu, translations, version, loaded_program, adventure_assignments):
   assignment = course.get_assignment(level_number, assignment_number)
   if not assignment:
     abort(404)
@@ -49,6 +49,10 @@ def render_assignment_editor(request, course, level_number, assignment_number, m
   arguments_dict['username'] = current_user(request) ['username']
   arguments_dict['loaded_program'] = loaded_program
 
+  if adventure_assignments:
+    adventure_assignments[0]["selected"] = True
+  arguments_dict['adventure_assignments'] = adventure_assignments
+
   # Translations
   arguments_dict.update(**translations.get_translations(course.language, 'ui'))
 

static/js/tabs.js

@@ -0,0 +1,36 @@
+/**
+ * Activate tabs
+ *
+ * Protocol:
+ *
+ * - Tabs consist of a TAB (the sticky-outy bit) and a TARGET
+ *   (the pane that gets shown and hidden).
+ *
+ * - TABS should have: <... data-tab="SOME-ID">
+ *
+ * - TARGETS should have: <... data-tabtarget="SOME-ID">
+ *
+ * When a TAB is clicked, the TARGET with the matching id is shown
+ * (and all other TARGETS in the same containing HTML element are hidden).
+ *
+ * The active TAB is indicated by the  '.tab-selected' class, the active
+ * TARGET by the *absence* of the '.hidden' class.
+ */
+$(function() {
+  $('*[data-tab]').click(function (e) {
+    const tab = $(e.target);
+    const allTabs = tab.siblings('*[data-tab]');
+
+    const target = $('*[data-tabtarget="' + tab.data('tab') + '"]');
+    const allTargets = target.siblings('*[data-tabtarget]');
+
+    allTabs.removeClass('tab-selected');
+    tab.addClass('tab-selected');
+
+    allTargets.addClass('hidden');
+    target.removeClass('hidden');
+
+    e.preventDefault();
+    return false;
+  });
+});

tailwind/styles.css

@@ -74,6 +74,9 @@ h2 {
   @apply font-slab font-medium text-blue-500;
   @apply leading-tight text-2xl mb-2 mt-10;
 }
+
+h2:first-child { margin-top: 0; }
+
 h3 {
   @apply font-slab font-bold text-blue-700 italic;
   @apply leading-tight text-xl mt-8 mb-1;
@@ -186,6 +189,23 @@ table.users td {
   box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
 }
 
+.tab {
+  @apply py-1 px-6 mt-2 bg-gray-100 rounded-t-lg border-t-8 border-gray-300 text-sm;
+  box-shadow:
+    /* bottom */ inset 0px -4px 4px -1px rgba(0,0,0,0.1);
+}
+
+.tab + .tab {
+  box-shadow:
+    /* bottom */ inset 0px -4px 4px -1px rgba(0,0,0,0.1),
+    /* left */ inset 4px 0px 4px -1px rgba(0,0,0,0.1);
+}
+
+.tab-selected {
+  @apply py-1 px-6 mt-0 pt-2 bg-white rounded-t-lg border-t-8 border-r border-l border-pink-500 text-sm;
+  box-shadow: none !important;
+}
+
 /* EDITOR WARNINGS & ERRORS */
 
 div#errorbox, div#warningbox {

templates/code-page.html

@@ -2,6 +2,7 @@
 {% block levelbody %}
 <div style="width: 250px;" class="right-hand-shadow flex-none">
   <div class="p-3 shadow-md">
+    <div></div>
     <h2>{{ commands_title }}</h2>
   </div>
   <div>
@@ -43,6 +44,11 @@ <h2>{{ commands_title }}</h2>
       </div>
       {% endfor %}
     </div>
+  {% else %}
+    {# When we're NOT in adventure mode but DO have adventure-assignments, render them in tabs #}
+    {% if adventure_assignments %}
+    {% include "incl-adventure-tabs.html" %}
+    {% endif %}
   {% endif %}
   {% if prompt %}
   <div class="py-2 px-4">
@@ -209,4 +215,5 @@ <h2 class="mt-4">{{assignment_header}}</h2>
   <script src="/js/syntaxModesRules.js" type="text/javascript"></script>
   <script src="/js/app.js" type="text/javascript"></script>
   <script src="/js/auth.js" type="text/javascript"></script>
+  <script src="/js/tabs.js" type="text/javascript"></script>
 {% endblock %}

templates/incl-adventure-tabs.html

@@ -0,0 +1,22 @@
+      {# TABS #}
+      <div class="mt-8">
+        <div class="flex cursor-pointer flex-end">
+        {% for assignment in adventure_assignments %}
+          <a tabindex="0" href="#" data-tab="t-{{assignment.name}}" class="block text-black no-underline font-light tab {% if assignment.selected %}tab-selected{% endif %}" tabindex="0">{{ assignment.name }}</a>
+        {% endfor %}
+        </ul>
+      </div>
+      {# PANES #}
+      <div style='width: 100%;' class="bg-white p-4 mb-8 shadow-md">
+        {% for assignment in adventure_assignments %}
+          <div data-tabtarget="t-{{assignment.name}}" {% if not assignment.selected %}class="hidden"{% endif %}>
+            {% if assignment.image %}
+              <img class="float-right w-48" src="/images/{{assignment.image}}">
+            {% endif %}
+            <div>
+            {{ assignment.text|commonmark }}
+            </div>
+            <div class="clear-right"></div>
+          </div>
+        {% endfor %}
+      </div>