Implement developers mode (hedyorg#1279)

* Implements developers mode

coursedata/texts/bg.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Запиши и сподели кода"
     regress_button: "Върни се назад"
     advance_button: "Продължи към ниво"
+    developers_mode: "Developers mode"
     advance_step_button: "Продължи към задача"
     try_button: "Пробвай"
     enter_text: "Въведи отговора си тук..."

coursedata/texts/cs.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: Uložit a sdílet kód
     regress_button: Vrátit se na úroveň
     advance_button: Jít na úroveň
+    developers_mode: "Developers mode"
     advance_step_button: Jít na úkol
     try_button: Vyzkoušet
     enter_text: Zde napiš svou odpověď...

coursedata/texts/de.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Save & share code"
     regress_button: "Gehe zurück zu Stufe"
     advance_button: "Gehe zu Stufe"
+    developers_mode: "Developers mode"
     advance_step_button: "Gehe zu Aufgabe"
     try_button: "Versuchen"
     enter_text: "Gib deine Antwort hier ein..."

coursedata/texts/el.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Save & share code"
     regress_button: 'Επιστροφή στο επίπεδο'
     advance_button: 'Πήγαινε στο επίπεδο'
+    developers_mode: "Developers mode"
     advance_step_button: 'Πήγαινε στην άσκηση'
     try_button: 'Δοκίμασε το'
     enter_text: 'Γράψε την απάντηση εδώ...'

coursedata/texts/en.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Save & share code"
     regress_button: "Go back to level"
     advance_button: "Go to level"
+    developers_mode: "Programmer's mode"
     advance_step_button: "Go to assignment"
     try_button: "Try"
     enter_text: "Enter your answer here..."

coursedata/texts/es.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Guardar y compartir código"
     regress_button: "Regresar al nivel"
     advance_button: "Ir al nivel"
+    developers_mode: "Developers mode"
     advance_step_button: "Ir a la tarea"
     try_button: "Probar"
     enter_text: "Ingresar tu respuesta aquí..."

coursedata/texts/fr.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Save & share code"
     regress_button: "Retourner au niveau"
     advance_button: "Aller au niveau"
+    developers_mode: "Developers mode"
     advance_step_button: "Aller au devoir"
     try_button: "Essayer"
     enter_text: "Tapes ta réponse ici..."

coursedata/texts/fy.yaml

@@ -13,6 +13,7 @@ ui:
     share_code_button: "Koade bewarje & diele"
     regress_button: "Werom nei level"
     advance_button: "Nei level"
+    developers_mode: "Developers mode"
     advance_step_button: "Nei opjefte"
     enter_text: "Folje hjir dyn antwurd..."
     enter: "Ynfolje"

coursedata/texts/hu.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Mentés és kód megosztása"
     regress_button: "Menj vissza: szint"
     advance_button: "Menj tovább: szint"
+    developers_mode: "Developers mode"
     advance_step_button: "Menj a feladathoz"
     try_button: "Próbáld ki"
     enter_text: "Írd be a válaszodat ide..."

coursedata/texts/id.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: Simpan dan bagikan kode
     regress_button: Kembali ke level
     advance_button: Lanjut ke level
+    developers_mode: "Developers mode"
     advance_step_button: Lanjut ke tugas
     try_button: Coba
     enter_text: Tuliskan jawaban kamu disini...

coursedata/texts/it.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Save & share code"
     regress_button: "Torna a livello"
     advance_button: "Vai a livello"
+    developers_mode: "Developers mode"
     advance_step_button: "Vai a compito"
     try_button: "Provar"
     enter_text: "Inserisci la risposta qui..."

coursedata/texts/nl.yaml

@@ -13,6 +13,7 @@ ui:
     share_code_button: "Code opslaan & delen"
     regress_button: "Ga terug naar level"
     advance_button: "Ga naar level"
+    developers_mode: "Programmeursmodus"
     advance_step_button: "Ga naar opdracht"
     enter_text: "Vul hier je antwoord in..."
     enter: "Invullen"

coursedata/texts/pt_br.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Salvar & compartilhar código"
     regress_button: "Voltar para o nível"
     advance_button: "Ir para o nível"
+    developers_mode: "Developers mode"
     advance_step_button: "Ir para tarefa"
     try_button: "Tentar"
     enter_text: "Entre com a sua resposta aqui..."

coursedata/texts/pt_pt.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Guarda & partilha o código"
     regress_button: "Volta ao nível"
     advance_button: "Vai para o nível"
+    developers_mode: "Developers mode"
     advance_step_button: "Vai para a tarefa"
     try_button: "Experimenta"
     enter_text: "Introduz a tua resposta aqui..."

coursedata/texts/sw.yaml

@@ -12,6 +12,7 @@ ui:
   share_code_button: "Save & share code"
   regress_button: "Rudi kiwango cha"
   advance_button: "Enda kiwango cha"
+  developers_mode: "Developers mode"
   advance_step_button: "Enda kazi ya ziada"
   try_button: "Jaribu"
   enter_text: "Ingiza jibu lako hapa..."

coursedata/texts/zh.yaml

@@ -12,6 +12,7 @@ ui:
     share_code_button: "Save & share code"
     regress_button: "返回级别"
     advance_button: "前往级别"
+    developers_mode: "Developers mode"
     advance_step_button: "前往任务"
     try_button: "试一试"
     enter_text: "在这里输入你的答案..."

package.json

@@ -15,9 +15,9 @@
     "@types/jquery": "^3.5.6",
     "esbuild": "^0.13.4",
     "minify": "^7.0.1",
+    "pajv": "^1.2.0",
     "tailwindcss": "^1.9.6",
     "typescript": "^4.4.3",
-    "pajv": "^1.2.0",
     "yaml": "1.10.2"
   },
   "license": "ISC"

static/css/additional.css

@@ -28,6 +28,11 @@
   background: red !important;
 }
 
+input:checked ~ .dot {
+  transform: translateX(100%);
+  background-color: #48bb78;
+}
+
 #confetti{
   width: 100%;
   position: absolute;

static/js/app.ts

@@ -512,10 +512,15 @@ function runPythonProgram(code: string, hasTurtle: boolean, cb: () => void) {
   Sk.pre = "output";
   const turtleConfig = (Sk.TurtleGraphics || (Sk.TurtleGraphics = {}));
   turtleConfig.target = 'turtlecanvas';
+  if ($('#adventures').is(":hidden")) {
+      turtleConfig.height = 600;
+      turtleConfig.worldHeight = 600;
+  } else {
+      turtleConfig.height = 300;
+      turtleConfig.worldHeight = 300;
+  }
   turtleConfig.width = 400;
-  turtleConfig.height = 300;
   turtleConfig.worldWidth = 400;
-  turtleConfig.worldHeight = 300;
 
   if (!hasTurtle) {
     // There might still be a visible turtle panel. If the new program does not use the Turtle,
@@ -730,3 +735,17 @@ export function confetti_cannon(){
     }
   }
 }
+
+export function toggle_developers_mode() {
+  $('#commands-window-total').toggle();
+  $('#adventures').toggle();
+  if ($('#adventures').is(":hidden")) {
+    $('#editor-area').removeClass('mt-5');
+    $('#code_editor').css('height', 36 + "em");
+    $('#code_output').css('height', 36 + "em");
+  } else {
+    $('#editor-area').addClass('mt-5');
+    $('#code_editor').height('22rem');
+    $('#code_output').height('22rem');
+  }
+}

templates/code-page.html

@@ -1,31 +1,33 @@
 {% extends "level-page.html" %}
 {% block levelbody %}
-<div>
-  <button class="green-btn absolute mt-1 ml-1" id="toggle-button" onclick="toggleCommands();">&#8592; {{ hide_commands }}</button>
-</div>
-<div style="width: 250px;" id="commands-window" class="right-hand-shadow flex-none">
-  <div id="command_window_content">
-      <div class="p-3 shadow-md">
-        <div></div>
-        <h2>{{ commands_title }}</h2>
-      </div>
-      <div>
-        {% for command in commands %}
-        <div class="justify-between my-2 shadow-md p-3 pl-4">
-          <div class="font-thin text-lg flex-grow mb-1" tabindex=0>
-            {{ command.explanation|commonmark }}
+<div id="commands-window-total" class="right-hand-shadow flex-none">
+    <div>
+      <button class="green-btn absolute mt-1 ml-1" id="toggle-button" onclick="toggleCommands();">&#8592; {{ hide_commands }}</button>
+    </div>
+    <div style="width: 250px;" id="commands-window">
+      <div id="command_window_content">
+          <div class="p-3 shadow-md">
+            <div></div>
+            <h2>{{ commands_title }}</h2>
           </div>
-          <div class="flex">
-            <div class="font-thin text-sm flex-grow" tabindex=0>
-              {# placeholder to make button go right, was originally in use for the example code 3#}
+          <div>
+            {% for command in commands %}
+            <div class="justify-between my-2 shadow-md p-3 pl-4">
+              <div class="font-thin text-lg flex-grow mb-1" tabindex=0>
+                {{ command.explanation|commonmark }}
+              </div>
+              <div class="flex">
+                <div class="font-thin text-sm flex-grow" tabindex=0>
+                  {# placeholder to make button go right, was originally in use for the example code 3#}
+                </div>
+                <button class="btn block flex-none self-end ml-1" style="min-width:6em"
+                  onclick='hedyApp.tryPaletteCode({{command.demo_code|tojson}});'>{{try_button}}</button>
+              </div>
             </div>
-            <button class="btn block flex-none self-end ml-1" style="min-width:6em"
-              onclick='hedyApp.tryPaletteCode({{command.demo_code|tojson}});'>{{try_button}}</button>
+            {% endfor %}
           </div>
-        </div>
-        {% endfor %}
       </div>
-  </div>
+    </div>
 </div>
 <div tabindex="0" class="flex-grow p-8">
   {# When we're NOT in adventure mode but DO have adventures, render them in tabs #}

templates/incl-adventure-tabs.html

@@ -1,5 +1,5 @@
       {# TABS #}
-      <div>
+      <div id="adventures">
         <div class="flex cursor-pointer flex-end">
         <a tabindex="0" href="#" data-tab="level" class="block text-black no-underline font-light tab tab-selected" tabindex="0">{{ level_title }} {{ level_nr }}</a>
         {% for assignment in adventures %}
@@ -31,3 +31,4 @@
           {% endif %}
         {% endfor %}
       </div>
+    </div>

templates/incl-editor-and-output.html

@@ -1,7 +1,7 @@
 <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
 <div id="editor-area" class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-5">
     <!-- Row 1: editor, output pane -->
-    <div class="flex flex-col order-1" style="min-height: 22rem; max-height: 22rem;">
+    <div class="flex flex-col order-1" id="code_editor" style="height: 22rem;">
       <div class="w-full flex-1 flex flex-col">
         <div id="editor"
           style="background: #272822; font-family: monospace; color: white"
@@ -59,7 +59,7 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-col order-3" style="min-height: 22rem; max-height: 22rem;">
+    <div class="flex flex-col order-3" id="code_output" style="height: 22rem;">
       <!-- tabindex=0 makes the div focusable -->
       <div id="output" tabindex=0 class="flex-1 rounded p-2 px-3 bg-gray-900 color-white w-full text-lg overflow-auto" style="min-height: 3rem"></div>
       <div id="turtlecanvas" class="flex-0"></div>
@@ -106,3 +106,14 @@
       </div>
     </div>
   </div>
+<!-- developer mode toggle -->
+<div class="mx-auto w-64 border-gray-400 border-2 rounded-full py-2 px-4">
+  <label for="developers_toggle" class="flex flex-row items-center justify-center cursor-pointer">
+    <div class="relative">
+      <input id="developers_toggle" type="checkbox" onclick="hedyApp.toggle_developers_mode()" class="sr-only" />
+      <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
+      <div class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition" style="top: -5px;"></div>
+    </div>
+    <div class="ml-3">{{ developers_mode }}</div>
+  </label>
+</div>