Skip to content

Commit 02a85eb

Browse files
hippolytheGUIFFANT HippolytheumbralOptimatum
authored
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>
1 parent bf8b5e0 commit 02a85eb

File tree

12 files changed

+78
-25
lines changed

12 files changed

+78
-25
lines changed

src/components/bulletinBoardModal.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ <h5 class="modal-title" id="bulletinBoardModalLabel">Bulletin Board</h5>
1313
<!-- ko foreach: $data -->
1414
<td class="col-md-3">
1515
<div class="text-left bulletin-paper card">
16-
<div class="card-footer">
16+
<div class="card-footer clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
1717
<h5 class="card-title m-0" data-bind="text: $data.displayName">Card title</h5>
1818
</div>
19-
<div class="card-body d-flex flex-column">
19+
<div class="card-body d-flex flex-column clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
2020
<p class="card-text flex-grow-1" data-bind="text: $data.description">Description</p>
2121
<!-- ko if: $data.state() == QuestLineState.suspended -->
2222
<div class="text-center text-muted small">

src/components/pokemonListContainer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<tbody data-bind="let: { lazyPokemonList: lazyLoad('lazyPokemonList', $element, PartyController.getSortedList, { pageSize: 20, reset: () => (DisplayObservables.collapseState.pokemonListBody === 'hidden'), pause: () => DisplayObservables.collapseState.pokemonListBody !== 'show' }) }">
5757
<!-- ko if: DisplayObservables.collapseState.pokemonListBody !== 'hidden' -->
5858
<!-- ko foreach: lazyPokemonList, childrenComplete: () => { lazyLoadCallback('lazyPokemonList'); } -->
59-
<tr data-toggle="modal" href="#pokemonStatisticsModal" data-bind="hidden: $data.breeding, click: () => { App.game.statistics.selectedPokemonID($data.id) }">
59+
<tr data-toggle="modal" class="clickable" href="#pokemonStatisticsModal" data-bind="hidden: $data.breeding, click: () => { App.game.statistics.selectedPokemonID($data.id) }">
6060
<td>
6161
<img
6262
class="smallImage"
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="modal noselect fade" id="questLineDetailsModal" tabindex="-1" role="dialog" aria-labelledby="questLineDetailsModalLabel">
2+
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
3+
<div class="modal-content" data-bind="with: QuestLineController.questLineObservable(), as: 'questLine'">
4+
<div class="modal-header align-items-center">
5+
<h4 class="m-0" data-bind="text: questLine.displayName"></h4>
6+
</div>
7+
<div class="modal-body p-0 p-md-2 p-lg-3">
8+
<table class="table table-striped table-bordered table-hover table-sm m-0">
9+
<tbody data-bind="foreach: questLine.quests()">
10+
<tr data-bind="css: { 'bg-info': (questLine.state() === QuestLineState.started || questLine.state() === QuestLineState.suspended) && $index() === questLine.curQuest() }">
11+
<td class="vertical-middle"><div class="px-2" data-bind="text: $index() + 1"></div></td>
12+
<td class="vertical-middle text-left">
13+
<div class="px-2" data-bind="text: ($index() <= questLine.curQuest() && questLine.state() !== QuestLineState.inactive) || questLine.state() === QuestLineState.ended ? $data.description : '???'"></div>
14+
</td>
15+
<td class="vertical-middle">
16+
<div class="px-2 text-nowrap">
17+
<span class="text-success" data-bind="if: questLine.state() === QuestLineState.ended || $index() < questLine.curQuest()">Completed</span>
18+
<span class="text-danger" data-bind="if: questLine.state() === QuestLineState.inactive || (questLine.state() !== QuestLineState.ended && $index() > questLine.curQuest())">Locked</span>
19+
<span data-bind="if: questLine.state() === QuestLineState.started && $index() === questLine.curQuest()">In progress</span>
20+
<span data-bind="if: questLine.state() === QuestLineState.suspended && $index() === questLine.curQuest()">Paused</span>
21+
</div>
22+
</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
</div>
27+
<div class="modal-footer">
28+
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
29+
</div>
30+
</div>
31+
</div>
32+
</div>

src/components/questModal.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,13 @@ <h6 class="m-0 text-light font-weight-bold">Active Quest Lines</h6>
9595
</thead>
9696
<tbody data-bind="foreach: $data.active">
9797
<tr>
98-
<td>
98+
<td class="clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
9999
<knockout class="font-weight-bold d-block" data-bind="text: $data.displayName"></knockout>
100100
<knockout class="small" data-bind="text: $data.description"></knockout>
101101
</td>
102-
<td class="text-nowrap align-middle text-center" data-bind="text: `${$data.curQuest() + 1} / ${$data.totalQuests}`"></td>
102+
<td class="clickable text-nowrap align-middle text-center" data-bind="
103+
text: `${$data.curQuest() + 1} / ${$data.totalQuests}`,
104+
click: () => { QuestLineController.showQuestLineDetailsModal($data) }"></td>
103105
<td class="align-middle text-center">
104106
<button type="button" class="btn btn-danger btn-sm" data-bind="click: () => { $data.suspendQuest() }, tooltip: {
105107
title: $data.pauseTooltip,
@@ -126,7 +128,7 @@ <h6 class="m-0 text-light font-weight-bold">Available Quest Lines</h6>
126128
</tr>
127129
</thead>
128130
<tbody data-bind="foreach: $data.available">
129-
<tr>
131+
<tr class="clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
130132
<td>
131133
<knockout class="font-weight-bold d-block" data-bind="text: $data.displayName"></knockout>
132134
<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>
143145
</div>
144146
<table class="table table-striped table-bordered table-hover table-sm">
145147
<tbody data-bind="foreach: $data.complete">
146-
<tr>
148+
<tr class="clickable" data-bind="click: () => { QuestLineController.showQuestLineDetailsModal($data) }">
147149
<td>
148150
<knockout class="font-weight-bold d-block" data-bind="text: $data.displayName"></knockout>
149151
<knockout class="small" data-bind="text: $data.description"></knockout>

src/components/questStepClearedModal.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
aria-labelledby="questStepClearedModalLabel" aria-hidden="true">
33
<div class="modal-dialog modal-dialog-scrollable" role="document">
44
<div class="modal-content">
5-
<!-- ko if: Quest.questObservable()?.optionalArgs -->
5+
<!-- ko if: QuestLineController.questStepObservable()?.optionalArgs -->
66
<div class="modal-header">
77
<div style="width: 100%;">
88
<img src="" onerror="this.src='assets/images/npcs/specialNPCs/Mysterious Trainer.png'"
9-
data-bind="attr:{ src: Quest.questObservable().getNpcImage()}">
9+
data-bind="attr:{ src: QuestLineController.questStepObservable().getNpcImage()}">
1010
<h5 class="modal-title" id="questStepClearedModalLabel"
11-
data-bind="text: Quest.questObservable().getNpcDisplayName()">Modal title</h5>
11+
data-bind="text: QuestLineController.questStepObservable().getNpcDisplayName()">Modal title</h5>
1212

1313
</div>
1414
</div>
1515
<div class="modal-body">
16-
<p data-bind="html: TextMerger.mergeText(Quest.questObservable()?.getClearedMessage())"></p>
16+
<p data-bind="html: TextMerger.mergeText(QuestLineController.questStepObservable()?.getClearedMessage())"></p>
1717

1818
</div>
1919
<div class="modal-footer">

src/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -535,6 +535,9 @@ <h2 class="pageItemFooter" style="display: block; font-size: 1rem;">
535535
<!-- Moon Phase Modal -->
536536
@import "moonPhaseModal.html"
537537

538+
<!-- QuestLine Details Modal -->
539+
@import "questLineDetailsModal.html"
540+
538541
<script type="text/javascript">
539542
// Check if we are running in an iframe
540543
if (self !== top) {

src/scripts/quests/Quest.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ type QuestOptionalArgument = {
66
};
77

88
abstract class Quest {
9-
public static questObservable: KnockoutObservable<Quest> = ko.observable();
10-
119
index: number;
1210
amount: number
1311
protected customDescription?: string;
@@ -92,8 +90,7 @@ abstract class Quest {
9290
this.customReward();
9391
}
9492
if (this.optionalArgs?.clearedMessage !== undefined) {
95-
Quest.questObservable(this);
96-
$('#questStepClearedModal').modal('show');
93+
QuestLineController.showQuestStepClearedModal(this);
9794
}
9895
this.deleteFocusSub();
9996
this.claimed(true);

src/scripts/quests/QuestLine.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@ class QuestLine {
188188
if (this.curQuestObject() instanceof MultipleQuestsQuest) {
189189
json.initial = this.curQuestObject().quests.map((q) => q.isCompleted() ? true : q.initial());
190190
}
191+
191192
return json;
192193
}
193194
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
class QuestLineController {
2+
public static questLineObservable: KnockoutObservable<QuestLine> = ko.observable(null);
3+
public static questStepObservable: KnockoutObservable<Quest> = ko.observable(null);
4+
5+
public static showQuestLineDetailsModal(questLine: QuestLine) {
6+
this.questLineObservable(questLine);
7+
$('#questLineDetailsModal').modal('show').one('hidden.bs.modal', () => QuestLineController.questLineObservable(null));
8+
}
9+
10+
public static showQuestStepClearedModal(quest: Quest) {
11+
this.questStepObservable(quest);
12+
$('#questStepClearedModal').modal('show').one('hidden.bs.modal', () => QuestLineController.questStepObservable(null));
13+
}
14+
}

src/scripts/quests/Quests.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class Quests implements Saveable {
4141
return list.sort(Quests.questCompareBy);
4242
});
4343

44-
constructor() {}
44+
constructor() { }
4545

4646
static questCompareBy(quest1, quest2): number {
4747
if (Quests.getQuestSortStatus(quest1) < Quests.getQuestSortStatus(quest2)) {
@@ -78,7 +78,7 @@ class Quests implements Saveable {
7878
}
7979

8080
public beginQuest(index: number) {
81-
const quest = this.questList()[index];
81+
const quest = this.questList()[index];
8282
// Check if we can start a new quest, and the requested quest isn't started or completed
8383
if (this.canStartNewQuest() && quest && !quest.inProgress() && !quest.isCompleted()) {
8484
quest.begin();
@@ -95,7 +95,7 @@ class Quests implements Saveable {
9595

9696
public quitQuest(index: number, shouldConfirm = false) {
9797
// Check if we can quit this quest
98-
const quest = this.questList()[index];
98+
const quest = this.questList()[index];
9999
if (quest && quest.inProgress()) {
100100
quest.quit(shouldConfirm);
101101
} else {
@@ -108,7 +108,7 @@ class Quests implements Saveable {
108108

109109
public claimQuest(index: number) {
110110
// Check if we can claim this quest
111-
const quest = this.questList()[index];
111+
const quest = this.questList()[index];
112112
if (quest && quest.isCompleted() && !quest.claimed()) {
113113
quest.claim();
114114
if (player.highestRegion() >= GameConstants.Region.kalos && App.game.party.alreadyCaughtPokemonByName('Medicham') && !player.hasMegaStone(GameConstants.MegaStoneType.Medichamite)) {
@@ -293,7 +293,7 @@ class Quests implements Saveable {
293293
public questProgressTooltip() {
294294
const level = this.level();
295295
const xp = this.xp();
296-
return {title : `${(xp - this.levelToXP(level)).toLocaleString('en-US')} / ${(this.levelToXP(level + 1) - this.levelToXP(level)).toLocaleString('en-US')}`, trigger : 'hover' };
296+
return { title: `${(xp - this.levelToXP(level)).toLocaleString('en-US')} / ${(this.levelToXP(level + 1) - this.levelToXP(level)).toLocaleString('en-US')}`, trigger: 'hover' };
297297
}
298298

299299
public isDailyQuestsUnlocked() {

0 commit comments

Comments
 (0)