Css style update

This commit is contained in:
2024-09-18 23:22:07 +10:00
parent 002e433a5d
commit 7c05752013
3 changed files with 38 additions and 13 deletions
Binary file not shown.
+32 -7
View File
@@ -446,13 +446,26 @@ function updateRendererSize() {
}
function setupMapSelection() {
const mapSelect = document.getElementById('map-select');
if (mapSelect) {
mapSelect.addEventListener('change', (event) => {
changeMapType(event.target.value);
const mapTypeSelector = document.getElementById('map-type-selector');
if (mapTypeSelector) {
// Load preview images for map type options
Object.entries(mapTextures).forEach(([type, url]) => {
const option = mapTypeSelector.querySelector(`[data-map-type="${type}"]`);
if (option) {
option.style.backgroundImage = `url(${url})`;
option.style.backgroundSize = 'cover';
option.style.backgroundPosition = 'center';
option.addEventListener('click', () => changeMapType(type));
// Set initial selected state
if (type === currentMapType) {
option.classList.add('ring-2', 'ring-blue-500', 'border-blue-500');
option.classList.remove('border-gray-600');
}
}
});
} else {
console.error('Map select element not found');
console.error('Map type selector element not found');
}
}
@@ -463,6 +476,18 @@ function changeMapType(mapType) {
map.material.map = newTexture;
map.material.needsUpdate = true;
saveMapType(mapType);
// Update selected state visually
const mapTypeSelector = document.getElementById('map-type-selector');
mapTypeSelector.querySelectorAll('.map-type-option').forEach(option => {
if (option.dataset.mapType === mapType) {
option.classList.add('ring-2', 'ring-blue-500', 'border-blue-500');
option.classList.remove('border-gray-600');
} else {
option.classList.remove('ring-2', 'ring-blue-500', 'border-blue-500');
option.classList.add('border-gray-600');
}
});
}
}
@@ -472,7 +497,6 @@ function loadSavedMapType() {
.then(data => {
if (data.mapType) {
changeMapType(data.mapType);
document.getElementById('map-select').value = data.mapType;
}
});
}
@@ -487,7 +511,8 @@ function saveMapType(mapType) {
});
}
// Move this to the end of the file
// Ensure setupMapSelection is called after DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
init();
setupMapSelection();
});
+6 -6
View File
@@ -41,12 +41,12 @@
</div>
<div class="mb-4">
<h3 class="text-lg font-semibold mb-2 text-gray-300">地图背景</h3>
<select id="map-select" class="w-full px-3 py-2 bg-gray-800 text-gray-200 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="standard">标准地图</option>
<option value="night">夜间地图</option>
<option value="gray">灰度地图</option>
<option value="satellite">卫星地图</option>
</select>
<div id="map-type-selector" class="flex flex-wrap gap-2">
<div class="map-type-option w-16 h-16 cursor-pointer border-2 border-gray-600 rounded-md transition duration-200 hover:border-blue-500" data-map-type="standard"></div>
<div class="map-type-option w-16 h-16 cursor-pointer border-2 border-gray-600 rounded-md transition duration-200 hover:border-blue-500" data-map-type="night"></div>
<div class="map-type-option w-16 h-16 cursor-pointer border-2 border-gray-600 rounded-md transition duration-200 hover:border-blue-500" data-map-type="gray"></div>
<div class="map-type-option w-16 h-16 cursor-pointer border-2 border-gray-600 rounded-md transition duration-200 hover:border-blue-500" data-map-type="satellite"></div>
</div>
</div>
<button id="export-btn" class="w-full bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition duration-200">导出地图</button>
</div>