feat: remove direct drive arrows (#1743)

* remove direct drive arrows * Merge branch 'master' into 1662-remove-direct-drive-arrows
ocadotechnology · Oct 22, 2024 · 203cf5a · 203cf5a
1 parent f802605
commit 203cf5a
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 126 deletions.
diff --git a/game/end_to_end_tests/test_cow_crashes.py b/game/end_to_end_tests/test_cow_crashes.py
@@ -52,7 +52,6 @@ def setUpClass(cls):
             cows='[{"minCows":"7","maxCows":"7","potentialCoordinates":[{"x":4,"y":4},{"x":2,"y":4},{"x":3,"y":7},{"x":4,"y":6},{"x":2,"y":6},{"x":3,"y":1},{"x":4,"y":2}],"type":"WHITE"}]',
             default=False,
             destinations="[[4,5]]",
-            direct_drive=True,
             fuel_gauge=False,
             max_fuel=50,
             model_solution="[1]",

diff --git a/game/end_to_end_tests/test_python_levels.py b/game/end_to_end_tests/test_python_levels.py
@@ -50,7 +50,6 @@ def test_animal_sound_horn(self):
             cows='[{"minCows":1,"maxCows":1,"potentialCoordinates":[{"x":3,"y":4}],"type":"WHITE"}]',
             default=False,
             destinations="[[4,4]]",
-            direct_drive=False,
             fuel_gauge=False,
             max_fuel=50,
             model_solution="",

diff --git a/game/messages.py b/game/messages.py
@@ -16,8 +16,8 @@ def youtube_link(url, border):
 
 def play_button_icon_url():
     return (
-        '<img src="/static/game/image/actions/go.svg" alt="Play button" '
-        'style="width: 4%;">'
+        '<img src="/static/game/image/icons/play.svg" alt="Play icon">'
+        '<b>Play</b>'
     )
 
 
@@ -355,7 +355,7 @@ def description_level13():
         f"Often there is more than one way to get to the house. The route that needs "
         f"the fewest directions is usually best. <br> Help the van find the "
         f"shortest route to the house. <br> You can press the {play_button_icon_url()} "
-        f"or <b>Play</b> buttons to start the van."
+        f"button to start the van."
     )
     return build_description(title_level13(), message)
 

diff --git a/game/migrations/0104_remove_level_direct_drive.py b/game/migrations/0104_remove_level_direct_drive.py
@@ -0,0 +1,17 @@
+# Generated by Django 3.2.25 on 2024-10-15 07:54
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game', '0103_level_1015_solution'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='level',
+            name='direct_drive',
+        ),
+    ]
diff --git a/game/models.py b/game/models.py
@@ -160,7 +160,6 @@ class Level(models.Model):
     )
     fuel_gauge = models.BooleanField(default=True)
     max_fuel = models.IntegerField(default=50)
-    direct_drive = models.BooleanField(default=False)
     next_level = models.ForeignKey(
         "self",
         null=True,

diff --git a/game/static/game/css/game.css b/game/static/game/css/game.css
@@ -321,21 +321,11 @@ div > .navigation_button_kurono {
     cursor: col-resize;
 }
 
-/******************/
-/** Direct drive **/
-/******************/
-
-#direct_drive {
-    width: 200px;
-    height: 95px;
-    position: absolute;
-    z-index: 7;
-    left: 50%;
-    bottom: 20px;
-    margin-left: 35px;
-}
+/**************/
+/** Zoom pan **/
+/**************/
 
-.direct_drive_button {
+.zoom_pan_button {
     display: inline;
     cursor: pointer;
     background-repeat: no-repeat;
@@ -349,39 +339,15 @@ div > .navigation_button_kurono {
     transition: background-size 0.3s;
 }
 
-.direct_drive_button:hover,
-.direct_drive_button:focus
+.zoom_pan_button:hover,
+.zoom_pan_button:focus
 {
     background-color: rgba(240,240,240,0.3);
     background-size: 50px 50px;
     background-color: transparent;
     outline: none;
 }
 
-#go  {
-    left: 60px;
-    bottom: 0px;
-    background-image : url('/static/game/image/actions/go.svg');
-}
-
-#turnLeft {
-    left: 10px;
-    bottom: 0px;
-    background-image : url('/static/game/image/actions/left.svg');
-}
-
-#turnRight {
-    left: 110px;
-    bottom: 0px;
-    background-image : url('/static/game/image/actions/right.svg');
-}
-
-#moveForward {
-    left: 60px;
-    bottom: 50px;
-    background-image : url('/static/game/image/actions/forward.svg');
-}
-
 .blocklyWidgetDiv {
     line-height: 1;
 }

diff --git a/game/static/game/image/actions/go.svg b/game/static/game/image/actions/go.svg
diff --git a/game/static/game/js/game.js b/game/static/game/js/game.js
@@ -73,7 +73,6 @@ ocargo.Game.prototype.setup = function () {
   this._setupConsoleSliderListeners()
   this._setupPythonViewSliderListeners()
   this._setupConsoleLogViewSliderListeners()
-  this._setupDirectDriveListeners()
   this._setupFuelGauge(ocargo.model.map.nodes, BLOCKS)
   this._setupTabs()
 
@@ -330,44 +329,6 @@ ocargo.Game.prototype._setupFuelGauge = function (nodes, blocks) {
   }
 }
 
-ocargo.Game.prototype._setupDirectDriveListeners = function () {
-  var manoeuvreCallback = function () {
-    this.drawing.scrollToShowCharacter()
-    this.onStopControls()
-  }.bind(this)
-
-  $('#moveForward').click(
-    function () {
-      if (ocargo.model.reasonForTermination != 'CRASH') {
-        this.onPlayControls()
-        ocargo.blocklyControl.addBlockToEndOfProgram('move_forwards')
-        this.drawing.moveForward(manoeuvreCallback)
-      }
-    }.bind(this)
-  )
-  $('#turnLeft').click(
-    function () {
-      if (ocargo.model.reasonForTermination != 'CRASH') {
-        this.onPlayControls()
-        ocargo.blocklyControl.addBlockToEndOfProgram('turn_left')
-        this.drawing.turnLeft(manoeuvreCallback)
-      }
-    }.bind(this)
-  )
-  $('#turnRight').click(
-    function () {
-      if (ocargo.model.reasonForTermination != 'CRASH') {
-        this.onPlayControls()
-        ocargo.blocklyControl.addBlockToEndOfProgram('turn_right')
-        this.drawing.turnRight(manoeuvreCallback)
-      }
-    }.bind(this)
-  )
-  $('#go').click(function () {
-    $('#play_radio').trigger('click')
-  })
-}
-
 ocargo.Game.prototype._setupConsoleSliderListeners = function () {
   let tabsWidth = $('#tabs').width()
 
@@ -414,7 +375,6 @@ ocargo.Game.prototype._setupConsoleSliderListeners = function () {
     $('#consoleSlider').css('left', consoleSliderPosition + '%')
     $('#paper').css('width', 100 - consoleSliderPosition + '%')
     $('#tab_panes').css('width', consoleSliderPosition + '%')
-    $('#direct_drive').css('left', consoleSliderPosition + '%')
 
     ocargo.blocklyControl.redrawBlockly()
   }
@@ -569,8 +529,6 @@ const buttonTransit = (buttonElementId, state) => {
 ocargo.Game.prototype.onPlayControls = function () {
   this.disallowCodeChanges()
 
-  document.getElementById('direct_drive').style.visibility = 'hidden'
-
   this.tabs.play.transitTo('running')
   buttonTransit("run-code-button", "running")
   this.tabs.step.disable()
@@ -585,8 +543,6 @@ ocargo.Game.prototype.onPlayControls = function () {
 ocargo.Game.prototype.onStepControls = function () {
   this.disallowCodeChanges()
 
-  document.getElementById('direct_drive').style.visibility = 'hidden'
-
   this.tabs.play.transitTo('paused')
   buttonTransit("run-code-button", "paused")
   this.tabs.step.disable()
@@ -600,8 +556,6 @@ ocargo.Game.prototype.onStepControls = function () {
 ocargo.Game.prototype.onFastControls = function () {
   this.disallowCodeChanges()
 
-  document.getElementById('direct_drive').style.visibility = 'hidden'
-
   this.tabs.play.transitTo('running')
   buttonTransit("run-code-button", "running")
   this.tabs.fast.transitTo('fast')
@@ -616,8 +570,6 @@ ocargo.Game.prototype.onFastControls = function () {
 ocargo.Game.prototype.onSlowControls = function () {
   this.disallowCodeChanges()
 
-  document.getElementById('direct_drive').style.visibility = 'hidden'
-
   this.tabs.play.transitTo('running')
   buttonTransit("run-code-button", "running")
   this.tabs.fast.transitTo('slow')
@@ -804,9 +756,6 @@ ocargo.Game.prototype.onPauseControls = function () {
 ocargo.Game.prototype.onStopControls = function () {
   this.allowCodeChanges()
 
-  // TODO make this hidden unless blocks are clear or something...
-  document.getElementById('direct_drive').style.visibility = 'visible'
-
   this.tabs.play.transitTo('readyToPlay')
   buttonTransit("run-code-button", "readyToPlay")
   this.tabs.fast.transitTo('slow')

diff --git a/game/static/game/js/level_editor.js b/game/static/game/js/level_editor.js
@@ -2869,7 +2869,7 @@ ocargo.LevelEditor = function(levelId) {
         // you can copy and paste into a Django migration file
         var state = extractState();
 
-        var boolFields = ["pythonEnabled", "blocklyEnabled", 'fuel_gauge', 'direct_drive'];
+        var boolFields = ["pythonEnabled", "blocklyEnabled", 'fuel_gauge'];
         var stringFields =  ['path', 'traffic_lights', 'cows', 'origin', 'destinations'];
         var otherFields = ['max_fuel'];
 

diff --git a/game/templates/game/game.html b/game/templates/game/game.html
@@ -71,7 +71,6 @@
 
     BLOCKLY_XML += '</xml>'
     var MAX_FUEL = {{level.max_fuel}}
-    var DIRECT_DRIVE = {{level.direct_drive|booltojs}}
     var NEXT_EPISODE = {% if level.episode.next_episode == None %}null{% else %}"{{level.episode.next_episode.id}}"{% endif %}
     var WORKSPACE = {% if workspace == None %}null{% else %}"{{workspace}}"{% endif %}
     var BLOCKLY_ENABLED = {{level.blocklyEnabled|booltojs}}
@@ -483,16 +482,9 @@ <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/shar
 
     <div id="paper" class="col" style="background-color: {{level.theme.background}}"></div>
 
-    <div id="direct_drive" class="unselectable no-print">
-      <button class="direct_drive_button" id="moveForward" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
-      <button class="direct_drive_button" id="turnLeft" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
-      <button class="direct_drive_button" id="go" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
-      <button class="direct_drive_button" id="turnRight" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
-    </div>
-
     <div id="zoom_pan" >
-      <button class="direct_drive_button" id="zoomOut" ></button>
-      <button class="direct_drive_button" id="zoomIn"></button>
+      <button class="zoom_pan_button" id="zoomOut" ></button>
+      <button class="zoom_pan_button" id="zoomIn"></button>
     </div>
 
     <div id="fuelGauge" class="no-print unselectable">