Merge pull request #182 from Poeschl/map-editor

Move map editing and map list to separate pages

Author: Poeschl

backend/src/main/kotlin/xyz/poeschl/roborush/controller/ConfigRestController.kt

@@ -7,18 +7,14 @@ import org.springframework.http.MediaType
 import org.springframework.security.access.prepost.PreAuthorize
 import org.springframework.web.bind.annotation.*
 import org.springframework.web.multipart.MultipartFile
-import xyz.poeschl.roborush.controller.restmodels.MapActiveDto
-import xyz.poeschl.roborush.controller.restmodels.MapAttributeSaveDto
-import xyz.poeschl.roborush.controller.restmodels.MapGenerationResult
-import xyz.poeschl.roborush.controller.restmodels.TextConfigDto
+import xyz.poeschl.roborush.controller.restmodels.*
 import xyz.poeschl.roborush.exceptions.InvalidConfigKeyException
 import xyz.poeschl.roborush.exceptions.InvalidHeightMapException
 import xyz.poeschl.roborush.exceptions.MapNotFound
 import xyz.poeschl.roborush.models.settings.ClientSettings
 import xyz.poeschl.roborush.models.settings.SaveSettingDto
 import xyz.poeschl.roborush.models.settings.Setting
 import xyz.poeschl.roborush.models.settings.SettingKey
-import xyz.poeschl.roborush.repositories.Map
 import xyz.poeschl.roborush.security.repository.User
 import xyz.poeschl.roborush.service.ConfigService
 import xyz.poeschl.roborush.service.MapService
@@ -71,18 +67,18 @@ class ConfigRestController(private val configService: ConfigService, private val
   @SecurityRequirement(name = "Bearer Authentication")
   @PreAuthorize("hasRole('${User.ROLE_ADMIN}')")
   @GetMapping("/map", produces = [MediaType.APPLICATION_JSON_VALUE])
-  fun getMaps(): List<Map> {
-    return mapService.getAllMaps()
+  fun getMaps(): List<PlaygroundMap> {
+    return mapService.getAllMaps().map { PlaygroundMap(it) }
   }
 
   @SecurityRequirement(name = "Bearer Authentication")
   @PreAuthorize("hasRole('${User.ROLE_ADMIN}')")
   @PostMapping("/map/{id}/active", consumes = [MediaType.APPLICATION_JSON_VALUE], produces = [MediaType.APPLICATION_JSON_VALUE])
-  fun setMapActive(@PathVariable id: Long, @RequestBody activeDto: MapActiveDto): Map {
+  fun setMapActive(@PathVariable id: Long, @RequestBody activeDto: MapActiveDto): PlaygroundMap {
     val map = mapService.getMap(id)
 
     if (map != null) {
-      return mapService.setMapActive(map, activeDto.active)
+      return PlaygroundMap(mapService.setMapActive(map, activeDto.active))
     } else {
       throw MapNotFound("No matching map found for setting active")
     }
@@ -91,11 +87,11 @@ class ConfigRestController(private val configService: ConfigService, private val
   @SecurityRequirement(name = "Bearer Authentication")
   @PreAuthorize("hasRole('${User.ROLE_ADMIN}')")
   @PostMapping("/map/{id}", consumes = [MediaType.APPLICATION_JSON_VALUE], produces = [MediaType.APPLICATION_JSON_VALUE])
-  fun setMapAttributes(@PathVariable id: Long, @RequestBody attributes: MapAttributeSaveDto): Map {
+  fun setMapAttributes(@PathVariable id: Long, @RequestBody attributes: MapAttributeSaveDto): PlaygroundMap {
     val map = mapService.getMap(id)
 
     if (map != null) {
-      return mapService.setMapAttributes(map, attributes)
+      return PlaygroundMap(mapService.setMapAttributes(map, attributes))
     } else {
       throw MapNotFound("No matching map found for given id.")
     }

backend/src/main/kotlin/xyz/poeschl/roborush/controller/GameRestController.kt

@@ -18,7 +18,7 @@ class GameRestController(private val gameHandler: GameHandler) {
 
   @GetMapping("/map", produces = [MediaType.APPLICATION_JSON_VALUE])
   fun getMap(): PlaygroundMap {
-    return gameHandler.getCurrentPlaygroundMap()
+    return PlaygroundMap(gameHandler.getCurrentMap())
   }
 
   @Operation(

backend/src/main/kotlin/xyz/poeschl/roborush/controller/restmodels/MapDtos.kt

@@ -25,7 +25,7 @@ data class PlaygroundMap(
   val maxHeight: Int
 ) {
 
-  constructor(map: Map, minHeight: Int, maxHeight: Int) : this(
+  constructor(map: Map) : this(
     map.id!!,
     map.mapName,
     map.size,
@@ -35,7 +35,7 @@ data class PlaygroundMap(
     map.solarChargeRate,
     map.active,
     map.mapData,
-    minHeight,
-    maxHeight
+    minHeight = map.mapData.minOf { it.height },
+    maxHeight = map.mapData.maxOf { it.height }
   )
 }

backend/src/main/kotlin/xyz/poeschl/roborush/gamelogic/GameHandler.kt

@@ -5,7 +5,6 @@ import org.springframework.cache.annotation.CacheEvict
 import org.springframework.cache.annotation.Cacheable
 import xyz.poeschl.roborush.configuration.GameLogic
 import xyz.poeschl.roborush.controller.WebsocketController
-import xyz.poeschl.roborush.controller.restmodels.PlaygroundMap
 import xyz.poeschl.roborush.exceptions.PositionNotAllowedException
 import xyz.poeschl.roborush.exceptions.PositionOutOfMapException
 import xyz.poeschl.roborush.gamelogic.actions.RobotAction
@@ -46,16 +45,6 @@ class GameHandler(
     return mapHandler.getMapWithPositions(getGlobalKnownPositions())
   }
 
-  @Cacheable("playgroundMap")
-  fun getCurrentPlaygroundMap(): PlaygroundMap {
-    val fullMap = mapHandler.getCurrentFullMap()
-
-    val minHeight = fullMap.mapData.minOf { it.height }
-    val maxHeight = fullMap.mapData.maxOf { it.height }
-
-    return PlaygroundMap(getCurrentMap(), minHeight, maxHeight)
-  }
-
   fun getTileAtPosition(position: Position): Tile {
     return mapHandler.getTileAtPosition(position)
   }
@@ -129,7 +118,7 @@ class GameHandler(
     }
   }
 
-  @CacheEvict(cacheNames = ["knownMap", "playgroundMap"], allEntries = true)
+  @CacheEvict(cacheNames = ["knownMap"], allEntries = true)
   fun executeAllRobotActions() {
     robotHandler.executeRobotActions(this)
     setGameTurn(currentTurn + 1)

backend/src/test/kotlin/xyz/poeschl/roborush/gamelogic/GameHandlerTest.kt

@@ -68,37 +68,6 @@ class GameHandlerTest {
     assertThat(result.mapData).containsAll(tiles)
   }
 
-  @Test
-  fun getCurrentPlaygroundMap() {
-    // WHEN
-    val tiles = listOf(a(`$Tile`().withHeight(10)), a(`$Tile`().withHeight(50)), a(`$Tile`().withHeight(20)))
-    val positions = tiles.map { it.position }.toSet()
-    val map = a(`$Map`().withId(2))
-    tiles.forEach { map.addTile(it) }
-    val activeRobot1 = a(`$ActiveRobot`().withKnownPositions(positions))
-    val activeRobot2 = a(`$ActiveRobot`().withKnownPositions(positions))
-
-    every { robotHandler.getAllActiveRobots() } returns setOf(activeRobot1, activeRobot2)
-    every { mapHandler.getCurrentFullMap() } returns map
-    every { mapHandler.getMapWithPositions(positions) } returns map
-    every { configService.getBooleanSetting(SettingKey.TARGET_POSITION_IN_GAMEINFO) } returns a(`$BooleanSetting`().withValue(false))
-
-    // THEN
-    val result = gameHandler.getCurrentPlaygroundMap()
-
-    // VERIFY
-    assertThat(result.id).isEqualTo(map.id)
-    assertThat(result.mapName).isEqualTo(map.mapName)
-    assertThat(result.possibleStartPositions).isEqualTo(map.possibleStartPositions)
-    assertThat(result.targetPosition).isEqualTo(map.targetPosition)
-    assertThat(result.active).isEqualTo(map.active)
-    assertThat(result.maxRobotFuel).isEqualTo(map.maxRobotFuel)
-    assertThat(result.solarChargeRate).isEqualTo(map.solarChargeRate)
-    assertThat(result.mapData).containsAll(tiles)
-    assertThat(result.minHeight).isEqualTo(10)
-    assertThat(result.maxHeight).isEqualTo(50)
-  }
-
   @Test
   fun isPositionValidForMove() {
     // WHEN

frontend/src/assets/main.scss

@@ -41,6 +41,7 @@
 @forward "bulma/sass/components/card";
 @forward "bulma/sass/components/modal";
 @forward "bulma/sass/components/navbar";
+@forward "bulma/sass/components/tabs";
 @forward "bulma/sass/elements/button";
 @forward "bulma/sass/elements/content";
 @forward "bulma/sass/elements/delete";

frontend/src/components/MapCanvasComponent.vue

@@ -24,6 +24,7 @@ const cellSize = 16;
 const cellBorder = 1;
 const specialTileBorderWidth = 4;
 const fullTileSize = cellSize + 2 * cellBorder;
+const smallCanvasThresholdInPixel = 160;
 
 const mapBorderColor = new Color(0, 0, 0);
 const mapColor = new Color(10, 60, 1);
@@ -74,6 +75,7 @@ const heightMap = computed<Tile[]>(() => {
 const currentPath = ref<Path>({ points: [] });
 const mapTileMinHeight = ref<number>(0);
 const mapTileMaxHeight = ref<number>(255);
+const smallCanvas = ref<boolean>(false);
 
 const emits = defineEmits<{
   (e: "pathUpdate", path: Path): void;
@@ -90,11 +92,9 @@ onMounted(() => {
   watch(
     () => props.drawablePath,
     (newValue) => {
-      if (newValue) {
-        currentPath.value.points = [];
-        emits("pathUpdate", currentPath.value);
-        redraw();
-      }
+      currentPath.value.points = [];
+      emits("pathUpdate", currentPath.value);
+      redraw();
     },
   );
   watch(() => props.map, redraw);
@@ -176,6 +176,10 @@ const updateCanvasData = () => {
 
     mapTileMinHeight.value = props.map.minHeight;
     mapTileMaxHeight.value = props.map.maxHeight;
+
+    if (container.value && container.value.offsetWidth < smallCanvasThresholdInPixel) {
+      smallCanvas.value = true;
+    }
   }
 };
 
@@ -235,21 +239,31 @@ const drawRobots = () => {
 };
 
 const drawTile = (drawContext: CanvasRenderingContext2D, color: Color) => {
-  drawContext.fillStyle = mapBorderColor.toHex();
-  drawContext.fillRect(0, 0, fullTileSize, fullTileSize);
-  drawContext.fillStyle = color.toHex();
-  drawContext.fillRect(cellBorder, cellBorder, cellSize, cellSize);
+  if (smallCanvas.value) {
+    drawContext.fillStyle = color.toHex();
+    drawContext.fillRect(0, 0, fullTileSize, fullTileSize);
+  } else {
+    drawContext.fillStyle = mapBorderColor.toHex();
+    drawContext.fillRect(0, 0, fullTileSize, fullTileSize);
+    drawContext.fillStyle = color.toHex();
+    drawContext.fillRect(cellBorder, cellBorder, cellSize, cellSize);
+  }
 };
 
 const drawTileBorder = (drawContext: CanvasRenderingContext2D, color: Color) => {
-  drawContext.lineWidth = specialTileBorderWidth;
-  drawContext.strokeStyle = color.toHex();
-  drawContext.strokeRect(
-    cellBorder + specialTileBorderWidth / 2,
-    cellBorder + specialTileBorderWidth / 2,
-    cellSize - specialTileBorderWidth,
-    cellSize - specialTileBorderWidth,
-  );
+  if (smallCanvas.value) {
+    drawContext.fillStyle = color.toHex();
+    drawContext.fillRect(0, 0, fullTileSize, fullTileSize);
+  } else {
+    drawContext.lineWidth = specialTileBorderWidth;
+    drawContext.strokeStyle = color.toHex();
+    drawContext.strokeRect(
+      cellBorder + specialTileBorderWidth / 2,
+      cellBorder + specialTileBorderWidth / 2,
+      cellSize - specialTileBorderWidth,
+      cellSize - specialTileBorderWidth,
+    );
+  }
 };
 
 const drawRobot = (drawContext: CanvasRenderingContext2D, color: Color) => {
@@ -366,7 +380,6 @@ const pixelOriginOfPosition = (position: Position): PixelPosition => {
 
 .map-container {
   position: relative;
-  min-width: 200px;
   width: auto;
   height: auto;