mirror of
https://github.com/wahyd4/ai-projects.git
synced 2026-08-09 05:06:01 +10:00
Css style update
This commit is contained in:
Binary file not shown.
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user