draw()

in src/components/GeniePiano.tsx [163:263]
88 lines of code
9 McCabe index (conditional complexity)

  draw() {
    this.svg.innerHTML = "";
    const halfABlackNote = this.config.blackNoteWidth / 2;
    let x = 0;
    const y = 0;
    let index = 0;

    const blackNoteIndexes = [1, 3, 6, 8, 10];

    if (this.config.octaves < 6) {
      index = 2 * CONSTANTS.NOTES_PER_OCTAVE;
    }
    // First draw all the white notes.
    // Pianos start on an A (if we're using all the octaves);
    this.makeRect(
      index,
      x,
      y,
      this.config.whiteNoteWidth,
      this.config.whiteNoteHeight,
      "white",
      "#141E30"
    );
    this.makeRect(
      index + 2,
      this.config.whiteNoteWidth,
      y,
      this.config.whiteNoteWidth,
      this.config.whiteNoteHeight,
      "white",
      "#141E30"
    );
    index += 3;
    x = 2 * this.config.whiteNoteWidth;

    // Draw the white notes.
    for (let o = 0; o < this.config.octaves; o++) {
      for (let i = 0; i < CONSTANTS.NOTES_PER_OCTAVE; i++) {
        if (blackNoteIndexes.indexOf(i) === -1) {
          this.makeRect(
            index,
            x,
            y,
            this.config.whiteNoteWidth,
            this.config.whiteNoteHeight,
            "white",
            "#141E30"
          );
          x += this.config.whiteNoteWidth;
        }
        index++;
      }
    }

    // And an extra C at the end (if we're using all the octaves);
    this.makeRect(
      index,
      x,
      y,
      this.config.whiteNoteWidth,
      this.config.whiteNoteHeight,
      "white",
      "#141E30"
    );

    index = 1;
    if (this.config.octaves < 6) {
      index += 2 * CONSTANTS.NOTES_PER_OCTAVE;
    }
    // Now draw all the black notes, so that they sit on top.
    // Pianos start on an A:
    this.makeRect(
      index,
      this.config.whiteNoteWidth - halfABlackNote,
      y,
      this.config.blackNoteWidth,
      this.config.blackNoteHeight,
      "black"
    );
    index += 2;
    x = this.config.whiteNoteWidth;

    // Draw the black notes.
    for (let o = 0; o < this.config.octaves; o++) {
      for (let i = 0; i < CONSTANTS.NOTES_PER_OCTAVE; i++) {
        if (blackNoteIndexes.indexOf(i) !== -1) {
          this.makeRect(
            index,
            x + this.config.whiteNoteWidth - halfABlackNote,
            y,
            this.config.blackNoteWidth,
            this.config.blackNoteHeight,
            "black"
          );
        } else {
          x += this.config.whiteNoteWidth;
        }
        index++;
      }
    }
  }