rapid-router 5.18.0__py2.py3-none-any.whl → 7.6.8__py2.py3-none-any.whl

game/static/game/js/level_editor.js

@@ -8,6 +8,8 @@ ocargo.LevelEditor = function(levelId) {
     /* Constants */
     /*************/
 
+    const TAB_PANE_WIDTH = 500;
+
     var LIGHT_RED_URL = ocargo.Drawing.raphaelImageDir + 'trafficLight_red.svg';
     var LIGHT_GREEN_URL = ocargo.Drawing.raphaelImageDir + 'trafficLight_green.svg';
 
@@ -85,6 +87,7 @@ ocargo.LevelEditor = function(levelId) {
     var originNode = null;
     var houseNodes = [];
     var currentTheme = THEMES.grass;
+    var needsApproval = false;
 
     // Reference to the Raphael elements for each square
     var grid;
@@ -189,6 +192,8 @@ ocargo.LevelEditor = function(levelId) {
         tabs.character = new ocargo.Tab($('#character_radio'), $('#character_radio + label'), $('#character_pane'));
         tabs.blocks = new ocargo.Tab($('#blocks_radio'), $('#blocks_radio + label'), $('#blocks_pane'));
         tabs.random = new ocargo.Tab($('#random_radio'), $('#random_radio + label'), $('#random_pane'));
+        tabs.description = new ocargo.Tab($('#description_radio'), $('#description_radio + label'), $('#description_pane'));
+        tabs.hint = new ocargo.Tab($('#hint_radio'), $('#hint_radio + label'), $('#hint_pane'));
         tabs.load = new ocargo.Tab($('#load_radio'), $('#load_radio + label'), $('#load_pane'));
         tabs.save = new ocargo.Tab($('#save_radio'), $('#save_radio + label'), $('#save_pane'));
         tabs.share = new ocargo.Tab($('#share_radio'), $('#share_radio + label'), $('#share_pane'));
@@ -202,6 +207,8 @@ ocargo.LevelEditor = function(levelId) {
         setupCharacterTab();
         setupBlocksTab();
         setupRandomTab();
+        setupDescriptionTab();
+        setupHintTab();
         setupLoadTab();
         setupSaveTab();
         setupShareTab();
@@ -318,28 +325,25 @@ ocargo.LevelEditor = function(levelId) {
                 }
             });
 
-            $('.decor_button').click(function(e){
-                new InternalDecor(e.target.id);
-            });
+            $('.decor_button').mousedown(handleDraggableDecorMouseDown);
 
-            $('#trafficLightRed').click(function() {
-                new InternalTrafficLight({"redDuration": 3, "greenDuration": 3, "startTime": 0,
-                                          "startingState": ocargo.TrafficLight.RED,
-                                          "sourceCoordinate": null,  "direction": null});
+            $('#trafficLightRed').mousedown(function(e) {
+                handleDraggableTrafficLightsMouseDown(e, ocargo.TrafficLight.RED);
             });
 
-            $('#trafficLightGreen').click(function() {
-                new InternalTrafficLight({"redDuration": 3, "greenDuration": 3, "startTime": 0,
-                                          "startingState": ocargo.TrafficLight.GREEN,
-                                          "sourceCoordinate": null,  "direction": null});
+            $('#trafficLightGreen').mousedown(function(e) {
+                handleDraggableTrafficLightsMouseDown(e, ocargo.TrafficLight.GREEN);
             });
 
             if(COW_LEVELS_ENABLED) {
                 if (Object.keys(cowGroups).length == 0) {
                     addCowGroup();
                 }
-                $('#cow').click(function () {
-                    new InternalCow({group: cowGroups["group1"]});
+                $('#cow').mouseover(function(e) {
+                    e.target.style.cursor = "pointer";
+                })
+                $('#cow').mousedown(function(e) {
+                    handleDraggableCowMouseDown(e, "group1")
                 });
             }
         }
@@ -412,7 +416,8 @@ ocargo.LevelEditor = function(levelId) {
 
                 for (var i = 0; i < BLOCKS.length; i++) {
                     var type = BLOCKS[i];
-                    var block = Blockly.mainWorkspace.newBlock(type);
+                    let usePigeons = type === "cow_crossing" && currentTheme == THEMES.city
+                    var block = usePigeons ? Blockly.mainWorkspace.newBlock("pigeon_crossing_IMAGE_ONLY") : Blockly.mainWorkspace.newBlock(type);
                     block.initSvg();
                     block.render();
 
@@ -478,6 +483,18 @@ ocargo.LevelEditor = function(levelId) {
             });
         }
 
+        function setupDescriptionTab() {
+            tabs.description.setOnChange(function() {
+                transitionTab(tabs.description);
+            });
+        }
+
+        function setupHintTab() {
+            tabs.hint.setOnChange(function() {
+                transitionTab(tabs.hint);
+            });
+        }
+
         function goToMapTab() {
             tabs.map.select();
         }
@@ -615,17 +632,27 @@ ocargo.LevelEditor = function(levelId) {
                     return;
                 }
 
-                var newName = $('#levelNameInput').val();
+                const nameInput = $('#levelNameInput')
+                const newName = nameInput.val();
                 if (!newName || newName === "") {
-                    // TODO error message?
+                    ocargo.Drawing.startPopup(
+                        "Oh no!",
+                        "No level title!",
+                        "Sorry, you need to specify a title for your" +
+                            " level to be saved.",
+                    );
                     return;
                 }
 
-                var regex = /^(\w?[ ]?)*$/;
-                var validString = regex.exec($('#levelNameInput').val());
+                const regex = /^[\w ]*$/;
+                const validString = regex.exec(nameInput.val());
                 if (!validString) {
-                    ocargo.Drawing.startPopup(gettext('Oh no!'), gettext('You used some invalid characters.'),
-                        gettext('Try saving your level again using only letters and numbers.'));
+                    ocargo.Drawing.startPopup(
+                        "Oh no!",
+                        "You used some invalid characters.",
+                        "Try saving your level again using only" +
+                        " letters and numbers."
+                    );
                     return;
                 }
 
@@ -634,33 +661,37 @@ ocargo.LevelEditor = function(levelId) {
                 }
 
                 // Test to see if we already have the level saved
-                var table = $("#saveLevelTable");
-                var existingId = -1;
+                const table = $("#saveLevelTable");
+                let existingId = -1;
 
-                for (var i = 0; i < table[0].rows.length; i++) {
-                     var row = table[0].rows[i];
-                     var existingName = row.cells[0].innerHTML;
+                for (let i = 0; i < table[0].rows.length; i++) {
+                     const row = table[0].rows[i];
+                     const existingName = row.cells[0].innerHTML;
                      if (existingName === newName) {
                         existingId = row.getAttribute('value');
                         break;
                      }
                 }
 
-                if (existingId != -1) {
+                if (existingId !== -1) {
                     if (!saveState.isCurrentLevel(existingId)) {
-                        var onYes = function(){
+                        const onYes = function(){
                             saveLevelLocal(existingId);
                             $("#myModal").hide()
                             $("#ocargo-modal").hide()
                         };
-                        var onNo = function(){
+                        const onNo = function(){
                             $("#myModal").hide()
                             $("#ocargo-modal").hide()
                         };
-                        ocargo.Drawing.startYesNoPopup(gettext('Overwriting'), gettext('Warning'),
-                            interpolate(gettext('Level %(level_name)s already exists. Are you sure you want to overwrite it?'), {
-                              level_name: newName
-                            }, true), onYes, onNo);
+                        ocargo.Drawing.startYesNoPopup(
+                            "Overwriting",
+                            "Warning",
+                            `Level ${newName} already exists. Are
+                            you sure you want to overwrite it?`,
+                            onYes,
+                            onNo
+                        );
                     } else {
                         saveLevelLocal(existingId);
                     }
@@ -701,7 +732,7 @@ ocargo.LevelEditor = function(levelId) {
         }
 
         function setupShareTab() {
-            // Setup the behaviour for when the tab is selected
+            // Set up the behaviour for when the tab is selected
             tabs.share.setOnChange(function() {
                 if (!isIndependentStudent() ||  !isLoggedIn("share") || !canShare() || !isLevelOwned()) {
                     restorePreviousTab();
@@ -880,7 +911,7 @@ ocargo.LevelEditor = function(levelId) {
             var color = COW_GROUP_COLOR_PALETTE[(currentCowGroupId - 1) % COW_GROUP_COLOR_PALETTE.length];
             var style = 'background-color: ' + color;
             var value = 'group' + currentCowGroupId++;
-            var type = ocargo.Cow.WHITE;
+            var type = currentTheme == THEMES.city ? ocargo.Cow.PIGEON : ocargo.Cow.WHITE;
 
             cowGroups[value] = {
                 id: value,
@@ -1031,7 +1062,7 @@ ocargo.LevelEditor = function(levelId) {
         } else {
             closeTrashcan();
         }
-    }
+}
 
     function openTrashcan() {
         $('#trashcanLidOpen').css('display', 'block');
@@ -1196,8 +1227,8 @@ ocargo.LevelEditor = function(levelId) {
         if (cows) {
             for (var i = 0; i < cows.length; i++) {
                 var internalCow = cows[i];
-                if (internalCow.controlledNode) {
-                    mark(internalCow.controlledNode.coordinate, internalCow.data.group.color, 0.3, true);
+                if (internalCow.coordinate) {
+                    mark(internalCow.coordinate, internalCow.data.group.color, 0.3, true);
                 }
             }
         }
@@ -1312,7 +1343,7 @@ ocargo.LevelEditor = function(levelId) {
                 nodes[0] = temp;
                 originNode = nodes[0];
             } else if (mode === modes.ADD_HOUSE_MODE && existingNode) {
-                // Check if same as starting node 
+                // Check if same as starting node
                 if (isOriginCoordinate(coordMap)) {
                     originNode = null;
                 }
@@ -1358,11 +1389,11 @@ ocargo.LevelEditor = function(levelId) {
                         mark(coordMap, 'blue', 0.3, true);
                     } else if (mode === modes.MARK_ORIGIN_MODE && canPlaceCFC(node)) {
                         mark(coordMap, 'red', 0.5, true);
-                    } 
+                    }
                 } else if (node && houseNodes.includes(node) && mode === modes.DELETE_HOUSE_MODE) {
                     mark(coordMap, 'blue', 0.3, true);
                 }
-            } 
+            }
         };
     }
 
@@ -1440,6 +1471,23 @@ ocargo.LevelEditor = function(levelId) {
         };
     }
 
+    function draggedObjectOnGrid(e, dragged_object) {
+    // object location is relative to the whole page, so need to factor in paper and padding size, grid canvas scroll amount, width of toolbar, etc.
+        return e.pageX >= (TAB_PANE_WIDTH + PAPER_PADDING)
+            && (e.pageY + paper.scrollTop() + dragged_object.height / 2) <= (PAPER_HEIGHT + PAPER_PADDING)
+            && (e.pageX + paper.scrollLeft() + dragged_object.width / 2) <= (TAB_PANE_WIDTH + PAPER_WIDTH + PAPER_PADDING)
+    }
+
+    function getAbsCoordinates(e) {
+        const absX = (e.pageX + paper.scrollLeft() - TAB_PANE_WIDTH) / GRID_SPACE_SIZE;
+        const absY = (e.pageY + paper.scrollTop()) / GRID_SPACE_SIZE;
+        return [absX, absY];
+    }
+
+    function draggedCursorOverGrid(absX, absY) {
+        return absY <= SEMI_EXTENDED_PAPER_HEIGHT / 100 && absX <= EXTENDED_PAPER_WIDTH / 100 && absX >= 0
+    }
+
     function setupDecorListeners(decor) {
         var image = decor.image;
 
@@ -1515,6 +1563,47 @@ ocargo.LevelEditor = function(levelId) {
         addReleaseListeners(image.node);
     }
 
+    function handleDraggableDecorMouseDown(e){
+        e.preventDefault();
+
+        window.dragged_decor = {};
+        dragged_decor.pageX0 = e.pageX;
+        dragged_decor.pageY0 = e.pageY;
+        dragged_decor.elem = this;
+        dragged_decor.offset0 = $(this).offset();
+        dragged_decor.width = parseInt(currentTheme.decor[this.id].width);
+        dragged_decor.height = parseInt(currentTheme.decor[this.id].height);
+        dragged_decor.parent = this.parentElement;
+
+        const clone = $(this).clone(true);
+
+        function handleDraggableDecorDragging(e){
+            const left = dragged_decor.offset0.left + (e.pageX - dragged_decor.pageX0);
+            const top = dragged_decor.offset0.top + (e.pageY - dragged_decor.pageY0);
+            $(dragged_decor.elem).offset({top: top, left: left});
+        }
+
+        function handleDraggableDecorMouseUp(e){
+            if (dragged_decor.elem.id !== null) {
+                if (draggedObjectOnGrid(e, dragged_decor)) {
+                    let decorObject = new InternalDecor(dragged_decor.elem.id);
+                    decorObject.setPosition(e.pageX + paper.scrollLeft() - TAB_PANE_WIDTH - dragged_decor.width / 2, e.pageY + paper.scrollTop() - dragged_decor.height / 2);
+                }
+            }
+
+            $(document)
+            .off('mousemove', handleDraggableDecorDragging)
+            .off('mouseup mouseleave', handleDraggableDecorMouseUp);
+
+            $(dragged_decor.elem).remove();
+            $(clone).appendTo(dragged_decor.parent);
+        }
+
+        $(document)
+        .on('mouseup mouseleave', handleDraggableDecorMouseUp)
+        .on('mousemove', handleDraggableDecorDragging);
+    }
+
     function setupCowListeners(cow) {
         var image = cow.image;
 
@@ -1568,50 +1657,14 @@ ocargo.LevelEditor = function(levelId) {
             image.transform('t' + paperX + ',' + paperY );
 
             //Unmark the squares the cow previously occupied
-            if (controlledCoord) {
-                markAsBackground(controlledCoord);
-            }
-            if(cows) {
-                for( var i = 0; i < cows.length; i++){
-                    var internalCow = cows[i];
-                    if(internalCow !== cow && internalCow.controlledNode) {
-                        mark(internalCow.controlledNode.coordinate, internalCow.data.group.color, 0.3, true);
-                    }
-                }
-            }
-            if (originNode) {
-                markAsOrigin(originNode.coordinate);
-            }
-            if (houseNodes.length > 0) {
-                for (let i = 0; i < houseNodes.length; i++){
-                    markAsHouse(houseNodes[i].coordinate);
-                }
-            }
+            unmarkOldCowSquare(controlledCoord, cow);
 
             // Now calculate the source coordinate
             var box = image.getBBox();
             var absX = (box.x + box.width/2) / GRID_SPACE_SIZE;
             var absY = (box.y + box.height/2) / GRID_SPACE_SIZE;
 
-            var x = Math.min(Math.max(0, Math.floor(absX)), GRID_WIDTH - 1);
-            var y = GRID_HEIGHT - Math.min(Math.max(0, Math.floor(absY)), GRID_HEIGHT - 1) - 1;
-            controlledCoord = new ocargo.Coordinate(x,y);
-
-            // If source node is not on grid remove it
-            if (!isCoordinateOnGrid(controlledCoord)) {
-                controlledCoord = null;
-            }
-
-            if (controlledCoord) {
-                var colour;
-                if(isValidPlacement(controlledCoord)) {
-                    colour = VALID_LIGHT_COLOUR;
-                } else {
-                    colour = INVALID_LIGHT_COLOUR;
-                }
-
-                mark(controlledCoord, colour, 0.7, false);
-            }
+            controlledCoord = markNewCowSquare(absX, absY, controlledCoord, cow);
 
             // Deal with trashcan
             var paperAbsX = paperX - paper.scrollLeft() + imageWidth/2;
@@ -1628,6 +1681,8 @@ ocargo.LevelEditor = function(levelId) {
         }
 
         function onDragStart(x, y) {
+            // cow shouldn't be in the cow group during dragging
+            removeCowFromCowList(cow);
             var bBox = image.getBBox();
             imageWidth = bBox.width;
             imageHeight = bBox.height;
@@ -1643,71 +1698,62 @@ ocargo.LevelEditor = function(levelId) {
         }
 
         function onDragEnd() {
-            //Unmark previously occupied square
-            if(cow.controlledNode) {
-                markAsBackground(cow.controlledNode.coordinate);
-            }
-
-            // Mark squares currently occupied
-            if (controlledCoord) {
-                mark(controlledCoord, cow.data.group.color, 0.3, true);
-            }
-            if (originNode) {
-                markAsOrigin(originNode.coordinate);
-            }
-            if (houseNodes.length > 0) {
-                for (let i = 0; i < houseNodes.length; i++) {
-                    markAsHouse(houseNodes[i].coordinate);
-                }
-            }
 
             if (trashcanOpen) {
                 cow.destroy();
-            } else if (isValidPlacement(controlledCoord)) {
-                // Add back to the list of cows if on valid nodes
-                var controlledNode = ocargo.Node.findNodeByCoordinate(controlledCoord, nodes);
-                cow.controlledNode = controlledNode;
-                cow.valid = true;
-                drawing.setCowImagePosition(controlledCoord, image, controlledNode);
+                unmarkOldCowSquare(controlledCoord, cow);
+                closeTrashcan();
             } else {
-                cow.controlledNode = null;
-                cow.valid = false;
+                setCowMarkingsOnMouseUp(controlledCoord, cow);
+                cows.push(cow);
+                cow.coordinate = controlledCoord;
+                cow.valid = isValidDraggedCowPlacement(controlledCoord, cow);
+                if (cow.isOnRoad()) {
+                    const controlledNode = ocargo.Node.findNodeByCoordinate(controlledCoord, nodes);
+                    drawing.setCowImagePosition(controlledCoord, image, controlledNode);
+                }
+                else {
+                    var cowX = paperX;
+                    var cowY = paperY;
 
-                var cowX = paperX;
-                var cowY = paperY;
+                    if (paperWidth < paperX + imageWidth) {
+                        cowX = paperWidth - imageWidth
+                    }
 
-                if (paperWidth < paperX + imageWidth) {
-                    cowX = paperWidth - imageWidth
-                }
+                    if (paperHeight < paperY + imageHeight) {
+                        cowY = paperHeight - imageHeight
+                    }
 
-                if (paperHeight < paperY + imageHeight) {
-                    cowY = paperHeight - imageHeight
+                    image.transform('t' + cowX + ',' + cowY);
                 }
+            }
 
-                image.transform('t' + cowX + ',' + cowY);
-            } 
             adjustCowGroupMinMaxFields(cow);
-
             image.attr({'cursor':'pointer'});
-            closeTrashcan();
-        }
-
-        function isValidPlacement(controlledCoord){
-            var controlledNode = ocargo.Node.findNodeByCoordinate(controlledCoord, nodes);
-            if (!controlledNode)
-                return false;
-            for (var i=0; i < cows.length; i++) {
-                var otherCow = cows[i];
-                if (otherCow.controlledNode == controlledNode && cow != otherCow)
-                    return false;
-            }
-            return true;
         }
 
         image.drag(onDragMove, onDragStart, onDragEnd);
         addReleaseListeners(image.node);
     }
 
+    function removeCowFromCowList(cow) {
+        var index = cows.indexOf(cow);
+        if (index > -1) {
+            cows.splice(index, 1);
+        }
+    }
+
+    function isValidDraggedCowPlacement(controlledCoord, cow){
+        if (isOriginCoordinate(controlledCoord) || isHouseCoordinate(controlledCoord))
+            return false;
+        for (var i=0; i < cows.length; i++) {
+            var otherCow = cows[i];
+            if (cow != otherCow && otherCow.coordinate && otherCow.coordinate.equals(controlledCoord))
+                return false;
+        }
+        return true;
+    }
+
     function adjustCowGroupMinMaxFields(draggedCow) {
         var draggedCowGroupId = draggedCow.data.group.id;
 
@@ -1724,6 +1770,131 @@ ocargo.LevelEditor = function(levelId) {
         $('#cow_group_select').val(draggedCowGroupId).change();
     }
 
+    function unmarkOldCowSquare(controlledCoord, cow = "undefined") {
+        if (controlledCoord) {
+            markAsBackground(controlledCoord);
+        }
+        if (originNode) {
+            markAsOrigin(originNode.coordinate);
+        }
+        if (houseNodes.length > 0) {
+            for (let i = 0; i < houseNodes.length; i++){
+                markAsHouse(houseNodes[i].coordinate);
+            }
+        }
+    }
+
+    function setCowMarkingsOnMouseUp(controlledCoord, cow) {
+        if (cow.isOnRoad()) {
+            markAsBackground(cow.coordinate);
+        }
+        if (controlledCoord) {
+            mark(controlledCoord, cow.data.group.color, 0.3, true);
+        }
+        if (originNode) {
+            markAsOrigin(originNode.coordinate);
+        }
+        if (houseNodes.length > 0) {
+            for (let i = 0; i < houseNodes.length; i++) {
+                markAsHouse(houseNodes[i].coordinate);
+            }
+        }
+    }
+
+    function markNewCowSquare(absX, absY, controlledCoord, cow = "undefined") {
+        const x = Math.min(Math.max(0, Math.floor(absX)), GRID_WIDTH - 1);
+        const y = GRID_HEIGHT - Math.min(Math.max(0, Math.floor(absY)), GRID_HEIGHT - 1) - 1;
+        controlledCoord = new ocargo.Coordinate(x,y);
+
+        // If source node is not on grid remove it
+        if (!isCoordinateOnGrid(controlledCoord)) {
+            controlledCoord = null;
+        }
+
+        // mark square valid or invalid
+        if (controlledCoord) {
+            let colour;
+            if(isValidDraggedCowPlacement(controlledCoord, cow)) {
+                colour = VALID_LIGHT_COLOUR;
+            } else {
+                colour = INVALID_LIGHT_COLOUR;
+            }
+
+            mark(controlledCoord, colour, 0.7, false);
+        }
+
+        return controlledCoord;
+    }
+
+    function handleDraggableCowMouseDown(e, cowGroup){
+        e.preventDefault();
+
+        window.dragged_cow = {};
+        dragged_cow.pageX0 = e.pageX;
+        dragged_cow.pageY0 = e.pageY;
+        dragged_cow.elem = e.target;
+        dragged_cow.offset0 = $(e.target).offset();
+        dragged_cow.parent = e.target.parentElement;
+        dragged_cow.group = cowGroups[cowGroup];
+        dragged_cow.width = COW_WIDTH;
+        dragged_cow.height = COW_HEIGHT;
+
+        const clone = $(e.target).clone(true);
+        let controlledCoord;
+
+        function handleDraggableCowDragging(e){
+            e.target.style.cursor = "pointer";
+
+            const left = dragged_cow.offset0.left + (e.pageX - dragged_cow.pageX0);
+            const top = dragged_cow.offset0.top + (e.pageY - dragged_cow.pageY0);
+            $(dragged_cow.elem).offset({top: top, left: left});
+
+            unmarkOldCowSquare(controlledCoord);
+
+            const [absX, absY] = getAbsCoordinates(e);
+            if (draggedCursorOverGrid(absX, absY)) {
+                controlledCoord = markNewCowSquare(absX, absY, controlledCoord);
+            }
+        }
+
+        function handleDraggableCowMouseUp(e){
+            let internalCow = new InternalCow({group: cowGroups["group1"]});
+            let image = internalCow.image;
+            internalCow.coordinate = controlledCoord;
+            internalCow.valid = isValidDraggedCowPlacement(controlledCoord, internalCow);
+
+            if (internalCow.isOnRoad()) {
+                const controlledNode = ocargo.Node.findNodeByCoordinate(controlledCoord, nodes);
+                drawing.setCowImagePosition(controlledCoord, image, controlledNode);
+            } else {
+                const cowX = e.pageX + paper.scrollLeft() - TAB_PANE_WIDTH - dragged_cow.width / 2;
+                const cowY = e.pageY + paper.scrollTop() - dragged_cow.height / 2;
+
+                if (draggedObjectOnGrid(e, dragged_cow)) {
+                    image.transform('t' + cowX + ',' + cowY);
+                } else {
+                    internalCow.destroy();
+                }
+            }
+
+            if (!trashcanOpen) {
+                setCowMarkingsOnMouseUp(controlledCoord, internalCow);
+                adjustCowGroupMinMaxFields(internalCow);
+            }
+
+            $(document)
+            .off('mousemove', handleDraggableCowDragging)
+            .off('mouseup mouseleave', handleDraggableCowMouseUp);
+
+            $(dragged_cow.elem).remove();
+            $(clone).appendTo(dragged_cow.parent);
+        }
+
+        $(document)
+        .on('mouseup mouseleave', handleDraggableCowMouseUp)
+        .on('mousemove', handleDraggableCowDragging);
+    }
+
 
     function setupTrafficLightListeners(trafficLight) {
         var image = trafficLight.image;
@@ -1788,23 +1959,7 @@ ocargo.LevelEditor = function(levelId) {
             image.transform('t' + paperX + ',' + paperY + 'r' + rotation + 's' + scaling);
 
             // Unmark the squares the light previously occupied
-            if (sourceCoord) {
-                markAsBackground(sourceCoord);
-            }
-            if (controlledCoord) {
-                markAsBackground(controlledCoord);
-            }
-
-            markCowNodes();
-
-            if (originNode) {
-                markAsOrigin(originNode.coordinate);
-            }
-            if (houseNodes.length > 0) {
-                for (let i = 0; i < houseNodes.length; i++) {
-                    markAsHouse(houseNodes[i].coordinate);
-                }
-            }
+            unmarkOldTrafficLightSquare(sourceCoord, controlledCoord);
 
             // Now calculate the source coordinate
             var box = image.getBBox();
@@ -1826,48 +1981,7 @@ ocargo.LevelEditor = function(levelId) {
                     break;
             }
 
-            var x = Math.min(Math.max(0, Math.floor(absX)), GRID_WIDTH - 1);
-            var y = GRID_HEIGHT - Math.min(Math.max(0, Math.floor(absY)), GRID_HEIGHT - 1) - 1;
-            sourceCoord = new ocargo.Coordinate(x,y);
-
-            // Find controlled position in map coordinates
-            switch(rotation) {
-                case 0:
-                    controlledCoord = new ocargo.Coordinate(sourceCoord.x, sourceCoord.y + 1);
-                    break;
-                case 90:
-                    controlledCoord = new ocargo.Coordinate(sourceCoord.x + 1, sourceCoord.y);
-                    break;
-                case 180:
-                    controlledCoord = new ocargo.Coordinate(sourceCoord.x, sourceCoord.y - 1);
-                    break;
-                case 270:
-                    controlledCoord = new ocargo.Coordinate(sourceCoord.x - 1, sourceCoord.y);
-                    break;
-            }
-
-            // If controlled node is not on grid, remove it
-            if (!isCoordinateOnGrid(controlledCoord)) {
-                controlledCoord = null;
-            }
-
-            // If source node is not on grid remove it
-            if (!isCoordinateOnGrid(sourceCoord)) {
-                sourceCoord = null;
-            }
-
-            if (sourceCoord && controlledCoord) {
-                var colour;
-                if(isValidPlacement(sourceCoord, controlledCoord)) {
-                    colour = VALID_LIGHT_COLOUR;
-                    drawing.setTrafficLightImagePosition(sourceCoord, controlledCoord, image);
-                } else {
-                    colour = INVALID_LIGHT_COLOUR;
-                }
-
-                mark(controlledCoord, colour, 0.7, false);
-                mark(sourceCoord, colour, 0.7, false);
-            }
+            [sourceCoord, controlledCoord] = markNewTrafficLightSquare(absX, absY, isValidTrafficLightPlacement, sourceCoord, controlledCoord, rotation, image);
 
             // Deal with trashcan
             var paperAbsX = paperX - paper.scrollLeft() + imageWidth/2;
@@ -1907,27 +2021,11 @@ ocargo.LevelEditor = function(levelId) {
 
         function onDragEnd() {
             // Unmark squares currently occupied
-            if (sourceCoord) {
-                markAsBackground(sourceCoord);
-            }
-            if (controlledCoord) {
-                markAsBackground(controlledCoord);
-            }
-
-            markCowNodes();
-
-            if (originNode) {
-                markAsOrigin(originNode.coordinate);
-            }
-            if (houseNodes.length > 0) {
-                for (let i = 0; i < houseNodes.length; i++) {
-                    markAsHouse(houseNodes[i].coordinate);
-                }
-            }
+            unmarkOldTrafficLightSquare(sourceCoord, controlledCoord);
 
             if(trashcanOpen) {
                 trafficLight.destroy();
-            } else if(isValidPlacement(sourceCoord, controlledCoord)) {
+            } else if(isValidTrafficLightPlacement(sourceCoord, controlledCoord)) {
                 // Add back to the list of traffic lights if on valid nodes
                 trafficLight.sourceNode = ocargo.Node.findNodeByCoordinate(sourceCoord, nodes);
                 trafficLight.controlledNode = ocargo.Node.findNodeByCoordinate(controlledCoord, nodes);
@@ -1976,41 +2074,177 @@ ocargo.LevelEditor = function(levelId) {
             }
             return "0,0";
         }
+    }
 
-        function isValidPlacement(sourceCoord, controlledCoord) {
-            var sourceNode = ocargo.Node.findNodeByCoordinate(sourceCoord, nodes);
-            var controlledNode = ocargo.Node.findNodeByCoordinate(controlledCoord, nodes);
+    function isValidTrafficLightPlacement(sourceCoord, controlledCoord) {
+        var sourceNode = ocargo.Node.findNodeByCoordinate(sourceCoord, nodes);
+        var controlledNode = ocargo.Node.findNodeByCoordinate(controlledCoord, nodes);
 
-            // Test if two connected nodes exist
-            var connected = false;
-            if (sourceNode && controlledNode) {
-                for (var i = 0; i < sourceNode.connectedNodes.length; i++) {
-                    if (sourceNode.connectedNodes[i] === controlledNode) {
-                        connected = true;
-                        break;
-                    }
+        // Test if two connected nodes exist
+        var connected = false;
+        if (sourceNode && controlledNode) {
+            for (var i = 0; i < sourceNode.connectedNodes.length; i++) {
+                if (sourceNode.connectedNodes[i] === controlledNode) {
+                    connected = true;
+                    break;
                 }
             }
+        }
 
-            if(!connected) {
+        if(!connected) {
+            return false;
+        }
+
+        // Test it's not already occupied
+        for(var i = 0; i < trafficLights.length; i++) {
+            var tl = trafficLights[i];
+            if(tl.valid &&
+                ((tl.sourceNode === sourceNode && tl.controlledNode === controlledNode) ||
+                (tl.sourceNode === controlledNode && tl.controlledNode === sourceNode))) {
                 return false;
             }
+        }
+        return true;
+    }
+
+    function unmarkOldTrafficLightSquare(sourceCoord, controlledCoord) {
+        // Unmark the squares the light previously occupied
+        if (sourceCoord) {
+            markAsBackground(sourceCoord);
+        }
+        if (controlledCoord) {
+            markAsBackground(controlledCoord);
+        }
+
+        markCowNodes();
+
+        if (originNode) {
+            markAsOrigin(originNode.coordinate);
+        }
+        if (houseNodes.length > 0) {
+            for (let i = 0; i < houseNodes.length; i++) {
+                markAsHouse(houseNodes[i].coordinate);
+            }
+        }
+    }
+
+    function markNewTrafficLightSquare(absX, absY, validityCheckFunction, sourceCoord, controlledCoord, rotation, image = "undefined") {
+        var x = Math.min(Math.max(0, Math.floor(absX)), GRID_WIDTH - 1);
+        var y = GRID_HEIGHT - Math.min(Math.max(0, Math.floor(absY)), GRID_HEIGHT - 1) - 1;
+        sourceCoord = new ocargo.Coordinate(x,y);
 
-            // Test it's not already occupied
-            for(var i = 0; i < trafficLights.length; i++) {
-                var tl = trafficLights[i];
-                if(tl.valid &&
-                    ((tl.sourceNode === sourceNode && tl.controlledNode === controlledNode) ||
-                    (tl.sourceNode === controlledNode && tl.controlledNode === sourceNode))) {
-                    return false;
+        // Find controlled position in map coordinates
+        switch(rotation) {
+            case 0:
+                controlledCoord = new ocargo.Coordinate(sourceCoord.x, sourceCoord.y + 1);
+                break;
+            case 90:
+                controlledCoord = new ocargo.Coordinate(sourceCoord.x + 1, sourceCoord.y);
+                break;
+            case 180:
+                controlledCoord = new ocargo.Coordinate(sourceCoord.x, sourceCoord.y - 1);
+                break;
+            case 270:
+                controlledCoord = new ocargo.Coordinate(sourceCoord.x - 1, sourceCoord.y);
+                break;
+        }
+
+        // If controlled node is not on grid, remove it
+        if (!isCoordinateOnGrid(controlledCoord)) {
+            controlledCoord = null;
+        }
+
+        // If source node is not on grid remove it
+        if (!isCoordinateOnGrid(sourceCoord)) {
+            sourceCoord = null;
+        }
+
+        if (sourceCoord && controlledCoord) {
+            var colour;
+            if(validityCheckFunction(sourceCoord, controlledCoord)) {
+                colour = VALID_LIGHT_COLOUR;
+                if (image !== "undefined") {
+                    drawing.setTrafficLightImagePosition(sourceCoord, controlledCoord, image);
                 }
+            } else {
+                colour = INVALID_LIGHT_COLOUR;
+            }
+
+            mark(controlledCoord, colour, 0.7, false);
+            mark(sourceCoord, colour, 0.7, false);
+        }
+
+        return [sourceCoord, controlledCoord];
+    }
+
+    function handleDraggableTrafficLightsMouseDown(e, startingState){
+        e.preventDefault();
+
+        window.dragged_light = {};
+        dragged_light.pageX0 = e.pageX;
+        dragged_light.pageY0 = e.pageY;
+        dragged_light.elem = e.target;
+        dragged_light.offset0 = $(e.target).offset();
+        dragged_light.width = TRAFFIC_LIGHT_WIDTH;
+        dragged_light.height = TRAFFIC_LIGHT_HEIGHT;
+        dragged_light.parent = e.target.parentElement;
+
+        const clone = $(e.target).clone(true);
+
+        let sourceCoord;
+        let controlledCoord;
+
+        function handleDraggableTrafficLightsDragging(e){
+            const left = dragged_light.offset0.left + (e.pageX - dragged_light.pageX0);
+            const top = dragged_light.offset0.top + (e.pageY - dragged_light.pageY0);
+            $(dragged_light.elem).offset({top: top, left: left});
+
+            unmarkOldTrafficLightSquare(sourceCoord, controlledCoord);
+
+            const [absX, absY] = getAbsCoordinates(e);
+            if (draggedCursorOverGrid(absX, absY)) {
+                [sourceCoord, controlledCoord] = markNewTrafficLightSquare(absX, absY, isValidTrafficLightPlacement, sourceCoord, controlledCoord, 0);
             }
-            return true;
         }
 
-        function occupied(sourceCoord, controlledCoord) {
+        function handleDraggableTrafficLightsMouseUp(e){
+            let internalTrafficLight = new InternalTrafficLight({"redDuration": 3, "greenDuration": 3, "startTime": 0, "startingState": startingState, "sourceCoordinate": null,  "direction": null});
+            let image = internalTrafficLight.image;
+
+            const lightX = e.pageX + paper.scrollLeft() - TAB_PANE_WIDTH - dragged_light.width;
+            const lightY = e.pageY + paper.scrollTop() - dragged_light.width / 2;
+
+            unmarkOldTrafficLightSquare(sourceCoord, controlledCoord);
 
+            if (isValidTrafficLightPlacement(sourceCoord, controlledCoord)) {
+                internalTrafficLight.sourceNode = ocargo.Node.findNodeByCoordinate(sourceCoord, nodes);
+                internalTrafficLight.controlledNode = ocargo.Node.findNodeByCoordinate(controlledCoord, nodes);
+                internalTrafficLight.valid = true;
+
+                drawing.setTrafficLightImagePosition(sourceCoord, controlledCoord, image);
+            } else {
+                internalTrafficLight.sourceCoord = null;
+                internalTrafficLight.controlledCoord = null;
+                internalTrafficLight.valid = false;
+
+                if (draggedObjectOnGrid(e, dragged_light)) {
+                        image.transform('t' + lightX + ',' + lightY + ' s-1,1');
+                } else {
+                    internalTrafficLight.destroy();
+                }
+            }
+
+            $(document)
+            .off('mousemove', handleDraggableTrafficLightsDragging)
+            .off('mouseup mouseleave', handleDraggableTrafficLightsMouseUp);
+
+            $(dragged_light.elem).remove();
+            $(clone).appendTo(dragged_light.parent);
         }
+
+        $(document)
+        .on('mouseup mouseleave', handleDraggableTrafficLightsMouseUp)
+        .on('mousemove', handleDraggableTrafficLightsDragging);
     }
 
     /********************************/
@@ -2143,6 +2377,7 @@ ocargo.LevelEditor = function(levelId) {
 
     function setTheme(theme) {
         currentTheme = theme;
+        let newType = currentTheme == THEMES.city ? ocargo.Cow.PIGEON : ocargo.Cow.WHITE;
 
         for (var x = 0; x < GRID_WIDTH; x++) {
             for (var y = 0; y < GRID_HEIGHT; y++) {
@@ -2159,6 +2394,36 @@ ocargo.LevelEditor = function(levelId) {
         });
 
         $('#paper').css({'background-color': theme.background});
+
+        const animalSource = theme == THEMES.city ? "/static/game/image/pigeon.svg" : "/static/game/image/Clarice.svg";
+
+        $('#cow').each(function(index, element) {
+            element.src = animalSource;
+        })
+
+        $('#animals_label').each(function(index, element) {
+            element.innerHTML = theme == THEMES.city ? "Pigeons" : "Cows";
+        })
+
+        for (let [key, value] of Object.entries(cowGroups)) {
+            value["type"] = theme == THEMES.city ? ocargo.Cow.PIGEON : ocargo.Cow.WHITE;
+        }
+
+        for (let i = 0; i < cows.length; i++) {
+            cows[i].updateTheme();
+        }
+
+        const pigeonHTML = `<svg class="block_image"><g transform="translate(10,0)" <path="" class="blocklyPathDark" fill="#496684" d="m 0,0 H 111.34375 v 30 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z
+                            "><path class="blocklyPath" stroke="none" fill="#5b80a5" d="m 0,0 H 111.34375 v 30 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z
+                            "></path><path class="blocklyPathLight" stroke="#8ca6c0" d="m 0.5,0.5 H 110.84375 M 110.84375,0.5 M 0.5,29.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1
+                            "></path><text class="blocklyText" y="12.5" transform="translate(10,5)">pigeons</text><g transform="translate(71.34375,5)"><image height="20px" width="30px" xlink:href="/static/game/image/pigeon.svg" alt=""></image></g></g></svg>`;
+
+        const cowHTML = `<svg class="block_image"><g transform="translate(10,0)" <path="" class="blocklyPathDark" fill="#496684" d="m 0,0 H 93.40625 v 30 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z
+                            "><path class="blocklyPath" stroke="none" fill="#5b80a5" d="m 0,0 H 93.40625 v 30 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z
+                            "></path><path class="blocklyPathLight" stroke="#8ca6c0" d="m 0.5,0.5 H 92.90625 M 92.90625,0.5 M 0.5,29.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1
+                            "></path><text class="blocklyText" y="12.5" transform="translate(10,5)">cows</text><g transform="translate(53.40625,5)"><image height="20px" width="30px" xlink:href="/static/game/image/Clarice.svg" alt=""></image></g></g></svg>`;
+
+        $("#cow_crossing_image").html(newType == ocargo.Cow.PIGEON ? pigeonHTML : cowHTML);
     }
 
     function sortNodes(nodes) {
@@ -2225,7 +2490,7 @@ ocargo.LevelEditor = function(levelId) {
                         type: cowGroups[groupId].type}; //editor can only add white cow for now
                 }
 
-                var coordinates = cows[i].controlledNode.coordinate;
+                var coordinates = cows[i].coordinate;
                 var strCoordinates = {'x':coordinates.x, 'y':coordinates.y};
                 cowGroupData[groupId].potentialCoordinates.push(strCoordinates);
             }
@@ -2277,13 +2542,65 @@ ocargo.LevelEditor = function(levelId) {
 
         // Language data
         var language = $('#language_select').val();
-        state.blocklyEnabled = language === 'blockly' || language === 'both' || language === 'blocklyWithPythonView';
-        state.pythonViewEnabled = language === 'blocklyWithPythonView';
-        state.pythonEnabled = language === 'python' || language === 'both';
+        state.blockly_enabled = language === 'blockly' || language === 'both' || language === 'blocklyWithPythonView';
+        state.python_view_enabled = language === 'blocklyWithPythonView';
+        state.python_enabled = language === 'python' || language === 'both';
+
+        const regex = /^[\w.?!', ]*$/;
+        const subtitleValue = $('#subtitle').val();
+        const descriptionValue = $('#description').val();
+        const hintValue = $('#hint').val();
+
+        // Description and hint data
+        if (subtitleValue.length > 0) {
+            if (regex.exec(subtitleValue)) {
+                state.subtitle = subtitleValue;
+            }
+            else {
+                ocargo.Drawing.startPopup(
+                    "Oh no!",
+                    "You used some invalid characters for your level subtitle.",
+                    "Try saving your level again using only" +
+                    " letters, numbers and standard punctuation."
+                );
+                return
+            }
+        }
+
+        if (descriptionValue.length > 0) {
+            if (regex.exec(descriptionValue)) {
+                state.lesson = descriptionValue;
+            }
+            else {
+                ocargo.Drawing.startPopup(
+                    "Oh no!",
+                    "You used some invalid characters for your level description.",
+                    "Try saving your level again using only" +
+                    " letters and numbers and standard punctuation."
+                );
+                return
+            }
+        }
+
+        if (hintValue.length > 0) {
+            if (regex.exec(hintValue)) {
+                state.hint = hintValue;
+            }
+            else {
+                ocargo.Drawing.startPopup(
+                    "Oh no!",
+                    "You used some invalid characters for your level hint.",
+                    "Try saving your level again using only" +
+                    " letters and numbers and standard punctuation."
+                );
+                return
+            }
+        }
 
         // Other data
         state.theme = currentTheme.id;
         state.character = $('#character_select').val();
+        state.disable_algorithm_score = true;
 
         return state;
     }
@@ -2291,6 +2608,17 @@ ocargo.LevelEditor = function(levelId) {
     function restoreState(state) {
         console.log("restoring state");
 
+        // Get character id from saved character name
+        var characterName = state.character_name;
+        if (characterName) {
+            var characterId = null;
+            for (var id in CHARACTERS) {
+                if (characterName == CHARACTERS[id].name) {
+                    characterId = id;
+                    break;
+                }
+            }
+        }
         clear();
 
         // Load node data
@@ -2302,35 +2630,6 @@ ocargo.LevelEditor = function(levelId) {
             new InternalTrafficLight(trafficLightData[i]);
         }
 
-        if(COW_LEVELS_ENABLED) {
-            var cowGroupData = JSON.parse(state.cows);
-            for (var i = 0; i < cowGroupData.length; i++) {
-                // Add new group to group select element
-                if (i >= Object.keys(cowGroups).length) {
-                    addCowGroup();
-                }
-                var cowGroupId = Object.keys(cowGroups)[i];
-                cowGroups[cowGroupId].minCows = cowGroupData[i].minCows;
-                cowGroups[cowGroupId].maxCows = cowGroupData[i].maxCows;
-                cowGroups[cowGroupId].type = cowGroupData[i].type;
-
-                if (cowGroupData[i].potentialCoordinates != null) {
-                    for (var j = 0; j < cowGroupData[i].potentialCoordinates.length; j++) {
-                        var cowData = {
-                            coordinates: [cowGroupData[i].potentialCoordinates[j]],
-                            group: cowGroups[cowGroupId]
-                        };
-                        new InternalCow(cowData);
-                    }
-                }
-            }
-
-            // Trigger change listener on cow group select box to set initial min/max values
-            $('#cow_group_select').change();
-
-            markCowNodes();
-        }
-
         // Load in destination and origin nodes
         if (state.destinations) {
             var houses = JSON.parse(state.destinations);
@@ -2349,7 +2648,7 @@ ocargo.LevelEditor = function(levelId) {
         }
 
         // Load in character
-        $('#character_select').val(state.character);
+        $('#character_select').val(characterId);
         $('#character_select').change();
 
         drawAll();
@@ -2378,6 +2677,36 @@ ocargo.LevelEditor = function(levelId) {
                                     PAPER_HEIGHT - currentTheme.decor[decor[i].decorName].height - decor[i].y + PAPER_PADDING);
         }
 
+        //Load in cow data
+        if(COW_LEVELS_ENABLED) {
+            var cowGroupData = JSON.parse(state.cows);
+            for (var i = 0; i < cowGroupData.length; i++) {
+                // Add new group to group select element
+                if (i >= Object.keys(cowGroups).length) {
+                    addCowGroup();
+                }
+                var cowGroupId = Object.keys(cowGroups)[i];
+                cowGroups[cowGroupId].minCows = cowGroupData[i].minCows;
+                cowGroups[cowGroupId].maxCows = cowGroupData[i].maxCows;
+                cowGroups[cowGroupId].type = cowGroupData[i].type;
+
+                if (cowGroupData[i].potentialCoordinates != null) {
+                    for (var j = 0; j < cowGroupData[i].potentialCoordinates.length; j++) {
+                        var cowData = {
+                            coordinates: [cowGroupData[i].potentialCoordinates[j]],
+                            group: cowGroups[cowGroupId]
+                        };
+                        new InternalCow(cowData);
+                    }
+                }
+            }
+
+            // Trigger change listener on cow group select box to set initial min/max values
+            $('#cow_group_select').change();
+
+            markCowNodes();
+        }
+
         // Load in block data
         if(state.blocks) {
             for(var i = 0; i < BLOCKS.length; i++) {
@@ -2397,21 +2726,28 @@ ocargo.LevelEditor = function(levelId) {
 
         // Load in language data
         var languageSelect = $('#language_select');
-        if (state.blocklyEnabled && state.pythonViewEnabled){
+        if (state.blockly_enabled && state.python_view_enabled){
             languageSelect.val('blocklyWithPythonView');
-        } else if(state.blocklyEnabled && state.pythonEnabled) {
+        } else if(state.blockly_enabled && state.python_enabled) {
             languageSelect.val('both');
-        } else if(state.pythonEnabled) {
+        } else if(state.python_enabled) {
             languageSelect.val('python');
         } else {
             languageSelect.val('blockly');
         }
         languageSelect.change();
 
+        // Load in description and hint data
+        $('#subtitle').val(state.subtitle);
+        $('#description').val(state.lesson);
+        $('#hint').val(state.hint);
+
         // Other data
         if(state.max_fuel) {
             $('#max_fuel').val(state.max_fuel);
         }
+
+        needsApproval = state.needs_approval;
     }
 
     function loadLevel(levelID) {
@@ -2520,10 +2856,13 @@ ocargo.LevelEditor = function(levelId) {
 
     function canShare() {
         if (!saveState.isSaved()) {
-            ocargo.Drawing.startPopup(gettext('Sharing'), '', gettext('Please save your level before continuing!'));
+            ocargo.Drawing.startPopup("Sharing", "", "Please save your level before continuing!");
             return false;
         } else if (hasLevelChangedSinceSave()) {
-            ocargo.Drawing.startPopup(gettext('Sharing'), '', gettext('Please save your latest changes!'));
+            ocargo.Drawing.startPopup("Sharing", "", "Please save your latest changes!");
+            return false;
+        } else if (needsApproval) {
+            ocargo.Drawing.startPopup("Sharing", "", "Your teacher hasn't approved your level so you can't share it yet. Please let your teacher know they need to approve it first.")
             return false;
         }
         return true;
@@ -2586,7 +2925,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 = ["python_enabled", "blockly_enabled", 'fuel_gauge'];
         var stringFields =  ['path', 'traffic_lights', 'cows', 'origin', 'destinations'];
         var otherFields = ['max_fuel'];
 
@@ -2637,9 +2976,8 @@ ocargo.LevelEditor = function(levelId) {
             if (!this.valid) {
                 throw "Error: cannot create actual cow from invalid internal cow!";
             }
-
             // Where the cow is placed.
-            var coordinates = this.controlledNode.coordinate;
+            var coordinates = this.coordinate;
             var strCoordinates= {'x':coordinates.x, 'y':coordinates.y};
 
             return { "coordinates": [strCoordinates],
@@ -2661,17 +2999,50 @@ ocargo.LevelEditor = function(levelId) {
 
         };
 
+        this.isOnRoad = function() {
+            return this.coordinate && ocargo.Node.findNodeByCoordinate(this.coordinate, nodes);
+        }
+
+        this.updateTheme = function() {
+            let newType = currentTheme == THEMES.city ? ocargo.Cow.PIGEON : ocargo.Cow.WHITE;
+            let transformDimensions = this["image"]["_"]["transform"][0]
+            let rotateDimensions = this["image"]["_"]["transform"][1]
+            let x = transformDimensions[1]
+            let y = transformDimensions[2]
+            let r = 0;
+            if (rotateDimensions) {
+                r = rotateDimensions[1];
+            }
+
+            this.image.remove();
+
+            this.image = drawing.createCowImage(newType);
+            if (this.isOnRoad()) {
+                let controlledNode = ocargo.Node.findNodeByCoordinate(coordinates, nodes);
+                drawing.setCowImagePosition(this.coordinate, this.image, controlledNode);
+            } else {
+                this.image.transform("t" + x + "," + y + " r" + r);
+            }
+
+            setupCowListeners(this);
+        }
+
         this.image = drawing.createCowImage(data.group.type);
         this.valid = false;
 
-
         if ( data.coordinates && data.coordinates.length > 0 ) {
-            var coordinates = new ocargo.Coordinate(data.coordinates[0].x, data.coordinates[0].y);
-            this.controlledNode = ocargo.Node.findNodeByCoordinate(coordinates, nodes);
+            this.coordinate = new ocargo.Coordinate(data.coordinates[0].x, data.coordinates[0].y);
+            this.valid = isValidDraggedCowPlacement(this.coordinate, this);
 
-            if (this.controlledNode) {
-                this.valid = true;
-                drawing.setCowImagePosition(coordinates, this.image, this.controlledNode);
+            if (this.isOnRoad()) {
+                const controlledNode = ocargo.Node.findNodeByCoordinate(this.coordinate, nodes);
+                drawing.setCowImagePosition(this.coordinate, this.image, controlledNode);
+            } else {
+                const box = this.image.getBBox();
+                // calculate position of the image
+                const paperX = (this.coordinate.x + 1) * GRID_SPACE_SIZE - box.width/2;
+                const paperY = (GRID_HEIGHT - this.coordinate.y) * GRID_SPACE_SIZE - box.height/2;
+                this.image.transform('t' + paperX + ',' + paperY );
             }
         } else {
             this.image.transform('...t' + (-paper.scrollLeft())  +  ',' +  paper.scrollTop());
@@ -2679,6 +3050,7 @@ ocargo.LevelEditor = function(levelId) {
 
         setupCowListeners(this);
         this.image.attr({'cursor':'pointer'});
+        this.image.attr({'position': 'absolute'});
         cows.push(this);
 
     }
@@ -2808,7 +3180,7 @@ ocargo.LevelEditor = function(levelId) {
 /******************/
 
 $(function() {
-    var editor = new ocargo.LevelEditor(LEVEL); // This seems unused but removing it breaks the editor page.
+    new ocargo.LevelEditor(LEVEL);
     var subtitle = interpolate(
         gettext('Click %(help_icon)s%(help_label)s for clues on getting started.'), {
             help_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/help.svg', 'popupHelp'),
@@ -2821,7 +3193,7 @@ $(function() {
     } else {
         let buttons = '';
         buttons += ocargo.button.dismissButtonHtml("edit_button", "Edit");
-        buttons += ocargo.button.redirectButtonHtml("play_button", Urls.levels() + "custom/" + LEVEL,"Play");
+        buttons += ocargo.button.redirectButtonHtml("play_button", Urls.levels() + "custom/" + LEVEL, "Play");
 
         ocargo.Drawing.startPopup(
             gettext('Welcome back!'),