(green) fill out mockup some more, work on CSS for it.

main.sass

@@ -1,3 +1,5 @@
+$limegreen: #32CD32
+
 // CSS resets per Kevin Powell
 
 *, *::before, *::after
@@ -149,6 +151,11 @@ ul
     flex: 1
     align-self: stretch
 
+.bordered
+    border: thin solid black
+    padding: 2px
+    margin: 2px
+
 .mainPage // page styling for most pages in ShiningSword: display a basic layout with a header, some data items and links
     @extend .fadeIn
     @extend .hasMargins
@@ -168,6 +175,16 @@ table
 .mediumLow
     background-color: yellow
 
-$limegreen: #32CD32
 .enough
-    background-color: $limegreen
+    background-color: $limegreen
+
+.playground-frame
+    display: grid
+    grid-template-columns: minmax(auto, 30%) auto
+    > *
+        grid-column: 1
+    .sidebar-right
+        grid-column: 2
+        grid-row: 1/-1
+    .fullWidth
+        grid-column: 1/-1

src/UI/CommonUI.fs

@@ -38,20 +38,23 @@ type React =
     static member toJsx (element: ReactElement) = element |> unbox<Fable.Core.JSX.Element>
 
 type 'row TableColumn = { header: string; cell: 'row -> ReactElement }
-let table (headers: _ TableColumn list) bodyRows =
+let table attributes (headers: _ TableColumn list) bodyRows =
     Html.table [
-        Html.thead [
-            Html.tr [
-                for header in headers do
-                    Html.th [ Html.text header.header ]
-                ]
-            ]
-        Html.tbody [
-            for row in bodyRows do
+        yield! attributes
+        prop.children [
+            Html.thead [
                 Html.tr [
                     for header in headers do
-                        Html.td [ header.cell row ]
+                        Html.th [ Html.text header.header ]
                     ]
+                ]
+            Html.tbody [
+                for row in bodyRows do
+                    Html.tr [
+                        for header in headers do
+                            Html.td [ header.cell row ]
+                        ]
+                ]
             ]
         ]
 

src/UI/Ribbit/RibbitPlaygroundView.fs

@@ -48,19 +48,36 @@ open Impl
 [<ReactComponent>]
 let View() =
     let model dispatch = React.useElmishSimple init update
-    class' "scrollParent" Html.div [
+    Html.div [
         srcLink
-        table [
-            text "Name"
-            numeric "HP"
-            numeric "SP"
-            numeric "AC"
-            textWithDefault "Status" "OK"
-            ] data
-        class' "scrollable" Html.div [
-            Html.div "Rath's HP are now 14"
-            Html.div "Delsenora casts Fireball!"
-            Html.div "Wild Boar attacks Rath!"
+        class' "playground-frame" Html.div [
+            Svg.svg [
+                svg.viewBox (0,0,100,100)
+                svg.children [
+                    Svg.rect [svg.x 0; svg.y 0; svg.height 200; svg.width 200; svg.fill "pink"]
+                    Svg.title [svg.text "Battle view"]
+                    Svg.text [svg.text "Battle view"; svg.x 5; svg.y 20]
+                    Svg.circle [svg.r 8; svg.cx 43; svg.cy 50; svg.fill "red"]
+                    Svg.circle [svg.r 8; svg.cx 50; svg.cy 65; svg.fill "green"]
+                    Svg.circle [svg.r 12; svg.cx 22; svg.cy 43; svg.fill "lightgreen"]
+                    ]
+                ]
+            class' "fullWidth" Html.div [
+                table []
+                    [
+                    text "Name"
+                    numeric "HP"
+                    numeric "SP"
+                    numeric "AC"
+                    textWithDefault "Status" "OK"
+                    ] data
+                ]
+            class' "bordered sidebar-right" Html.div [
+                Html.h2 "Log"
+                Html.div "Rath's HP are now 14"
+                Html.div "Delsenora casts Fireball!"
+                Html.div "Wild Boar attacks Rath!"
+                ]
+            Html.input [prop.placeholder "Enter a command"]
             ]
-        Html.input [prop.placeholder "Enter a command"]
         ]