Implement chapter 3: random picture selection

src/PhotoGroove.elm

@@ -2,19 +2,29 @@ module PhotoGroove exposing (main)
 
 import Array exposing (Array)
 import Browser
-import Html exposing (Html, button, div, h1, img, text)
+import Html exposing (Html, button, div, h1, h3, img, input, label, text)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
+import Random
 
 
 type alias Model =
-    { photos : List Photo, selectedUrl : String }
+    { photos : List Photo
+    , selectedUrl : String
+    , chosenSize : ThumbnailSize
+    }
 
 
 type alias Photo =
     { url : String }
 
 
+type ThumbnailSize
+    = Small
+    | Medium
+    | Large
+
+
 initialModel : Model
 initialModel =
     { photos =
@@ -23,20 +33,42 @@ initialModel =
         , { url = "3.jpeg" }
         ]
     , selectedUrl = "1.jpeg"
+    , chosenSize = Large
     }
 
 
+getPhotoUrl : Int -> String
+getPhotoUrl id =
+    case Array.get id photoArray of
+        Just photo ->
+            photo.url
+
+        Nothing ->
+            ""
+
+
 photoArray : Array Photo
 photoArray =
     Array.fromList initialModel.photos
 
 
+randomPhotoPicker : Random.Generator Int
+randomPhotoPicker =
+    Random.int 0 (Array.length photoArray - 1)
+
+
 view : Model -> Html Message
 view model =
     div [ class "content" ]
         [ h1 [] [ text "Photo Groove" ]
         , button [ onClick ClickedSurpriseMe ] [ text "Surprise me!" ]
-        , div [ id "thumbnails" ]
+        , h3 [] [ text "Thumbnail Size:" ]
+        , div [ id "choose-size" ]
+            (List.map viewSizeChooser [ Small, Medium, Large ])
+        , div
+            [ id "thumbnails"
+            , class (sizeToClass model.chosenSize)
+            ]
             (List.map (viewThumbnail model.selectedUrl) model.photos)
         , img [ class "large", src (urlPrefix ++ "large/" ++ model.selectedUrl) ] []
         ]
@@ -52,19 +84,66 @@ viewThumbnail selectedUrl thumb =
         []
 
 
+viewSizeChooser : ThumbnailSize -> Html Message
+viewSizeChooser size =
+    label []
+        [ input
+            [ type_ "radio"
+            , name "size"
+            , onClick (ClickedSize size)
+            ]
+            []
+        , text (sizeToString size)
+        ]
+
+
+sizeToString : ThumbnailSize -> String
+sizeToString size =
+    case size of
+        Small ->
+            "small"
+
+        Medium ->
+            "medium"
+
+        Large ->
+            "large"
+
+
+sizeToClass : ThumbnailSize -> String
+sizeToClass size =
+    case size of
+        Small ->
+            "small"
+
+        Medium ->
+            "med"
+
+        Large ->
+            "large"
+
+
 type Message
     = ClickedThumbnail String
     | ClickedSurpriseMe
+    | ClickedSize ThumbnailSize
+    | GotSelectedIndex Int
 
 
-update : Message -> Model -> Model
+update : Message -> Model -> ( Model, Cmd Message )
 update msg model =
     case msg of
         ClickedThumbnail thumb ->
-            { model | selectedUrl = thumb }
+            ( { model | selectedUrl = thumb }, Cmd.none )
 
         ClickedSurpriseMe ->
-            { model | selectedUrl = "2.jpeg" }
+            ( model, Random.generate GotSelectedIndex randomPhotoPicker )
+
+        ClickedSize size ->
+            ( { model | chosenSize = size }, Cmd.none )
+
+        GotSelectedIndex idx ->
+            ( { model | selectedUrl = getPhotoUrl idx }, Cmd.none )
 
 
 urlPrefix : String
@@ -74,8 +153,9 @@ urlPrefix =
 
 main : Program () Model Message
 main =
-    Browser.sandbox
-        { init = initialModel
+    Browser.element
+        { init = \_ -> ( initialModel, Cmd.none )
+        , subscriptions = \_ -> Sub.none
         , view = view
         , update = update
         }