Bricks: improve content

src/app/content/bricks/Bricks.tsx

@@ -6,7 +6,7 @@ import { BrickScroll } from './brick/BrickScroll';
 import { Transformations } from '../../utils/TransformationAnimator';
 import { Mb300slScroll } from './mb300sl/Mb300slScroll';
 import { LoadingBrick } from './LoadingBrick';
-import { useLoadable } from './useLoadable';
+import { useLoadable } from '../../three/useLoadable';
 import { useDimension } from '../../utils/useDimension';
 import { useScroll } from '../../utils/useScroll';
 import { Mb300slContent } from './mb300sl/Mb300slContent';
@@ -16,14 +16,14 @@ export const Bricks = () => {
 
   const elementRef = useRef<HTMLDivElement>(null);
   const dimension = useDimension(elementRef);
-  const scroll = useScroll(elementRef);
+  const scrollState$ = useScroll(elementRef);
 
   const sections = [
     { height: 1, content: null },
     { height: 3, content: undefined }, // Placeholder for the 300 SL,
     {
       height: 1, content: <>
-        <div style={{ paddingTop: '20px' }}>
+        <div style={{ paddingTop: '40px' }}>
           <AircraftContent />
         </div>
         <div style={{ left: 0, top: 0, right: 0, bottom: 0, overflow: 'hidden', pointerEvents: 'none', position: 'absolute' }}>
@@ -43,8 +43,8 @@ export const Bricks = () => {
   const pages = sections.reduce((acc, { height }) => acc + height, 0);
   const mb300slTriggers: [number, number] = [1.3 / pages, 3.6 / pages];
 
-  const [loadables, loaded] = useLoadable([(onLoadComplete) => ((scrollProgress: number) => <Mb300slScroll
-    progress={scrollProgress}
+  const [loadables, loaded] = useLoadable([(onLoadComplete) => (<Mb300slScroll
+    progress$={scrollState$}
     animationTrigger={[mb300slTriggers[0] - 1 / pages, mb300slTriggers[1] + 1 / pages]}
     onLoadComplete={onLoadComplete}
   />)]);
@@ -55,7 +55,7 @@ export const Bricks = () => {
     </div>
     <div style={{ height: '100vh', position: 'sticky', top: 0, overflow: 'hidden', pointerEvents: 'none' }}>
       <View style={{ height: '100vh', position: 'absolute', top: 0, left: 0, right: -20 }}>
-        {loadables[0](scroll)}
+        {loadables[0]}
       </View>
     </div>
   </>;
@@ -93,10 +93,8 @@ export const Bricks = () => {
 
       {/**************************************** brick overlay *******************************************/}
       <View style={{ width: dimension?.width ?? 600, height: dimension?.height ?? 800, position: 'absolute', top: 0, left: 0, zIndex: -1 }}>
-        {/* <ambientLight intensity={0.1} /> */}
-        {/* <directionalLight position={[10, 10, 5]} intensity={1} color={[1, 0, 0]} /> */}
         <PerspectiveCamera makeDefault fov={12} position={[0, 0, 5]} />
-        <BrickScroll transformations={scrollStates.brick} progress={scroll} />
+        <BrickScroll transformations={scrollStates.brick} progress$={scrollState$} />
         <Environment preset='lobby' />
       </View>
     </div>

src/app/content/bricks/aircraft/AircraftContent.styl

@@ -1,16 +1,23 @@
 .aircraft-content {
   .aircraft-grid {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    width: 100%;
+    padding: 20px;
+    box-sizing: border-box;
 
-    h1 {
-      background: rgb(255, 0, 0);
+    h2 {
       margin: 0;
+      color: rgb(255, 255, 255);
+      font-size: 1.5em;
     }
 
-    .aircraft-image {
+    &>* {
+      width: 100%;
+      height: 100%;
+      aspect-ratio: 1;
       object-fit: cover;
-      max-width: 25%;
-      width: 200px;
     }
   }
-}
+}

src/app/content/bricks/aircraft/AircraftContent.tsx

@@ -1,38 +1,14 @@
 import './AircraftContent.styl';
-import { Fullscreenable } from '../../../ui/Fullscreenable';
-import React, { useState } from 'react';
-import { FlightSimulator } from './flightsimulator/FlightSimulator';
-import { Canvas } from '@react-three/fiber';
-import { FullscreenPlane } from '../../../three/FullscreenPlane';
-import { RenderTexture } from '@react-three/drei';
+import React from 'react';
 
 
 export const AircraftContent = () => {
-
-  // const [gameId, setGameId] = useState<string | null>(null);
-
   return <>
     <div className='aircraft-content bricks-content'>
       <div className='aircraft-grid'>
-        <h1>Ultimate Air- & Spacecraft Collection</h1>
+        <h2>Ultimate Air- & Spacecraft Collection</h2>
         {[...Array(3)].map((_, i) => <img key={i} className='aircraft-image' src={require(`./aircraft_${i}.jpg`)} />)}
       </div>
-      {/* <button onClick={() => setGameId(cur => cur ? null : '1')}>Play</button> */}
     </div >
-    {/* {gameId && <Fullscreenable fullscreen>
-      <div style={{ width: '100%', height: '100%', background: 'skyblue' }}>
-        <Canvas camera={{ position: [0, 0, 9], fov: 14 }} frameloop='always'>
-          <FullscreenPlane>
-            <meshStandardMaterial>
-              <RenderTexture attach='map'>
-                <group scale={[0.1, 0.1, 0.1]}>
-                  <FlightSimulator onLoadComplete={() => { }} />
-                </group>
-              </RenderTexture>
-            </meshStandardMaterial>
-          </FullscreenPlane >
-        </Canvas>
-      </div>
-    </Fullscreenable>} */}
   </>;
 }

src/app/content/bricks/brick/BrickScroll.tsx

@@ -3,14 +3,15 @@ import { useFrame } from "@react-three/fiber";
 import { Object3D } from "three";
 import { Brick } from "./Brick";
 import { useTransformationAnimator, Transformations } from "../../../utils/TransformationAnimator";
+import { BehaviorSubject } from "rxjs";
 
-export function BrickScroll({ transformations, progress }: { transformations: Transformations, progress: number }) {
+export function BrickScroll({ transformations, progress$ }: { transformations: Transformations, progress$: BehaviorSubject<number> }) {
   const ref = useRef<Object3D | null>(null);
   const transformationAnimator = useTransformationAnimator(transformations);
 
   useFrame(() => {
     if (ref.current) {
-      transformationAnimator.apply(ref.current, progress, 0.82, 0.92);
+      transformationAnimator.apply(ref.current, progress$.getValue(), 0.82, 0.92);
     }
   });
 

src/app/content/bricks/mb300sl/Mb300slScroll.tsx

@@ -3,14 +3,16 @@ import { CarShow } from '../../../three/car-show/CarShow';
 import { Mb300sl } from './Mb300sl';
 import { Quality } from '../../../three/QualityProvider';
 import { useFrame } from '@react-three/fiber';
+import { BehaviorSubject } from 'rxjs';
 
-export function Mb300slScroll({ progress, animationTrigger, onLoadComplete }: { progress: number, animationTrigger: [number, number], onLoadComplete: () => void }) {
+export function Mb300slScroll({ progress$, animationTrigger, onLoadComplete }: { progress$: BehaviorSubject<number>, animationTrigger: [number, number], onLoadComplete: () => void }) {
   const carShowRef = useRef<{ controls: any }>(null);
   const [animate, setAnimate] = React.useState(true);
 
   useFrame(() => {
     const top = animationTrigger[0];
     const bottom = animationTrigger[1];
+    const progress = progress$.getValue();
     const relativeProgress = (progress - top) / (bottom - top);
     const rotationProgress = Math.max(-0.3 + relativeProgress, 0);
 

src/app/utils/useScroll.ts

@@ -1,7 +1,8 @@
-import { useState, useEffect, RefObject } from 'react';
+import { useEffect, RefObject, useRef } from 'react';
+import { BehaviorSubject } from 'rxjs';
 
 export const useScroll = (elementRef: RefObject<HTMLElement>) => {
-  const [offset, setOffset] = useState(0);
+  const scrollRef = useRef<BehaviorSubject<number>>(new BehaviorSubject(0));
 
   useEffect(() => {
     const element = elementRef.current;
@@ -12,7 +13,7 @@ export const useScroll = (elementRef: RefObject<HTMLElement>) => {
       const totalScrollHeight = element.scrollHeight - element.clientHeight;
       const offset = (scrollPosition / totalScrollHeight);
 
-      setOffset(offset);
+      scrollRef.current.next(offset);
     };
 
     element.addEventListener('scroll', handleScroll);
@@ -23,5 +24,5 @@ export const useScroll = (elementRef: RefObject<HTMLElement>) => {
     };
   }, [elementRef]);
 
-  return offset;
-}
+  return scrollRef.current;
+};