diff --git a/index.html b/index.html index 8878904..e2ebea8 100644 --- a/index.html +++ b/index.html @@ -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 @@ -
Click a star to get options.
+
+

{{ name }}

+

+ Star Type: + {{ type }} +

+

+ Spectral Type: + {{ spectral }} +

+

+ Distance: + {{ distance }} +

+
diff --git a/src/info-display.ts b/src/info-display.ts new file mode 100644 index 0000000..3cbf8f2 --- /dev/null +++ b/src/info-display.ts @@ -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') + } +} diff --git a/src/main.ts b/src/main.ts index 1e91b64..5310c8f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -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() }) }