fix dyslexic-text bias (#184)

* fix dyslexic-text bias

* clamp dyslexiaAmount

src/app/features/dyslexic-text/models/dyslexic-word.model.ts

@@ -1,5 +1,6 @@
 export class DyslexicWord {
 	private constructor(
+		private readonly word: string,
 		private readonly firstLetter: string,
 		private readonly lastLetter: string,
 		private readonly middleLetters: string,
@@ -12,11 +13,11 @@ export class DyslexicWord {
 		const lastLetter = orderedLetters.pop();
 		const middleLetters = orderedLetters.join('');
 
-		return new DyslexicWord(firstLetter, lastLetter, middleLetters);
+		return new DyslexicWord(word, firstLetter, lastLetter, middleLetters);
 	}
 
 	public get combinations(): readonly string[] {
-		const allCombinations = [];
+		const allCombinations = [ this.word ];
 
 		for (let movingDistance = 0; movingDistance < this.middleLetters.length - 1; movingDistance++) {
 			const combinations = this.getCombinationsByMovingDistance(movingDistance);

src/app/features/dyslexic-text/services/dyslexic-text.service.ts

@@ -1,13 +1,17 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Observed } from 'src/app/core/decorators/observed.decorator';
+import { clamp } from 'src/app/core/functions/clamp/clamp.function';
 import { DyslexicWord } from 'src/app/features/dyslexic-text/models/dyslexic-word.model';
 import { SubSink } from 'subsink';
 
 @Injectable({ providedIn: 'root' })
 export class DyslexicTextService implements OnDestroy {
 	private readonly subscriptions = new SubSink();
 
+	public static readonly minAmount = 0;
+	public static readonly maxAmount = 100;
+
 	@Observed() public isEnabled: boolean;
 	@Observed() public amount: number;
 
@@ -18,7 +22,7 @@ export class DyslexicTextService implements OnDestroy {
 
 	constructor() {
 		this.isEnabled = JSON.parse(localStorage.getItem('dyslexic-text')) ?? true;
-		this.amount = JSON.parse(localStorage.getItem('dyslexia-amount')) ?? 15;
+		this.amount = JSON.parse(localStorage.getItem('dyslexia-amount')) ?? 25;
 
 		this.persistSettings();
 	}
@@ -41,25 +45,21 @@ export class DyslexicTextService implements OnDestroy {
 		}
 
 		const combinations = this.getCombinations(word);
-		const combinationIndex = Math.floor(Math.random() * combinations.length * this.amount);
+
+		const dyslexiaAmount = clamp(DyslexicTextService.minAmount, this.amount, DyslexicTextService.maxAmount);
+		const combinationIndex = Math.floor(Math.random() * combinations.length * DyslexicTextService.maxAmount / dyslexiaAmount);
 
 		return combinations[combinationIndex]
 			?? word;
 	}
 
 	private getCombinations(word: string): readonly string[] {
 		if (!this.wordCombinations.has(word)) {
-			const combinations = DyslexicTextService.generateCombinations(word);
+			const combinations = DyslexicWord.from(word).combinations;
 
 			this.wordCombinations.set(word, combinations);
 		}
 
 		return this.wordCombinations.get(word);
 	}
-
-	private static generateCombinations(word: string): readonly string[] {
-		const dyslexicWord = DyslexicWord.from(word);
-
-		return dyslexicWord.combinations;
-	}
 }

src/app/features/navigation/components/settings/settings.component.html

@@ -42,7 +42,9 @@
 				  (click)="$event.stopPropagation()">
 		Enabled
 	</mat-checkbox>
-	<mat-slider min="1" max="19" color="primary"
+	<mat-slider color="primary"
+				[min]="minDyslexiaAmount"
+				[max]="maxDyslexiaAmount"
 				[disabled]="!dyslexicTextEnabled"
 				[(ngModel)]="dyslexiaAmount"
 				(ngModelChange)="setDyslexiaAmount()"

src/app/features/navigation/components/settings/settings.component.ts

@@ -14,10 +14,12 @@ import { DyslexicTextService } from 'src/app/features/dyslexic-text/services/dys
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SettingsComponent implements OnInit {
-
 	public readonly colorThemes = ColorThemes;
 	public readonly colorPalettes = ColorPalettes;
 
+	public readonly minDyslexiaAmount = DyslexicTextService.minAmount;
+	public readonly maxDyslexiaAmount = DyslexicTextService.maxAmount;
+
 	public dyslexicTextEnabled = true;
 	public dyslexiaAmount = 5;
 
@@ -32,7 +34,7 @@ export class SettingsComponent implements OnInit {
 
 	ngOnInit(): void {
 		this.dyslexicTextEnabled = this.dyslexicTextService.isEnabled;
-		this.dyslexiaAmount = 20 - this.dyslexicTextService.amount;
+		this.dyslexiaAmount = this.dyslexicTextService.amount;
 	}
 
 	public toggleTheme(theme: ColorTheme, event: Event): void {
@@ -50,7 +52,7 @@ export class SettingsComponent implements OnInit {
 	}
 
 	public setDyslexiaAmount(): void {
-		this.dyslexicTextService.amount = 20 - this.dyslexiaAmount;
+		this.dyslexicTextService.amount = this.dyslexiaAmount;
 	}
 
 	public toggleMovingBackgroundEnabled(): void {