Add proper styling to usernames.

src/Scylla/Fnv.elm

@@ -0,0 +1,9 @@
+module Scylla.Fnv exposing (..)
+import Bitwise
+
+hash : String -> Int
+hash = String.foldl hashChar 2166136261
+
+hashChar : Char -> Int -> Int
+hashChar char h = modBy 4294967295
+    <| (Bitwise.xor h <| Char.toCode char) * 16777619

src/Scylla/Views.elm

@@ -2,13 +2,30 @@ module Scylla.Views exposing (..)
 import Scylla.Model exposing (..)
 import Scylla.Sync exposing (..)
 import Scylla.Route exposing (..)
+import Scylla.Fnv as Fnv
 import Url.Builder
 import Json.Decode as Decode
-import Html exposing (Html, div, input, text, button, div, span, a, h2)
-import Html.Attributes exposing (type_, value, href, class)
+import Html exposing (Html, div, input, text, button, div, span, a, h2, table, td, tr)
+import Html.Attributes exposing (type_, value, href, class, style)
 import Html.Events exposing (onInput, onClick)
 import Dict
 
+stringColor : String -> String
+stringColor s = 
+    let
+        hue = String.fromFloat <| (toFloat (Fnv.hash s)) / 4294967296 * 360
+    in
+        "hsl(" ++ hue ++ ", 82%, 71%)"
+
+senderName : String -> String
+senderName s =
+    let
+        colonIndex = Maybe.withDefault -1 
+            <| List.head
+            <| String.indexes ":" s
+    in
+        String.slice 1 colonIndex s
+
 viewFull : Model -> List (Html Msg)
 viewFull model = 
     let
@@ -91,12 +108,25 @@ joinedRoomView m roomId jr =
             ]
 
 eventWrapperView : Model -> List (Html Msg) -> Html Msg
-eventWrapperView m = div []
+eventWrapperView m = table [ class "events-wrapper" ]
 
 eventView : Model -> RoomEvent -> Maybe (Html Msg)
-eventView m re = case re.type_ of
-    "m.room.message" -> messageView m re
-    _ -> Nothing
+eventView m re = 
+    let
+        viewFunction = case re.type_ of
+            "m.room.message" -> Just messageView
+            _ -> Nothing
+        createRow mhtml = tr []
+            [ td [] [ eventSenderView re.sender ]
+            , td [] [ mhtml ]
+            ]
+    in
+        Maybe.map createRow
+            <| Maybe.andThen (\f -> f m re) viewFunction
+
+eventSenderView : String -> Html Msg
+eventSenderView s =
+    span [ style "background-color" <| stringColor s, class "sender-wrapper" ] [ text <| senderName s ]
 
 messageView : Model -> RoomEvent -> Maybe (Html Msg)
 messageView m re =
@@ -111,9 +141,6 @@ messageTextView : Model -> RoomEvent -> Maybe (Html Msg)
 messageTextView m re =
     let
         body = Decode.decodeValue (Decode.field "body" Decode.string) re.content
-        wrap mtext = div []
-            [ span [] [ text re.sender ]
-            , span [] [ text mtext ]
-            ]
+        wrap mtext = span [] [ text mtext ]
     in
         Maybe.map wrap <| Result.toMaybe body

static/scss/style.scss

@@ -118,3 +118,16 @@ div.message-wrapper {
         margin: 3px;
     }
 }
+
+table.events-wrapper {
+    td {
+        padding-left: 5px;
+    }
+}
+
+span.sender-wrapper {
+    border-radius: 2px;
+    padding-left: 5px;
+    padding-right: 5px;
+    float: right;
+}