diff --git a/index.html b/index.html
index 81db774..037ee79 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
+
diff --git a/room.html b/room.html
new file mode 100644
index 0000000..4b6ff49
--- /dev/null
+++ b/room.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ ProcGen Mark I
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts/init.js b/scripts/init.js
index 78b8e95..f97f5ae 100644
--- a/scripts/init.js
+++ b/scripts/init.js
@@ -15,11 +15,21 @@ window.addEventListener("DOMContentLoaded", () => {
}
MACROS.seed = Number(localStorage.getItem('seed'));
MACROS.numTiles = [Math.floor(window.innerWidth / MACROS.TILE_SIZE), Math.floor(window.innerHeight / MACROS.TILE_SIZE)];
+ const main = document.querySelector('main.dispGrid');
const r = loadMap();
- if (r) return;
+ if (r) {
+ const edges = Array.from(document.querySelectorAll('.edgePath'));
+ const edge = edges[getRandInRange(edges.length - 1, 0, false)];
+
+ const y = Array.prototype.indexOf.call(main.children, edge.parentNode),
+ x = Array.prototype.indexOf.call(main.children[y].children, edge); //this does not work, why?
+
+ const player = new Player(x, y);
+ player.save();
+ return;
+ }
- const main = document.querySelector('main.dispGrid');
// create the grid
for (let i = 0; i < MACROS.numTiles[1]; i++) {
@@ -213,7 +223,7 @@ function generateMap() {
}
const edge = edges[getRandInRange(edges.length - 1, 0, false)];
- const player = new Player(edge.x, edge.y);
+ const player = new Player(edge.x, edge.y, rooms);
player.save();
saveMap();
diff --git a/scripts/player.js b/scripts/player.js
index 474a6e2..3e2aaf8 100644
--- a/scripts/player.js
+++ b/scripts/player.js
@@ -3,6 +3,7 @@ class Player {
this.mainEl = document.querySelector('main.dispGrid');
this.x = startx;
this.y = starty;
+
this.mainEl.children[this.y].children[this.x].classList.add("player");
this.setupEventListeners();
}
@@ -16,7 +17,17 @@ class Player {
moveTo(newX, newY) {
const square = this.mainEl.children[newY]?.children[newX];
- if (square?.classList?.contains('room')) {
+ if (square?.classList?.contains('room') && !square?.classList?.contains('visited')) {
+ const roomTiles = findConnectedRooms(square);
+ roomTiles.map(r => r.classList.add('visited'));
+
+ const edgeTiles = findEdgeRooms(roomTiles);
+
+ // recreate outer box
+ const boundingRect = calculateBoundingRectangle(edgeTiles.map(r => r.room));
+ const scale = calculateScalingFactor(boundingRect);
+ scaleToFitScreen(edgeTiles, scale, boundingRect);
+
// for now, just move through it
this.mainEl.children[this.y].children[this.x].classList.remove('player');
square.classList.add('player');
diff --git a/scripts/room.js b/scripts/room.js
new file mode 100644
index 0000000..93f104a
--- /dev/null
+++ b/scripts/room.js
@@ -0,0 +1,189 @@
+function areTouching(el1, el2) {
+ const rect1 = el1.getBoundingClientRect();
+ const rect2 = el2.getBoundingClientRect();
+
+ return !(rect1.right < rect2.left ||
+ rect1.left > rect2.right ||
+ rect1.bottom < rect2.top ||
+ rect1.top > rect2.bottom);
+}
+
+function findTouchingRooms(el) {
+ const rooms = document.querySelectorAll('.room');
+ const touchingRooms = [];
+
+ rooms.forEach(room => {
+ if (el !== room && areTouching(el, room)) {
+ touchingRooms.push(room);
+ }
+ });
+
+ return touchingRooms;
+}
+
+function findConnectedRooms(startElement) {
+ const rooms = document.querySelectorAll('.room');
+ let visited = new Set(); // To keep track of visited rooms
+ let toExplore = [startElement]; // Queue for BFS
+
+ visited.add(startElement);
+
+ while (toExplore.length > 0) {
+ const currentRoom = toExplore.shift();
+
+ rooms.forEach(room => {
+ if (!visited.has(room) && areTouching(currentRoom, room)) {
+ visited.add(room);
+ toExplore.push(room);
+ }
+ });
+ }
+
+ return Array.from(visited);
+}
+
+
+function isEdgeRoom(room, allRooms) {
+ const rect = room.getBoundingClientRect();
+ let hasOpenSide = {
+ top: true,
+ right: true,
+ bottom: true,
+ left: true
+ };
+
+ allRooms.forEach(otherRoom => {
+ if (room === otherRoom) return; // Skip self check
+
+ const otherRect = otherRoom.getBoundingClientRect();
+
+ if (rect.top === otherRect.bottom && rect.left < otherRect.right && rect.right > otherRect.left) {
+ hasOpenSide.top = false; // Other room is directly above
+ }
+ if (rect.bottom === otherRect.top && rect.left < otherRect.right && rect.right > otherRect.left) {
+ hasOpenSide.bottom = false; // Other room is directly below
+ }
+ if (rect.right === otherRect.left && rect.top < otherRect.bottom && rect.bottom > otherRect.top) {
+ hasOpenSide.right = false; // Other room is directly to the right
+ }
+ if (rect.left === otherRect.right && rect.top < otherRect.bottom && rect.bottom > otherRect.top) {
+ hasOpenSide.left = false; // Other room is directly to the left
+ }
+ });
+
+ const isEdge = hasOpenSide.top || hasOpenSide.right || hasOpenSide.bottom || hasOpenSide.left;
+ return {isEdge, isTop: hasOpenSide.top, isRight: hasOpenSide.right, isBottom: hasOpenSide.bottom, isLeft: hasOpenSide.left};
+}
+
+
+function findEdgeRooms(connectedRooms) {
+ const edgeRooms = [];
+ connectedRooms.forEach(room => {
+ const side = isEdgeRoom(room, connectedRooms);
+ if (side.isEdge) {
+ edgeRooms.push({room, side});
+ }
+ });
+ return edgeRooms;
+}
+
+
+function calculateBoundingRectangle(rooms) {
+ let minX = Infinity, maxX = 0, minY = Infinity, maxY = 0;
+
+ rooms.forEach(room => {
+ const rect = room.getBoundingClientRect();
+ if (rect.left < minX) minX = rect.left;
+ if (rect.top < minY) minY = rect.top;
+ if (rect.right > maxX) maxX = rect.right;
+ if (rect.bottom > maxY) maxY = rect.bottom;
+ });
+
+ return {
+ left: minX,
+ top: minY,
+ width: maxX - minX,
+ height: maxY - minY
+ };
+}
+
+
+function calculateScalingFactor(boundingRect) {
+ const screenWidth = window.innerWidth;
+ const screenHeight = window.innerHeight;
+ const scaleWidth = screenWidth / boundingRect.width;
+ const scaleHeight = screenHeight / boundingRect.height;
+
+ // Use the smaller scale factor to ensure the shape fits entirely
+ return Math.min(scaleWidth, scaleHeight);
+}
+
+/**
+ * @param {Array<{room: Element, side: {isEdge: Boolean, isTop: Boolean, isRight: Boolean, isBottom: Boolean, isLeft: Boolean}}} rooms
+ * @returns
+ */
+function scaleToFitScreen(rooms, scale, boundingRect) {
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+ container.className = "scaledup";
+
+ rooms.forEach(roomAll => {
+ const {side, room} = roomAll;
+ const rect = room.getBoundingClientRect();
+ const scaledRoom = document.createElement('div');
+ container.appendChild(scaledRoom);
+
+ scaledRoom.style.position = 'absolute';
+
+ scaledRoom.style.left = `${(rect.left - boundingRect.left) * scale}px`;
+ scaledRoom.style.top = `${(rect.top - boundingRect.top) * scale}px`;
+
+ // scale the element in the respective direction
+ if ((side.isTop) && (side.isRight || side.isLeft)) {
+ const scaledRoomSide = document.createElement('div');
+ container.appendChild(scaledRoomSide);
+
+ scaledRoomSide.style.height = `${rect.height}px`;
+ scaledRoomSide.style.width = `${rect.width * scale}px`;
+ scaledRoomSide.style.left = `${(rect.left - boundingRect.left) * scale}px`;
+ scaledRoomSide.style.top = `${(rect.top - boundingRect.top) * scale}px`;
+ scaledRoomSide.style.position = 'absolute';
+
+ scaledRoom.style.height = `${rect.height * scale}px`;
+ scaledRoom.style.width = `${rect.width}px`;
+ }
+ else if (side.isBottom && (side.isRight || side.isLeft)) {
+ const scaledRoomSide = document.createElement('div');
+ container.appendChild(scaledRoomSide);
+
+ scaledRoomSide.style.height = `${rect.height * scale}px`;
+ scaledRoomSide.style.width = `${rect.width}px`;
+
+ scaledRoomSide.dataset.djdhfgkjd = '1';
+ scaledRoomSide.style.left = `${(rect.left - boundingRect.left - (rect.width * scale)/2) * scale}px`;
+ scaledRoomSide.style.top = `${(rect.top - boundingRect.top) * scale}px`;
+ scaledRoomSide.style.position = 'absolute';
+ scaledRoomSide.style.backgroundColor = 'lightblue';
+
+ if (side.isRight) scaledRoom.style.left = `${scaledRoom.style.left + (scaledRoom.style.width * 2)}px`;
+ if (side.isLeft) scaledRoom.style.left = `${scaledRoom.style.left - (scaledRoom.style.width * 2)}px`;
+ }
+ else if (side.isTop || side.isBottom) {
+ scaledRoom.dataset.isTopOrBottom = '1';
+ scaledRoom.style.width = `${rect.width * scale * 2}px`;
+ scaledRoom.style.height = `${rect.height}px`;
+ scaledRoom.style.left = `${(parseInt(scaledRoom.style.left, 10)) - (parseInt(scaledRoom.style.width, 10)/2)}px`;
+ }
+ else if (side.isLeft || side.isRight) {
+ scaledRoom.style.height = `${rect.height * scale}px`;
+ scaledRoom.style.width = `${rect.width}px`;
+ }
+
+ scaledRoom.style.backgroundColor = 'lightblue'; // For visibility
+ });
+
+ saveMap();
+ const htmlToAdd = container.outerHTML;
+ localStorage.setItem("roomoutline", htmlToAdd);
+ window.location.pathname = '/room.html';
+}
\ No newline at end of file
diff --git a/scripts/roominternal.js b/scripts/roominternal.js
new file mode 100644
index 0000000..185488c
--- /dev/null
+++ b/scripts/roominternal.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', (e) => {
+ const htmlToAdd = localStorage.getItem('roomoutline');
+ document.body.innerHTML = htmlToAdd;
+
+ const bc = document.querySelector('.scaledup');
+ const dif = window.innerWidth - bc.children[0].getBoundingClientRect().right;
+ bc.style.left = `${dif / 2}px`;
+});
\ No newline at end of file
diff --git a/styles/room.css b/styles/room.css
new file mode 100644
index 0000000..19077eb
--- /dev/null
+++ b/styles/room.css
@@ -0,0 +1,14 @@
+body {
+ background-color: black;
+ margin: 0;
+ display: flex;
+ text-align: center;
+}
+
+.scaledup {
+ position: relative;
+}
+
+.side {
+ position: absolute;
+}
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 0b51668..9ed4ded 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -59,4 +59,18 @@ main {
.hidebtn:hover {
opacity: 1;
+}
+
+
+#expandingBox {
+ transform: translate(-50%, -50%);
+ transition: all 0.5s ease;
+}
+
+.scaledup {
+
+}
+
+.visited {
+ background-color: grey;
}
\ No newline at end of file