feat(anagram): custom divider

Author: Rosty Siryk (c)

src/app/generator/components/anagrammator/anagrammator.component.html

@@ -1,9 +1,15 @@
 <div class="container">
   <h1>Анаграматор</h1>
-  <mat-form-field class="input word" appearance="outline">
-    <mat-label>Зробити анаграму з:</mat-label>
-    <input type="text" matInput value="Слово" (keyup)="setSourceString($event)">
-  </mat-form-field>
+  <div class="inputs">
+    <mat-form-field class="input word" appearance="outline">
+      <mat-label>Зробити анаграму з:</mat-label>
+      <input type="text" matInput [value]="sourceWord" (keyup)="setSourceString($event)">
+    </mat-form-field>
+    <mat-form-field class="input word" appearance="outline">
+      <mat-label>Розділовий знак:</mat-label>
+      <input type="text" matInput [value]="divider" (keyup)="setDivider($event)">
+    </mat-form-field>
+  </div>
   <div>Фільтр результатів:</div>
   <div class="filters">
     <mat-form-field class="input start-with" (keyup)="setStartWith($event)" appearance="outline">

src/app/generator/components/anagrammator/anagrammator.component.scss

@@ -1,13 +1,26 @@
 :host {
   display: block;
 
+  pre#result-render {
+    margin-top: 0;
+    font-size: 50px;
+    line-height: 70px;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
   .rootenia {
     font-family: var(--rutenia-akcidenta-font) !important;
   }
 
   .container {
     margin: 1em;
 
+    .inputs {
+      display: grid;
+      grid-template-columns: 30% 17%;
+      gap: 3%;
+    }
+
     .filters {
       display: grid;
       grid-template-columns: 30% 30% 30%;
@@ -36,12 +49,6 @@
         margin-right: .2em;
       }
     }
-
-    pre {
-      margin-top: 0;
-      font-size: 80px;
-      line-height: 90px;
-    }
   }
 
   .axes {

src/app/generator/components/anagrammator/anagrammator.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { copyToClipboardWithVisualResponse } from '../../generator-helpers';
 
 @Component({
@@ -7,12 +7,13 @@ import { copyToClipboardWithVisualResponse } from '../../generator-helpers';
   styleUrls: ["./anagrammator.component.scss"],
 })
 export class AnagrammatorComponent implements OnInit {
-
-  capitalizeOutput = false;
-  shuffle = false;
+  
+  sourceWord = "Символ";
+  divider = "";
+  capitalizeOutput = true;
+  shuffle = true;
   toUseRutenia = false;
 
-  sourceWord = "";
   anagrams = [""];
   filtered = [""];
   formattedResult = "";
@@ -28,6 +29,11 @@ export class AnagrammatorComponent implements OnInit {
     this.anagrammate();
   }
 
+  setDivider($event: KeyboardEvent) {
+    this.divider = ($event.currentTarget as HTMLInputElement).value;
+    this.anagrammate();
+  }
+
   setSourceString(event: any) {
     this.sourceWord = event?.target?.value;
     this.anagrammate();
@@ -82,11 +88,12 @@ export class AnagrammatorComponent implements OnInit {
         (remaining = "") => {
           const res = [item].concat(remaining);
           const id = item + remaining;
-          result[id] = res.join(divider);
+          let joined: string = res.join("");
           if (this.capitalizeOutput) {
-            result[id] = result[id].toLowerCase();
-            result[id] = result[id].substring(0, 1).toUpperCase() + result[id].substring(1);
-          }      
+            joined = joined.toLowerCase();
+            joined = joined.charAt(0).toUpperCase() + joined.substring(1);
+          }
+          result[id] = joined;
         }
       );
     });
@@ -111,10 +118,10 @@ export class AnagrammatorComponent implements OnInit {
     this.iteration = 0;
 
     this.anagrams = this.combineItems(
-      this.sourceWord.split(""),
+      this.sourceWord.split(this.divider),
       this.maxIterations,
       0,
-      ""
+      this.divider
     );
     const filteredByStart = this.startWith
       ? this.anagrams.filter((str) => str.indexOf(this.startWith) === 0)