Skip to content

Commit

Permalink
✨ Add rocket 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
homostellaris committed Nov 8, 2024
1 parent 33ba36d commit fa9f841
Show file tree
Hide file tree
Showing 16 changed files with 537 additions and 455 deletions.
Binary file modified bun.lockb
Binary file not shown.
2 changes: 1 addition & 1 deletion components/common/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
21 changes: 21 additions & 0 deletions components/common/Starship.tsx
Original file line number Diff line number Diff line change
@@ -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
6 changes: 6 additions & 0 deletions components/common/cn.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...args: ClassValue[]) {
return twMerge(clsx(args))
}
51 changes: 42 additions & 9 deletions components/demo/Journey/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { createRef, useLayoutEffect, useRef, useState } from 'react'
import Starship from '../../landingPage/Journey/Starship'
import {
createRef,
RefObject,
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'
Expand Down Expand Up @@ -50,18 +57,44 @@ function useMaintainScrollOffset(currentTodoRef, todosRef) {
}, [currentTodoRef, todosRef])
}

function useStarshipYPosition(currentTodoRef) {
export function useStarshipYPosition(
starship: HTMLElement | null,
nextTodoPosition: DOMRect | null,
nextTodoHeight: number | null,
commonAncestor: HTMLElement | null,
) {
console.log('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.log('Starship position effect')
if (
starship === null ||
nextTodoPosition === null ||
nextTodoHeight === null ||
commonAncestor === null
)
}, [currentTodoRef, size, setStarshipY])
return

const commonAncestorRect = commonAncestor.getBoundingClientRect()
const todoDistanceFromCommonAncestor =
nextTodoPosition.y - commonAncestorRect.y
const starshipHeightAdjustment =
(nextTodoHeight - starship?.offsetHeight) / 2

const y = todoDistanceFromCommonAncestor + starshipHeightAdjustment
console.log(`Setting startship Y to ${y}`, {
// todoId: nextTodo.dataset.id,
// hasCorrectAttr: nextTodo.dataset.nextTodo,
commonAncestorRect,
nextTodoPosition,
todoDistanceFromCommonAncestor,
starshipHeightAdjustment,
})
setStarshipY(y)
}, [commonAncestor, nextTodoPosition, nextTodoHeight, size, starship, setStarshipY])

return [starshipY, setStarshipY]
}
13 changes: 0 additions & 13 deletions components/landingPage/Journey/Starship.tsx

This file was deleted.

14 changes: 12 additions & 2 deletions components/landingPage/Journey/Trajectory.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
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)}
style={{
maskImage: 'repeating-linear-gradient(180deg, black, transparent 10px)',
// maskSize: '10px 100%',
}}
></div>
)
}
2 changes: 1 addition & 1 deletion components/landingPage/Journey/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Starship from './Starship'
import Starship from '../../common/Starship'
import Tracjectory from './Trajectory'

export default function Journey() {
Expand Down
2 changes: 1 addition & 1 deletion components/landingPage/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand Down
Loading

0 comments on commit fa9f841

Please sign in to comment.