Aframe AR Map

The component flow for viewing and popping an Art Piece

Traces the flow of logic from loading ar.illust.space to seeing an ArtPiece in AR as a Mermaid Diagram

  sequenceDiagram;
    xr8.html ->> geo_arrow_element: render
    xr8.html ->> ground_element: render
    xr8.html ->> onboardingComponent: Opens on page load
    onboardingComponent ->> OnboardingScreen: render
    OnboardingScreen ->> PermissionsPanel: User clicks accept
    PermissionsPanel ->> PermissionsPanel: Grant camera
    PermissionsPanel ->> PermissionsPanel: Grant location
    PermissionsPanel ->> PermissionsPanel: Grant motion
    PermissionsPanel ->> OnboardingScreen: Permissions passed
    OnboardingScreen ->> cameraEl: Set camera position
    OnboardingScreen ->> xr8: Start World Tracking
    OnboardingScreen ->> geofencedModelComponent: enable
    OnboardingScreen ->> targetArtPieceComponent: enable & set geo-arrow reference
    GeofencedModelComponent ->> Firestore: watch AR Config
    GeofencedModelComponent ->> watchPieces: start piece watch
    watchPieces ->> Firestore: watch ArtPieces in active layer, and all layers
    geofencedModelComponent ->> captureComponent: Initialize with AR Config

    Note right of watchPieces: Art Piece Becomes Active
    watchPieces ->> watchPieces: set active piece and layer based on query params 
    watchPieces ->> geofencedModelComponent: Send updates of currently active piece
    geofencedModelComponent ->> targetArtPieceComponent: active ArtPiece & AR Config
    geofencedModelComponent ->> captureComponent: active ArtPiece & Ar Config
    captureComponent ->> CaptureWrapper: Render UI for PoPs, MiniMap
    targetArtPieceComponent ->> ArtPieceRenderer: Pre-load piece and set up the a new ThreeJS scene for the piece
    targetArtPieceComponent ->> NextPieceButton: Render
    targetArtPieceComponent ->> CaptureComponent: Show ArtPiece card
    CaptureComponent ->> ArtPieceCard: Show ArtPiece card
    NextPieceButton ->> watchPieces: On click, pick the next closest piece
    targetArtPieceComponent ->> xr8: Can switch camera direction
    targetArtPieceComponent ->> targetArtPieceComponent: Watch position
    
    Note right of targetArtPieceComponent: User is far from piece
    targetArtPieceComponent ->> geoArrowComponent: render the compass & associated UI
    targetArtPieceComponent ->> DistanceMessageWrapper: Show and update distance message
    ArtPieceRenderer ->> artPieceUiComponent: Update Far Art Piece

    Note right of targetArtPieceComponent: User is close to piece
    targetArtPieceComponent ->> ArtPieceRenderer: Show Piece
    ArtPieceRenderer ->> ground_element: Update size and show
    ArtPieceRenderer ->> artPieceUiComponent: Show Map
    artPieceUiComponent ->> captureComponent: Show Map
    captureComponent ->> CaptureWrapper: Show Map
    CaptureWrapper ->> MiniMap: Show Map
    CaptureWrapper ->> ShownArtPieceUi: Show PoP Button
    ShownArtPieceUi ->> PopManager: Show PoP Button
    targetArtPieceComponent --x DistanceMessageWrapper: Hide distance message