Show card stats

elm.json

@@ -10,7 +10,8 @@
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
-            "elm/json": "1.1.3"
+            "elm/json": "1.1.3",
+            "myrho/elm-round": "1.0.5"
         },
         "indirect": {
             "elm/time": "1.0.0",

src/Card.elm

@@ -0,0 +1,63 @@
+module Card exposing (CardData, CardDetails, CardPerformanceData, CardType(..), ManaColor(..), Power(..), pickRate)
+
+
+type ManaColor
+    = Red
+    | Blue
+    | Green
+    | White
+    | Black
+    | Colorless
+
+
+type CardType
+    = Creature
+    | Instant
+    | Sorcery
+    | Enchantment
+    | Artifact
+    | Planeswalker
+    | Land
+    | Other
+
+
+type Power
+    = ConstantPower Int
+    | VariablePower
+
+
+type alias CardData =
+    { details : CardDetails
+    , performance : CardPerformanceData
+    }
+
+
+type alias CardDetails =
+    { cmc : Int
+    , cardType : CardType
+    , typeLine : String
+    , oracleText : String
+    , power : Maybe Power
+    , toughness : Maybe Power
+    , colors : List ManaColor
+
+    --, manaCost : List ManaColor
+    }
+
+
+type alias CardPerformanceData =
+    { totalTimesSeen : Int
+    , totalTimesPicked : Int
+    , averagePickPosition : Maybe Float
+    , averageSeenPosition : Maybe Float
+    , gameInHandWinRate : Maybe Float
+    }
+
+
+pickRate : CardData -> Float
+pickRate card =
+    if card.performance.totalTimesSeen == 0 then
+        0
+
+    else
+        toFloat card.performance.totalTimesPicked / toFloat card.performance.totalTimesSeen

src/Database.elm

@@ -1,5 +1,6 @@
-module Database exposing (Database, decode)
+module Database exposing (Database, decode, get)
 
+import Card exposing (CardData, CardDetails, CardPerformanceData, CardType(..), ManaColor(..), Power(..))
 import Dict exposing (Dict)
 import Json.Decode as Decode exposing (Decoder, decodeString)
 import Json.Decode.Pipeline exposing (optional, required)
@@ -10,57 +11,9 @@ type Database
     = Database (Dict String CardData)
 
 
-type ManaColor
-    = Red
-    | Blue
-    | Green
-    | White
-    | Black
-    | Colorless
-
-
-type CardType
-    = Creature
-    | Instant
-    | Sorcery
-    | Enchantment
-    | Artifact
-    | Planeswalker
-    | Land
-    | Other
-
-
-type Power
-    = ConstantPower Int
-    | VariablePower
-
-
-type alias CardData =
-    { details : CardDetails
-    , performance : CardPerformanceData
-    }
-
-
-type alias CardDetails =
-    { cmc : Int
-    , cardType : CardType
-    , typeLine : String
-    , oracleText : String
-    , power : Maybe Power
-    , toughness : Maybe Power
-    , colors : List ManaColor
-
-    --, manaCost : List ManaColor
-    }
-
-
-type alias CardPerformanceData =
-    { totalTimesSeen : Int
-    , totalTimesPicked : Int
-    , averagePickPosition : Maybe Float
-    , averageSeenPosition : Maybe Float
-    , gameInHandWinRate : Maybe Float
-    }
+get : String -> Database -> Maybe CardData
+get name (Database db) =
+    Dict.get name db
 
 
 decode : String -> String -> Result String Database

src/Main.elm

@@ -1,6 +1,7 @@
 module Main exposing (..)
 
 import Browser exposing (Document)
+import Card exposing (CardData)
 import Database
 import Draft exposing (Draft)
 import Html exposing (Html, button, div, img, span, text)
@@ -8,6 +9,7 @@ import Html.Attributes exposing (alt, attribute, 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
 
 
@@ -162,25 +164,76 @@ viewHighlightedCard : ReadyModel -> Html Msg
 viewHighlightedCard model =
     div [ class "col-span-2 shadow-xl bg-slate-600 p-6" ]
         [ case model.highlighted of
-            Just { name, frontImage, backImage } ->
+            Just highlighted ->
                 let
                     url =
-                        case ( model.flipHighlighted, backImage ) of
+                        case ( model.flipHighlighted, highlighted.backImage ) of
                             ( True, Just backUrl ) ->
                                 backUrl
 
                             _ ->
-                                frontImage
+                                highlighted.frontImage
                 in
                 div
-                    [ onClick FlipHighlightedCard ]
-                    [ img [ src url, alt name ] [] ]
+                    []
+                    [ img
+                        [ src url
+                        , alt highlighted.name
+                        , onClick FlipHighlightedCard
+                        ]
+                        []
+                    , viewCardDetailedPerformance model.database highlighted
+                    ]
 
             Nothing ->
                 div [] []
         ]
 
 
+formatPercentage : Float -> String
+formatPercentage value =
+    Round.round 2 (value * 100) ++ "%"
+
+
+viewCardDetailedPerformance : Database.Database -> Draft.PickCard -> Html Msg
+viewCardDetailedPerformance db { name } =
+    let
+        makeCardFacts : CardData -> List ( String, String )
+        makeCardFacts cardData =
+            [ ( "Pick rate"
+              , Just <|
+                    formatPercentage (Card.pickRate cardData)
+              )
+            , ( "GIHWR"
+              , Maybe.map formatPercentage cardData.performance.gameInHandWinRate
+              )
+            , ( "ALPA"
+              , Maybe.map (Round.round 2) cardData.performance.averagePickPosition
+              )
+            , ( "ALSA"
+              , Maybe.map (Round.round 2) cardData.performance.averageSeenPosition
+              )
+            ]
+                |> List.filterMap (\( label, value ) -> Maybe.map (\v -> ( label, v )) value)
+
+        viewFact : ( String, String ) -> Html Msg
+        viewFact ( label, value ) =
+            div
+                [ class "" ]
+                [ div [] [ text label ]
+                , div [] [ text value ]
+                ]
+    in
+    case Database.get name db of
+        Just cardData ->
+            div
+                [ class "" ]
+                (List.map viewFact (makeCardFacts cardData))
+
+        Nothing ->
+            div [] [ text "Could not find card in database" ]
+
+
 viewKeyedCard : Bool -> Draft.PickCard -> ( String, Html Msg )
 viewKeyedCard wasChosen { name, frontImage, backImage } =
     ( name