fix: Mobile screen rotation fix

docs/docs/changelog.md

@@ -7,6 +7,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 ### [Unreleased]
 
 -   feat: adds support for tabs [`#1169`](https://github.com/st3v3nmw/obsidian-spaced-repetition/pull/1169)
+-   fix: fixes any issues with the landscape mode of mobile devices & added documentation for UI changes[`#1194`](https://github.com/st3v3nmw/obsidian-spaced-repetition/pull/1194)
 
 #### [1.13.2](https://github.com/st3v3nmw/obsidian-spaced-repetition/compare/1.13.1...1.13.2)
 

docs/docs/en/contributing.md

@@ -77,6 +77,8 @@ Please note that:
 
 ## Code
 
+### General changes
+
 1. Make your changes.
 2. Run `pnpm dev` to watch for changes & rebuild the plugin automatically.
 3. You could create symbolic links between the build files and the Obsidian vault, example:
@@ -100,6 +102,33 @@ Please note that:
     - Format the code in case any warnings are raised: `pnpm format`
 7. Open the pull request.
 
+### UI changes
+
+-   All UI changes should be made in the `src/gui/` folder.
+
+-   Put your changes under the right section (see "MARK:" or "#region" comments in the code).
+
+-   Document your functions & classes with JSDoc.
+
+-   One can switch between mobile view and desktop view by entering the following command in developer console:
+
+    ```js
+    this.app.emulateMobile(false); // to switch to desktop view
+
+    this.app.emulateMobile(true); // to switch to mobile view
+    ```
+
+-   Test your changes in all arrangements that the ui can be in:
+    1. Desktop
+    2. Mobile portrait mode
+    3. Small sized mobile device
+    4. Mobile landscape mode
+    5. Tablet landscape mode
+    6. Tablet portrait mode
+    7. All the above, but with tab view option enabled
+    8. All the above, but with tab view option disabled
+    9. All the above, but with tab view option disabled and different flashcard height/width percentages
+
 ---
 
 ## Documentation

docs/docs/zh/contributing.md

@@ -77,6 +77,8 @@ Please note that:
 
 ## Code
 
+### General changes
+
 1. Make your changes.
 2. Run `pnpm dev` to watch for changes & rebuild the plugin automatically.
 3. You could create symbolic links between the build files and the Obsidian vault, example:
@@ -100,6 +102,33 @@ Please note that:
     - Format the code in case any warnings are raised: `pnpm format`
 7. Open the pull request.
 
+### UI changes
+
+-   All UI changes should be made in the `src/gui/` folder.
+
+-   Put your changes under the right section (see "MARK:" or "#region" comments in the code).
+
+-   Document your functions & classes with JSDoc.
+
+-   One can switch between mobile view and desktop view by entering the following command in developer console:
+
+    ```js
+    this.app.emulateMobile(false); // to switch to desktop view
+
+    this.app.emulateMobile(true); // to switch to mobile view
+    ```
+
+-   Test your changes in all arrangements that the ui can be in:
+    1. Desktop
+    2. Mobile portrait mode
+    3. Small sized mobile device
+    4. Mobile landscape mode
+    5. Tablet landscape mode
+    6. Tablet portrait mode
+    7. All the above, but with tab view option enabled
+    8. All the above, but with tab view option disabled
+    9. All the above, but with tab view option disabled and different flashcard height/width percentages
+
 ---
 
 ## Documentation

src/flashcard-review-sequencer.ts

@@ -25,21 +25,68 @@ export interface IFlashcardReviewSequencer {
     setDeckTree(originalDeckTree: Deck, remainingDeckTree: Deck): void;
     setCurrentDeck(topicPath: TopicPath): void;
     getDeckStats(topicPath: TopicPath): DeckStats;
+    getSubDecksWithCardsInQueue(deck: Deck): Deck[];
     skipCurrentCard(): void;
     determineCardSchedule(response: ReviewResponse, card: Card): RepItemScheduleInfo;
     processReview(response: ReviewResponse): Promise<void>;
     updateCurrentQuestionText(text: string): Promise<void>;
 }
 
+/**
+ * Represents statistics for a deck and its subdecks.
+ *
+ * @property {number} totalCount - Total number of cards in this deck and all subdecks.
+ * @property {number} dueCount - Number of due cards in this deck and all subdecks.
+ * @property {number} newCount - Number of new cards in this deck and all subdecks.
+ * @property {number} cardsInQueueCount - Number of cards in the queue of this deck and all subdecks.
+ * @property {number} dueCardsInQueueOfThisDeckCount - Number of due cards just in this deck.
+ * @property {number} newCardsInQueueOfThisDeckCount - Number of new cards just in this deck.
+ * @property {number} cardsInQueueOfThisDeckCount - Total number of cards in queue just in this deck.
+ * @property {number} subDecksInQueueOfThisDeckCount - Number of subdecks in the queue just in this deck.
+ * @property {number} decksInQueueOfThisDeckCount - Total number of decks in the queue including this deck and its subdecks.
+ *
+ * @constructor
+ * @param {number} totalCount - Initializes the total count of cards.
+ * @param {number} dueCount - Initializes the due count of cards.
+ * @param {number} newCount - Initializes the new count of cards.
+ * @param {number} cardsInQueueCount - Initializes the count of cards in the queue.
+ * @param {number} dueCardsInQueueOfThisDeckCount - Initializes the count of due cards just in this deck.
+ * @param {number} newCardsInQueueOfThisDeckCount - Initializes the count of new cards just in this deck.
+ * @param {number} cardsInQueueOfThisDeckCount - Initializes the count of all cards in the queue just in this deck.
+ * @param {number} subDecksInQueueOfThisDeckCount - Initializes the count of subdecks in the queue just in this deck.
+ * @param {number} decksInQueueOfThisDeckCount - Initializes the count of all decks in the queue including this deck and its subdecks.
+ */
 export class DeckStats {
+    totalCount: number;
     dueCount: number;
     newCount: number;
-    totalCount: number;
+    cardsInQueueCount: number;
+    dueCardsInQueueOfThisDeckCount: number;
+    newCardsInQueueOfThisDeckCount: number;
+    cardsInQueueOfThisDeckCount: number;
+    subDecksInQueueOfThisDeckCount: number;
+    decksInQueueOfThisDeckCount: number;
 
-    constructor(dueCount: number, newCount: number, totalCount: number) {
+    constructor(
+        totalCount: number,
+        dueCount: number,
+        newCount: number,
+        cardsInQueueCount: number,
+        dueCardsInQueueOfThisDeckCount: number,
+        newCardsInQueueOfThisDeckCount: number,
+        cardsInQueueOfThisDeckCount: number,
+        subDecksInQueueOfThisDeckCount: number,
+        decksInQueueOfThisDeckCount: number,
+    ) {
         this.dueCount = dueCount;
         this.newCount = newCount;
         this.totalCount = totalCount;
+        this.cardsInQueueCount = cardsInQueueCount;
+        this.dueCardsInQueueOfThisDeckCount = dueCardsInQueueOfThisDeckCount;
+        this.newCardsInQueueOfThisDeckCount = newCardsInQueueOfThisDeckCount;
+        this.cardsInQueueOfThisDeckCount = cardsInQueueOfThisDeckCount;
+        this.subDecksInQueueOfThisDeckCount = subDecksInQueueOfThisDeckCount;
+        this.decksInQueueOfThisDeckCount = decksInQueueOfThisDeckCount;
     }
 }
 
@@ -123,7 +170,53 @@ export class FlashcardReviewSequencer implements IFlashcardReviewSequencer {
         const remainingDeck: Deck = this.remainingDeckTree.getDeck(topicPath);
         const newCount: number = remainingDeck.getDistinctCardCount(CardListType.NewCard, true);
         const dueCount: number = remainingDeck.getDistinctCardCount(CardListType.DueCard, true);
-        return new DeckStats(dueCount, newCount, totalCount);
+
+        // Sry for the long variable names, but I needed all these distinct counts in the UI
+        const newCardsInQueueOfThisDeckCount = remainingDeck.getDistinctCardCount(
+            CardListType.NewCard,
+            false,
+        );
+        const dueCardsInQueueOfThisDeckCount = remainingDeck.getDistinctCardCount(
+            CardListType.DueCard,
+            false,
+        );
+        const cardsInQueueOfThisDeckCount =
+            newCardsInQueueOfThisDeckCount + dueCardsInQueueOfThisDeckCount;
+
+        const subDecksInQueueOfThisDeckCount =
+            this.getSubDecksWithCardsInQueue(remainingDeck).length;
+        const decksInQueueOfThisDeckCount =
+            cardsInQueueOfThisDeckCount > 0
+                ? subDecksInQueueOfThisDeckCount + 1
+                : subDecksInQueueOfThisDeckCount;
+
+        return new DeckStats(
+            totalCount,
+            dueCount,
+            newCount,
+            dueCount + newCount,
+            dueCardsInQueueOfThisDeckCount,
+            newCardsInQueueOfThisDeckCount,
+            cardsInQueueOfThisDeckCount,
+            subDecksInQueueOfThisDeckCount,
+            decksInQueueOfThisDeckCount,
+        );
+    }
+
+    getSubDecksWithCardsInQueue(deck: Deck): Deck[] {
+        let subDecksWithCardsInQueue: Deck[] = [];
+
+        deck.subdecks.forEach((subDeck) => {
+            subDecksWithCardsInQueue = subDecksWithCardsInQueue.concat(
+                this.getSubDecksWithCardsInQueue(subDeck),
+            );
+
+            const newCount: number = subDeck.getDistinctCardCount(CardListType.NewCard, false);
+            const dueCount: number = subDeck.getDistinctCardCount(CardListType.DueCard, false);
+            if (newCount + dueCount > 0) subDecksWithCardsInQueue.push(subDeck);
+        });
+
+        return subDecksWithCardsInQueue;
     }
 
     skipCurrentCard(): void {