Skip to content

Commit 27e3e6e

Browse files
author
Salma Alam-Naylor
committed
Don't show similar modes component if array is empty due to not being one of the seven standard modes
1 parent 928a274 commit 27e3e6e

File tree

7 files changed

+120
-83
lines changed

7 files changed

+120
-83
lines changed

‎apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1366,4 +1366,10 @@ describe('FretMapService:getSimilarModes', () => {
13661366

13671367
expect(result).toEqual(cIonianSimilarModes);
13681368
});
1369+
1370+
it('returns an empty array for a mode not in the StandardModePatterns array', () => {
1371+
const result = service.getSimilarModes(fSharpHarmonicMinor, Mode.harmonicMinor);
1372+
1373+
expect(result).toEqual([]);
1374+
});
13691375
});

‎apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
NoteToStringAndFretMap,
2020
Octave,
2121
ScaleDegrees,
22-
SimilarModePatterns
22+
StandardModePatterns
2323
} from '../../util/constants';
2424
import { JamTracksData } from '../../data/jamTracks';
2525

@@ -428,15 +428,19 @@ export class FretMapService {
428428
};
429429

430430
getSimilarModes = (modeMap: ModeMap, inputMode: Mode): SimilarModes => {
431-
const firstModeInPattern = SimilarModePatterns.indexOf(inputMode);
431+
const firstModeInPattern = StandardModePatterns.indexOf(inputMode);
432+
433+
if (firstModeInPattern === -1) {
434+
return [];
435+
}
432436

433437
const similarModes = modeMap
434438
.map((noteObject, index) => {
435439
return {
436440
noteDisplayName: noteObject.displayName,
437441
note: noteObject.name,
438-
mode: SimilarModePatterns[firstModeInPattern + index],
439-
noteExtender: this.getNoteExtenderStringFromNoteObject(noteObject),
442+
mode: StandardModePatterns[firstModeInPattern + index],
443+
noteExtender: this.getNoteExtenderStringFromNoteObject(noteObject)
440444
} as unknown as SimilarMode;
441445
});
442446

‎apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1-
<div class="similarModes">
1+
<div class="similarModes" *ngIf="similarModes.length > 0">
22
<h4 class="similarModes__title">Did you know?</h4>
3-
<p class="similarModes__copy">If you know the patterns of {{modeDisplayString}}, you'll know the modes below. Just shift your fingers along the
4-
fret board.</p>
3+
<p class="similarModes__copy">If you know the patterns of {{modeDisplayString}} on the fretboard,
4+
you can transfer those shapes to the modes below.</p>
55

6-
<app-chips>
7-
<app-chip *ngFor="let mode of similarModes"
8-
[note]="mode.note"
9-
[noteExtender]="mode.noteExtender"
10-
[mode]="mode.mode"
11-
selectedColor="default">{{mode.noteDisplayName}} {{mode.mode | titlecase}}</app-chip>
12-
</app-chips>
6+
<div class="chipsContainer">
7+
<app-chips>
8+
<app-chip *ngFor="let mode of similarModes"
9+
[note]="mode.note"
10+
[noteExtender]="mode.noteExtender"
11+
[mode]="mode.mode"
12+
selectedColor="default">{{mode.noteDisplayName}} {{mode.mode | titlecase}}</app-chip>
13+
</app-chips>
14+
</div>
15+
16+
<p class="similarModes__copy">There are only 7 patterns you need to learn. Once you've memorised those patterns,
17+
you can play any of the 7 standard modes (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian) from
18+
any starting note, anywhere on the fretboard.</p>
19+
<p class="similarModes__copy">These patterns always appear in the same order, one after the other.</p>
1320
</div>

‎apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
@import "../../../../styles/mixins";
44
@import "../../../../styles/typography";
55

6+
.chipsContainer {
7+
margin-top: pxToRem($grid-unit * 2);
8+
margin-bottom: pxToRem($grid-unit * 4);
9+
}
10+
611
.similarModes {
712
background-color: var(--peach);
813
padding: pxToRem($grid-unit * 4);

‎apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ describe('SimilarModesComponent', () => {
99
@Component({
1010
selector: 'app-similar-modes-spec',
1111
template: `
12-
<app-similar-modes>
12+
<app-similar-modes [similarModes]="[]">
1313
</app-similar-modes>
1414
`
1515
})

‎apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap

Lines changed: 82 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1395,6 +1395,7 @@ exports[`HomeIndexComponent should create 1`] = `
13951395
</div>
13961396
</app-chord-map>
13971397
<app-similar-modes>
1398+
13981399
<div
13991400
class="similarModes"
14001401
>
@@ -1406,81 +1407,95 @@ exports[`HomeIndexComponent should create 1`] = `
14061407
<p
14071408
class="similarModes__copy"
14081409
>
1409-
If you know the patterns of C Ionian (Major), you'll know the modes below. Just shift your fingers along the fret board.
1410+
If you know the patterns of C Ionian (Major) on the fretboard, you can transfer those shapes to the modes below.
14101411
</p>
1411-
<app-chips>
1412-
<div
1413-
class="chips"
1414-
>
1415-
1416-
<app-chip
1417-
selectedcolor="default"
1412+
<div
1413+
class="chipsContainer"
1414+
>
1415+
<app-chips>
1416+
<div
1417+
class="chips"
14181418
>
1419-
<a
1420-
aria-label="D Dorian"
1421-
class="chip"
1422-
href="/d/natural/dorian"
1419+
1420+
<app-chip
1421+
selectedcolor="default"
14231422
>
1424-
D Dorian
1425-
</a>
1426-
</app-chip>
1427-
<app-chip
1428-
selectedcolor="default"
1429-
>
1430-
<a
1431-
aria-label="E Phrygian"
1432-
class="chip"
1433-
href="/e/natural/phrygian"
1423+
<a
1424+
aria-label="D Dorian"
1425+
class="chip"
1426+
href="/d/natural/dorian"
1427+
>
1428+
D Dorian
1429+
</a>
1430+
</app-chip>
1431+
<app-chip
1432+
selectedcolor="default"
14341433
>
1435-
E Phrygian
1436-
</a>
1437-
</app-chip>
1438-
<app-chip
1439-
selectedcolor="default"
1440-
>
1441-
<a
1442-
aria-label="F Lydian"
1443-
class="chip"
1444-
href="/f/natural/lydian"
1434+
<a
1435+
aria-label="E Phrygian"
1436+
class="chip"
1437+
href="/e/natural/phrygian"
1438+
>
1439+
E Phrygian
1440+
</a>
1441+
</app-chip>
1442+
<app-chip
1443+
selectedcolor="default"
14451444
>
1446-
F Lydian
1447-
</a>
1448-
</app-chip>
1449-
<app-chip
1450-
selectedcolor="default"
1451-
>
1452-
<a
1453-
aria-label="G Mixolydian"
1454-
class="chip"
1455-
href="/g/natural/mixolydian"
1445+
<a
1446+
aria-label="F Lydian"
1447+
class="chip"
1448+
href="/f/natural/lydian"
1449+
>
1450+
F Lydian
1451+
</a>
1452+
</app-chip>
1453+
<app-chip
1454+
selectedcolor="default"
14561455
>
1457-
G Mixolydian
1458-
</a>
1459-
</app-chip>
1460-
<app-chip
1461-
selectedcolor="default"
1462-
>
1463-
<a
1464-
aria-label="A Aolian (Minor)"
1465-
class="chip"
1466-
href="/a/natural/aolian"
1456+
<a
1457+
aria-label="G Mixolydian"
1458+
class="chip"
1459+
href="/g/natural/mixolydian"
1460+
>
1461+
G Mixolydian
1462+
</a>
1463+
</app-chip>
1464+
<app-chip
1465+
selectedcolor="default"
14671466
>
1468-
A Aolian
1469-
</a>
1470-
</app-chip>
1471-
<app-chip
1472-
selectedcolor="default"
1473-
>
1474-
<a
1475-
aria-label="B Locrian"
1476-
class="chip"
1477-
href="/b/natural/locrian"
1467+
<a
1468+
aria-label="A Aolian (Minor)"
1469+
class="chip"
1470+
href="/a/natural/aolian"
1471+
>
1472+
A Aolian
1473+
</a>
1474+
</app-chip>
1475+
<app-chip
1476+
selectedcolor="default"
14781477
>
1479-
B Locrian
1480-
</a>
1481-
</app-chip>
1482-
</div>
1483-
</app-chips>
1478+
<a
1479+
aria-label="B Locrian"
1480+
class="chip"
1481+
href="/b/natural/locrian"
1482+
>
1483+
B Locrian
1484+
</a>
1485+
</app-chip>
1486+
</div>
1487+
</app-chips>
1488+
</div>
1489+
<p
1490+
class="similarModes__copy"
1491+
>
1492+
There are only 7 patterns you need to learn. Once you've memorised those patterns, you can play any of the 7 standard modes (Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian) from any starting note, anywhere on the fretboard.
1493+
</p>
1494+
<p
1495+
class="similarModes__copy"
1496+
>
1497+
These patterns always appear in the same order, one after the other.
1498+
</p>
14841499
</div>
14851500
</app-similar-modes>
14861501
</div>

‎apps/fretonator-web/src/app/util/constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -627,7 +627,7 @@ export const StringFrequencies = {
627627
'E': 82.41
628628
}
629629

630-
export const SimilarModePatterns = [
630+
export const StandardModePatterns = [
631631
Mode.ionian,
632632
Mode.dorian,
633633
Mode.phrygian,

0 commit comments

Comments
 (0)