"<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>City Planner</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
#grid {
display: grid;
grid-template-columns: repeat(30, 30px);
grid-template-rows: repeat(15, 30px);
background-color: #8fbc8f;
position: relative;
}
.cell {
width: 30px;
height: 30px;
position: relative;

}
.cell::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
background-color: #212f3c;
border-radius: 50%;
}
.road-container {
position: absolute;
pointer-events: auto;
}
.road {
position: absolute;
background-color: rgba(85, 85, 85, 0.6); /* 70% opacity */
border-radius: 7px;
}
.dashed-line {
position: absolute;

}
.building {
background-color: rgba(224, 224, 224, 0.7);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
text-align: center;
overflow: hidden;
border: 2px solid #666;
box-sizing: border-box;
}
#tools {
margin-bottom: 10px;
}
.road-preview .road {
opacity: 0.5;
background-color: rgba(85, 85, 85, 0.5); /* 50% opacity for preview */
}
.building-preview {
background-color: rgba(224, 224, 224, 0.3);
position: absolute;
border: 2px solid rgba(102, 102, 102, 0.7);
box-sizing: border-box;
}
.road-container.selected .road {
box-shadow: 0 0 0 2px #ffff00;
}
.road-container .length-indicator {
pointer-events: none;
white-space: nowrap;
z-index: 10;
}
</style>
</head>
<body>
<h1>City Planner</h1>
<div id="tools">
<button id="roadTool">Road Tool</button>
<button id="buildingTool">Building Tool</button>
</div>
<div id="grid"></div>
<div id="buildingName" style="display: none;">
<input type="text" id="buildingNameInput" placeholder="Enter building name">
<button id="confirmBuilding">Confirm</button>
</div>

<script>
const grid = document.getElementById('grid');
const roadTool = document.getElementById('roadTool');
const buildingTool = document.getElementById('buildingTool');
const buildingNameDiv = document.getElementById('buildingName');
const buildingNameInput = document.getElementById('buildingNameInput');
const confirmBuildingButton = document.getElementById('confirmBuilding');

let currentTool = null;
let isPlacing = false;
let startCell = null;
let previewCells = [];

// Create grid
for (let i = 0; i < 450; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.index = i;
grid.appendChild(cell);
}

grid.addEventListener('click', handleGridClick);
grid.addEventListener('mousemove', handleGridHover);

roadTool.addEventListener('click', () => currentTool = 'road');
buildingTool.addEventListener('click', () => currentTool = 'building');

function getNearestNode(x, y) {
const cellSize = 30;
const col = Math.floor(x / cellSize);
const row = Math.floor(y / cellSize);

let minDistance = Infinity;
let nearestNode = null;

for (let i = 0; i < 2; i++) {
for (let j = 0; j < 2; j++) {
const checkCol = col + i;
const checkRow = row + j;

if (checkCol >= 0 && checkCol < 30 && checkRow >= 0 && checkRow < 15) {
const nodeX = checkCol * cellSize + cellSize / 2;
const nodeY = checkRow * cellSize + cellSize / 2;

const distance = Math.sqrt(Math.pow(x - nodeX, 2) + Math.pow(y - nodeY, 2));

if (distance < minDistance) {
minDistance = distance;
nearestNode = grid.children[checkRow * 30 + checkCol];
}
}
}
}

return nearestNode;
}

function handleGridClick(event) {
const rect = grid.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const nearestNode = getNearestNode(x, y);

if (event.target.closest('.road-container') && !isPlacing) {
toggleRoadSelection(event.target.closest('.road-container'));
return;
}

if (event.target === grid && !isPlacing) {
deselectAllRoads();
}

if (!currentTool) return;

if (!isPlacing) {
startCell = nearestNode;
isPlacing = true;
} else {
if (currentTool === 'road') {
placeRoad(startCell, nearestNode);
} else if (currentTool === 'building') {
placeBuilding(startCell, nearestNode);
}
isPlacing = false;
clearPreview();
}
}

function handleGridHover(event) {
if (!isPlacing) return;
const rect = grid.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const nearestNode = getNearestNode(x, y);

clearPreview();
if (currentTool === 'road') {
previewRoad(startCell, nearestNode);
} else if (currentTool === 'building') {
previewBuilding(startCell, nearestNode);
}
}

function placeRoad(start, end) {
const roadContainer = document.createElement('div');
roadContainer.classList.add('road-container');

const road = document.createElement('div');
road.classList.add('road');

const dashedLine = document.createElement('div');
dashedLine.classList.add('dashed-line');

const lengthIndicator = document.createElement('div');
lengthIndicator.classList.add('length-indicator');
lengthIndicator.style.display = 'none'; // Initially hidden

setRoadProperties(roadContainer, road, dashedLine, start, end, lengthIndicator);

roadContainer.appendChild(road);
roadContainer.appendChild(dashedLine);
roadContainer.appendChild(lengthIndicator);
grid.appendChild(roadContainer);
}

function previewRoad(start, end) {
const roadContainer = document.createElement('div');
roadContainer.classList.add('road-container', 'road-preview');

const road = document.createElement('div');
road.classList.add('road');

const dashedLine = document.createElement('div');
dashedLine.classList.add('dashed-line');

const lengthIndicator = document.createElement('div');
lengthIndicator.classList.add('length-indicator');

setRoadProperties(roadContainer, road, dashedLine, start, end, lengthIndicator);

roadContainer.appendChild(road);
roadContainer.appendChild(dashedLine);
roadContainer.appendChild(lengthIndicator);
grid.appendChild(roadContainer);
previewCells.push(roadContainer);
}

function setRoadProperties(container, road, dashedLine, start, end, lengthIndicator) {
const startRect = start.getBoundingClientRect();
const endRect = end.getBoundingClientRect();
const gridRect = grid.getBoundingClientRect();

const startX = startRect.left - gridRect.left + startRect.width / 2;
const startY = startRect.top - gridRect.top + startRect.height / 2;
const endX = endRect.left - gridRect.left + endRect.width / 2;
const endY = endRect.top - gridRect.top + endRect.height / 2;

const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;

// Calculate length in grid units
const gridUnitLength = Math.round(length / 30 * 10) / 10; // Round to 1 decimal place

// Set container properties
container.style.position = 'absolute';
container.style.left = `${startX}px`;
container.style.top = `${startY}px`;
container.style.width = `${length}px`;
container.style.height = '0';
container.style.transform = `rotate(${angle}deg)`;
container.style.transformOrigin = '0 50%';

// Set road properties
road.style.position = 'absolute';
road.style.left = '0';
road.style.top = '50%';
road.style.width = '100%';
road.style.height = '16px';
// road.style.backgroundColor = '#555';
road.style.transform = 'translateY(-50%)';
road.style.borderRadius = '10px';

// Set dashed line properties
// Assuming dashedLine is your element

// Set the position and dimensions
dashedLine.style.position = 'absolute';
dashedLine.style.left = '0';
dashedLine.style.top = '50%';
dashedLine.style.width = '100%';
dashedLine.style.height = '3px'; // Adjust this for line thickness
dashedLine.style.transform = 'translateY(-50%)';

// Create the dashed line effect
dashedLine.style.background = 'repeating-linear-gradient(to right, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 8px, transparent 8px, transparent 15px)';

// Set length indicator properties
lengthIndicator.style.position = 'absolute';
lengthIndicator.style.left = '50%';
lengthIndicator.style.top = '-20px';
lengthIndicator.style.transform = 'translateX(-50%)';
lengthIndicator.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
lengthIndicator.style.color = 'white';
lengthIndicator.style.padding = '2px 5px';
lengthIndicator.style.borderRadius = '3px';
lengthIndicator.style.fontSize = '12px';
lengthIndicator.textContent = `${gridUnitLength} units`;

// Adjust text rotation to always be readable
let textAngle = angle;

lengthIndicator.style.transform = `translateX(-50%) rotate(${-textAngle}deg)`;
}

function toggleRoadSelection(roadContainer) {
const lengthIndicator = roadContainer.querySelector('.length-indicator');
const isSelected = roadContainer.classList.toggle('selected');

if (isSelected) {
lengthIndicator.style.display = 'block';
} else {
lengthIndicator.style.display = 'none';
}
}

function deselectAllRoads() {
document.querySelectorAll('.road-container.selected').forEach(road => {
road.classList.remove('selected');
road.querySelector('.length-indicator').style.display = 'none';
});
}

function placeBuilding(start, end) {
const startRect = start.getBoundingClientRect();
const endRect = end.getBoundingClientRect();
const gridRect = grid.getBoundingClientRect();

const left = Math.min(startRect.left, endRect.left) - gridRect.left;
const top = Math.min(startRect.top, endRect.top) - gridRect.top;
const width = Math.abs(startRect.left - endRect.left) + 30;
const height = Math.abs(startRect.top - endRect.top) + 30;

buildingNameDiv.style.display = 'block';
confirmBuildingButton.onclick = () => {
const buildingName = buildingNameInput.value;
const building = document.createElement('div');
building.classList.add('building');
building.style.left = `${left}px`;
building.style.top = `${top}px`;
building.style.width = `${width}px`;
building.style.height = `${height}px`;
building.textContent = buildingName;

building.onclick = (e) => {
if (e.ctrlKey) {
building.remove();
}
};

grid.appendChild(building);
buildingNameDiv.style.display = 'none';
buildingNameInput.value = '';
};
}

function previewBuilding(start, end) {
const startRect = start.getBoundingClientRect();
const endRect = end.getBoundingClientRect();
const gridRect = grid.getBoundingClientRect();

const left = Math.min(startRect.left, endRect.left) - gridRect.left;
const top = Math.min(startRect.top, endRect.top) - gridRect.top;
const width = Math.abs(startRect.left - endRect.left) + 30;
const height = Math.abs(startRect.top - endRect.top) + 30;

const preview = document.createElement('div');
preview.classList.add('building-preview');
preview.style.left = `${left}px`;
preview.style.top = `${top}px`;
preview.style.width = `${width}px`;
preview.style.height = `${height}px`;

grid.appendChild(preview);
previewCells.push(preview);
}

function clearPreview() {
previewCells.forEach(cell => {
cell.remove();
});
previewCells = [];
}
</script>
</body>
</html>" this is a simple city planner app to teach kids about some geometrical content. i want to be able to delete the roads. can you make a delete tool.