Colourise stats

src/Main.elm

@@ -650,22 +650,40 @@ viewKeyedCard model wasChosen { name, frontImage, backImage } =
         stats =
             Database.get name model.database
 
+        focusStat : Maybe ( String, Float )
         focusStat =
             case model.focusStat of
                 FocusALSA ->
-                    Maybe.map (Round.round 2) (Maybe.andThen Card.alsa stats)
+                    Maybe.map (\x -> ( Round.round 2 x, negate <| zscore x model.performanceDistributions.alsa ))
+                        (Maybe.andThen Card.alsa stats)
 
                 FocusALPA ->
-                    Maybe.map (Round.round 2) (Maybe.andThen Card.alpa stats)
+                    Maybe.map (\x -> ( Round.round 2 x, negate <| zscore x model.performanceDistributions.alpa ))
+                        (Maybe.andThen Card.alpa stats)
 
                 FocusGIHWR ->
-                    Maybe.map formatPercentage (Maybe.andThen Card.gihwr stats)
+                    Maybe.map (\x -> ( formatPercentage x, zscore x model.performanceDistributions.gihwr ))
+                        (Maybe.andThen Card.gihwr stats)
 
                 FocusPickRate ->
-                    Maybe.map (formatPercentage << Card.pickRate) stats
+                    Maybe.map
+                        (\x ->
+                            ( formatPercentage x, zscore x model.performanceDistributions.pickRate )
+                        )
+                        (Maybe.map Card.pickRate stats)
 
                 FocusIWD ->
-                    Maybe.map (Round.round 2) (Maybe.andThen Card.iwd stats)
+                    Maybe.map (\x -> ( Round.round 2 x, zscore x model.performanceDistributions.iwd ))
+                        (Maybe.andThen Card.iwd stats)
+
+        viewFocusStat : Maybe ( String, Float ) -> Html Msg
+        viewFocusStat stat =
+            case stat of
+                Just ( value, zscore ) ->
+                    span [ class <| "absolute top-0 left-0 px-1 py-1 shadow bg-" ++ characteriseZScore zscore ++ "-100" ] [ text value ]
+
+                Nothing ->
+                    span [ class "absolute top-0 left-0 bg-gray-100 px-2 shadow" ] [ text "?" ]
     in
     ( name
     , div
@@ -677,6 +695,6 @@ viewKeyedCard model wasChosen { name, frontImage, backImage } =
         , Events.onMouseEnter (Highlight name)
         ]
         [ img [ src frontImage, alt name ] []
-        , span [ class "absolute top-0 left-0 bg-green-100" ] [ text <| Maybe.withDefault "?" focusStat ]
+        , viewFocusStat focusStat
         ]
     )

tailwind.config.js

@@ -19,5 +19,10 @@ module.exports = {
         'bg-red-500',
         'bg-green-500',
         'bg-purple-500',
+        'bg-gray-100',
+        'bg-yellow-100',
+        'bg-red-100',
+        'bg-green-100',
+        'bg-purple-100',
     ]
 };