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 {
position: absolute;
top: 1em;
right: 1em;
text-align: right;
top: 0;
left: 0;
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 {
margin: 0 .1em;
border: 1px solid #DDD;
border-radius: .5em;
#info.hidden {
transform: translate(-20rem, 0);
}
label {
position: fixed;
@ -46,7 +51,21 @@
</style>
</head>
<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>
<script type="module" src="/src/main.ts"></script>
</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 { planeGeometry } from './plane'
import { renderStars, Star } from './stars'
import { InfoDisplay } from './info-display'
async function init() {
const w = window.innerWidth
const h = window.innerHeight
const radius = 5
const infoEl = document.getElementById('info')!
const infoDisplay = new InfoDisplay()
infoDisplay.hide()
const renderer = new WebGLRenderer({ antialias: true })
renderer.setSize(w, h)
@ -36,7 +38,6 @@ async function init() {
const plane = planeGeometry(radius)
const stars = await renderStars(radius)
infoEl.innerText = `Currently diplaying ${stars.children.length} stars.`
scene.add(stars)
scene.add(plane)
@ -56,7 +57,6 @@ async function init() {
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1
})
document.addEventListener('click', () => {
infoEl.innerText = `Currently diplaying ${stars.children.length} stars.`
for (let star of stars.children) {
;(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
if (star.isStar) {
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
star.highlighted = true
infoEl.innerText = JSON.stringify(star.starData)
infoDisplay.render(star.starData)
infoDisplay.show()
})
}