summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/map/MapConstants.js10
-rw-r--r--src/components/map/elements/WallSegment.js39
-rw-r--r--src/components/map/groups/RoomGroup.js5
-rw-r--r--src/shapes/index.js7
-rw-r--r--src/util/tile-calculations.js116
5 files changed, 172 insertions, 5 deletions
diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
index 3c613da3..7e26ad81 100644
--- a/src/components/map/MapConstants.js
+++ b/src/components/map/MapConstants.js
@@ -1,10 +1,10 @@
export const MAP_SIZE = 50;
-export const TILE_SIZE_IN_PIXELS = 50;
+export const TILE_SIZE_IN_PIXELS = 100;
export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS;
-export const OBJECT_MARGIN_IN_PIXELS = 5;
-export const OBJECT_SIZE_IN_PIXELS = 40;
+export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5;
+export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2;
export const GRID_LINE_WIDTH_IN_PIXELS = 2;
-export const ROOM_BORDER_WIDTH_IN_PIXELS = 5;
-export const OBJECT_BORDER_WIDTH_IN_PIXELS = 5;
+export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 7;
+export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10;
diff --git a/src/components/map/elements/WallSegment.js b/src/components/map/elements/WallSegment.js
new file mode 100644
index 00000000..ed3627bb
--- /dev/null
+++ b/src/components/map/elements/WallSegment.js
@@ -0,0 +1,39 @@
+import React from "react";
+import {Line} from "react-konva";
+import {WALL_COLOR} from "../../../colors/index";
+import Shapes from "../../../shapes/index";
+import {TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS} from "../MapConstants";
+
+const WallSegment = ({wallSegment}) => {
+ let points;
+ if (wallSegment.isHorizontal) {
+ points = [
+ wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+ wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+ (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+ wallSegment.startPosY * TILE_SIZE_IN_PIXELS
+ ];
+ } else {
+ points = [
+ wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+ wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+ wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+ (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+ ];
+ }
+
+ return (
+ <Line
+ points={points}
+ lineCap="round"
+ stroke={WALL_COLOR}
+ strokeWidth={WALL_WIDTH_IN_PIXELS}
+ />
+ )
+};
+
+WallSegment.propTypes = {
+ wallSegment: Shapes.WallSegment,
+};
+
+export default WallSegment;
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index 28240d77..5f349e3c 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -1,6 +1,8 @@
import React from "react";
import {Group} from "react-konva";
import Shapes from "../../../shapes/index";
+import {deriveWallLocations} from "../../../util/tile-calculations";
+import WallSegment from "../elements/WallSegment";
import TileGroup from "./TileGroup";
const RoomGroup = ({room}) => (
@@ -8,6 +10,9 @@ const RoomGroup = ({room}) => (
{room.tiles.map(tile => (
<TileGroup key={tile.id} tile={tile}/>
))}
+ {deriveWallLocations(room).map((wallSegment, index) => (
+ <WallSegment key={index} wallSegment={wallSegment}/>
+ ))}
</Group>
);
diff --git a/src/shapes/index.js b/src/shapes/index.js
index bea0f1aa..7f65982b 100644
--- a/src/shapes/index.js
+++ b/src/shapes/index.js
@@ -136,4 +136,11 @@ Shapes.Path = PropTypes.shape({
sections: PropTypes.arrayOf(Shapes.Section),
});
+Shapes.WallSegment = PropTypes.shape({
+ startPosX: PropTypes.number.isRequired,
+ startPosY: PropTypes.number.isRequired,
+ isHorizontal: PropTypes.bool.isRequired,
+ length: PropTypes.number.isRequired,
+});
+
export default Shapes;
diff --git a/src/util/tile-calculations.js b/src/util/tile-calculations.js
new file mode 100644
index 00000000..f358442f
--- /dev/null
+++ b/src/util/tile-calculations.js
@@ -0,0 +1,116 @@
+export function deriveWallLocations(room) {
+ const verticalWalls = {};
+ const horizontalWalls = {};
+
+ room.tiles.forEach(tile => {
+ const x = tile.positionX, y = tile.positionY;
+ for (let dX = -1; dX <= 1; dX++) {
+ for (let dY = -1; dY <= 1; dY++) {
+ if (Math.abs(dX) === Math.abs(dY)) {
+ continue;
+ }
+
+ let doInsert = true;
+ room.tiles.forEach((otherTile) => {
+ if (otherTile.positionX === x + dX && otherTile.positionY === y + dY) {
+ doInsert = false;
+ }
+ });
+
+ if (doInsert) {
+ if (dX === -1) {
+ if (verticalWalls[x] === undefined) {
+ verticalWalls[x] = [];
+ }
+ if (verticalWalls[x].indexOf(y) === -1) {
+ verticalWalls[x].push(y);
+ }
+ } else if (dX === 1) {
+ if (verticalWalls[x + 1] === undefined) {
+ verticalWalls[x + 1] = [];
+ }
+ if (verticalWalls[x + 1].indexOf(y) === -1) {
+ verticalWalls[x + 1].push(y);
+ }
+ } else if (dY === -1) {
+ if (horizontalWalls[y] === undefined) {
+ horizontalWalls[y] = [];
+ }
+ if (horizontalWalls[y].indexOf(x) === -1) {
+ horizontalWalls[y].push(x);
+ }
+ } else if (dY === 1) {
+ if (horizontalWalls[y + 1] === undefined) {
+ horizontalWalls[y + 1] = [];
+ }
+ if (horizontalWalls[y + 1].indexOf(x) === -1) {
+ horizontalWalls[y + 1].push(x);
+ }
+ }
+ }
+ }
+ }
+ });
+
+ const result = [];
+ const walls = [verticalWalls, horizontalWalls];
+ for (let i = 0; i < 2; i++) {
+ const wallList = walls[i];
+ for (let a in wallList) {
+ a = parseInt(a, 10);
+
+ wallList[a].sort((a, b) => {
+ return a - b;
+ });
+
+ let startPos = wallList[a][0];
+ const isHorizontal = i === 1;
+ const startPosX = isHorizontal ? startPos : a;
+ const startPosY = isHorizontal ? a : startPos;
+
+ if (wallList[a].length === 1) {
+ result.push({
+ startPosX,
+ startPosY,
+ isHorizontal,
+ length: 1
+ });
+ } else {
+ let consecutiveCount = 1;
+ for (let b = 0; b < wallList[a].length - 1; b++) {
+ if (b + 1 === wallList[a].length - 1) {
+ if (wallList[a][b + 1] - wallList[a][b] > 1) {
+ result.push({
+ startPosX,
+ startPosY,
+ isHorizontal,
+ length: consecutiveCount
+ });
+ consecutiveCount = 0;
+ startPos = wallList[a][b + 1];
+ }
+ result.push({
+ startPosX,
+ startPosY,
+ isHorizontal,
+ length: consecutiveCount + 1
+ });
+ break;
+ } else if (wallList[a][b + 1] - wallList[a][b] > 1) {
+ result.push({
+ startPosX,
+ startPosY,
+ isHorizontal,
+ length: consecutiveCount
+ });
+ startPos = wallList[a][b + 1];
+ consecutiveCount = 0;
+ }
+ consecutiveCount++;
+ }
+ }
+ }
+ }
+
+ return result;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 14:04:18 +0000