From 7c05752013f4c2dd8f65f1850ef30b7369c82dd7 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Wed, 18 Sep 2024 23:22:07 +1000
Subject: [PATCH] Css style update

---
 have-been-to/countries.db         | Bin 20480 -> 20480 bytes
 have-been-to/static/js/globe.js   |  39 ++++++++++++++++++++++++------
 have-been-to/templates/index.html |  12 ++++-----
 3 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/have-been-to/countries.db b/have-been-to/countries.db
index 7fee22de2bcc6adbb0c3061945e8b66baa9b3409..da5f8624cee0cb469dcea88206d3fc419f22e205 100644
GIT binary patch
delta 82
zcmZozz}T>Wae_2s$V3@u#*mE(%k<d}GVx#LKe$=YVFSOogoqKdtbj4Itaxr>L3~MN
jL26!RdPd3S%k~liqQ=6^+Kd@Mehx@1J~=-pzeo)LD2f^f

delta 82
zcmZozz}T>Wae_3X&qNt#MxTud%k<gyG4WsK-?v%NVFSOogov;<v#e}xVnKXKWkG6j
lNn&0~Vo}QG%k~liqT0gD+Kd^Q=@~gdToRw0pOast1^`G>8qWX#

diff --git a/have-been-to/static/js/globe.js b/have-been-to/static/js/globe.js
index 325241f..0f44f21 100644
--- a/have-been-to/static/js/globe.js
+++ b/have-been-to/static/js/globe.js
@@ -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();
 });
diff --git a/have-been-to/templates/index.html b/have-been-to/templates/index.html
index c5561a8..f07ce1b 100644
--- a/have-been-to/templates/index.html
+++ b/have-been-to/templates/index.html
@@ -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>