rapid-router 5.4.1__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';
 
@@ -36,21 +38,37 @@ ocargo.LevelEditor = function(levelId) {
         '#8F7C00'  // Khaki
     ];
 
-    var ADD_ROAD_IMG_URL = ocargo.Drawing.imageDir + "icons/add_road.svg";
-    var DELETE_ROAD_IMG_URL = ocargo.Drawing.imageDir + "icons/delete_road.svg";
-    var MARK_START_IMG_URL = ocargo.Drawing.imageDir + "icons/origin.svg";
-    var MARK_END_IMG_URL = ocargo.Drawing.imageDir + "icons/destination.svg";
-
     var VALID_LIGHT_COLOUR = '#87E34D';
     var INVALID_LIGHT_COLOUR = '#E35F4D';
 
     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_ORIGIN_MODE: {
+            name: gettext('Mark start'),
+            url: ocargo.Drawing.imageDir + 'icons/origin.svg',
+            id: 'start',
+        },
+        ADD_HOUSE_MODE: {
+            name: gettext('Add house'),
+            url: ocargo.Drawing.imageDir + 'icons/add_house.svg',
+            id: 'add_house',
+        },
+        DELETE_HOUSE_MODE: {
+            name: gettext('Delete house'),
+            url: ocargo.Drawing.imageDir + 'icons/delete_house.svg',
+            id: 'delete_house',
+        }
     };
 
     /*********/
@@ -67,8 +85,9 @@ ocargo.LevelEditor = function(levelId) {
     var trafficLights = [];
     var cows = [];
     var originNode = null;
-    var destinationNode = null;
+    var houseNodes = [];
     var currentTheme = THEMES.grass;
+    var needsApproval = false;
 
     // Reference to the Raphael elements for each square
     var grid;
@@ -173,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'));
@@ -186,6 +207,8 @@ ocargo.LevelEditor = function(levelId) {
         setupCharacterTab();
         setupBlocksTab();
         setupRandomTab();
+        setupDescriptionTab();
+        setupHintTab();
         setupLoadTab();
         setupSaveTab();
         setupShareTab();
@@ -235,6 +258,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() {
@@ -254,11 +281,6 @@ ocargo.LevelEditor = function(levelId) {
                 changeCurrentToolDisplay(modes.MARK_ORIGIN_MODE);
             });
 
-            $('#end').click(function() {
-                mode = modes.MARK_DESTINATION_MODE;
-                changeCurrentToolDisplay(modes.MARK_DESTINATION_MODE);
-            });
-
             $('#add_road').click(function() {
                 mode = modes.ADD_ROAD_MODE;
                 changeCurrentToolDisplay(modes.ADD_ROAD_MODE);
@@ -269,6 +291,16 @@ ocargo.LevelEditor = function(levelId) {
                 changeCurrentToolDisplay(modes.DELETE_ROAD_MODE);
             });
 
+            $('#add_house').click(function() {
+                mode = modes.ADD_HOUSE_MODE;
+                changeCurrentToolDisplay(modes.ADD_HOUSE_MODE);
+            });
+
+            $('#delete_house').click(function() {
+                mode = modes.DELETE_HOUSE_MODE;
+                changeCurrentToolDisplay(modes.DELETE_HOUSE_MODE);
+            });
+
             if(DEVELOPER) {
                 $('#djangoText').click(function() {
                     ocargo.Drawing.startPopup('Django level migration',
@@ -293,122 +325,27 @@ 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) {
-                $('#cow').click(function () {
-                    new InternalCow({group: cowGroups[$('#cow_group_select').val()]});
-                });
-
-                //"Advanced" button
-                $('#advanced_cow_options_button').on('click', function () {
-                    $(this).toggleClass('cow_navigation_button_pressed');
-
-                    var showIconSrc = "/static/game/image/icons/show.svg";
-                    var hideIconSrc = "/static/game/image/icons/hide_button.svg";
-                    var advancedButtonIcon = $('#advanced_cow_options_button_icon');
-                    var iconSrc = (advancedButtonIcon.attr("src") === showIconSrc) ? hideIconSrc : showIconSrc;
-                    advancedButtonIcon.attr("src", iconSrc);
-
-                    var advancedDivHidden = $('#cow_advanced_div').css('display') === 'none';
-
-                    $('#cow_advanced_div').slideToggle(1000);
-
-                    //Only scroll down if advanced options were previously hidden
-                    if (advancedDivHidden) {
-                        $('#tab_panes_wrapper').animate({scrollTop: $('#tab_panes_wrapper')[0].scrollHeight},
-                            1500,
-                            "swing");
-                    }
-                });
-
-                // Set up cow type selector and listener
-                $('#cow_type_select').append($('<option>', {value: ocargo.Cow.WHITE})
-                    .text(gettext('White')));
-                $('#cow_type_select').append($('<option>', {value: ocargo.Cow.BROWN})
-                    .text(gettext('Brown')));
-                $('#cow_type_select').on('change', function () {
-                    var selectedGroupId = $('#cow_group_select').val();
-                    var selectedType = $('#cow_type_select').val();
-                    cowGroups[selectedGroupId].type = selectedType;
-                    var newUrl = ocargo.Drawing.raphaelImageDir + ocargo.Drawing.cowUrl(selectedType);
-                    $('#cow').attr('src', newUrl);
-
-                    for(var i = cows.length - 1; i >= 0; i--) {
-                        if(cows[i].data.group.id === selectedGroupId) {
-                            cows[i].image.attr({src: newUrl})
-                        }
-                    }
-
-                });
-
-                //Min & max spinners
-                var minSpinner = $('#min_cows_spinner').spinner({
-                    min: 1,
-                    max: 1
-                }).val(1);
-                minSpinner.on('spinstop', function () {
-                    $('#max_cows_spinner').spinner('option', 'min', $('#min_cows_spinner').val());
-                    cowGroups[$('#cow_group_select').val()].minCows = $('#min_cows_spinner').val();
-                });
-
-                var maxSpinner = $('#max_cows_spinner').spinner({
-                    min: 1,
-                    max: 1
-                }).val(1);
-                maxSpinner.on('spinstop', function () {
-                    $('#min_cows_spinner').spinner('option', 'max', $('#max_cows_spinner').val());
-                    cowGroups[$('#cow_group_select').val()].maxCows = $('#max_cows_spinner').val();
-                });
-
-                //Group select element (has to be initialised after the min and max spinners are created)
-                $('#cow_group_select').on('change', function () {
-                    $('#cow_group_select').css('background-color', cowGroups[this.value].color);
-                    //Set max values of min & max spinners
-                    var groupId = this.value;
-                    var noOfValidCowsInGroup = 0;
-                    for (var i = 0; i < cows.length; i++) {
-                        if (cows[i].valid && cows[i].data.group.id === groupId) {
-                            noOfValidCowsInGroup++;
-                        }
-                    }
-
-                    // Set cow type
-                    $('#cow_type_select').val(cowGroups[this.value].type).change();
-
-                    var minMaxValue = Math.max(1, cowGroups[this.value].maxCows);
-                    $('#min_cows_spinner').spinner('option', 'max', minMaxValue);
-                    var maxMinValue = Math.max(1, cowGroups[this.value].minCows);
-                    $('#max_cows_spinner').spinner('option', 'min', maxMinValue);
-                    $('#max_cows_spinner').spinner('option', 'max', Math.max(1, noOfValidCowsInGroup));
-
-                    //Set min & max values
-                    $('#min_cows_spinner').val(cowGroups[this.value].minCows);
-                    $('#max_cows_spinner').val(cowGroups[this.value].maxCows);
-                });
-
                 if (Object.keys(cowGroups).length == 0) {
                     addCowGroup();
                 }
-
-                $('#add_cow_group_button').click(addCowGroup);
-                $('#remove_cow_group_button').click(removeCowGroup);
+                $('#cow').mouseover(function(e) {
+                    e.target.style.cursor = "pointer";
+                })
+                $('#cow').mousedown(function(e) {
+                    handleDraggableCowMouseDown(e, "group1")
+                });
             }
-
         }
 
         function setupCharacterTab() {
@@ -479,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();
 
@@ -545,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();
         }
@@ -682,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;
                 }
 
@@ -701,31 +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);
-                            $("#close-modal").click();
+                            $("#myModal").hide()
+                            $("#ocargo-modal").hide()
                         };
-                        var onNo = function(){
-                            $("#close-modal").click();
+                        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);
                     }
@@ -766,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();
@@ -797,25 +763,28 @@ ocargo.LevelEditor = function(levelId) {
                 interpolate(
                     gettext('In %(map_icon)s%(map_label)s menu, click %(mark_start_icon)s%(mark_start_label)s and select a ' +
                         'square for your road to start from. The starting point can only be placed on dead ends. You need a ' +
-                        'road first before adding a starting point. Make sure you use %(mark_end_icon)s%(mark_end_label)s to ' +
-                        'select a final destination. Setting a fuel level means the route will need to be short enough for the ' +
+                        'road first before adding a starting point. Make sure you use %(add_house_icon)s%(add_house_label)s to ' +
+                        'select houses for delivery. Setting a fuel level means the route will need to be short enough for the ' +
                         'fuel not to run out.'
                     ), {
                         map_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/map.svg', 'popupIcon'),
                         map_label: '<b>' + gettext('Map') + '</b>',
                         mark_start_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/origin.svg', 'popupIcon'),
                         mark_start_label: '<b>' + gettext('Mark start') + '</b>',
-                        mark_end_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/destination.svg', 'popupIcon'),
-                        mark_end_label: '<b>' + gettext('Mark end') + '</b>'
+                        add_house_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/add_house.svg', 'popupIcon'),
+                        add_house_label: '<b>' + gettext('Add house') + '</b>'
                     },
                     true
                 ),
                 interpolate(
                     gettext('To remove road, click the %(delete_road_icon)s%(delete_road_label)s button and select a section ' +
-                        'to get rid of.'
+                        'to get rid of. To remove a house for delivery, click the %(delete_house_icon)s%(delete_house_label)s button' +
+                        'and select a house to get rid of.'
                     ), {
                         delete_road_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/delete_road.svg', 'popupIcon'),
-                        delete_road_label: '<b>' + gettext('Delete road') + '</b>'
+                        delete_road_label: '<b>' + gettext('Delete road') + '</b>',
+                        delete_house_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/delete_house.svg', 'popupIcon'),
+                        delete_house_label: '<b>' + gettext('Delete house') + '</b>'
                     },
                     true
                 ),
@@ -942,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,
@@ -1045,8 +1014,8 @@ ocargo.LevelEditor = function(levelId) {
         var windowWidth = $(window).width();
         var windowHeight = $(window).height();
 
-        var paperRightEdge = PAPER_WIDTH + $('#tools').width();
-        var paperBottomEdge = PAPER_HEIGHT;
+        var paperRightEdge = EXTENDED_PAPER_WIDTH + $('#tools').width();
+        var paperBottomEdge = EXTENDED_PAPER_HEIGHT;
 
         var bottom = 50;
         if(windowHeight > paperBottomEdge) {
@@ -1093,7 +1062,7 @@ ocargo.LevelEditor = function(levelId) {
         } else {
             closeTrashcan();
         }
-    }
+}
 
     function openTrashcan() {
         $('#trashcanLidOpen').css('display', 'block');
@@ -1116,8 +1085,8 @@ ocargo.LevelEditor = function(levelId) {
         return originNode && originNode.coordinate.equals(coordinate);
     }
 
-    function isDestinationCoordinate(coordinate) {
-        return destinationNode && destinationNode.coordinate.equals(coordinate);
+    function isHouseCoordinate(coordinate) {
+        return houseNodes.includes(ocargo.Node.findNodeByCoordinate(coordinate, nodes));
     }
 
     function isCoordinateOnGrid(coordinate) {
@@ -1182,7 +1151,7 @@ ocargo.LevelEditor = function(levelId) {
         nodes = [];
         strikeStart = null;
         originNode = null;
-        destinationNode = null;
+        houseNodes = [];
 
         cowGroups = {};
         currentCowGroupId = 1;
@@ -1238,7 +1207,7 @@ ocargo.LevelEditor = function(levelId) {
         mark(coordinate, 'red', 0.7, true);
     }
 
-    function markAsDestination(coordinate) {
+    function markAsHouse(coordinate) {
         mark(coordinate, 'blue', 0.7, true);
     }
 
@@ -1258,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);
                 }
             }
         }
@@ -1278,8 +1247,10 @@ ocargo.LevelEditor = function(levelId) {
         if (originNode) {
             markAsOrigin(originNode.coordinate);
         }
-        if (destinationNode) {
-            markAsDestination(destinationNode.coordinate);
+        if (houseNodes.length > 0) {
+            for (let i = 0; i < houseNodes.length; i++) {
+                markAsHouse(houseNodes[i].coordinate);
+            }
         }
 
         bringTrafficLightsToFront();
@@ -1358,10 +1329,11 @@ ocargo.LevelEditor = function(levelId) {
                     var prevStart = originNode.coordinate;
                     markAsBackground(prevStart);
                 }
-                // Check if same as destination node
-                if (isDestinationCoordinate(coordMap)) {
-                    destinationNode = null;
+                // Check if same as a house node
+                if (isHouseCoordinate(coordMap)) {
+                    houseNodes.splice(houseNodes.indexOf(ocargo.Node.findNodeByCoordinate(coordMap, nodes)), 1)
                 }
+
                 markAsOrigin(coordMap);
                 var newStartIndex = ocargo.Node.findNodeIndexByCoordinate(coordMap, nodes);
 
@@ -1370,20 +1342,22 @@ ocargo.LevelEditor = function(levelId) {
                 nodes[newStartIndex] = nodes[0];
                 nodes[0] = temp;
                 originNode = nodes[0];
-            } else if (mode === modes.MARK_DESTINATION_MODE && existingNode) {
-                if (destinationNode) {
-                    var prevEnd = destinationNode.coordinate;
-                    markAsBackground(prevEnd);
-                }
+            } else if (mode === modes.ADD_HOUSE_MODE && existingNode) {
                 // Check if same as starting node
                 if (isOriginCoordinate(coordMap)) {
                     originNode = null;
                 }
-                markAsDestination(coordMap);
+
+                markAsHouse(coordMap);
                 var newEnd = ocargo.Node.findNodeIndexByCoordinate(coordMap, nodes);
-                destinationNode = nodes[newEnd];
+                houseNodes.push(nodes[newEnd]);
 
-            }  else if (mode === modes.ADD_ROAD_MODE || mode === modes.DELETE_ROAD_MODE) {
+            } else if (mode === modes.DELETE_HOUSE_MODE && existingNode) {
+                if (isHouseCoordinate(coordMap)) {
+                    houseNodes.splice(houseNodes.indexOf(ocargo.Node.findNodeByCoordinate(coordMap, nodes)), 1);
+                    markAsBackground(coordMap);
+                }
+            } else if (mode === modes.ADD_ROAD_MODE || mode === modes.DELETE_ROAD_MODE) {
                 strikeStart = coordMap;
                 markAsSelected(coordMap);
             }
@@ -1405,17 +1379,19 @@ ocargo.LevelEditor = function(levelId) {
             if (mode === modes.ADD_ROAD_MODE || mode === modes.DELETE_ROAD_MODE) {
                 if (strikeStart !== null) {
                     markTentativeRoad(coordMap);
-                } else if (!isOriginCoordinate(coordMap) && !isDestinationCoordinate(coordMap)) {
+                } else if (!isOriginCoordinate(coordMap) && !isHouseCoordinate(coordMap)) {
                     markAsHighlighted(coordMap);
                 }
-            } else if (mode === modes.MARK_ORIGIN_MODE || mode === modes.MARK_DESTINATION_MODE) {
+            } else if (mode === modes.MARK_ORIGIN_MODE || mode === modes.ADD_HOUSE_MODE || mode === modes.DELETE_HOUSE_MODE) {
                 var node = ocargo.Node.findNodeByCoordinate(coordMap, nodes);
-                if (node && destinationNode !== node && originNode !== node) {
-                    if (mode === modes.MARK_DESTINATION_MODE) {
+                if (node && originNode !== node && !houseNodes.includes(node)) {
+                    if (mode === modes.ADD_HOUSE_MODE) {
                         mark(coordMap, 'blue', 0.3, true);
-                    } else if (canPlaceCFC(node)) {
+                    } 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);
                 }
             }
         };
@@ -1429,14 +1405,17 @@ ocargo.LevelEditor = function(levelId) {
             var coordPaper = getCoordinateFromBBox(getBBox);
             var coordMap = ocargo.Drawing.translate(coordPaper);
 
-            if (mode === modes.MARK_ORIGIN_MODE || mode === modes.MARK_DESTINATION_MODE) {
+            if (mode === modes.MARK_ORIGIN_MODE || mode === modes.ADD_HOUSE_MODE || mode === modes.DELETE_HOUSE_MODE) {
                 var node = ocargo.Node.findNodeByCoordinate(coordMap, nodes);
-                if (node && destinationNode !== node && originNode !== node) {
+                if (node && originNode !== node && !houseNodes.includes(node)) {
                     markAsBackground(coordMap);
                     markCowNodes();
+                } else if (node && houseNodes.includes(node)) {
+                    markAsHouse(coordMap);
+                    markCowNodes();
                 }
             } else if (mode === modes.ADD_ROAD_MODE || mode === modes.DELETE_ROAD_MODE) {
-                if (!isOriginCoordinate(coordMap) && !isDestinationCoordinate(coordMap)) {
+                if (!isOriginCoordinate(coordMap) && !isHouseCoordinate(coordMap)) {
                     markAsBackground(coordMap);
                     markCowNodes();
                 }
@@ -1492,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;
 
@@ -1517,14 +1513,14 @@ ocargo.LevelEditor = function(levelId) {
             // Stop it being dragged off the edge of the page
             if (paperX < 0) {
                 paperX = 0;
-            } else if (paperX + imageWidth > paperWidth) {
-                paperX = paperWidth - imageWidth;
+            } else if (paperX + imageWidth > EXTENDED_PAPER_WIDTH) {
+                paperX = EXTENDED_PAPER_WIDTH - imageWidth;
             }
 
             if (paperY < 0) {
                 paperY = 0;
-            } else if (paperY + imageHeight >  paperHeight) {
-                paperY = paperHeight - imageHeight;
+            } else if (paperY + imageHeight >  EXTENDED_PAPER_HEIGHT) {
+                paperY = EXTENDED_PAPER_HEIGHT - imageHeight;
             }
 
             image.transform('t' + paperX + ',' + paperY);
@@ -1547,8 +1543,17 @@ ocargo.LevelEditor = function(levelId) {
             originX = paperX;
             originY = paperY;
 
-            if(trashcanOpen) {
+            if (trashcanOpen) {
                 decor.destroy();
+            } else {
+                if (paperWidth < paperX + imageWidth) {
+                    originX = paperWidth - imageWidth;
+                }
+                if (paperHeight < paperY + imageHeight) {
+                    originY = paperHeight - imageHeight;
+                }
+
+                image.transform('t' + originX + ',' + originY);
             }
 
             closeTrashcan();
@@ -1558,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;
 
@@ -1598,61 +1644,27 @@ ocargo.LevelEditor = function(levelId) {
             // Stop it being dragged off the edge of the page
             if (paperX < 0) {
                 paperX = 0;
-            } else if (paperX + imageWidth > paperWidth) {
-                paperX = paperWidth - imageWidth;
+            } else if (paperX + imageWidth > EXTENDED_PAPER_WIDTH) {
+                paperX = EXTENDED_PAPER_WIDTH - imageWidth;
             }
             if (paperY < 0) {
                 paperY =  0;
-            } else if (paperY + imageHeight >  paperHeight) {
-                paperY = paperHeight - imageHeight;
+            } else if (paperY + imageHeight >  EXTENDED_PAPER_HEIGHT) {
+                paperY = EXTENDED_PAPER_HEIGHT - imageHeight;
             }
 
             // And perform the updatee
             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 (destinationNode) {
-                markAsDestination(destinationNode.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;
@@ -1669,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;
@@ -1684,56 +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 (destinationNode) {
-                markAsDestination(destinationNode.coordinate);
-            }
 
-            if(trashcanOpen) {
+            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;
-            }
-            adjustCowGroupMinMaxFields(cow);
+                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;
 
-            image.attr({'cursor':'pointer'});
-            closeTrashcan();
-        }
+                    if (paperWidth < paperX + imageWidth) {
+                        cowX = paperWidth - imageWidth
+                    }
 
-        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;
+                    if (paperHeight < paperY + imageHeight) {
+                        cowY = paperHeight - imageHeight
+                    }
+
+                    image.transform('t' + cowX + ',' + cowY);
+                }
             }
-            return true;
+
+            adjustCowGroupMinMaxFields(cow);
+            image.attr({'cursor':'pointer'});
         }
 
         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;
 
@@ -1750,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;
@@ -1801,34 +1946,20 @@ ocargo.LevelEditor = function(levelId) {
             // Stop it being dragged off the edge of the page
             if (paperX < 0) {
                 paperX = 0;
-            } else if (paperX + imageWidth > paperWidth) {
-                paperX = paperWidth - imageWidth;
+            } else if (paperX + imageWidth > EXTENDED_PAPER_WIDTH) {
+                paperX = EXTENDED_PAPER_WIDTH - imageWidth;
             }
             if (paperY < 0) {
                 paperY =  0;
-            } else if (paperY + imageHeight >  paperHeight) {
-                paperY = paperHeight - imageHeight;
+            } else if (paperY + imageHeight >  EXTENDED_PAPER_HEIGHT) {
+                paperY = EXTENDED_PAPER_HEIGHT - imageHeight;
             }
 
-            // And perform the updatee
+            // And perform the update
             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 (destinationNode) {
-                markAsDestination(destinationNode.coordinate);
-            }
+            unmarkOldTrafficLightSquare(sourceCoord, controlledCoord);
 
             // Now calculate the source coordinate
             var box = image.getBBox();
@@ -1850,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;
@@ -1931,31 +2021,29 @@ 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 (destinationNode) {
-                markAsDestination(destinationNode.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);
                 trafficLight.valid = true;
 
                 drawing.setTrafficLightImagePosition(sourceCoord, controlledCoord, image);
+            } else {
+                var trafficLightX = paperX;
+                var trafficLightY = paperY;
+
+                if (paperWidth < paperX + imageWidth) {
+                    trafficLightX = paperWidth - imageWidth
+                    image.transform('t' + trafficLightX + ',' + trafficLightY + 'r' + rotation + 's' + scaling);
+                }
+                if (paperHeight < paperY + imageHeight) {
+                    trafficLightY = paperHeight - imageHeight
+                    image.transform('t' + trafficLightX + ',' + trafficLightY + 'r' + rotation + 's' + scaling);
+                }
             }
 
             image.attr({'cursor':'pointer'});
@@ -1986,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);
+
+        // 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;
+        }
 
-            // 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;
+        // 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;
             }
-            return true;
+
+            mark(controlledCoord, colour, 0.7, false);
+            mark(sourceCoord, colour, 0.7, false);
         }
 
-        function occupied(sourceCoord, controlledCoord) {
+        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);
+            }
         }
+
+        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);
     }
 
     /********************************/
@@ -2039,14 +2263,14 @@ ocargo.LevelEditor = function(levelId) {
                 }
                 nodes.splice(nodes.indexOf(node), 1);
 
-                // Check if start or destination node
+                // Check if start or house node
                 if (isOriginCoordinate(coord)) {
                     markAsBackground(originNode.coordinate);
                     originNode = null;
                 }
-                if (isDestinationCoordinate(coord)) {
-                    markAsBackground(destinationNode.coordinate);
-                    destinationNode = null;
+                if (isHouseCoordinate(coord)) {
+                    markAsBackground(houseNodes[houseNodes.indexOf(coord)]);
+                    houseNodes.splice(houseNodes.indexOf(ocargo.Node.findNodeByCoordinate(coordMap, nodes)), 1);
                 }
 
                 //  Check if any traffic lights present
@@ -2153,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++) {
@@ -2169,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) {
@@ -2235,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);
             }
@@ -2270,9 +2525,10 @@ ocargo.LevelEditor = function(levelId) {
         state.decor = ocargo.utils.sortObjects(state.decor, "z");
 
         // Destination and origin data
-        if (destinationNode) {
-            var destinationCoord = destinationNode.coordinate;
-            state.destinations = JSON.stringify([[destinationCoord.x, destinationCoord.y]]);
+        if (houseNodes.length > 0) {
+            state.destinations = JSON.stringify(houseNodes.map(function (houseNode) {
+                return [houseNode.coordinate.x, houseNode.coordinate.y]
+            }));
         }
         if (originNode) {
             var originCoord = originNode.coordinate;
@@ -2286,19 +2542,83 @@ 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;
     }
 
     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
@@ -2310,41 +2630,15 @@ 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
-        // TODO needs to be fixed in the long term with multiple destinations
         if (state.destinations) {
-            var destination = JSON.parse(state.destinations)[0];
-            var destinationCoordinate = new ocargo.Coordinate(destination[0], destination[1]);
-            destinationNode = ocargo.Node.findNodeByCoordinate(destinationCoordinate, nodes);
+            var houses = JSON.parse(state.destinations);
+            var houseCoordinates = houses.map(function (house) {
+                return new ocargo.Coordinate(house[0], house[1]);
+            })
+            houseNodes = houseCoordinates.map(function (houseCoord) {
+                return ocargo.Node.findNodeByCoordinate(houseCoord, nodes);
+            })
         }
 
         if (state.origin) {
@@ -2354,7 +2648,7 @@ ocargo.LevelEditor = function(levelId) {
         }
 
         // Load in character
-        $('#character_select').val(state.character);
+        $('#character_select').val(characterId);
         $('#character_select').change();
 
         drawAll();
@@ -2383,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++) {
@@ -2401,20 +2725,29 @@ ocargo.LevelEditor = function(levelId) {
         }
 
         // Load in language data
-        var languageSelect = $('#languageSelect');
-        if(state.blocklyEnabled && state.pythonEnabled) {
+        var languageSelect = $('#language_select');
+        if (state.blockly_enabled && state.python_view_enabled){
+            languageSelect.val('blocklyWithPythonView');
+        } 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) {
@@ -2455,28 +2788,42 @@ ocargo.LevelEditor = function(levelId) {
              return false;
 	}
 	// Check to see if start and end nodes have been marked
-        if (!originNode || !destinationNode) {
-            var noStartOrEnd = interpolate(
-                gettext('In %(map_icon)s %(map_label)s menu, click on %(mark_start_icon)%(mark_start_label) or ' +
-                    '%(mark_end_icon)s%(mark_end_label)s then select the square where you want the road to start or end.'
+        if (!originNode) {
+            var noStart = interpolate(
+                gettext('In %(map_icon)s%(map_label)s menu, click on %(mark_start_icon)s%(mark_start_label)s ' +
+                    'and then select the square where you want the road to start.'
                 ), {
                     map_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/map.svg', 'popupIcon'),
                     map_label: '<b>' + gettext('Map') + '</b>',
                     mark_start_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/origin.svg', 'popupIcon'),
                     mark_start_label: '<b>' + gettext('Mark start') + '</b>',
-                    mark_end_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/destination.svg', 'popupIcon'),
-                    mark_end_label: '<b>' + gettext('Mark end') + '</b>'
                 },
                 true
             );
-             ocargo.Drawing.startPopup(gettext('Oh no!'), gettext('You forgot to mark the start and end points.'), noStartOrEnd);
+             ocargo.Drawing.startPopup(gettext('Oh no!'), gettext('You forgot to mark the start point.'), noStart);
              return false;
         }
 
-        // Check to see if path exists from start to end
-        if (!areDestinationsReachable(originNode, [destinationNode], nodes)) {
+        if (houseNodes.length === 0) {
+            var noHouses = interpolate(
+                gettext('In %(map_icon)s%(map_label)s menu, click on %(add_house_icon)s%(add_house_label)s ' +
+                    'and then select the square(s) where you want to add houses for delivery.'
+                ), {
+                    map_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/map.svg', 'popupIcon'),
+                    map_label: '<b>' + gettext('Map') + '</b>',
+                    add_house_icon: ocargo.jsElements.image(ocargo.Drawing.imageDir + 'icons/add_house.svg', 'popupIcon'),
+                    add_house_label: '<b>' + gettext('Add house') + '</b>'
+                },
+                true
+            );
+            ocargo.Drawing.startPopup(gettext('Oh no!'), gettext('You forgot to mark the houses.'), noHouses);
+            return false;
+        }
+
+        // Check to see if path exists from start to each house
+        if (!areDestinationsReachable(originNode, houseNodes, nodes)) {
             ocargo.Drawing.startPopup(gettext('Something is wrong...'),
-                                      gettext('There is no way to get from the start to the destination.'),
+                                      gettext('There is no way to get from the start to all of your houses.'),
                                       gettext('Edit your level to allow the driver to get to the end.'));
             return false;
         }
@@ -2509,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;
@@ -2546,7 +2896,7 @@ ocargo.LevelEditor = function(levelId) {
 
                 notLoggedInMessages.push(interpolate(gettext('You can log in as a %(student_login_url)s, '
                     + '%(teacher_login_url)s or %(independent_login_url)s.'), {
-                    student_login_url: '<a href="' + Urls.student_login() + '">' + pgettext('login_url', 'student') + '</a>',
+                    student_login_url: '<a href="' + Urls.student_login_access_code() + '">' + pgettext('login_url', 'student') + '</a>',
                     teacher_login_url: '<a href="' + Urls.teacher_login() + '">' + pgettext('login_url', 'teacher') + '</a>',
                     independent_login_url: '<a href="' + Urls.independent_student_login() + '">'
                         + pgettext('login_url', 'independent student') + '</a>'
@@ -2575,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'];
 
@@ -2626,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],
@@ -2650,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());
@@ -2668,6 +3050,7 @@ ocargo.LevelEditor = function(levelId) {
 
         setupCowListeners(this);
         this.image.attr({'cursor':'pointer'});
+        this.image.attr({'position': 'absolute'});
         cows.push(this);
 
     }
@@ -2797,7 +3180,7 @@ ocargo.LevelEditor = function(levelId) {
 /******************/
 
 $(function() {
-    var editor = new ocargo.LevelEditor(LEVEL);
+    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'),
@@ -2808,24 +3191,16 @@ $(function() {
     if (LEVEL === null){
         ocargo.Drawing.startPopup(gettext('Welcome to the Level editor!'), subtitle, '');
     } else {
-        var optionAFunc = function(){
-            $(".ocargo-modal").hide();
-            $(".modal-overlay").hide();
-        };
-
-        var optionBFunc = function(){
-            window.location.replace("/rapidrouter/custom/"+LEVEL+"/");
-        };
+        let buttons = '';
+        buttons += ocargo.button.dismissButtonHtml("edit_button", "Edit");
+        buttons += ocargo.button.redirectButtonHtml("play_button", Urls.levels() + "custom/" + LEVEL, "Play");
 
-        ocargo.Drawing.startOptionsPopup(
+        ocargo.Drawing.startPopup(
             gettext('Welcome back!'),
             gettext('Would you like to edit or play with your design?'),
             '',
-            optionAFunc,
-            optionBFunc,
-            "Edit",
-            "Play",
-            ''
+            false,
+            buttons,
           );
     }