mirror of
https://github.com/ION606/ProcGen.git
synced 2026-05-14 22:06:56 +00:00
please kill me
This commit is contained in:
@@ -7,6 +7,7 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="/styles/style.css">
|
<link rel="stylesheet" type="text/css" href="/styles/style.css">
|
||||||
<script src="/scripts/init.js"></script>
|
<script src="/scripts/init.js"></script>
|
||||||
<script src="/scripts/player.js"></script>
|
<script src="/scripts/player.js"></script>
|
||||||
|
<script src="/scripts/room.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<button class="hidebtn" onclick="reset()">🗑</button>
|
<button class="hidebtn" onclick="reset()">🗑</button>
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ProcGen Mark I</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/styles/room.css">
|
||||||
|
<script src="/scripts/roominternal.js"></script>
|
||||||
|
</head>
|
||||||
|
<body style="padding: auto">
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+13
-3
@@ -15,11 +15,21 @@ window.addEventListener("DOMContentLoaded", () => {
|
|||||||
}
|
}
|
||||||
MACROS.seed = Number(localStorage.getItem('seed'));
|
MACROS.seed = Number(localStorage.getItem('seed'));
|
||||||
MACROS.numTiles = [Math.floor(window.innerWidth / MACROS.TILE_SIZE), Math.floor(window.innerHeight / MACROS.TILE_SIZE)];
|
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();
|
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
|
// create the grid
|
||||||
for (let i = 0; i < MACROS.numTiles[1]; i++) {
|
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 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();
|
player.save();
|
||||||
|
|
||||||
saveMap();
|
saveMap();
|
||||||
|
|||||||
+12
-1
@@ -3,6 +3,7 @@ class Player {
|
|||||||
this.mainEl = document.querySelector('main.dispGrid');
|
this.mainEl = document.querySelector('main.dispGrid');
|
||||||
this.x = startx;
|
this.x = startx;
|
||||||
this.y = starty;
|
this.y = starty;
|
||||||
|
|
||||||
this.mainEl.children[this.y].children[this.x].classList.add("player");
|
this.mainEl.children[this.y].children[this.x].classList.add("player");
|
||||||
this.setupEventListeners();
|
this.setupEventListeners();
|
||||||
}
|
}
|
||||||
@@ -16,7 +17,17 @@ class Player {
|
|||||||
|
|
||||||
moveTo(newX, newY) {
|
moveTo(newX, newY) {
|
||||||
const square = this.mainEl.children[newY]?.children[newX];
|
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
|
// for now, just move through it
|
||||||
this.mainEl.children[this.y].children[this.x].classList.remove('player');
|
this.mainEl.children[this.y].children[this.x].classList.remove('player');
|
||||||
square.classList.add('player');
|
square.classList.add('player');
|
||||||
|
|||||||
+189
@@ -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';
|
||||||
|
}
|
||||||
@@ -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`;
|
||||||
|
});
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scaledup {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
@@ -59,4 +59,18 @@ main {
|
|||||||
|
|
||||||
.hidebtn:hover {
|
.hidebtn:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#expandingBox {
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scaledup {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.visited {
|
||||||
|
background-color: grey;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user