Add focus stat in card view

src/Card.elm

@@ -1,4 +1,4 @@
-module Card exposing (CardData, CardDetails, CardPerformanceData, CardType(..), ManaColor(..), Power(..), pickRate)
+module Card exposing (CardData, CardDetails, CardPerformanceData, CardType(..), ManaColor(..), Power(..), alpa, alsa, gihwr, pickRate)
 
 
 type ManaColor
@@ -61,3 +61,18 @@ pickRate card =
 
     else
         toFloat card.performance.totalTimesPicked / toFloat card.performance.totalTimesSeen
+
+
+alsa : CardData -> Maybe Float
+alsa card =
+    card.performance.averageSeenPosition
+
+
+alpa : CardData -> Maybe Float
+alpa card =
+    card.performance.averagePickPosition
+
+
+gihwr : CardData -> Maybe Float
+gihwr card =
+    card.performance.gameInHandWinRate

src/Main.elm

@@ -5,10 +5,9 @@ import Card exposing (CardData)
 import Database
 import Draft exposing (Draft)
 import Html exposing (Html, button, div, img, span, text)
-import Html.Attributes exposing (alt, attribute, class, classList, disabled, src)
+import Html.Attributes exposing (alt, class, classList, disabled, src)
 import Html.Events as Events exposing (onClick)
 import Html.Keyed as Keyed
-import Json.Decode exposing (decodeString)
 import Round
 import Zipper
 
@@ -27,11 +26,19 @@ type Model
     | Error ErrorModel
 
 
+type FocusStat
+    = FocusALSA
+    | FocusALPA
+    | FocusGIHWR
+    | FocusPickRate
+
+
 type alias ReadyModel =
     { draft : Draft
     , database : Database.Database
     , highlighted : Maybe Draft.PickCard
     , flipHighlighted : Bool
+    , focusStat : FocusStat
     }
 
 
@@ -49,6 +56,7 @@ init flags =
                 , database = database
                 , highlighted = Nothing
                 , flipHighlighted = False
+                , focusStat = FocusPickRate
                 }
             , Cmd.none
             )
@@ -68,6 +76,7 @@ type Msg
     | Decrement
     | Highlight Draft.PickCard
     | FlipHighlightedCard
+    | SetFocusStat FocusStat
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -93,6 +102,9 @@ update msg model =
                 FlipHighlightedCard ->
                     ( Ready { mdl | flipHighlighted = not mdl.flipHighlighted }, Cmd.none )
 
+                SetFocusStat stat ->
+                    ( Ready { mdl | focusStat = stat }, Cmd.none )
+
         Error mdl ->
             ( Error mdl, Cmd.none )
 
@@ -115,7 +127,7 @@ viewReady : ReadyModel -> Html Msg
 viewReady model =
     div [ class "grid grid-cols-12 gap-6 h-full bg-slate-100" ]
         [ viewSidebar model
-        , viewDraft model.draft
+        , viewDraft model
         , viewHighlightedCard model
         ]
 
@@ -143,21 +155,48 @@ viewError model =
         [ text model.error ]
 
 
-viewDraft : Draft -> Html Msg
-viewDraft draft =
+viewDraft : ReadyModel -> Html Msg
+viewDraft model =
     let
         chosen =
-            (Zipper.focus draft).chosen
+            (Zipper.focus model.draft).chosen
 
         picks =
-            List.map (\c -> viewKeyedCard (chosen.name == c.name) c)
-                (Zipper.focus draft).available
+            List.map (\c -> viewKeyedCard model (chosen.name == c.name) c)
+                (Zipper.focus model.draft).available
+
+        viewFocusStatButton s =
+            button
+                [ onClick (SetFocusStat s)
+                ]
+                [ text <|
+                    case s of
+                        FocusPickRate ->
+                            "Pick rate"
+
+                        FocusALPA ->
+                            "ALPA"
+
+                        FocusGIHWR ->
+                            "GIHWR"
+
+                        FocusALSA ->
+                            "ALSA"
+                ]
     in
     -- Making this a keyed node forces Elm to recreate each card when the card name changes,
     -- so the old image doesn't hang around during loading of the new card image
-    Keyed.node "div"
-        [ class "col-span-8 grid grid-cols-8 auto-rows-min gap-6 p-6" ]
-        picks
+    div [ class "flex flex-col space-between col-span-8 " ]
+        [ Keyed.node "div"
+            [ class "flex-grow grid grid-cols-8 auto-rows-min gap-6 p-6" ]
+            picks
+        , div []
+            [ viewFocusStatButton FocusPickRate
+            , viewFocusStatButton FocusALPA
+            , viewFocusStatButton FocusGIHWR
+            , viewFocusStatButton FocusALSA
+            ]
+        ]
 
 
 viewHighlightedCard : ReadyModel -> Html Msg
@@ -205,13 +244,13 @@ viewCardDetailedPerformance db { name } =
                     formatPercentage (Card.pickRate cardData)
               )
             , ( "GIHWR"
-              , Maybe.map formatPercentage cardData.performance.gameInHandWinRate
+              , Maybe.map formatPercentage (Card.gihwr cardData)
               )
             , ( "ALPA"
-              , Maybe.map (Round.round 2) cardData.performance.averagePickPosition
+              , Maybe.map (Round.round 2) (Card.alpa cardData)
               )
             , ( "ALSA"
-              , Maybe.map (Round.round 2) cardData.performance.averageSeenPosition
+              , Maybe.map (Round.round 2) (Card.alsa cardData)
               )
             ]
                 |> List.filterMap (\( label, value ) -> Maybe.map (\v -> ( label, v )) value)
@@ -234,14 +273,35 @@ viewCardDetailedPerformance db { name } =
             div [] [ text "Could not find card in database" ]
 
 
-viewKeyedCard : Bool -> Draft.PickCard -> ( String, Html Msg )
-viewKeyedCard wasChosen { name, frontImage, backImage } =
+viewKeyedCard : ReadyModel -> Bool -> Draft.PickCard -> ( String, Html Msg )
+viewKeyedCard model wasChosen { name, frontImage, backImage } =
+    let
+        stats =
+            Database.get name model.database
+
+        focusStat =
+            case model.focusStat of
+                FocusALSA ->
+                    Maybe.map (Round.round 2) (Maybe.andThen Card.alsa stats)
+
+                FocusALPA ->
+                    Maybe.map (Round.round 2) (Maybe.andThen Card.alpa stats)
+
+                FocusGIHWR ->
+                    Maybe.map formatPercentage (Maybe.andThen Card.gihwr stats)
+
+                FocusPickRate ->
+                    Maybe.map (formatPercentage << Card.pickRate) stats
+    in
     ( name
     , div
         [ classList
-            [ ( "border-4 border-green-500", wasChosen )
+            [ ( "relative", True )
+            , ( "border-4 border-green-500", wasChosen )
             ]
         , Events.onMouseEnter (Highlight { name = name, frontImage = frontImage, backImage = backImage })
         ]
-        [ img [ src frontImage, alt name ] [] ]
+        [ img [ src frontImage, alt name ] []
+        , span [ class "absolute top-0 left-0 bg-green-100" ] [ text <| Maybe.withDefault "?" focusStat ]
+        ]
     )