Merge pull request #5 from homostellaris/add-rocket

add rocket

components/common/Header.tsx

@@ -33,7 +33,7 @@ export const Header = ({ title }: { title: string }) => {
 				<IonImg
 					src="/icon.png"
 					slot="start"
-					className="w-10 h-10 ml-4"
+					className="w-10 h-10 ml-2" // Needs to align with starship and trajectory
 				/>
 				<IonTitle>{title}</IonTitle>
 				<IonButtons

components/common/Starship.tsx

@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import { cn } from './cn'
+
+import React, { forwardRef } from 'react'
+
+const Starship = forwardRef<HTMLImageElement, { className?: string }>(
+	function Starship({ className }, ref) {
+		return (
+			<Image
+				alt="A starship from a birds-eye view"
+				className={cn('starship', className)}
+				src="/starship.png"
+				layout="fill"
+				quality={100}
+				ref={ref}
+			></Image>
+		)
+	},
+)
+
+export default Starship

components/common/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...args: ClassValue[]) {
+	return twMerge(clsx(args))
+}

components/demo/Journey/index.tsx

@@ -1,5 +1,5 @@
-import { createRef, useLayoutEffect, useRef, useState } from 'react'
-import Starship from '../../landingPage/Journey/Starship'
+import { createRef, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import Starship from '../../common/Starship'
 import Todos from '../../todos'
 import { Todo } from '../../todos/interfaces'
 import { useWindowSize } from '../../common/useWindowResize'
@@ -9,14 +9,14 @@ export default function Journey({ todos }: { todos: Todo[] }) {
 	const todosRef = createRef<HTMLDivElement>()
 	useMaintainScrollOffset(currentTodoRef, todosRef)
 
-	const [starshipY, _] = useStarshipYPosition(currentTodoRef)
+	// const [starshipY, _] = useStarshipYPosition(currentTodoRef)
 
 	return (
 		<div className="relative w-4/6 p-20 m-auto">
 			<div
 				id="starship"
 				className={`absolute left-0 m-auto h-[10vmin] w-[10vmin] transition-transform`}
-				style={{ transform: `translateY(${starshipY}px)` }}
+				style={{ transform: `translateY(${0}px)` }}
 			>
 				<Starship />
 			</div>
@@ -50,18 +50,41 @@ function useMaintainScrollOffset(currentTodoRef, todosRef) {
 	}, [currentTodoRef, todosRef])
 }
 
-function useStarshipYPosition(currentTodoRef) {
+export function useStarshipYPosition(
+	starship: HTMLElement | null,
+	nextTodoPosition: DOMRect | null,
+	commonAncestor: HTMLElement | null,
+) {
+	console.debug('Starship position render')
 	const size = useWindowSize()
 	const [starshipY, setStarshipY] = useState<number>(0)
 
 	// TODO: This causes it to render a second time when a todo completion changes the scroll height. But maybe that doesn't matter and maybe we can move the starship into its own component hierarchy so it doesn't re-render other things unnecessarily.
-	useLayoutEffect(() => {
-		const elementPadding = 80
-		const starshipImagePadding = 10
-		setStarshipY(
-			currentTodoRef.current.offsetTop - elementPadding - starshipImagePadding,
+	useEffect(() => {
+		console.debug('Starship position effect')
+		if (
+			starship === null ||
+			nextTodoPosition === null ||
+			nextTodoPosition.height === null ||
+			commonAncestor === null
 		)
-	}, [currentTodoRef, size, setStarshipY])
+			return setStarshipY(0)
+
+		const commonAncestorRect = commonAncestor.getBoundingClientRect()
+		const todoDistanceFromCommonAncestor =
+			nextTodoPosition.y - commonAncestorRect.y
+		const starshipHeightAdjustment =
+			(nextTodoPosition.height - starship?.offsetHeight) / 2
+
+		const y = todoDistanceFromCommonAncestor + starshipHeightAdjustment
+		console.debug(`Setting startship Y to ${y}`, {
+			commonAncestorRect,
+			nextTodoPosition,
+			todoDistanceFromCommonAncestor,
+			starshipHeightAdjustment,
+		})
+		setStarshipY(y)
+	}, [commonAncestor, nextTodoPosition, size, starship, setStarshipY])
 
 	return [starshipY, setStarshipY]
 }

components/landingPage/Journey/Trajectory.tsx

@@ -1,3 +1,14 @@
-export default function Tracjectory() {
-	return <div className="trajectory h-full w-[2px] bg-supernova"></div>
+import { cn } from '../../common/cn'
+
+export default function Tracjectory(props: JSX.IntrinsicElements['div']) {
+	return (
+		<div
+			className={cn('trajectory h-full w-[2px] bg-supernova', props.className)}
+			// Make the mask solid behind the rocket for a 'completed' effect
+			style={{
+				maskImage: 'repeating-linear-gradient(180deg, black, transparent 10px)',
+				// maskSize: '10px 100%',
+			}}
+		></div>
+	)
 }

components/landingPage/Journey/index.tsx

@@ -1,4 +1,4 @@
-import Starship from './Starship'
+import Starship from '../../common/Starship'
 import Tracjectory from './Trajectory'
 
 export default function Journey() {

components/landingPage/Layout.tsx

@@ -4,7 +4,7 @@ import Footer from '../common/Footer'
 import Planets from '../common/Planets'
 import { ScrollDirection } from '../common/scroll'
 import Contact from './Contact'
-import Starship from './Journey/Starship'
+import Starship from '../common/Starship'
 import Tracjectory from './Journey/Trajectory'
 
 const Layout = ({