Update the visuals a litte

src/CacheSim/View.elm

@@ -123,7 +123,7 @@ viewCacheHierarchy ch =
             <| List.indexedMap viewCache ch
     in
     div [ class "cache-hierarchy" ] <|
-        [ h2 [] [ text <| "Cache hierarchy" ]
+        [ h2 [] [ text <| "Cache State" ]
         , levels
         ]
         
@@ -154,7 +154,7 @@ viewAccessLog (aes, ap) =
             , resultSpan ae.result
             ]
         upEvent n ae = div [ class "event" ]
-            [ text <| "Updated L" ++ String.fromInt (n + 1)
+            [ text <| "Updated L" ++ String.fromInt (List.length aes - n)
             ]
         events = 
             case ap of
@@ -177,18 +177,27 @@ viewAccessInput m =
                 Nothing -> optionalButton False "Access address" (Access -1)
     in
         div [ class "access-input" ]
-            [ labeledInput "Access address" m.accessInput ChangeAccessInput
+            [ h2 [] [ text "Run access simulation" ]
+            , div [ class "note" ]
+                [ text  "Please make sure to click \"Use Hierarchy\" to load a hierarchy to simulate."
+                ]
+            , labeledInput "Access address" m.accessInput ChangeAccessInput
             , accessButton 
             ]
 
 viewError : Bool -> String -> Html Msg
-viewError hide e = span [ classList [ ("hidden", hide) ] ] [ text e ]
+viewError hide e = div [ classList [ ("hidden", hide), ("error", True) ] ] [ text e ]
 
 viewBase : Model -> Html Msg
 viewBase m =
     let
         rawView = viewRawCacheModelHierarchy m.rawHierarchy
-        cacheView = Maybe.withDefault [] <| Maybe.map (List.singleton << viewCacheHierarchy) <| m.hierarchy
+        cacheView =
+            case m.accessView of
+                Nothing ->
+                    Maybe.withDefault []
+                        <| Maybe.map (List.singleton << viewCacheHierarchy) <| m.hierarchy
+                Just _ -> []
         accessView = Maybe.withDefault [] <| Maybe.map (List.singleton << viewAccessView m) <| m.accessView
         accessInputView = [ viewAccessInput m ]
     in

static/scss/style.scss

@@ -1,5 +1,128 @@
 @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
+$primary-color: lighten(#26c176, 30%);
 
 body {
     font-family: Raleway, serif;
 }
+
+h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+
+.hidden {
+    display: none;
+}
+
+.input-group {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+
+    span {
+        margin-right: 10px;
+    }
+
+    input {
+        flex-grow: 1;
+    }
+}
+
+input[type="text"] {
+    padding: 5px;
+    border-radius: 5px;
+    border: none;
+    background-color: #efefef;
+
+    &:active, &:focus {
+        background-color: $primary-color;
+        transition: .25s;
+    }
+}
+
+.error {
+    box-sizing: border-box;
+    padding: 5px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    border: 2px solid tomato;
+    color: tomato;
+}
+
+.note {
+    box-sizing: border-box;
+    padding: 5px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+span.success {
+    margin-left: 10px;
+    color: green;
+}
+
+span.failure {
+    margin-left: 10px;
+    color: tomato;
+}
+
+button, input[type="button"] {
+    box-sizing: border-box;
+    border: none;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    display: inline-block;
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 14px;
+
+    &:hover, &:focus {
+        background-color: $primary-color;
+        transition: .25s;
+
+        &:disabled {
+            background-color: lightgrey;
+        }
+    }
+
+}
+
+.cache-model-levels {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.cache-model {
+    max-width: 600px;
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid lightgrey;
+    margin: 5px;
+}
+
+.cache, .cache-model {
+    padding: 10px;
+    border-radius: 5px;
+    border: 2px solid lightgrey;
+    margin: 5px;
+}
+
+.cache-model-hierarchy, .cache-hierarchy, .access-input {
+    margin-bottom: 10px;
+}
+
+table {
+    width: 100%;
+}
+
+tr {
+    &:nth-child(1), &:nth-child(3) {
+        background-color: $primary-color;
+    }
+}
+
+td {
+    text-align: center;
+    padding: 3px;
+}