feat: make scenery draggable lights and cows (#1642)

* make scenery decor draggable * test functionality, remove redundant code * debug test * debug test, fix some terminology * undo unnecessary changes * fix typo * adjust for size of canvas * address PR comments * make progress on draggable cows * add cow dragging * begin implementation for traffic light dragging * continue work * finish implementation for traffic lights * update unmarking function * write test, correct error * Merge branch 'master' into make-scenery-draggable-lights-and-cows * tidy code * tidy code * update tests * debug test * debug test * address PR comments
ocadotechnology · Jun 10, 2024 · 49c7a1f · 49c7a1f
1 parent cc9cf53
commit 49c7a1f
Show file tree

Hide file tree

Showing 4 changed files with 382 additions and 196 deletions.
diff --git a/game/end_to_end_tests/test_level_editor.py b/game/end_to_end_tests/test_level_editor.py
@@ -26,17 +26,6 @@ def set_up_basic_map(self):
 
         return [road_start, road_end]
 
-    def set_up_draggable_cow(self):
-        scenery_tab = self.selenium.find_element(By.ID, "scenery_tab")
-        scenery_tab.click()
-
-        cow = self.selenium.find_element(By.CSS_SELECTOR, "img[id='cow']")
-        cow.click()
-
-        draggable_cow = self.selenium.find_element(By.CSS_SELECTOR, "image[x='0'][y='0']")
-
-        return draggable_cow
-
     def test_level_editor_displays(self):
         page = self.go_to_level_editor()
 
@@ -73,25 +62,32 @@ def test_multiple_houses(self):
         assert len(houses_after_delete) == 1
 
     def test_cow_on_origin(self):
+        page = self.go_to_level_editor()
         [road_start, road_end] = self.set_up_basic_map()
 
         origin_space = self.selenium.find_elements(By.CSS_SELECTOR, "rect[fill='#ff0000']")
         assert len(origin_space) == 1
 
-        draggable_cow = self.set_up_draggable_cow()
+        page.go_to_scenery_tab()
+
+        draggable_cow = self.selenium.find_element(By.ID, "cow")
         ActionChains(self.selenium).click_and_hold(draggable_cow).move_to_element(road_start).perform()
         start_space_warning = self.selenium.find_elements(By.CSS_SELECTOR, "rect[fill='#e35f4d'][fill-opacity='0.7'][x='130'][y='530']")
         assert len(start_space_warning) == 1
 
     def test_cow_on_house(self):
+        page = self.go_to_level_editor()
         [road_start, road_end] = self.set_up_basic_map()
 
         house_space = self.selenium.find_elements(By.CSS_SELECTOR, "rect[fill='#0000ff']")
         assert len(house_space) == 1
         assert road_end == house_space[0]
 
-        draggable_cow = self.set_up_draggable_cow()
-        ActionChains(self.selenium).click_and_hold(draggable_cow).move_to_element(road_end).perform()
+        page.go_to_scenery_tab()
+
+        draggable_cow = self.selenium.find_elements(By.ID, "cow")
+        assert len(draggable_cow) == 1
+        ActionChains(self.selenium).click_and_hold(draggable_cow[0]).move_to_element(road_end).perform()
         allowed_space = self.selenium.find_elements(By.CSS_SELECTOR, "rect[fill='#87e34d']")
         assert len(allowed_space) == 0
 
@@ -107,3 +103,29 @@ def test_draggable_decor(self):
         cloned_source_tree = self.selenium.find_elements(By.ID, "tree2")
         assert len(decor_tree) == 1
         assert len(cloned_source_tree) == 1
+
+    def test_draggable_cow(self):
+        page = self.go_to_level_editor()
+        page.go_to_scenery_tab()
+
+        source_cow = self.selenium.find_element(By.ID, "cow")
+        end_space = self.selenium.find_element(By.CSS_SELECTOR, "rect[x='130'][y='530']")
+        ActionChains(self.selenium).drag_and_drop(source_cow, end_space).perform()
+
+        scenery_cow = self.selenium.find_elements(By.CSS_SELECTOR, "image[x='0'][y='0']")
+        cloned_source_cow = self.selenium.find_elements(By.ID, "cow")
+        assert len(scenery_cow) == 1
+        assert len(cloned_source_cow) == 1
+
+    def test_draggable_traffic_light(self):
+        page = self.go_to_level_editor()
+        page.go_to_scenery_tab()
+
+        source_light = self.selenium.find_element(By.ID, "trafficLightRed")
+        end_space = self.selenium.find_element(By.CSS_SELECTOR, "rect[x='130'][y='530']")
+        ActionChains(self.selenium).drag_and_drop(source_light, end_space).perform()
+
+        scenery_light = self.selenium.find_elements(By.CSS_SELECTOR, "image[x='0'][y='0']")
+        cloned_source_light = self.selenium.find_elements(By.ID, "trafficLightRed")
+        assert len(scenery_light) == 1
+        assert len(cloned_source_light) == 1
diff --git a/game/static/game/css/level_editor.css b/game/static/game/css/level_editor.css
@@ -260,6 +260,11 @@ input {
     cursor: pointer;
 }
 
+#trafficLightRed,
+#trafficLightGreen {
+    transform: scale(-1, 1);
+}
+
 #scenery_pane td:first-child {
     text-align: left;
     font-size: 1rem;

diff --git a/game/static/game/js/drawing.js b/game/static/game/js/drawing.js
@@ -10,12 +10,15 @@ let PAPER_HEIGHT = GRID_SPACE_SIZE * GRID_HEIGHT
 let PAPER_PADDING = 30
 let EXTENDED_PAPER_WIDTH = PAPER_WIDTH + 2 * PAPER_PADDING
 let EXTENDED_PAPER_HEIGHT = PAPER_WIDTH + 2 * PAPER_PADDING
+let SEMI_EXTENDED_PAPER_HEIGHT = PAPER_HEIGHT + 2 * PAPER_PADDING
 
 let DEFAULT_CHARACTER_WIDTH = 40
 let DEFAULT_CHARACTER_HEIGHT = 20
 
 let COW_WIDTH = 80
 let COW_HEIGHT = 80
+const TRAFFIC_LIGHT_WIDTH = 30
+const TRAFFIC_LIGHT_HEIGHT = 80
 
 let zoom = 15