tinkering with layout

dankoster · Dec 17, 2024 · 3e10ee3 · 3e10ee3
1 parent f7b4bea
commit 3e10ee3
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 29 deletions.
diff --git a/src/VideoCall.css b/src/VideoCall.css
@@ -52,11 +52,11 @@
 		}
 
 		video {
-			position: fixed;
 			max-width: 150px;
-			top: 0;
-			right: 0;
 			transform: scale(0.5) translateX(10px);
+			/* position: fixed;
+			top: 0;
+			right: 0; */
 		}
 	}
 }
diff --git a/src/main.css b/src/main.css
@@ -19,7 +19,7 @@ body {
 	margin: 0;
 
 	display: grid;
-	grid-template-rows: min-content 1fr min-content;
+	grid-template-rows: 1fr min-content;
 }
 
 :root {
@@ -62,7 +62,7 @@ body {
 	align-items: center;
 	touch-action: none;
 	overflow: hidden;
-	padding: 0.5rem;
+	/* padding: 0.5rem; */
 
 	.header-left {
 		display: flex;
@@ -82,9 +82,9 @@ body {
 	.stats {
 		touch-action: none;
 		font-size: small;
-		display: flex;
+		/* display: flex;
 		column-gap: 1rem;
-		flex-wrap: wrap;
+		flex-wrap: wrap; */
 		justify-content: center;
 
 		opacity: 0.6;
@@ -148,7 +148,7 @@ body {
 
 .toolbar {
 	padding: 1rem;
-	border-top: 1px solid var(--separator-color);
+	/* border-top: 1px solid var(--separator-color); */
 	bottom: 0;
 
 	display: flex;

diff --git a/src/main.tsx b/src/main.tsx
@@ -33,16 +33,26 @@ function App() {
 	})
 
 	const userClicked = (e: MouseEvent) => {
-		//TODO: showDmConversation(null)
-
 		menu.Clear()
 		menu.AddItem(new MenuItem({
-			text: `3d`,
-			onTextClick: () => setSelectedView('planet'),
+			text: `Chat`,
+			subtext: 'coming soon...'
+		}))
+		menu.AddItem(new MenuItem({
+			text: `Map`,
+			subtext: 'coming soon...'
+		}))
+		menu.AddItem(new MenuItem({
+			text: `Build`,
+			subtext: 'coming soon...'
+		}))
+		menu.AddItem(new MenuItem({
+			text: `Share`,
+			subtext: 'coming soon...'
 		}))
 		menu.AddItem(new MenuItem({
-			text: `people`,
-			onTextClick: () => setSelectedView('people'),
+			text: `Find`,
+			subtext: 'coming soon...'
 		}))
 
 		menu.AddSeparator()
@@ -64,15 +74,15 @@ function App() {
 			<div class="offlineMessage">⨳ connecting...</div>
 		</Show>
 		<Show when={server.serverOnline()}>
-			<div class="header">
+			{/* <div class="header">
 				<div class="header-left">
 					<h2 class="logo">⨳</h2>
 					<div class="stats">
 						<div class="userCount"><b>{server.stats()?.online ?? "?"}</b> online 👀</div>
 						<div class="userCount"><b>{server.stats()?.offline ?? "?"}</b> offline 😴</div>
 					</div>
 				</div>
-			</div>
+			</div> */}
 
 			<VideoCall />
 

diff --git a/src/planet.tsx b/src/planet.tsx
@@ -9,6 +9,7 @@ import { connections, getSelf } from './data/data';
 import { Connection } from '../server/types';
 import { ConnectVideo, DisconnectVideo } from './VideoCall';
 import { displayName, shortId } from './helpers';
+import { degToRad } from 'three/src/math/MathUtils.js';
 
 function makeAvatar(size: number, color?: number, x: number = 0): Avatar {
 	const material = color ? new THREE.MeshPhongMaterial({ color }) : new THREE.MeshNormalMaterial();
@@ -34,8 +35,8 @@ function makeAvatar(size: number, color?: number, x: number = 0): Avatar {
 function makeSphere(radius: number, color: number) {
 	const sphereParams = {
 		radius: radius,
-		widthSegments: 36,
-		heightSegments: 18,
+		widthSegments: 72,
+		heightSegments: 36,
 		phiStart: 0,
 		phiLength: Math.PI * 2,
 		thetaStart: 0,
@@ -54,7 +55,7 @@ function makeSphere(radius: number, color: number) {
 	const sphereLineMat = new THREE.LineBasicMaterial({
 		color: 0xffffff,
 		transparent: true,
-		opacity: 0.5
+		opacity: 0.2
 	});
 	const meshMaterial = new THREE.MeshPhongMaterial({
 		color,
@@ -74,20 +75,20 @@ class Avatar {
 	mesh: THREE.Mesh
 	connection?: Connection
 	_distance: number = 0
-	private div: HTMLDivElement
+	private labelDiv: HTMLDivElement
 
 	constructor(label: HTMLDivElement, mesh: THREE.Mesh) {
-		this.div = label
+		this.labelDiv = label
 		this.mesh = mesh
 	}
 
 	set label(value: string) {
-		this.div.textContent = value
+		this.labelDiv.textContent = value
 	}
 
 	set distance(value: number) {
 		this._distance = value
-		this.div.style.opacity = `${100 - (this._distance * 10)}%`
+		this.labelDiv.style.opacity = `${100 - (this._distance * 3)}%`
 	}
 
 	get distance() {
@@ -97,7 +98,7 @@ class Avatar {
 	delete() {
 		console.log('avatar delete!', this.connection.identity?.name)
 		this.mesh.removeFromParent()
-		this.div.remove()
+		this.labelDiv.remove()
 	}
 }
 
@@ -134,7 +135,7 @@ export function Planet() {
 		document.body.appendChild(labelRenderer.domElement);
 
 		const camera = new THREE.PerspectiveCamera(70, window.innerWidth / planetCanvas.offsetHeight, 0.01, 1000);
-		camera.position.z = 20;
+		camera.position.z = 60;
 
 		let selfAvatar: Avatar
 		getSelf.then((con) => {
@@ -143,10 +144,9 @@ export function Planet() {
 			scene.add(selfAvatar.mesh);
 			avatarsById.set(con.id, selfAvatar)
 			self = con
-			console.log('--- set self avatar', con.id)
 		})
 
-		const sphere = makeSphere(8, 0x156289)
+		const sphere = makeSphere(30, 0x156289)
 		scene.add(sphere);
 
 		const orbit = new OrbitControls(camera, renderer.domElement);
@@ -171,9 +171,9 @@ export function Planet() {
 		})
 
 
-		////tilt camera as we lose altitude above the sphere
+		// //tilt camera as we lose altitude above the sphere
 		// orbit.addEventListener('change', (e) => {
-		// 	const sphereRadius = 8
+		// 	const sphereRadius = 30
 		// 	const distanceToSphere = camera.position.distanceTo(sphere.position) - sphereRadius
 		// 	console.log('orbit change', distanceToSphere, camera.rotation)