Improve descriptions (#7460)

* WIP * Working if statements * Add set statment * Add steps * WIP * WIP * Format return statements * Ad list changing * Wow... * Finish things up * Better descriptions * Readd deleted code * Improve further * Add more descritpions * Fix * Add variable expression * Remove stray import * Add variable lookup expression * Highlight code from tooltip in the editor (#7464) * Add a hardcoded example of highlighting code * Highlight code * Add lots of hovers * Set correct styling * Dynamically update border color * Improve sentence args --------- Co-authored-by: Aron Demeter <[email protected]> Co-authored-by: dem4ron <[email protected]>
exercism · Feb 7, 2025 · ed4195a · ed4195a
1 parent abae23b
commit ed4195a
Show file tree

Hide file tree

Showing 53 changed files with 2,342 additions and 994 deletions.
diff --git a/app/css/bootcamp/components/codemirror.css b/app/css/bootcamp/components/codemirror.css
@@ -94,4 +94,12 @@
         /* width: 2em; */
         text-align: right;
     }
+
+    .cm-highlightedLine {
+        @apply relative;
+        outline: 1.5px solid var(--highlighted-line-border-color);
+        border-radius: 2px;
+        @apply mx-[2px];
+        padding-left: 4px !important;
+    }
 }
diff --git a/app/css/bootcamp/components/editor-information-tooltip.css b/app/css/bootcamp/components/editor-information-tooltip.css
@@ -8,6 +8,9 @@
 
     code {
         overflow-wrap: break-word;
+        &[data-hl-from] {
+            cursor: help;
+        }
     }
 
     & :not(pre) > code {
@@ -52,6 +55,13 @@
         .tooltip-arrow {
             border-right-color: rgb(59 130 246);
         }
+
+        hr {
+            @apply my-12 opacity-[0.5];
+        }
+        h3 {
+            @apply font-medium mb-4;
+        }
     }
 
     &.error {

diff --git a/...components/bootcamp/SolveExercisePage/CodeMirror/extensions/edit-editor/highlightRange.ts b/...components/bootcamp/SolveExercisePage/CodeMirror/extensions/edit-editor/highlightRange.ts
@@ -34,10 +34,8 @@ const highlightMark = Decoration.mark({ class: 'cm-highlighted-code' })
 
 export const highlightTheme = EditorView.baseTheme({
   '.cm-highlighted-code': {
-    background: '#C2DEF3',
-    border: '1px solid #2E57E8',
-    borderRadius: '4px',
-    padding: '2px',
+    background: '#C2DEF366',
+    borderBottom: '2px solid #2E57E8',
   },
 })
 

diff --git a/...otcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts b/...otcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts
@@ -1,4 +1,4 @@
-import { WidgetType } from '@codemirror/view'
+import { EditorView, WidgetType } from '@codemirror/view'
 import {
   computePosition,
   autoUpdate,
@@ -10,6 +10,10 @@ import {
 import hljs from 'highlight.js/lib/core'
 import javascript from 'highlight.js/lib/languages/javascript'
 import 'highlight.js/styles/default.min.css'
+import {
+  addHighlight,
+  removeAllHighlightEffect,
+} from '../edit-editor/highlightRange'
 
 export class InformationWidget extends WidgetType {
   private tooltip: HTMLElement | null = null
@@ -21,7 +25,8 @@ export class InformationWidget extends WidgetType {
 
   constructor(
     private readonly tooltipHtml: string,
-    private readonly status: 'ERROR' | 'SUCCESS'
+    private readonly status: 'ERROR' | 'SUCCESS',
+    private readonly view: EditorView
   ) {
     super()
   }
@@ -66,6 +71,24 @@ export class InformationWidget extends WidgetType {
     closeButton.classList.add('tooltip-close')
     closeButton.onclick = () => this.hideTooltip()
 
+    this.tooltip.querySelectorAll('code').forEach((ct) => {
+      ct.addEventListener('mouseenter', () => {
+        const from = ct.getAttribute('data-hl-from')
+        const to = ct.getAttribute('data-hl-to')
+        if (from && to) {
+          this.view.dispatch({
+            effects: addHighlight.of({
+              from: Number(from) - 1,
+              to: Number(to) - 1,
+            }),
+          })
+        }
+      })
+      ct.addEventListener('mouseleave', () => {
+        this.view.dispatch({ effects: removeAllHighlightEffect.of() })
+      })
+    })
+
     const errorHeader = this.tooltip.querySelector('.error h2')
     if (errorHeader) {
       errorHeader.appendChild(closeButton)

diff --git a/...bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/line-information.ts b/...bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/line-information.ts
@@ -63,10 +63,10 @@ function lineInformationWidget(view: EditorView): DecorationSet {
     return Decoration.none
   if (!shouldShowWidget) return Decoration.none
 
-  const data = widgetData.html
+  const { html, status } = widgetData
 
   let deco = Decoration.widget({
-    widget: new InformationWidget(data, widgetData.status),
+    widget: new InformationWidget(html, status, view),
     side: 1,
   })
   let lastPosOfLine = view.state.doc.line(widgetData.line).to

diff --git a/...javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/lineHighlighter.ts b/...javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/lineHighlighter.ts
@@ -11,6 +11,7 @@ import {
   StateEffect,
   RangeSetBuilder,
 } from '@codemirror/state'
+import { showInfoWidgetField } from './end-line-information/line-information'
 
 export const INFO_HIGHLIGHT_COLOR = '#EFEDFF88'
 export const ERROR_HIGHLIGHT_COLOR = '#fecaca88'
@@ -49,7 +50,9 @@ export const highlightColorField = StateField.define<string>({
 
 // Base theme for highlighting
 const baseTheme = EditorView.baseTheme({
-  '&light .cm-highlightedLine': { backgroundColor: INFO_HIGHLIGHT_COLOR },
+  '&light .cm-highlightedLine': {
+    backgroundColor: INFO_HIGHLIGHT_COLOR,
+  },
   '&dark .cm-highlightedLine': { backgroundColor: '#1a272788' },
 })
 
@@ -98,9 +101,31 @@ const showStripes = ViewPlugin.fromClass(
   }
 )
 
+function updateHighlightedLineBorder() {
+  return EditorView.updateListener.of((update) => {
+    if (update.state.field(showInfoWidgetField)) {
+      let highlightColor = update.state.field(highlightColorField)
+
+      highlightColor =
+        highlightColor === INFO_HIGHLIGHT_COLOR ? '#0000ff77' : '#ff000077'
+
+      update.view.dom.style.setProperty(
+        '--highlighted-line-border-color',
+        highlightColor
+      )
+    } else {
+      update.view.dom.style.setProperty(
+        '--highlighted-line-border-color',
+        'transparent'
+      )
+    }
+  })
+}
+
 export function highlightLine(initialLineNumber: number): Extension {
   return [
     baseTheme,
+    updateHighlightedLineBorder(),
     highlightedLineField.init(() => initialLineNumber),
     highlightColorField.init(() => INFO_HIGHLIGHT_COLOR),
     showStripes,

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/exercises/draw/DrawExercise.tsx b/app/javascript/components/bootcamp/SolveExercisePage/exercises/draw/DrawExercise.tsx
@@ -200,7 +200,7 @@ export default class DrawExercise extends Exercise {
     y: number,
     width: number,
     height: number
-  ): Rectangle {
+  ): void {
     const [absX, absY, absWidth, absHeight] = [x, y, width, height].map((val) =>
       rToA(val)
     )
@@ -220,15 +220,15 @@ export default class DrawExercise extends Exercise {
     this.shapes.push(rect)
     this.visibleShapes.push(rect)
     this.animateElement(executionCtx, elem, absX, absY)
-    return rect
+    // return rect
   }
 
   public circle(
     executionCtx: ExecutionContext,
     x: number,
     y: number,
     radius: number
-  ): Circle {
+  ): void {
     const [absX, absY, absRadius] = [x, y, radius].map((val) => rToA(val))
 
     const elem = Shapes.circle(
@@ -245,7 +245,7 @@ export default class DrawExercise extends Exercise {
     this.shapes.push(circle)
     this.visibleShapes.push(circle)
     this.animateElement(executionCtx, elem, absX, absY)
-    return circle
+    // return circle
   }
 
   public ellipse(
@@ -254,7 +254,7 @@ export default class DrawExercise extends Exercise {
     y: number,
     rx: number,
     ry: number
-  ) {
+  ): void {
     const [absX, absY, absRx, absRy] = [x, y, rx, ry].map((val) => rToA(val))
 
     const elem = Shapes.ellipse(
@@ -272,7 +272,7 @@ export default class DrawExercise extends Exercise {
     this.shapes.push(ellipse)
     this.visibleShapes.push(ellipse)
     this.animateElement(executionCtx, elem, absX, absY)
-    return ellipse
+    // return ellipse
   }
 
   public triangle(
@@ -310,7 +310,7 @@ export default class DrawExercise extends Exercise {
     this.shapes.push(triangle)
     this.visibleShapes.push(triangle)
     this.animateElement(executionCtx, elem, absX1, absY1)
-    return triangle
+    // return triangle
   }
 
   public move(
@@ -408,68 +408,68 @@ export default class DrawExercise extends Exercise {
       func: (_: any, min: number, max: number) => {
         return Math.floor(Math.random() * (max - min + 1)) + min
       },
-      description: 'Gives a random number between ${arg1} and ${arg2}.',
+      description: 'generated a random number between ${arg1} and ${arg2}',
     },
 
     {
       name: 'rectangle',
       func: this.rectangle.bind(this),
       description:
-        'It drew a rectangle at coordinates (${arg1}, ${arg2}) with a width of ${arg3} and a height of ${arg4}.',
+        'drew a rectangle at coordinates (${arg1}, ${arg2}) with a width of ${arg3} and a height of ${arg4}',
     },
     {
       name: 'triangle',
       func: this.triangle.bind(this),
       description:
-        'It drew a rectangle with three points: (${arg1}, ${arg2}), (${arg3}, ${arg4}), and (${arg5}, ${arg6}).',
+        'drew a rectangle with three points: (${arg1}, ${arg2}), (${arg3}, ${arg4}), and (${arg5}, ${arg6})',
     },
     {
       name: 'circle',
       func: this.circle.bind(this),
       description:
-        'It drew a circle with its center at (${arg1}, ${arg2}), and a radius of ${arg3}.',
+        'drew a circle with its center at (${arg1}, ${arg2}), and a radius of ${arg3}',
     },
     {
       name: 'ellipse',
       func: this.ellipse.bind(this),
       description:
-        'It drew an ellipse with its center at (${arg1}, ${arg2}), a radial width of ${arg3}, and a radial height of ${arg4}.',
+        'drew an ellipse with its center at (${arg1}, ${arg2}), a radial width of ${arg3}, and a radial height of ${arg4}',
     },
     {
       name: 'polygon',
       func: this.polygon.bind(this),
-      description: 'Draws a polygon at the specified position.',
+      description: 'drew a polygon at the specified position',
     },
     {
       name: 'clear',
       func: this.clear.bind(this),
-      description: 'Clears the canvas.',
+      description: 'cleared the canvas',
     },
     {
       name: 'move',
       func: this.move.bind(this),
-      description: 'Moves an element to the specified position.',
+      description: 'moved an element to the specified position',
     },
     {
       name: 'change_pen_color',
       func: this.changePenColor.bind(this),
-      description: 'Changes the pen color',
+      description: 'changed the pen color',
     },
     {
       name: 'fill_color_hex',
       func: this.fillColorHex.bind(this),
-      description: 'Changes the fill color using a hex string',
+      description: 'changed the fill color using a hex string',
     },
     {
       name: 'fill_color_rgb',
       func: this.fillColorRGB.bind(this),
-      description: 'Changes the fill color using red, green and blue values',
+      description: 'changed the fill color using red, green and blue values',
     },
     {
       name: 'fill_color_hsl',
       func: this.fillColorHSL.bind(this),
       description:
-        'Changes the fill color using hue, saturation and lumisity values',
+        'changed the fill color using hue, saturation and lumisity values',
     },
   ]
 }
diff --git a/app/javascript/components/bootcamp/SolveExercisePage/exercises/maze/MazeExercise.tsx b/app/javascript/components/bootcamp/SolveExercisePage/exercises/maze/MazeExercise.tsx
@@ -344,37 +344,37 @@ export default class MazeExercise extends Exercise {
     {
       name: 'move',
       func: this.move.bind(this),
-      description: 'Moves the character one step forward',
+      description: 'moved the character one step forward',
     },
     {
       name: 'turn_left',
       func: this.turnLeft.bind(this),
-      description: 'Turns the character to the left',
+      description: 'turned the character to the left',
     },
     {
       name: 'turn_right',
       func: this.turnRight.bind(this),
-      description: 'Turns the character to the right',
+      description: 'turned the character to the right',
     },
     {
       name: 'can_turn_left',
       func: this.canTurnLeft.bind(this),
-      description: 'Checks if the character can turn left',
+      description: 'checked if the character can turn left',
     },
     {
       name: 'can_turn_right',
       func: this.canTurnRight.bind(this),
-      description: 'Checks if the character can turn right',
+      description: 'checked if the character can turn right',
     },
     {
       name: 'can_move',
       func: this.canMove.bind(this),
-      description: 'Checks if the character can move forward',
+      description: 'checked if the character can move forward',
     },
     {
       name: 'look',
       func: this.look.bind(this),
-      description: 'Looks in a direction and returns what is there',
+      description: 'looked in a direction and returns what is there',
     },
   ]
 }
diff --git a/.../components/bootcamp/SolveExercisePage/exercises/space_invaders/SpaceInvadersExercise.tsx b/.../components/bootcamp/SolveExercisePage/exercises/space_invaders/SpaceInvadersExercise.tsx
@@ -320,33 +320,32 @@ export default class SpaceInvadersExercise extends Exercise {
     {
       name: 'move_left',
       func: this.moveLeft.bind(this),
-      description: 'Moves the laser canon to the left',
+      description: 'moved the laser canon to the left',
     },
     {
       name: 'move_right',
       func: this.moveRight.bind(this),
-      description: 'Moves the laser canon to the right',
+      description: 'moved the laser canon to the right',
     },
     {
       name: 'shoot',
       func: this.shoot.bind(this),
-      description: 'Shoots the laser upwards',
+      description: 'shot the laser upwards',
     },
     {
       name: 'is_alien_above',
       func: this.isAlienAbove.bind(this),
-      description:
-        'Returns a boolean indicating if there is an alien above the laser canon',
+      description: 'determined if there was an alien above the laser canon',
     },
     {
       name: 'get_starting_aliens_in_row',
       func: this.getStartingAliensInRow.bind(this),
-      description: 'Returns the starting row of aliens at the index you input.',
+      description: 'retrieved the starting positions of row ${arg1} of aliens',
     },
     {
       name: 'fire_fireworks',
       func: this.fireFireworks.bind(this),
-      description: 'Fires celebratory fireworks',
+      description: 'fired off celebratory fireworks',
     },
   ]
 }