fix(level_editor): Highlight selected road piece (#1475)

* fix(level_editor): Highlight selected road piece fixes: #1153 * Merge branch 'master' into fix/improve-highlight-for-selected-road-piece Co-Authored-By: Florian Aucomte <33633200+faucomte97@users.noreply.github.com>
ocadotechnology · Aug 31, 2023 · cdc9f85 · cdc9f85
1 parent 52a7280
commit cdc9f85
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/game/static/game/css/level_editor.css b/game/static/game/css/level_editor.css
@@ -95,6 +95,10 @@ input {
     text-align: center;
 }
 
+.mode_panel.unselected{
+    border-width: 0;
+}
+
 .mode_panel img {
     width: 70px;
     margin-left: 11px;

diff --git a/game/static/game/js/level_editor.js b/game/static/game/js/level_editor.js
@@ -47,10 +47,26 @@ ocargo.LevelEditor = function(levelId) {
     var paper = $('#paper'); // May as well cache this
 
     var modes = {
-        ADD_ROAD_MODE: {name: gettext('Add road'), url: ocargo.Drawing.imageDir + "icons/add_road.svg"},
-        DELETE_ROAD_MODE: {name: gettext('Delete road'), url: ocargo.Drawing.imageDir + "icons/delete_road.svg"},
-        MARK_DESTINATION_MODE: {name: gettext('Mark end'), url: ocargo.Drawing.imageDir + "icons/destination.svg"},
-        MARK_ORIGIN_MODE: {name: gettext('Mark start'), url: ocargo.Drawing.imageDir + "icons/origin.svg"}
+        ADD_ROAD_MODE: {
+            name: gettext('Add road'),
+            url: ocargo.Drawing.imageDir + 'icons/add_road.svg',
+            id: 'add_road',
+        },
+        DELETE_ROAD_MODE: {
+            name: gettext('Delete road'),
+            url: ocargo.Drawing.imageDir + 'icons/delete_road.svg',
+            id: 'delete_road',
+        },
+        MARK_DESTINATION_MODE: {
+            name: gettext('Mark end'),
+            url: ocargo.Drawing.imageDir + 'icons/destination.svg',
+            id: 'end',
+        },
+        MARK_ORIGIN_MODE: {
+            name: gettext('Mark start'),
+            url: ocargo.Drawing.imageDir + 'icons/origin.svg',
+            id: 'start',
+        },
     };
 
     /*********/
@@ -235,6 +251,10 @@ ocargo.LevelEditor = function(levelId) {
         function changeCurrentToolDisplay(mode){
             $('#currentToolText').text(mode.name);
             $('#currentToolIcon').attr("src", mode.url);
+            Object.values(modes).forEach((element) => {
+                $(`#${element.id}`).addClass('unselected');
+            });
+            $(`#${mode.id}`).removeClass('unselected');
         }
 
         function setupMapTab() {