n/stellar-neighbours
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

info display

Browse source
This commit is contained in:
Norman Köhring 2023-01-23 18:31:00 +01:00
parent 38f9c76c9d
commit 4549aeaf16
3 changed files with 68 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
index.html
View file

@ -18,14 +18,19 @@
} }
#info { #info {
position: absolute; position: absolute;
top: 1em; top: 0;
right: 1em; left: 0;
text-align: right; width: 20rem;
height: 100vh;
padding: 0 1em;
background: #3368;
backdrop-filter: blur(4px);
border-right: 2px solid #336;
transform: translate(0, 0);
transition: transform .2 ease;
} }
#info > button { #info.hidden {
margin: 0 .1em; transform: translate(-20rem, 0);
border: 1px solid #DDD;
border-radius: .5em;
} }
label { label {
position: fixed; position: fixed;
@ -46,7 +51,21 @@
</style> </style>
</head> </head>
<body> <body>
<div id="info">Click a star to get options.</div> <div id="info">
<h1>{{ name }}</h1>
<p>
<span>Star Type:<span>
<strong>{{ type }}</strong>
</p>
<p>
<span>Spectral Type:<span>
<strong>{{ spectral }}</strong>
</p>
<p>
<span>Distance:<span>
<strong>{{ distance }}</strong>
</p>
</div>
<div id="labels"></div> <div id="labels"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

30
src/info-display.ts Normal file
View file

@ -0,0 +1,30 @@
import type { StarData } from './stars'
export class InfoDisplay {
private container = document.getElementById('info')!
private template = this.container.innerHTML
constructor() {}
render(data: StarData) {
const name = data.name.replace(/^NAME /, '')
const ly = Math.round(data.radius * 3.2615637 * 100) / 100
const distance = `${data.radius} pc / ${ly} ly`
const html = this.template
.replace('{{ name }}', name)
.replace('{{ type }}', data.type)
.replace('{{ spectral }}', data.spectral)
.replace('{{ distance }}', distance)
this.container.innerHTML = html
}
show() {
this.container.classList.remove('hidden')
}
hide() {
this.container.classList.add('hidden')
}
}

17
src/main.ts
View file

@ -10,12 +10,14 @@ import {
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { planeGeometry } from './plane' import { planeGeometry } from './plane'
import { renderStars, Star } from './stars' import { renderStars, Star } from './stars'
import { InfoDisplay } from './info-display'
async function init() { async function init() {
const w = window.innerWidth const w = window.innerWidth
const h = window.innerHeight const h = window.innerHeight
const radius = 5 const radius = 5
const infoEl = document.getElementById('info')! const infoDisplay = new InfoDisplay()
infoDisplay.hide()
const renderer = new WebGLRenderer({ antialias: true }) const renderer = new WebGLRenderer({ antialias: true })
renderer.setSize(w, h) renderer.setSize(w, h)
@ -36,7 +38,6 @@ async function init() {
const plane = planeGeometry(radius) const plane = planeGeometry(radius)
const stars = await renderStars(radius) const stars = await renderStars(radius)
infoEl.innerText = `Currently diplaying ${stars.children.length} stars.`
scene.add(stars) scene.add(stars)
scene.add(plane) scene.add(plane)
@ -56,7 +57,6 @@ async function init() {
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1 pointer.y = -(event.clientY / window.innerHeight) * 2 + 1
}) })
document.addEventListener('click', () => { document.addEventListener('click', () => {
infoEl.innerText = `Currently diplaying ${stars.children.length} stars.`
for (let star of stars.children) { for (let star of stars.children) {
;(star as Star).highlighted = false ;(star as Star).highlighted = false
} }
@ -70,12 +70,16 @@ async function init() {
} }
} }
if (closest === null) return if (closest === null) {
infoDisplay.hide()
return
}
const star = closest.object.parent as Star const star = closest.object.parent as Star
if (star.isStar) { if (star.isStar) {
star.highlighted = true star.highlighted = true
infoEl.innerText = JSON.stringify(star.starData) infoDisplay.render(star.starData)
infoDisplay.show()
} }
}) })
@ -89,7 +93,8 @@ async function init() {
const star = child as Star const star = child as Star
star.highlighted = true star.highlighted = true
infoEl.innerText = JSON.stringify(star.starData) infoDisplay.render(star.starData)
infoDisplay.show()
}) })
} }