feat: add ProgressBarService

- add `.memodack___blitz__progress` to styles

src/main.ts

@@ -10,6 +10,7 @@ import {
   cacheService,
   checkService,
   mppService,
+  progressBarService,
   translateCommandService,
   triggerSettingsService,
 } from './services';
@@ -93,6 +94,7 @@ export default class MemodackPlugin extends Plugin {
       this.app,
       actionsService,
       blitzService,
+      progressBarService,
     );
   }
 

src/services/blitz-modal.service.ts

@@ -3,6 +3,7 @@ import { App, Modal } from 'obsidian';
 import { IActionsService } from './actions.service';
 import { IBlitzService } from './blitz.service';
 import { IPart } from './parts.service';
+import { IProgressBarService } from './progress-bar.service';
 
 export interface IBlitzModalService {
   setParts(parts: IPart[]): void;
@@ -11,17 +12,19 @@ export interface IBlitzModalService {
 export class BlitzModalService extends Modal implements IBlitzModalService {
   private actionsService: IActionsService;
   private blitzService: IBlitzService;
+  private progressBarService: IProgressBarService;
   private parts: IPart[] = [];
 
   constructor(
     app: App,
-
     actionsService: IActionsService,
     blitzService: IBlitzService,
+    progressBarService: IProgressBarService,
   ) {
     super(app);
     this.actionsService = actionsService;
     this.blitzService = blitzService;
+    this.progressBarService = progressBarService;
   }
 
   setParts(parts: IPart[]): void {
@@ -30,7 +33,11 @@ export class BlitzModalService extends Modal implements IBlitzModalService {
 
   onOpen(): void {
     this.blitzService.create(this.parts);
-    this.createBlitz(0);
+
+    const id = 0;
+
+    this.progressBarService.create(this.contentEl, this.parts.length, id);
+    this.createBlitz(id);
   }
 
   onClose(): void {
@@ -105,7 +112,8 @@ export class BlitzModalService extends Modal implements IBlitzModalService {
       });
     });
 
-    this.createHrElement();
+    answersElement.appendChild(this.progressBarService.getElement());
+    this.progressBarService.setValue(this.blitzService.getProgress());
 
     const blitzNext = contentEl.createEl('div');
     blitzNext.addClass('memodack___blitz__next');
@@ -132,10 +140,4 @@ export class BlitzModalService extends Modal implements IBlitzModalService {
     questionH2Element.setText(text);
     questionH2Element.addClass('memodack___blitz__text');
   }
-
-  private createHrElement(): void {
-    const { contentEl } = this;
-    const hrElement = contentEl.createEl('hr');
-    hrElement.addClass('memodack___blitz__hr');
-  }
 }

src/services/index.ts

@@ -16,3 +16,4 @@ export * from './setting-tab.service';
 export * from './shuffle.service';
 export * from './translate-command.service';
 export * from './trigger-settings.service';
+export * from './progress-bar.service';

src/services/progress-bar.service.ts

@@ -0,0 +1,45 @@
+export interface IProgressBarService {
+  create(contentEl: HTMLElement, max: number, value: number): void;
+  setMax(max: number): void;
+  setValue(value: number): void;
+  getValue(): number;
+  getElement(): HTMLProgressElement;
+}
+
+export class ProgressBarService implements IProgressBarService {
+  private _progressElement: HTMLProgressElement | null = null;
+
+  create(contentEl: HTMLElement, max: number, value: number): void {
+    this._progressElement = contentEl.createEl('progress');
+    this._progressElement.addClass('memodack___blitz__progress');
+
+    this.setMax(max);
+    this.setValue(value);
+  }
+
+  setMax(max: number): void {
+    this.progressElement.max = max;
+  }
+
+  setValue(value: number): void {
+    this.progressElement.value = value;
+  }
+
+  getValue(): number {
+    return this.progressElement.value;
+  }
+
+  getElement(): HTMLProgressElement {
+    return this.progressElement;
+  }
+
+  private get progressElement(): HTMLProgressElement {
+    if (!this._progressElement) {
+      throw new Error('The progress element has not been created.');
+    }
+
+    return this._progressElement;
+  }
+}
+
+export const progressBarService = new ProgressBarService();

src/styles.css

@@ -45,9 +45,19 @@
   box-shadow: var(--input-shadow);
 }
 
-.memodack___blitz__hr {
-  border-top-width: 1px;
+.memodack___blitz__progress {
+  height: 1px;
   margin: 1rem 0;
+  width: 100%;
+  border: none;
+}
+
+.memodack___blitz__progress::-webkit-progress-bar {
+  background-color: var(--hr-color);
+}
+
+.memodack___blitz__progress::-webkit-progress-value {
+  background-color: #4caf50;
 }
 
 .memodack___blitz__next {