Improve tooltip (#7354)

* Improve tooltip and language

* Remove console.log

app/css/bootcamp/components/editor-information-tooltip.css

@@ -17,6 +17,11 @@
     p:not(:last-of-type) {
         @apply mb-10;
     }
+    ul {
+        @apply list-disc ml-20;
+        li {
+        }
+    }
 
     .tooltip-arrow {
         width: 0;

app/javascript/interpreter/frames.ts

@@ -158,6 +158,8 @@ function describeOperator(operator: string): string {
       return 'equal to'
     case 'STRICT_INEQUALITY':
       return 'not equal to'
+    case 'MINUS':
+      return 'minus'
   }
 
   return ''
@@ -168,24 +170,28 @@ function describeBinaryExpression(expression: BinaryExpression): string {
     const left = describeExpression(expression.left)
     const right = describeExpression(expression.right)
     const operator = describeOperator(expression.operator.type)
-    return `${left} was ${operator} ${right}`
+    if (isEqualityOperator(expression.operator.type)) {
+      return `${left} was ${operator} ${right}`
+    } else {
+      return `${left} ${operator} ${right}`
+    }
   }
   return ''
 }
 
 function describeLogicalExpression(expression: LogicalExpression): string {
-  let prefix = ''
-  if (expression.operator.type == 'AND') {
-    prefix = 'both'
-  }
   const left = describeExpression(expression.left)
   const right = describeExpression(expression.right)
 
-  return `${prefix} ${left}, and ${right} were true`
+  if (expression.operator.type == 'AND') {
+    return `both of these were true:</p><ul><li>${left}</li><li>${right}</li></ul><p>`
+  } else {
+    return `$${left} and ${right} were true`
+  }
 }
 
 function describeGroupingExpression(expression: GroupingExpression): string {
-  return describeExpression(expression.inner)
+  return `${describeExpression(expression.inner)}`
 }
 
 function describeCondition(expression: Expression): string {
@@ -196,7 +202,7 @@ function describeIfStatement(frame: FrameWithResult) {
   const ifStatement = frame.context as IfStatement
   const conditionDescription = describeCondition(ifStatement.condition)
   let output = `
-    <p>This checked whether ${conditionDescription}.</p>
+    <p>This checked whether ${conditionDescription}</p>
     <p>The result was <code>${frame.result.value}</code>.</p>
     `
   return output
@@ -225,3 +231,14 @@ function describeCallExpression(
   output += interpolatedDescription
   return output
 }
+
+function isEqualityOperator(operator: string): boolean {
+  return [
+    'STRICT_EQUALITY',
+    'STRICT_INEQUALITY',
+    'GREATER',
+    'LESS',
+    'GREATER_EQUAL',
+    'LESS_EQUAL',
+  ].includes(operator)
+}