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;
}
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
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
}
}