monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-08 05:03:39 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: rework change page function

Browse source 
remove unnecessary wrapping promise
use promiseAnimation for easier understanding
This commit is contained in:
Miodec 2025-08-16 00:01:30 +02:00
parent 2b4c3d2efe
commit 1402b3addf
1 changed files with 81 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
frontend/src/ts/controllers/page-controller.ts
View file

@ -39,6 +39,16 @@ function updateOpenGraphUrl(): void {
}
}
function updateTitle(nextPage: { id: string; display?: string }): void {
if (nextPage.id === "test") {
Misc.updateTitle();
} else {
const titleString =
nextPage.display ?? Strings.capitalizeFirstLetterOfEachWord(nextPage.id);
Misc.updateTitle(`${titleString} | Monkeytype`);
}
}
export async function change(
pageName: PageName,
options = {} as ChangeOptions
@ -49,77 +59,83 @@ export async function change(
options = { ...defaultOptions, ...options };
return new Promise((resolve) => {
if (PageTransition.get()) {
console.debug(
`change page to ${pageName} stopped, page transition is true`
);
resolve(false);
return;
}
if (PageTransition.get()) {
console.debug(
`change page to ${pageName} stopped, page transition is true`
);
return false;
}
if (!options.force && ActivePage.get() === pageName) {
console.debug(`change page ${pageName} stoped, page already active`);
resolve(false);
return;
} else {
console.log(`changing page ${pageName}`);
}
if (!options.force && ActivePage.get() === pageName) {
console.debug(`change page ${pageName} stoped, page already active`);
return false;
} else {
console.log(`changing page ${pageName}`);
}
const pages = {
loading: PageLoading.page,
test: PageTest.page,
settings: Settings.page,
about: PageAbout.page,
account: Account.page,
login: PageLogin.page,
profile: PageProfile.page,
profileSearch: PageProfileSearch.page,
404: Page404.page,
accountSettings: PageAccountSettings.page,
leaderboards: PageLeaderboards.page,
};
const pages = {
loading: PageLoading.page,
test: PageTest.page,
settings: Settings.page,
about: PageAbout.page,
account: Account.page,
login: PageLogin.page,
profile: PageProfile.page,
profileSearch: PageProfileSearch.page,
404: Page404.page,
accountSettings: PageAccountSettings.page,
leaderboards: PageLeaderboards.page,
};
const previousPage = pages[ActivePage.get()];
const nextPage = pages[pageName];
const previousPage = pages[ActivePage.get()];
const nextPage = pages[pageName];
const totalDuration = Misc.applyReducedMotion(250);
const easingMethod: Misc.JQueryEasing = "swing";
void previousPage?.beforeHide().then(() => {
PageTransition.set(true);
$(".page").removeClass("active");
void Misc.swapElements(
previousPage.element,
nextPage.element,
250,
async () => {
PageTransition.set(false);
nextPage.element.addClass("active");
resolve(true);
await nextPage?.afterShow();
void AdController.reinstate();
},
async () => {
if (nextPage.id === "test") {
Misc.updateTitle();
} else {
const titleString =
nextPage.display ??
Strings.capitalizeFirstLetterOfEachWord(nextPage.id);
Misc.updateTitle(`${titleString} | Monkeytype`);
}
Focus.set(false);
ActivePage.set(nextPage.id);
//start
PageTransition.set(true);
$(".page").removeClass("active");
await previousPage?.afterHide();
//previous page
await previousPage?.beforeHide?.();
previousPage.element.removeClass("hidden").css("opacity", 1);
await Misc.promiseAnimation(
previousPage.element,
{
opacity: "0",
},
totalDuration / 2,
easingMethod
);
previousPage.element.addClass("hidden");
await previousPage?.afterHide();
await nextPage?.beforeShow({
params: options.params,
// @ts-expect-error for the future (i think)
data: options.data,
});
//between
updateTitle(nextPage);
Focus.set(false);
ActivePage.set(nextPage.id);
updateOpenGraphUrl();
updateOpenGraphUrl();
}
);
});
//next page
await nextPage?.beforeShow({
params: options.params,
// @ts-expect-error for the future (i think)
data: options.data,
});
nextPage.element.removeClass("hidden").css("opacity", 0);
await Misc.promiseAnimation(
nextPage.element,
{
opacity: "1",
},
totalDuration / 2,
easingMethod
);
nextPage.element.addClass("active");
await nextPage?.afterShow();
//wrapup
PageTransition.set(false);
void AdController.reinstate();
return true;
}