From bf1b43cf4c8501e6f84a298e62cd3991831763f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Norman=20K=C3=B6hring?= <norman.koehring@spenoki.de>
Date: Mon, 23 Jan 2023 12:27:27 +0100
Subject: [PATCH] clickable labels

---
 index.html   |  8 ++++----
 src/main.ts  | 14 ++++++++++++++
 src/stars.ts |  6 +++---
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 1aa681d..8878904 100644
--- a/index.html
+++ b/index.html
@@ -27,9 +27,6 @@
         border: 1px solid #DDD;
         border-radius: .5em;
       }
-      #info > button.highlighted {
-        border-color: yellow;
-      }
       label {
         position: fixed;
         top: 0;
@@ -38,10 +35,13 @@
         margin-left: .5em;
         font-weight: bold;
         color: white;
-        pointer-events: none;
         transform: translate(0, 0);
         background: #0008;
         line-height: 1;
+        cursor: pointer;
+      }
+      label.highlighted {
+        color: yellow;
       }
     </style>
   </head>
diff --git a/src/main.ts b/src/main.ts
index 17632ab..0541330 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -78,6 +78,20 @@ function init() {
     }
   })
 
+  for (let child of stars.children) {
+    ;(child as Star).labelEl.addEventListener('click', (event) => {
+      event.stopPropagation()
+
+      for (let star of stars.children) {
+        ;(star as Star).highlighted = false
+      }
+
+      const star = child as Star
+      star.highlighted = true
+      infoEl.innerText = JSON.stringify(star.starData)
+    })
+  }
+
   renderer.setAnimationLoop(() => {
     raycaster.setFromCamera(pointer, camera)
 
diff --git a/src/stars.ts b/src/stars.ts
index 684e07f..cfe84e9 100644
--- a/src/stars.ts
+++ b/src/stars.ts
@@ -25,6 +25,7 @@ export interface StarData {
 export class Star extends Group {
   public isStar = true
   public starData: StarData
+  public labelEl = document.createElement('label')
 
   private coords = new Vector3()
 
@@ -39,8 +40,6 @@ export class Star extends Group {
   private whiteColor = new Float32BufferAttribute([255, 255, 255], 3)
   private yellowColor = new Float32BufferAttribute([255, 255, 0], 3)
 
-  private labelEl = document.createElement('label')
-
   private point: Points<BufferGeometry, PointsMaterial>
 
   constructor(starData: StarData) {
@@ -81,6 +80,7 @@ export class Star extends Group {
     this.pointMaterial.setValues({
       size: isHighlight ? this.highlightedPointSize : this.normalPointSize,
     })
+    this.labelEl.classList.toggle('highlighted', isHighlight)
   }
 
   public get highlighted() {
@@ -106,7 +106,7 @@ export class Star extends Group {
     pos.y = Math.round((0.5 - pos.y / 2) * (height / dpr))
 
     this.labelEl.style.transform = `translate(${pos.x}px, ${pos.y}px)`
-    const zIndex = `${10000000 - Math.round(pos.z * 10000000)}`
+    const zIndex = `${10000000 - Math.round(pos.z * 10000000)}` // ridiculous
     this.labelEl.style.zIndex = zIndex
   }
 }