Add weather project

app/css/bootcamp/components/codemirror.css

@@ -13,7 +13,7 @@
         @apply flex flex-grow;
 
         .cm-gutters {
-            background: transparent;
+            background: white;
             @apply border-r-0;
         }
         .cm-lineNumbers .cm-gutterElement,

app/javascript/components/bootcamp/SolveExercisePage/Instructions/Instructions.tsx

@@ -68,7 +68,8 @@ export function _Instructions({
             Task {activeTaskIndex + 1}: {currentTask?.name}
           </h4>
           {/* "inline" is required to keep the cursor on the same line */}
-          <div className="[&_p]:inline" ref={typewriterRef} />
+          {/*<div className="[&_p]:inline" ref={typewriterRef} />*/}
+          <div ref={typewriterRef} />
         </>
       )}
     </div>

app/javascript/components/bootcamp/SolveExercisePage/exercises/draw/DrawExercise.tsx

@@ -57,12 +57,16 @@ class Triangle extends Shape {
   }
 }
 
+export type FillColor =
+  | { type: 'hex'; color: string }
+  | { type: 'rgb'; color: [number, number, number] }
+
 export default class DrawExercise extends Exercise {
   private canvas: HTMLDivElement
   private shapes: Shape[] = []
 
   private penColor = '#333333'
-  private fillColor = '#ff0000'
+  private fillColor: FillColor = { type: 'hex', color: '#ff0000' }
 
   constructor() {
     super('draw')
@@ -89,12 +93,20 @@ export default class DrawExercise extends Exercise {
   public getRectangleAt(x: number, y: number, width: number, height: number) {
     return this.shapes.find((shape) => {
       if (shape instanceof Rectangle) {
-        return (
-          shape.x == x &&
-          shape.y == y &&
-          shape.width == width &&
-          shape.height == height
-        )
+        if (shape.x != x || shape.y != y) {
+          return false
+        }
+        if (width !== undefined) {
+          if (shape.width != width) {
+            return false
+          }
+        }
+        if (height !== undefined) {
+          if (shape.height != height) {
+            return false
+          }
+        }
+        return true
       }
     })
   }
@@ -105,6 +117,13 @@ export default class DrawExercise extends Exercise {
       }
     })
   }
+  public getEllipseAt(x: number, y: number, rx: number, ry: number) {
+    return this.shapes.find((shape) => {
+      if (shape instanceof Ellipse) {
+        return shape.x == x && shape.y == y && shape.rx == rx && shape.ry == ry
+      }
+    })
+  }
   public getTriangleAt(
     x1: number,
     y1: number,
@@ -130,8 +149,11 @@ export default class DrawExercise extends Exercise {
   public changePenColor(executionCtx: ExecutionContext, color: string) {
     this.penColor = color
   }
-  public changeFillColor(executionCtx: ExecutionContext, color: string) {
-    this.fillColor = color
+  public fillColorHex(executionCtx: ExecutionContext, color: string) {
+    this.fillColor = { type: 'hex', color: color }
+  }
+  public fillColorRGB(executionCtx: ExecutionContext, red, green, blue) {
+    this.fillColor = { type: 'rgb', color: [red, green, blue] }
   }
 
   public rectangle(
@@ -327,6 +349,12 @@ export default class DrawExercise extends Exercise {
     this.shapes = []
   }
 
+  public setBackgroundImage(imageUrl: string) {
+    this.canvas.style.backgroundImage = 'url(' + imageUrl + ')'
+    this.canvas.style.backgroundSize = '99.5%'
+    this.canvas.style.backgroundPosition = 'center'
+  }
+
   public availableFunctions = [
     {
       name: 'rand',
@@ -381,9 +409,14 @@ export default class DrawExercise extends Exercise {
       description: 'Changes the pen color',
     },
     {
-      name: 'change_fill_color',
-      func: this.changeFillColor.bind(this),
-      description: 'Changes the fill color',
+      name: 'fill_color_hex',
+      func: this.fillColorHex.bind(this),
+      description: 'Changes the fill color using a hex string',
+    },
+    {
+      name: 'fill_color_rgb',
+      func: this.fillColorRGB.bind(this),
+      description: 'Changes the fill color using three RGB values',
     },
   ]
 }

app/javascript/components/bootcamp/SolveExercisePage/exercises/draw/shapes.ts

@@ -1,3 +1,5 @@
+import { FillColor } from './DrawExercise'
+
 const svgNS = 'http://www.w3.org/2000/svg'
 
 function createSVG(children) {
@@ -18,12 +20,22 @@ function createSVG(children) {
   return svg
 }
 
-function createSVGElement(type: string, backgroundColor, penColor, attrs) {
+function createSVGElement(
+  type: string,
+  backgroundColor: FillColor,
+  penColor,
+  attrs
+) {
   const elem = document.createElementNS(svgNS, type)
-  elem.setAttribute('fill', backgroundColor)
   elem.setAttribute('stroke', penColor)
   elem.setAttribute('stroke-width', '0')
 
+  if (backgroundColor.type === 'hex') {
+    elem.setAttribute('fill', backgroundColor.color)
+  } else {
+    elem.setAttribute('fill', 'rgb(' + backgroundColor.color.join(',') + ')')
+  }
+
   for (const key in attrs) {
     elem.setAttribute(key, attrs[key])
   }
@@ -36,7 +48,7 @@ export function rect(
   width: number,
   height: number,
   penColor: string,
-  backgroundColor: string
+  backgroundColor: FillColor
 ) {
   const rect = createSVGElement('rect', backgroundColor, penColor, {
     x: x.toString(),
@@ -53,7 +65,7 @@ export function circle(
   cy: number,
   radius: number,
   penColor: string,
-  backgroundColor: string
+  backgroundColor: FillColor
 ) {
   const circle = createSVGElement('circle', backgroundColor, penColor, {
     cx: cx.toString(),
@@ -70,7 +82,7 @@ export function ellipse(
   rx: number,
   ry: number,
   penColor: string,
-  backgroundColor: string
+  backgroundColor: FillColor
 ) {
   const ellipse = createSVGElement('ellipse', backgroundColor, penColor, {
     cx: cx.toString(),
@@ -90,7 +102,7 @@ export function triangle(
   x3: number,
   y3: number,
   penColor: string,
-  backgroundColor: string
+  backgroundColor: FillColor
 ) {
   const polygon = createSVGElement('polygon', backgroundColor, penColor, {
     points: `${x1},${y1} ${x2},${y2} ${x3},${y3}`,

app/javascript/components/bootcamp/SolveExercisePage/test-runner/generateAndRunTestSuite/generateExpects.ts

@@ -57,7 +57,6 @@ function generateExpectsForStateTests(exercise: Exercise, testData: TaskTest) {
 
       // And then we get the function and call it.
       const fn = exercise[fnName]
-      console.log(fnName, fn, exercise)
       actual = fn.bind(exercise).call(exercise, ...args)
     }
 

bootcamp_content/projects/drawing/config.json

@@ -2,5 +2,5 @@
   "slug": "drawing",
   "title": "Drawing",
   "description": "The world of drawing",
-  "exercises": ["jumbled-house", "loops"]
+  "exercises": ["penguin", "jumbled-house", "loops"]
 }

bootcamp_content/projects/drawing/exercises/penguin/config.json

@@ -0,0 +1,109 @@
+{
+  "title": "Penguin",
+  "description": "Make the penguin symmetrical",
+  "project_type": "draw",
+  "level": 1,
+  "concepts": [],
+  "tests_type": "state",
+  "readonly_ranges": [],
+  "tasks": [
+    {
+      "name": "Draw the scene",
+      "tests": [
+        {
+          "slug": "draw-scence",
+          "name": "Make the penguin symmetrical.",
+          "description_html": "Fix all the TODO comments to make the penguin symmetrical.",
+          "function": "main",
+          "checks": [
+            {
+              "name": "getRectangleAt(0, 0, 100, 100)",
+              "matcher": "toExist",
+              "error_html": "The sky has gone wrong."
+            },
+            {
+              "name": "getRectangleAt(0, 70, 100, 30)",
+              "matcher": "toExist",
+              "error_html": "The ground has gone wrong."
+            },
+            {
+              "name": "getEllipseAt(28, 55, 10, 25)",
+              "matcher": "toExist",
+              "error_html": "The left wing doesn't seem right."
+            },
+            {
+              "name": "getEllipseAt(72, 55, 10, 25)",
+              "matcher": "toExist",
+              "error_html": "The right wing doesn't seem right."
+            },
+            {
+              "name": "getEllipseAt(50, 53, 25, 40)",
+              "matcher": "toExist",
+              "error_html": "The outer body has gone wrong."
+            },
+            {
+              "name": "getEllipseAt(50, 50, 21, 39)",
+              "matcher": "toExist",
+              "error_html": "The inner body has gone wrong."
+            },
+            {
+              "name": "getCircleAt(50, 31, 23)",
+              "matcher": "toExist",
+              "error_html": "The head has gone wrong."
+            },
+            {
+              "name": "getEllipseAt(41, 32, 11, 14)",
+              "matcher": "toExist",
+              "error_html": "The left side of the face doesn't look right."
+            },
+            {
+              "name": "getEllipseAt(59, 32, 11, 14)",
+              "matcher": "toExist",
+              "error_html": "The right side of the face doesn't look right."
+            },
+            {
+              "name": "getEllipseAt(50, 40, 16, 11)",
+              "matcher": "toExist",
+              "error_html": "The lower part of the face doesn't look right."
+            },
+            {
+              "name": "getCircleAt(42, 33, 3)",
+              "matcher": "toExist",
+              "error_html": "The left eye seems off."
+            },
+            {
+              "name": "getCircleAt(43, 34, 1)",
+              "matcher": "toExist",
+              "error_html": "The left iris seems off."
+            },
+            {
+              "name": "getCircleAt(58, 33, 3)",
+              "matcher": "toExist",
+              "error_html": "The right eye seems off."
+            },
+            {
+              "name": "getCircleAt(57, 34, 1)",
+              "matcher": "toExist",
+              "error_html": "The right iris seems off."
+            },
+            {
+              "name": "getEllipseAt(40, 93, 7, 4)",
+              "matcher": "toExist",
+              "error_html": "The left foot's gone astray."
+            },
+            {
+              "name": "getEllipseAt(60, 93, 7, 4)",
+              "matcher": "toExist",
+              "error_html": "The right foot's not right."
+            },
+            {
+              "name": "getTriangleAt(46, 38, 54, 38, 50, 47)",
+              "matcher": "toExist",
+              "error_html": "The nose isn't right."
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

bootcamp_content/projects/drawing/exercises/penguin/example.jiki

@@ -0,0 +1,43 @@
+// Light blue background
+fill_color_hex("#ADD8E6") 
+rectangle(0, 0, 100, 100)
+
+// Ground
+fill_color_hex("#ffffff") // Ice ground
+rectangle(0, 70, 100, 30) // Ice ground
+
+// Penguin wings
+fill_color_hex("#000000") // Black
+ellipse(28, 55, 10, 25) // Left wing
+ellipse(72, 55, 10, 25) // Right wing
+
+// Penguin body
+fill_color_hex("#000000") // Black for the body
+ellipse(50, 53, 25, 40) // Outer body (oval shape)
+fill_color_hex("#ffffff") // White for the belly
+ellipse(50, 50, 21, 39) // Inner belly (oval shape)
+
+// Penguin head
+fill_color_hex("#000000") // Black
+circle(50, 31, 23) // Head (circle)
+fill_color_hex("#ffffff") // White for the face
+ellipse(41, 32, 11, 14) // Left part of the face
+ellipse(59, 32, 11, 14) // Right part of the face
+ellipse(50, 40, 16, 11) // Lower part of the face
+
+// Penguin eyes
+fill_color_hex("#000000") // Black
+circle(42, 33, 3) // Left eye
+fill_color_hex("#ffffff") // White
+circle(43, 34, 1) // Left iris
+
+fill_color_hex("#000000") // Black
+circle(58, 33, 3) // Right eye
+fill_color_hex("#ffffff") // White
+circle(59, 32, 1) // Right iris
+
+// Feet
+fill_color_hex("#FFA500")
+ellipse(40, 93, 7, 4)
+ellipse(60, 93, 7, 4)
+triangle(46, 38, 54, 38, 50, 47)

bootcamp_content/projects/drawing/exercises/penguin/introduction.md

@@ -0,0 +1,21 @@
+# The Penguin
+
+Your task is to make the penguin symmetrical. It should look like this:
+
+<img src="https://assets.exercism.org/bootcamp/graphics/penguin-finished.png" style="width: 100%; max-width:400px;margin-top:10px;margin-bottom:20px;border:1px solid #ddd;border-radius:5px"/>
+
+We've drawn the left hand side for you, and added `TODO` comments for each of the things you need to do.
+
+You'll need to think about setting the right colors before drawing things.
+
+For the nose, you should **change** the middle coordinates of the triangle. Don't add a new triangle.
+
+The functions used in this exercise are:
+
+- `circle(x, y, radius)`
+- `rectangle(x, y, height, width)`
+- `ellipse(x, y, radius_x, radius_y)`
+- `triangle(x1,y1, x2,y2, x3,y3)`
+- `fill_color_hex(hex)`
+
+If you need help remembering how to use any of these functions, you can watch back the video from week 1.