sights widget fix

.env

@@ -1,6 +1,6 @@
-VUE_APP_API_URL=http://31.129.106.67:8080
+# VUE_APP_API_URL=http://31.129.106.67:8080
-VUE_APP_GEO_URL=http://31.129.106.67:6001
+# VUE_APP_GEO_URL=http://31.129.106.67:6001
-VUE_APP_WEATHER_URL=http://31.129.106.67:6002
+# VUE_APP_WEATHER_URL=http://31.129.106.67:6002
-# VUE_APP_API_URL=http://127.0.0.1:8080
+VUE_APP_API_URL=http://127.0.0.1:8080
-# VUE_APP_GEO_URL=http://127.0.0.1:6001
+VUE_APP_GEO_URL=http://127.0.0.1:6001
-# VUE_APP_WEATHER_URL=http://127.0.0.1:6002
+VUE_APP_WEATHER_URL=http://127.0.0.1:6002

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "@improbable-eng/grpc-web": "^0.15.0",
+    "@pixi/text-bitmap": "^7.4.3",
+    "@vitejs/plugin-vue": "^6.0.0",
     "axios": "^1.8.4",
     "core-js": "^3.8.3",
     "google-protobuf": "^3.21.4",
@@ -18,8 +20,12 @@
     "leaflet-geometryutil": "^0.10.3",
     "leaflet-pixi-overlay": "^1.9.4",
     "leaflet-rotatedmarker": "^0.2.0",
-    "pixi.js": "^8.10.2",
+    "phaser": "^3.90.0",
-    "vue": "^3.2.13"
+    "pixi-viewport": "^6.0.3",
+    "pixi.js": "^8.11.0",
+    "vue": "^3.2.13",
+    "vue-ts": "^1.0.11",
+    "vue3-pixi": "^0.9.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/assets/style/main.css

@@ -115,13 +115,31 @@ body {
 .stopdescription {
   font-size: 16px;
   font-weight: 400;
-  padding: 0 15px 0 15px;
+  padding: 0 10px 0 10px;
   color: #fff;
   overflow-y: auto;
   margin-bottom: 15px;
   max-height: calc(100% - 430px);
 }
 
+.stopdescription::-webkit-scrollbar {
+  width: 1px;
+}
+
+.stopdescription::-webkit-scrollbar-track {
+  background: #a6a6a6;
+}
+
+.stopdescription::-webkit-scrollbar-thumb {
+  background: white;
+}
+
+/* Firefox scrollbar */
+.stopdescription {
+  scrollbar-width: thin;
+  scrollbar-color: white #a6a6a6;
+}
+
 .landmarks {
   background: #806c58;
   border-radius: 10px 10px 0 0;
@@ -843,18 +861,35 @@ li.checked {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: end;
+  justify-content: start;
 }
 
 .sight-thumbnail {
   width: 100%;
   border-radius: 6px;
+  background: #fff;
+  aspect-ratio: 1/1;
+  border-radius: 100%;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sight-thumbnail img {
+  object-fit: cover;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .sight-title {
   margin-top: 4px;
   font-size: 15px;
   text-align: center;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 .sight-letter {
@@ -1063,3 +1098,136 @@ li.checked {
 .governor-appeal h3 {
   font-size: 22px;
 }
+
+.sight-card {
+  position: relative;
+  cursor: pointer;
+}
+
+.sight-card-detail {
+  position: absolute;
+  top: 0;
+  left: 105%;
+  width: 260px;
+  z-index: 20;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  padding: 12px;
+  border-radius: 6px;
+  backdrop-filter: blur(4px);
+}
+
+.sight-card-detail .detail-image {
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.sight-card-detail .detail-name {
+  margin: 0 0 6px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.detail-articles {
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-article {
+  margin-top: 4px;
+  font-size: 14px;
+  line-height: 1.3;
+}
+.sight-side-panel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 33%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.65);
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  z-index: 30;
+}
+
+.panel-image-wrapper {
+  flex: 0 0 auto;
+}
+
+.panel-image {
+  width: 100%;
+  height: auto;
+  border-radius: 6px;
+  margin-bottom: 10px;
+}
+
+.panel-name {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.panel-description {
+  font-size: 15px;
+  line-height: 1.4;
+  margin-bottom: 10px;
+  background: #fff;
+}
+
+.panel-articles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: auto;
+}
+
+.panel-article-option {
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.panel-article-option.selected {
+  background: rgba(255, 255, 255, 0.35);
+}
+.language-options {
+  display: flex;
+  gap: 6px;
+}
+
+.lang-option svg {
+  width: 28px;
+  height: 28px;
+}
+
+.sights-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-right: 40px;
+}
+
+.sight-letter-group {
+  display: contents;
+}
+
+.letter-anchor {
+  position: absolute !important;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+
+.sight-card {
+  flex: 0 0 calc((100% - 24px) / 3);
+  box-sizing: border-box;
+}

src/components/stopinfo.vue

@@ -216,9 +216,9 @@
                 <div
                   v-for="(group, letter) in groupedSights"
                   :key="letter"
-                  :ref="'letter-' + letter"
                   class="sight-letter-group"
                 >
+                  <span :ref="'letter-' + letter" class="letter-anchor"></span>
                   <div
                     v-for="sight in group"
                     :key="sight.id"
@@ -228,7 +228,9 @@
                     }"
                     @click.stop="openSightCardDetails(sight.id)"
                   >
-                    <img class="sight-thumbnail" :src="sight.thumbnailUrl" />
+                    <div class="sight-thumbnail">
+                      <img :src="sight.thumbnailUrl" />
+                    </div>
                     <div class="sight-title">{{ sight.name }}</div>
                   </div>
                 </div>
@@ -761,12 +763,19 @@ export default {
       }
     },
     selectLetter(letter) {
-      const section = this.$refs[`letter-${letter}`]?.[0];
+      const anchorArr = this.$refs[`letter-${letter}`];
+      const anchor = anchorArr ? anchorArr[0] : null;
       const container = this.$refs.scrollContainer;
-      if (section && container) {
+
-        const top = section.offsetTop;
+      if (!anchor || !container) return;
-        container.scrollTo({ top, behavior: "smooth" });
+
+      let target = anchor.nextElementSibling;
+      if (!target || !target.classList.contains("sight-card")) {
+        target = anchor;
       }
+
+      const top = target.offsetTop;
+      container.scrollTo({ top, behavior: "smooth" });
     },
     toggleTransfers() {
       console.log("Transfer toggle clicked");
@@ -841,113 +850,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.sight-card {
-  position: relative;
-  cursor: pointer;
-}
-
-.sight-card-detail {
-  position: absolute;
-  top: 0;
-  left: 105%;
-  width: 260px;
-  z-index: 20;
-  background: rgba(0, 0, 0, 0.85);
-  color: #fff;
-  padding: 12px;
-  border-radius: 6px;
-  backdrop-filter: blur(4px);
-}
-
-.sight-card-detail .detail-image {
-  width: 100%;
-  height: auto;
-  border-radius: 4px;
-  margin-bottom: 8px;
-}
-
-.sight-card-detail .detail-name {
-  margin: 0 0 6px;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.detail-articles {
-  display: flex;
-  flex-direction: column;
-}
-
-.detail-article {
-  margin-top: 4px;
-  font-size: 14px;
-  line-height: 1.3;
-}
-.sight-side-panel {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 33%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.65);
-  padding: 14px 18px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  z-index: 30;
-}
-
-.panel-image-wrapper {
-  flex: 0 0 auto;
-}
-
-.panel-image {
-  width: 100%;
-  height: auto;
-  border-radius: 6px;
-  margin-bottom: 10px;
-}
-
-.panel-name {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.panel-description {
-  font-size: 15px;
-  line-height: 1.4;
-  margin-bottom: 10px;
-  background: #fff;
-}
-
-.panel-articles {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: auto;
-}
-
-.panel-article-option {
-  padding: 4px 8px;
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 4px;
-  font-size: 14px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.panel-article-option.selected {
-  background: rgba(255, 255, 255, 0.35);
-}
-.language-options {
-  display: flex;
-  gap: 6px;
-}
-
-.lang-option svg {
-  width: 28px;
-  height: 28px;
-}
-</style>