feat: add scrolling

elm.json

@@ -6,7 +6,9 @@
       "elm-explorations/webgl": "1.1.3",
       "elm/browser": "1.0.2",
       "elm/core": "1.0.5",
+      "elm/html": "1.0.0",
       "elm/http": "2.0.0",
+      "elm/json": "1.1.3",
       "elm/time": "1.0.0",
       "ianmackenzie/elm-3d-camera": "3.1.0",
       "ianmackenzie/elm-3d-scene": "1.0.2",
@@ -14,14 +16,13 @@
       "ianmackenzie/elm-triangular-mesh": "1.1.0",
       "ianmackenzie/elm-units": "2.10.0",
       "mdgriffith/elm-ui": "1.1.8",
+      "rl-king/elm-scroll-to": "1.1.2",
       "w0rm/elm-obj-file": "1.2.1"
     },
     "indirect": {
       "elm-explorations/linear-algebra": "1.0.3",
       "elm/bytes": "1.0.8",
       "elm/file": "1.0.5",
-      "elm/html": "1.0.0",
-      "elm/json": "1.1.3",
       "elm/random": "1.0.0",
       "elm/url": "1.0.0",
       "elm/virtual-dom": "1.0.3",
@@ -29,7 +30,8 @@
       "ianmackenzie/elm-float-extra": "1.1.0",
       "ianmackenzie/elm-geometry-linear-algebra-interop": "2.0.2",
       "ianmackenzie/elm-interval": "3.1.0",
-      "ianmackenzie/elm-units-interval": "3.2.0"
+      "ianmackenzie/elm-units-interval": "3.2.0",
+      "tad-lispy/springs": "1.0.5"
     }
   },
   "elm-version": "0.19.1",

flake.lock

@@ -88,11 +88,11 @@
         "nixpkgs": "nixpkgs"
       },
       "locked": {
-        "lastModified": 1738459463,
+        "lastModified": 1739064336,
-        "narHash": "sha256-QBYK7boMjAAXFySEK9jEpQAhhe5vXkC9UI2fvQipadk=",
+        "narHash": "sha256-LTZznyurm9WWchG3uPH+8Sf5hkzZyHoa9FvDW0cLk0M=",
         "owner": "jeslie0",
         "repo": "mkElmDerivation",
-        "rev": "e86ad254296f6861dedfc3cc303dd3b530535fd6",
+        "rev": "2d5f1acc6da7e6d5deeff5c9f47729a671ab8f9a",
         "type": "github"
       },
       "original": {

src/Main.elm

@@ -13,7 +13,9 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Element.Input exposing (button)
+import Html.Attributes
 import Http
+import Json.Decode as Decode
 import Length
 import Obj.Decode
 import Pixels
@@ -21,6 +23,7 @@ import Point3d exposing (Point3d)
 import Scene3d exposing (Entity)
 import Scene3d.Material as Material
 import Scene3d.Mesh as Mesh
+import Scroll exposing (scrollTo)
 import Simple.Animation as Animation exposing (Animation)
 import Simple.Animation.Animated as Animated
 import Simple.Animation.Property as P
@@ -69,7 +72,7 @@ main =
 
 
 type alias Model =
-    { w : Int, h : Int, mesh : Maybe Object3d, textures : Maybe (Material.Textured Obj.Decode.ObjCoordinates), angle : Float }
+    { w : Int, h : Int, last : String, mesh : Maybe Object3d, textures : Maybe (Material.Textured Obj.Decode.ObjCoordinates), angle : Float }
 
 
 type alias Flags =
@@ -82,7 +85,7 @@ init flags =
         ( width, height ) =
             flags
     in
-    ( { w = width, h = height, mesh = Nothing, textures = Nothing, angle = 0 }, Cmd.batch [ getMesh, getTexture ] )
+    ( { w = width, h = height, last = "", mesh = Nothing, textures = Nothing, angle = 0 }, Cmd.batch [ getMesh, getTexture ] )
 
 
 type alias Object3d =
@@ -95,6 +98,8 @@ type Msg
     | GotTexture (Result WebGL.Texture.Error (Material.Texture Color.Color))
     | Rotate Time.Posix
     | Copy String
+    | Key String
+    | Scroll String
 
 
 modulo : Float -> Float -> Float
@@ -148,11 +153,23 @@ update msg model =
         Copy text ->
             ( model, copyToClipboard text )
 
+        Key key ->
+            ( { model | last = key }, Cmd.none )
+
+        Scroll loc ->
+            ( model, scrollTo loc )
+
+
+keyDecoder : Decode.Decoder String
+keyDecoder =
+    Decode.field "key" Decode.string
+
 
 subscribe : Model -> Sub Msg
 subscribe _ =
     Sub.batch
         [ Events.onResize Resize
+        , Events.onKeyPress (Decode.map Key keyDecoder)
         , Time.every (1000 / 30) Rotate
         ]
 
@@ -271,7 +288,7 @@ pageText model =
     , width (vw2px model 50)
     , height (vh2px model 100)
     , paddingEach
-        { top = vh2pt model 50 - 96
+        { top = vh2pt model 50 - 96 * 2
         , bottom = 0
         , left = vw2pt model 10
         , right = 0
@@ -290,6 +307,11 @@ inlineLink disp addr =
         }
 
 
+id : String -> Element.Attribute msg
+id =
+    Html.Attributes.id >> Element.htmlAttribute
+
+
 view : Model -> Browser.Document Msg
 view model =
     { title = "MacGregor House"
@@ -302,6 +324,7 @@ view model =
                     [ width fill
                     , height fill
                     , spacing (vh2pt model -100)
+                    , id "zero"
                     ]
                     [ el
                         [ width fill
@@ -342,7 +365,8 @@ view model =
                             , row
                                 [ spacing 20
                                 ]
-                                [ linkBtn "Events" "https://calendar.google.com/calendar/embed?src=c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com&ctz=America%2FNew_York"
+                                [ btn "↓" (Scroll "one")
+                                , linkBtn "Events" "https://calendar.google.com/calendar/embed?src=c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com&ctz=America%2FNew_York"
                                 , linkBtn "Space" "https://forms.gle/KxFAG65TQuPxdYak8"
                                 , btn "iCal" (Copy "https://calendar.google.com/calendar/ical/c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com/public/basic.ics")
                                 ]
@@ -363,13 +387,19 @@ view model =
                         (view3D model)
                     ]
                 , column
-                    (page model)
+                    (page model ++ [ id "one" ])
                     [ image (fullImage model)
                         { src = "../assets/img/tall.jpg"
                         , description = "the imposing macgregor superstructure stands tall in defiance of strong winds"
                         }
                     , column (pageText model)
-                        [ paragraph subheading [ text "The tallest undergraduate dormitory." ]
+                        [ row [ spacing 10 ]
+                            [ btn "↑" (Scroll "zero")
+                            , btn "↓" (Scroll "two")
+                            ]
+                        , paragraph
+                            subheading
+                            [ text "The tallest undergraduate dormitory." ]
                         , paragraph bodyText
                             [ text "Enrico Fermi once said, \"Before I came here I was confused about this subject. Having listened to your lecture, I am still confused, but on a higher level.\" "
                             , inlineLink "Pietro Belluschi" "https://listart.mit.edu/art-artists/macgregor-house-1970"
@@ -378,39 +408,51 @@ view model =
                         ]
                     ]
                 , column
-                    (page model)
+                    (page model ++ [ id "two" ])
                     [ image (fullImage model)
                         { src = "../assets/img/view.jpg"
                         , description = "the macgregor pov just hits different"
                         }
                     , column (pageText model)
-                        [ paragraph subheading [ text "Stunning vistas are just the beginning." ]
+                        [ row [ spacing 10 ]
+                            [ btn "↑" (Scroll "one")
+                            , btn "↓" (Scroll "three")
+                            ]
+                        , paragraph subheading [ text "Stunning vistas are just the beginning." ]
                         , paragraph bodyText
                             [ text "A view from MacGregor is like looking down on Earth from the stars. MacGregor's prime waterfront real estate offers breathtaking views of the Charles and the Boston skyline beyond."
                             ]
                         ]
                     ]
                 , column
-                    (page model)
+                    (page model ++ [ id "three" ])
                     [ image (fullImage model)
                         { src = "../assets/img/free.jpg"
                         , description = "macgregor is often seen as the gateway to new worlds, especially briggs field"
                         }
                     , column (pageText model)
-                        [ paragraph subheading [ text "Free as in freedom." ]
+                        [ row [ spacing 10 ]
+                            [ btn "↑" (Scroll "two")
+                            , btn "↓" (Scroll "four")
+                            ]
+                        , paragraph subheading [ text "Free as in freedom." ]
                         , paragraph bodyText
                             [ text "This website's source code and infrastructure, the ability to cook, your choice of living community and room assignments—they operate in the public interest of all MacGregorites. You won't get this freedom at many other undergraduate dormitories at MIT."
                             ]
                         ]
                     ]
                 , column
-                    (page model)
+                    (page model ++ [ id "four" ])
                     [ image (fullImage model)
                         { src = "../assets/img/location.jpg"
                         , description = "the bright lights of the macgregor high rise shine down upon the glossy snow-covered surface of briggs field"
                         }
                     , column (pageText model)
-                        [ paragraph subheading [ text "Nestled between Kendall and Cambridgeport." ]
+                        [ row [ spacing 10 ]
+                            [ btn "↑" (Scroll "three")
+                            , btn "↓" (Scroll "five")
+                            ]
+                        , paragraph subheading [ text "Nestled between Kendall and Cambridgeport." ]
                         , paragraph bodyText
                             [ text "Between "
                             , inlineLink "the innovative spirit of Kendall" "https://kendallsquare.org/kendalls-history-orientation/"
@@ -419,26 +461,34 @@ view model =
                         ]
                     ]
                 , column
-                    (page model)
+                    (page model ++ [ id "five" ])
                     [ image (fullImage model)
                         { src = "../assets/img/brick.jpg"
                         , description = "multicolored bricks shine in the limelight of macgregorian festivities"
                         }
                     , column (pageText model)
-                        [ paragraph subheading [ text "We like the ", el [ Font.bold, Font.size 96 ] (text "brick"), text "." ]
+                        [ row [ spacing 10 ]
+                            [ btn "↑" (Scroll "four")
+                            , btn "↓" (Scroll "six")
+                            ]
+                        , paragraph subheading [ text "We like the ", el [ Font.bold, Font.size 96 ] (text "brick"), text "." ]
                         , paragraph bodyText
                             [ text "The bricks are everywhere—by far the most recognizable feature of MacGregor. You'll find them protecting the building's exterior from harsh Bostonian winters, lining its fabled corridors, and in your room, as much an architectural statement as they are a testament to the people of MacGregor."
                             ]
                         ]
                     ]
                 , column
-                    (page model)
+                    (page model ++ [ id "six" ])
                     [ image (fullImage model)
                         { src = "../assets/img/belong.jpg"
                         , description = "the cultural murals of macgregor breathe life into its ancient pedestrian thoroughfares"
                         }
                     , column (pageText model)
-                        [ paragraph subheading [ text "You belong here." ]
+                        [ row [ spacing 10 ]
+                            [ btn "↑" (Scroll "five")
+                            , btn "Top" (Scroll "zero")
+                            ]
+                        , paragraph subheading [ text "You belong here." ]
                         , paragraph bodyText
                             [ text "MacGregor's greatness is the greatness of its people. Living in MacGregor inevitably connects you to its people and its culture—one of the most diverse, unique, and historic of any MIT dorm—spanning nine entries, countless murals and traditions, and a couple hundred current residents."
                             ]

src/Scroll.elm

@@ -0,0 +1,4 @@
+port module Scroll exposing (scrollTo)
+
+
+port scrollTo : String -> Cmd msg

src/index.html

@@ -27,6 +27,13 @@
         document.execCommand("copy");
         document.body.removeChild(textArea);
       });
+
+      app.ports.scrollTo.subscribe((id) => {
+        let element = document.getElementById(id);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth" });
+        }
+      });
     </script>
   </body>
 </html>