From aa31bb8df8fb574ecc504ac6a3d768baf9ee3dae Mon Sep 17 00:00:00 2001 From: ION606 Date: Sun, 28 Apr 2024 09:40:13 -0700 Subject: [PATCH] please kill me --- index.html | 1 + room.html | 13 +++ scripts/init.js | 16 +++- scripts/player.js | 13 ++- scripts/room.js | 189 ++++++++++++++++++++++++++++++++++++++++ scripts/roominternal.js | 8 ++ styles/room.css | 14 +++ styles/style.css | 14 +++ 8 files changed, 264 insertions(+), 4 deletions(-) create mode 100644 room.html create mode 100644 scripts/room.js create mode 100644 scripts/roominternal.js create mode 100644 styles/room.css 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