add wwyd text answers (I hate CSS edition)

css/wwyd.css

@@ -40,7 +40,7 @@
     flex-direction: column;
     justify-content: center;
     margin: auto;
-    max-width: fit-content;
+    max-width: min-content;
     padding-top: 1rem;
     padding-bottom: 1rem;
     font-size: 1.125rem;
@@ -95,4 +95,22 @@
 
 .wwyd-answer>*+* {
     margin-left: 1rem;
+}
+
+.wwyd-comment {
+    display: inline-block;
+    white-space: pre-wrap;
+    line-height: 200%;
+}
+
+.wwyd-comment .tile {
+    width: 1.5rem;
+    height: 2.2rem;
+    padding: 0.1rem;
+    border-radius: 0.25rem;
+}
+
+.wwyd-comment .tile-group {
+    display: inline-block;
+    margin: 0.15rem;
 }

js/wwyd.js

@@ -15,7 +15,9 @@ function Tile(props) {
   const onClick = props.onClick ? () => props.onClick(props.tile) : thunk
   const selectedTileClass = props.selected ? "tile-selected" : ""
 
-  return h("div", { title: props.tile, onClick: onClick },
+  // for some reason the tile will appear on a separate line when it's a div
+  // I don't understand why, so it's a span now
+  return h("span", { title: props.tile, onClick: onClick },
     h("svg", { class: c("tile", selectedTileClass), fill: "" },
       h("use", { href: `/others/tiles.svg#${props.tile}` })
     )
@@ -47,6 +49,24 @@ function Hand(props) {
   ])
 }
 
+function Comment(props) {
+  if (typeof props.choice != "string") {
+    return ""
+  }
+
+  let comment_blocks = props.comment.map(chunk => {
+    if (typeof chunk == "string") {
+      return h("span", null, chunk)
+    } else if (chunk[0] == "<b>") {
+      return h("strong", null, chunk[1])
+    } else {
+      return h(TileGroup, {tiles: chunk})
+    }
+  })
+
+  return h("span", { class: "wwyd-comment" }, comment_blocks)
+}
+
 function Choice(props) {
   if (typeof props.choice != "string") {
     return ""
@@ -127,7 +147,8 @@ class App extends Component {
           ]),
         ]),
         h(Hand, { onClick: this.state.choice ? thunk : this.chooseDiscard, choice: this.state.choice, tiles: this.state.wwyd.hand, draw: this.state.wwyd.draw }),
-        h(Choice, { choice: this.state.choice, answer: this.state.wwyd.answer })
+        h(Choice, { choice: this.state.choice, answer: this.state.wwyd.answer }),
+        h(Comment, { choice: this.state.choice, comment: this.state.wwyd.comment })
       ]
     } else {
       return [