new(quests): Add questLineDetailsModal showing past steps (pokeclicker#5800)

* Makes finished or current quest lines clickable.

Makes finished or in-progress quest lines clickable, so you can see the list of tasks for each quest.

* feedback from AevitasDragonki taken into account

* Modifications to transfer everything to HTML

* Cleanup

QuestLine translation support, clearer variable names (mostly 'quest' -> 'questLine' where appropriate), moving questline modal code to its own class.

---------

Co-authored-by: GUIFFANT Hippolythe <hippolythe.guiffant@sporasteria.com>
Co-authored-by: umbralOptimatum <umbralOptimatum@users.noreply.github.com>

Author: 3 people

src/components/bulletinBoardModal.html

@@ -13,10 +13,10 @@ <h5 class="modal-title" id="bulletinBoardModalLabel">Bulletin Board</h5>
                         <!-- ko foreach: $data -->
                         <td class="col-md-3">
                             <div class="text-left bulletin-paper card">
-                                <div class="card-footer">
+                                <div class="card-footer clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
                                     <h5 class="card-title m-0" data-bind="text: $data.displayName">Card title</h5>
                                 </div>
-                                <div class="card-body d-flex flex-column">
+                                <div class="card-body d-flex flex-column clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
                                     <p class="card-text flex-grow-1" data-bind="text: $data.description">Description</p>
                                     <!-- ko if: $data.state() == QuestLineState.suspended -->
                                     <div class="text-center text-muted small">

src/components/pokemonListContainer.html

@@ -56,7 +56,7 @@
                     <tbody data-bind="let: { lazyPokemonList: lazyLoad('lazyPokemonList', $element, PartyController.getSortedList, { pageSize: 20, reset: () => (DisplayObservables.collapseState.pokemonListBody === 'hidden'), pause: () => DisplayObservables.collapseState.pokemonListBody !== 'show' }) }">
                     <!-- ko if: DisplayObservables.collapseState.pokemonListBody !== 'hidden' -->
                         <!-- ko foreach: lazyPokemonList, childrenComplete: () => { lazyLoadCallback('lazyPokemonList'); } -->
-                        <tr data-toggle="modal" href="#pokemonStatisticsModal" data-bind="hidden: $data.breeding, click: () => { App.game.statistics.selectedPokemonID($data.id) }">
+                        <tr data-toggle="modal" class="clickable" href="#pokemonStatisticsModal" data-bind="hidden: $data.breeding, click: () => { App.game.statistics.selectedPokemonID($data.id) }">
                             <td>
                                 <img
                                     class="smallImage"

src/components/questLineDetailsModal.html

@@ -0,0 +1,32 @@
+<div class="modal noselect fade" id="questLineDetailsModal" tabindex="-1" role="dialog" aria-labelledby="questLineDetailsModalLabel">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
+        <div class="modal-content" data-bind="with: QuestLineController.questLineObservable(), as: 'questLine'">
+            <div class="modal-header align-items-center">
+                <h4 class="m-0" data-bind="text: questLine.displayName"></h4>
+            </div>
+            <div class="modal-body p-0 p-md-2 p-lg-3">
+                <table class="table table-striped table-bordered table-hover table-sm m-0">
+                    <tbody data-bind="foreach: questLine.quests()">
+                        <tr data-bind="css: { 'bg-info': (questLine.state() === QuestLineState.started || questLine.state() === QuestLineState.suspended) && $index() === questLine.curQuest() }">
+                            <td class="vertical-middle"><div class="px-2" data-bind="text: $index() + 1"></div></td>
+                            <td class="vertical-middle text-left">
+                                <div class="px-2" data-bind="text: ($index() <= questLine.curQuest() && questLine.state() !== QuestLineState.inactive) || questLine.state() === QuestLineState.ended ? $data.description : '???'"></div>
+                            </td>
+                            <td class="vertical-middle">
+                                <div class="px-2 text-nowrap">
+                                    <span class="text-success" data-bind="if: questLine.state() === QuestLineState.ended || $index() < questLine.curQuest()">Completed</span>
+                                    <span class="text-danger" data-bind="if: questLine.state() === QuestLineState.inactive || (questLine.state() !== QuestLineState.ended && $index() > questLine.curQuest())">Locked</span>
+                                    <span data-bind="if: questLine.state() === QuestLineState.started && $index() === questLine.curQuest()">In progress</span>
+                                    <span data-bind="if: questLine.state() === QuestLineState.suspended && $index() === questLine.curQuest()">Paused</span>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>

src/components/questModal.html

@@ -95,11 +95,13 @@ <h6 class="m-0 text-light font-weight-bold">Active Quest Lines</h6>
                                 </thead>
                                 <tbody data-bind="foreach: $data.active">
                                     <tr>
-                                        <td>
+                                        <td class="clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
                                             <knockout class="font-weight-bold d-block" data-bind="text: $data.displayName"></knockout>
                                             <knockout class="small" data-bind="text: $data.description"></knockout>
                                         </td>
-                                        <td class="text-nowrap align-middle text-center" data-bind="text: `${$data.curQuest() + 1} / ${$data.totalQuests}`"></td>
+                                        <td class="clickable text-nowrap align-middle text-center" data-bind="
+                                            text: `${$data.curQuest() + 1} / ${$data.totalQuests}`,
+                                            click: () => { QuestLineController.showQuestLineDetailsModal($data) }"></td>
                                         <td class="align-middle text-center">
                                             <button type="button" class="btn btn-danger btn-sm" data-bind="click: () => { $data.suspendQuest() }, tooltip: {
                                                 title: $data.pauseTooltip,
@@ -126,7 +128,7 @@ <h6 class="m-0 text-light font-weight-bold">Available Quest Lines</h6>
                                     </tr>
                                 </thead>
                                 <tbody data-bind="foreach: $data.available">
-                                    <tr>
+                                    <tr class="clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
                                         <td>
                                             <knockout class="font-weight-bold d-block" data-bind="text: $data.displayName"></knockout>
                                             <knockout class="small" data-bind="text: $data.description"></knockout>
@@ -143,7 +145,7 @@ <h6 class="m-0 text-light font-weight-bold">Complete Quest Lines</h6>
                             </div>
                             <table class="table table-striped table-bordered table-hover table-sm">
                                 <tbody data-bind="foreach: $data.complete">
-                                    <tr>
+                                    <tr class="clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
                                         <td>
                                             <knockout class="font-weight-bold d-block" data-bind="text: $data.displayName"></knockout>
                                             <knockout class="small" data-bind="text: $data.description"></knockout>

src/components/questStepClearedModal.html

@@ -2,18 +2,18 @@
 aria-labelledby="questStepClearedModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
-    <!-- ko if: Quest.questObservable()?.optionalArgs -->
+    <!-- ko if: QuestLineController.questStepObservable()?.optionalArgs -->
        <div class="modal-header">
            <div style="width: 100%;">
             <img src="" onerror="this.src='assets/images/npcs/specialNPCs/Mysterious Trainer.png'"
-                data-bind="attr:{ src: Quest.questObservable().getNpcImage()}">
+                data-bind="attr:{ src: QuestLineController.questStepObservable().getNpcImage()}">
             <h5 class="modal-title" id="questStepClearedModalLabel"
-                data-bind="text: Quest.questObservable().getNpcDisplayName()">Modal title</h5>
+                data-bind="text: QuestLineController.questStepObservable().getNpcDisplayName()">Modal title</h5>
 
            </div>
         </div>
         <div class="modal-body">
-            <p data-bind="html: TextMerger.mergeText(Quest.questObservable()?.getClearedMessage())"></p>
+            <p data-bind="html: TextMerger.mergeText(QuestLineController.questStepObservable()?.getClearedMessage())"></p>
 
         </div>
         <div class="modal-footer">

src/index.html

@@ -535,6 +535,9 @@ <h2 class="pageItemFooter" style="display: block; font-size: 1rem;">
 <!-- Moon Phase Modal -->
 @import "moonPhaseModal.html"
 
+<!-- QuestLine Details Modal -->
+@import "questLineDetailsModal.html"
+
 <script type="text/javascript">
 // Check if we are running in an iframe
 if (self !== top) {

src/scripts/quests/Quest.ts

@@ -6,8 +6,6 @@ type QuestOptionalArgument = {
 };
 
 abstract class Quest {
-    public static questObservable: KnockoutObservable<Quest> = ko.observable();
-
     index: number;
     amount: number
     protected customDescription?: string;
@@ -92,8 +90,7 @@ abstract class Quest {
                 this.customReward();
             }
             if (this.optionalArgs?.clearedMessage !== undefined) {
-                Quest.questObservable(this);
-                $('#questStepClearedModal').modal('show');
+                QuestLineController.showQuestStepClearedModal(this);
             }
             this.deleteFocusSub();
             this.claimed(true);

src/scripts/quests/QuestLine.ts

@@ -188,6 +188,7 @@ class QuestLine {
         if (this.curQuestObject() instanceof MultipleQuestsQuest) {
             json.initial = this.curQuestObject().quests.map((q) => q.isCompleted() ? true : q.initial());
         }
+
         return json;
     }
 }

src/scripts/quests/QuestLineController.ts

@@ -0,0 +1,14 @@
+class QuestLineController  {
+    public static questLineObservable: KnockoutObservable<QuestLine> = ko.observable(null);
+    public static questStepObservable: KnockoutObservable<Quest> = ko.observable(null);
+
+    public static showQuestLineDetailsModal(questLine: QuestLine) {
+        this.questLineObservable(questLine);
+        $('#questLineDetailsModal').modal('show').one('hidden.bs.modal', () => QuestLineController.questLineObservable(null));
+    }
+
+    public static showQuestStepClearedModal(quest: Quest) {
+        this.questStepObservable(quest);
+        $('#questStepClearedModal').modal('show').one('hidden.bs.modal', () => QuestLineController.questStepObservable(null));
+    }
+}

src/scripts/quests/Quests.ts

@@ -41,7 +41,7 @@ class Quests implements Saveable {
         return list.sort(Quests.questCompareBy);
     });
 
-    constructor() {}
+    constructor() { }
 
     static questCompareBy(quest1, quest2): number {
         if (Quests.getQuestSortStatus(quest1) < Quests.getQuestSortStatus(quest2)) {
@@ -78,7 +78,7 @@ class Quests implements Saveable {
     }
 
     public beginQuest(index: number) {
-        const quest  = this.questList()[index];
+        const quest = this.questList()[index];
         // Check if we can start a new quest, and the requested quest isn't started or completed
         if (this.canStartNewQuest() && quest && !quest.inProgress() && !quest.isCompleted()) {
             quest.begin();
@@ -95,7 +95,7 @@ class Quests implements Saveable {
 
     public quitQuest(index: number, shouldConfirm = false) {
         // Check if we can quit this quest
-        const quest  = this.questList()[index];
+        const quest = this.questList()[index];
         if (quest && quest.inProgress()) {
             quest.quit(shouldConfirm);
         } else {
@@ -108,7 +108,7 @@ class Quests implements Saveable {
 
     public claimQuest(index: number) {
         // Check if we can claim this quest
-        const quest  = this.questList()[index];
+        const quest = this.questList()[index];
         if (quest && quest.isCompleted() && !quest.claimed()) {
             quest.claim();
             if (player.highestRegion() >= GameConstants.Region.kalos && App.game.party.alreadyCaughtPokemonByName('Medicham') && !player.hasMegaStone(GameConstants.MegaStoneType.Medichamite)) {
@@ -293,7 +293,7 @@ class Quests implements Saveable {
     public questProgressTooltip() {
         const level = this.level();
         const xp = this.xp();
-        return {title : `${(xp - this.levelToXP(level)).toLocaleString('en-US')} / ${(this.levelToXP(level + 1) - this.levelToXP(level)).toLocaleString('en-US')}`, trigger : 'hover' };
+        return { title: `${(xp - this.levelToXP(level)).toLocaleString('en-US')} / ${(this.levelToXP(level + 1) - this.levelToXP(level)).toLocaleString('en-US')}`, trigger: 'hover' };
     }
 
     public isDailyQuestsUnlocked() {