Add keypress interaction for flashcards, remove side display in flash…

…cards, improve card editing UI

apps/front/src/app/create/study-set/create-study-set.component.ts

@@ -117,6 +117,10 @@ export class CreateStudySetComponent implements OnInit {
       }
     });
 
+    card.instance.addCardEvent.subscribe(() => {
+      this.addCard();
+    });
+
     this.cards.push({
       component: card,
       index: this.cardList.length - 1

apps/front/src/app/shared/card/card.component.html

@@ -30,7 +30,10 @@
   </div>
   <div class="modal-body">
     <div class="container-fluid">
-      <button *ngIf="isMobile" type="button" class="btn btn-primary mb-2" (click)="modalRef?.hide()">Finish editing</button>
+      <div *ngIf="isMobile" class="mb-2">
+        <button type="button" class="btn btn-primary me-2" (click)="modalRef?.hide(); addCardEvent.emit()">Add another card</button>
+        <button type="button" class="btn btn-outline-primary" (click)="modalRef?.hide()">Finish editing</button>
+      </div>
       <div class="row row-cols-1 row-cols-md-2">
         <div class="col border-end">
           <p class="fs-2">Term</p>
@@ -41,7 +44,10 @@
           <quill-editor [(ngModel)]="definitionValue" id="definitionEditor" class="w-100"></quill-editor>
         </div>
       </div>
-      <button *ngIf="!isMobile" type="button" class="btn btn-primary mt-2" (click)="modalRef?.hide()">Finish editing</button>
+      <div *ngIf="!isMobile" class="mt-2">
+        <button type="button" class="btn btn-primary me-2" (click)="modalRef?.hide(); addCardEvent.emit()">Add another card</button>
+        <button type="button" class="btn btn-outline-primary" (click)="modalRef?.hide()">Finish editing</button>
+      </div>
     </div>
   </div>
 </ng-template>

apps/front/src/app/shared/card/card.component.ts

@@ -41,6 +41,7 @@ export class CardComponent implements OnInit, AfterViewInit {
   @Input() termValue?: string;
   @Input() definitionValue?: string;
 
+  @Output() addCardEvent = new EventEmitter();
   @Output() deleteCardEvent = new EventEmitter<number>();
   @Output() moveCardEvent = new EventEmitter<{ index: number, direction: number }>();
 

apps/front/src/app/study-set/study-set-flashcards/study-set-flashcards.component.html

@@ -88,7 +88,6 @@ <h1 class="me-4">Great job!</h1>
           <button type="button" class="fs-4 w-25 btn btn-outline-success mb-3 fw-bold" (click)="incrementLearntCount(); knownCardIDs.push(currentCard.id); changeCard(1);">Know</button>
         </div>
         <div class="mx-2 d-flex justify-content-between">
-          <p class="text-secondary text-capitalize fs-6">{{side}}</p>
           <p class="text-secondary fs-5">{{remainingCards}}</p>
         </div>
       </div>

apps/front/src/app/study-set/study-set-flashcards/study-set-flashcards.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core";
+import { Component, HostListener, OnInit, TemplateRef, ViewChild } from "@angular/core";
 import { SetsService } from "../../shared/http/sets.service";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Card } from "@prisma/client";
@@ -65,6 +65,33 @@ export class StudySetFlashcardsComponent implements OnInit {
   protected readonly faThumbsUp = faThumbsUp;
   protected readonly faCake = faCake;
 
+  @HostListener("document:keypress", ["$event"])
+  keyboardSpaceEvent(event: KeyboardEvent) {
+    if (
+      this.flashcardsMode &&
+      !this.roundCompleted &&
+      event.key === " "
+    ) {
+      this.flipCard();
+    }
+  }
+
+  @HostListener("document:keyup", ["$event"])
+  keyboardArrowEvent(event: KeyboardEvent) {
+    if (
+      this.flashcardsMode &&
+      !this.roundCompleted
+    ) {
+      if (event.key === "ArrowLeft") {
+        this.changeCard(-1);
+      } else if (event.key === "ArrowRight") {
+        this.changeCard(1);
+      } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        this.flipCard();
+      }
+    }
+  }
+
   updateIndex() {
     this.remainingCards = `${this.index + 1}/${this.cards.length}`;
   }
@@ -92,6 +119,16 @@ export class StudySetFlashcardsComponent implements OnInit {
   }
 
   changeCard(direction: number) {
+    if (
+      this.index === 0 &&
+      direction === -1
+    ) return;
+
+    if (
+      this.index === this.cards.length - 1 &&
+      direction === 1
+    ) return;
+
     // increment the currentCard object to the next card in the array
     if (this.flashcardsMode === "progressive" && this.index !== this.cards.length - 1) {
       this.currentCard = this.cards[this.index + 1];

apps/front/src/app/study-set/study-set.component.ts

@@ -107,6 +107,10 @@ export class StudySetComponent implements OnInit {
       }
     });
 
+    card.instance.addCardEvent.subscribe(() => {
+      this.addCard({ editingEnabled: true });
+    });
+
     this.cards.push(card);
     this.updateCardIndices();
   }