Add an info view.

src/CacheSim/View.elm

@@ -4,7 +4,7 @@ import CacheSim.Model exposing (..)
 import CacheSim.Cache exposing (..)
 import CacheSim.AccessView exposing (..)
 import CacheSim.Hierarchy exposing (..)
-import Html exposing (Html, Attribute, input, text, div, label, span, h2, h3, table, tr, td, th)
+import Html exposing (Html, Attribute, input, text, div, label, span, h2, h3, table, tr, td, th, p, h1)
 import Html.Attributes exposing (type_, class, value, for, classList, disabled, colspan, hidden)
 import Html.Events exposing (onInput, onClick)
 
@@ -178,7 +178,7 @@ viewAccessLog : AccessView -> Html Msg
 viewAccessLog (aes, ap) =
     let
         resultSpan r =
-            span [ classList [ ("badge", True), ("badge-danger", True), ("badge-success", r == Hit) ] ]
+            span [ classList [ ("badge", True), ("badge-success", r == Hit), ("badge-danger", r == Miss) ] ]
                 [ text <| if r == Hit then "Hit" else "Miss" ]
         downEvent n ae = div [ class "event" ]
             [ text <| "L" ++ String.fromInt (n + 1) ++ " "
@@ -213,6 +213,23 @@ viewAccessInput m =
             , accessButton 
             ]
 
+viewDescription : Html Msg
+viewDescription =
+    div []
+        [ h1 [] [ text "Cache simulator" ]
+        , p []
+            [ text <| "This is a simulator for testing various cache configurations for educational purposes. It allows for the creation of"
+                ++ " n-way associative caches, and their special cases (direct mapped and fully associative caches)."
+            ]
+        , p []
+            [ text <| "To use the simulator, first create a fitting cache configuration by using the \"Add level\" button,"
+                ++ " as well as the settings provided by each individual cache level. When the cache is correctly specified, and"
+                ++ " no warnings appear, click \"Use hierarchy\" to load the specified hierarchy and begin simulating. To simulate,"
+                ++ " type a block address into the \"Access address\" field, and click \"Access\". This will bring forward the simulation"
+                ++ " view, which will allow you to step through the steps of accessing a cache."
+            ]
+        ]
+
 viewBase : Model -> Html Msg
 viewBase m =
     let
@@ -230,4 +247,4 @@ viewBase m =
         accessInputView = [ viewAccessInput m ]
     in
         div [ class "container" ]
-            <| rawView ++ cacheView ++ accessView ++ accessInputView
+            <| [ viewDescription] ++ rawView ++ cacheView ++ accessView ++ accessInputView