- { deviceInfo.isMobile &&
}
-
Try moving around using the arrow keys (or swipe with mobile).
+ header:
+ {deviceInfo.isMobile && }
+ Try moving around using the arrow keys (or swipe with mobile).
,
-
isNextButtonDisabled: true,
key: 'tutorial-player-intro',
level: getLevel(GRID_WITH_PLAYER),
@@ -286,7 +284,7 @@ export default function TutorialPathology() {
},
tooltip: { canClose: true, target: '#player', title:
{
- /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(typeof window !== 'undefined' ? navigator.userAgent : '') === false ? (
+ !deviceInfo.isMobile ? (
) : (
-
-
Swipe up, down, left, or right to move your player
-
+
Swipe up, down, left, or right to move your player
)}
},
@@ -437,7 +433,6 @@ export default function TutorialPathology() {
header:
Try solving your first level!
,
key: 'tutorial-level-1',
level: getLevel(LEVEL_1, { leastMoves: 5 }),
- isNextButtonDisabled: true,
onMove: (gameState: GameState) => {
const undoButton = document.getElementById('btn-undo') as HTMLButtonElement;
@@ -459,7 +454,6 @@ export default function TutorialPathology() {
},
{
gameClasses: 'fadeIn',
- isNextButtonDisabled: true,
gameGrid: true,
header:
Try getting to the exit now.
,
key: 'tutorial-wall',
@@ -470,7 +464,6 @@ export default function TutorialPathology() {
{
gameClasses: 'fadeIn',
gameGrid: true,
- isNextButtonDisabled: true,
header:
There can be multiple exits.
,
key: 'tutorial-ends',
level: getLevel(MULTIPLE_ENDS, { leastMoves: 6 }),
@@ -479,7 +472,6 @@ export default function TutorialPathology() {
{
gameClasses: 'fadeIn',
gameGrid: true,
- isNextButtonDisabled: true,
header:
Blocks with borders can be pushed by the player.
,
key: 'tutorial-movable',
level: getLevel(MOVABLE_INTRO, { leastMoves: 6 }),
@@ -488,7 +480,6 @@ export default function TutorialPathology() {
{
gameClasses: 'fadeIn',
gameGrid: true,
- isNextButtonDisabled: true,
header:
You can only push one block at a time.
,
key: 'tutorial-movable-explain',
level: getLevel(MOVABLE_EXPLAIN, { leastMoves: 11 }),
@@ -497,7 +488,6 @@ export default function TutorialPathology() {
{
gameClasses: 'fadeIn',
gameGrid: true,
- isNextButtonDisabled: true,
header:
Blocks can cover exits.
,
key: 'tutorial-movable-explain-end-cover',
level: getLevel(MOVABLE_EXPLAIN_END_COVER, { leastMoves: 8 }),
@@ -514,7 +504,6 @@ export default function TutorialPathology() {
{
gameClasses: 'fadeIn',
gameGrid: true,
- isNextButtonDisabled: true,
header:
Find the path through these restricted blocks!
,
key: 'tutorial-restricted-movables-explain',
level: getLevel(RESTRICTED_MOVABLES_EXPLAIN, { leastMoves: 12 }),
@@ -533,7 +522,6 @@ export default function TutorialPathology() {
},
{
gameGrid: true,
- isNextButtonDisabled: true,
header:
Use this block to cross over the hole!
,
key: 'tutorial-holes-intro',
level: getLevel(HOLES_INTRO, { leastMoves: 9 }),
@@ -657,26 +645,21 @@ export default function TutorialPathology() {
const nextId = document.getElementById('control-next') as HTMLButtonElement;
// if nextId doesn't have class pointer-events-none
-
if (nextId) {
- nextId.classList.add('bg-orange-300');
- nextId.classList.add('animate-bounce');
- setTimeout(() => {
- const nextId = document.getElementById('control-next') as HTMLButtonElement;
-
- if (!isNextButtonDisabled && !nextId.classList.contains('pointer-events-none')) {
- nextId.classList.remove('invisible');
+ if (!nextId.classList.contains('pointer-events-none')) {
+ setTimeout(() => {
nextId.classList.add('bg-orange-300');
- nextId.classList.add('animate-bounce');
+ nextId.classList.add('bounce');
// have nextId delay animation by 1s
- nextId.style.animationDelay = '2s';
- } else {
- // remove
- nextId.classList.add('invisible');
- }
- }, 30);
+ nextId.style.animationDelay = '3s';
+ }, 1);
+ } else {
+ // remove
+ nextId.classList.remove('bg-orange-300');
+ nextId.classList.remove('bounce');
+ }
}
- }, 30);
+ }, 1);
}, [isNextButtonDisabled, tutorialStep.gameGrid, tutorialStep.isNextButtonDisabled, tutorialStepIndex, tutorialStepIndexMax]);
const controls: Control[] = [];
@@ -691,10 +674,7 @@ export default function TutorialPathology() {
const atIncompleteLevel = !tutorialStep.isNextButtonDisabled && tutorialStep.gameGrid && tutorialStepIndex === tutorialStepIndexMax;
controls.push(skipControl());
-
- if (!isNextButtonDisabled) {
- controls.push(nextControl(isNextButtonDisabled || atIncompleteLevel));
- }
+ controls.push(nextControl(isNextButtonDisabled || atIncompleteLevel));
} else {
controls.push(new Control(
'restart',
diff --git a/components/home/tutorialSokopath.tsx b/components/home/tutorialSokopath.tsx
index 63413d60c..f7c276c2c 100644
--- a/components/home/tutorialSokopath.tsx
+++ b/components/home/tutorialSokopath.tsx
@@ -420,7 +420,6 @@ export default function TutorialSokopath() {
},
{
gameGrid: true,
- isNextButtonDisabled: true,
header: <>
Try to complete your first level!
Push the box onto the goal.
,
key: 'tutorial-level-1',
level: getLevel(LEVEL_1),
@@ -429,7 +428,6 @@ export default function TutorialSokopath() {
{
gameClasses: 'fadeIn',
gameGrid: true,
- isNextButtonDisabled: true,
header:
Try completing another level.
,
key: 'tutorial-wall',
level: getLevel(WALL_INTRO),
@@ -439,7 +437,6 @@ export default function TutorialSokopath() {
{
gameClasses: 'fadeIn',
gameGrid: true,
- isNextButtonDisabled: true,
header:
You can only push one box at a time.
,
key: 'tutorial-movable-explain',
level: getLevel(MOVABLE_EXPLAIN),
@@ -448,7 +445,6 @@ export default function TutorialSokopath() {
{
gameClasses: 'fadeIn',
gameGrid: true,
- isNextButtonDisabled: true,
header: <>
Complete the final level of the tutorial!
,
key: 'tutorial-movable-explain-end-cover',
level: getLevel(MOVABLE_EXPLAIN_END_COVER),
@@ -600,10 +596,7 @@ export default function TutorialSokopath() {
const atIncompleteLevel = !tutorialStep.isNextButtonDisabled && tutorialStep.gameGrid && tutorialStepIndex === tutorialStepIndexMax;
controls.push(skipControl());
-
- if (!isNextButtonDisabled) {
- controls.push(nextControl(isNextButtonDisabled || atIncompleteLevel));
- }
+ controls.push(nextControl(isNextButtonDisabled || atIncompleteLevel));
} else {
controls.push(new Control(
'restart',
diff --git a/components/level/reviews/spoilerText.tsx b/components/level/reviews/spoilerText.tsx
index 94464a92c..fcb528d7f 100644
--- a/components/level/reviews/spoilerText.tsx
+++ b/components/level/reviews/spoilerText.tsx
@@ -55,12 +55,12 @@ export function SpoilerText({ id, text }: SpoilerTextProps) {
spoilerToolTipText = 'You must solve this level to view this spoiler';
}
- const backgroundColor = visible ? '' : 'bg-black text-black dark:bg-gray-600 dark:text-gray-600';
+ const backgroundColor = visible ? undefined : 'var(--bg-color-2)';
return (
<>
void;
onSubmit?: () => void;
- submitBtnClass?: string;
submitLabel?: string;
title: React.ReactNode;
}
export default function Modal({
children,
- closeModal,
closeLabel,
+ closeModal,
disabled,
isOpen,
onConfirm,
onSubmit,
- submitBtnClass,
submitLabel,
title,
}: ModalProps) {
@@ -115,12 +109,12 @@ export default function Modal({
{onConfirm ?
<>
-
{}} text='OK' type='submit' />
+ {}} text={submitLabel || 'OK'} type='submit' />
: onSubmit ?
<>
- {}} text={submitLabel || 'Submit'} type='submit' />
+ {}} text={submitLabel || 'Submit'} type='submit' />
{
e?.preventDefault();
closeModal();
diff --git a/components/modal/postGameModal.tsx b/components/modal/postGameModal.tsx
index 6926b45fb..ce53c78b0 100644
--- a/components/modal/postGameModal.tsx
+++ b/components/modal/postGameModal.tsx
@@ -24,6 +24,7 @@ interface PostGameModalProps {
}
export default function PostGameModal({ chapter, closeModal, collection, dontShowPostGameModal, isOpen, level, reqUser, setDontShowPostGameModal }: PostGameModalProps) {
+ const router = useRouter();
let nextLevel: EnrichedLevel | undefined = undefined;
let lastLevelInCollection = false;
@@ -38,9 +39,9 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
}
const { data } = useHomePageData([HomepageDataType.RecommendedLevel], !isOpen || nextLevel !== undefined);
-
const [queryParams, setQueryParams] = useState();
const [recommendedLevel, setRecommendedLevel] = useState();
+ const nextLevelUrl = nextLevel ? `/level/${nextLevel.slug}${queryParams?.toString().length ?? 0 !== 0 ? `?${queryParams}` : ''}` : '';
useEffect(() => {
const newRecommendedLevel = data && data[HomepageDataType.RecommendedLevel];
@@ -57,7 +58,6 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
useEffect(() => {
setQueryParams(new URLSearchParams(window.location.search));
}, []);
- const nextLevelUrl = nextLevel ? `/level/${nextLevel.slug}${queryParams?.toString().length ?? 0 !== 0 ? `?${queryParams}` : ''}` : '';
function nextActionCard() {
if (nextLevel) {
@@ -90,14 +90,11 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
);
}
- const router = useRouter();
- const onNextLevelClick = () => {
+ let nextCTA = nextLevel ? () => {
router.push(nextLevelUrl);
-
closeModal();
- };
+ } : undefined;
- let nextCTA = nextLevel && onNextLevelClick;
let nextLabel = 'Next Level';
if (!nextCTA && chapter && !isNaN(Number(chapter))) {
@@ -112,13 +109,11 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
return (
- Success!
+ Congrats!
-
Congratulations!
You've solved every level in Chapter 1.
Try out Chapter 2 next!
+
+
+ Congratulations!
+
+ You've solved every level in Chapter 1.
+
+ Try out Chapter 2 next!
+
}
solvedLevels={solvedLevels}
diff --git a/pages/[subdomain]/chapter2/index.tsx b/pages/[subdomain]/chapter2/index.tsx
index 99c46d9cc..761b0945f 100644
--- a/pages/[subdomain]/chapter2/index.tsx
+++ b/pages/[subdomain]/chapter2/index.tsx
@@ -68,8 +68,14 @@ export default function Chapter2Page({ enrichedCollections, reqUser, solvedLevel
nextHref={'/chapter3'}
nextTitle={(reqUser.config?.chapterUnlocked ?? 1) < 3 ? 'Unlock Chapter 3' : undefined}
solvedElement={
-
-
Congratulations!
You've solved every level in Chapter 2.
Try out Chapter 3 next!
+
+
+ Congratulations!
+
+ You've solved every level in Chapter 2.
+
+ Try out Chapter 3 next!
+
}
solvedLevels={solvedLevels}
diff --git a/pages/[subdomain]/chapter3/index.tsx b/pages/[subdomain]/chapter3/index.tsx
index 7194a1c28..b0876f205 100644
--- a/pages/[subdomain]/chapter3/index.tsx
+++ b/pages/[subdomain]/chapter3/index.tsx
@@ -97,8 +97,13 @@ export default function Chapter3Page({ enrichedCollections, reqUser, solvedLevel
hideUnlockRequirements={true}
levelHrefQuery={'chapter=3'}
solvedElement={
-
-
Congratulations!
You've solved every level in Chapter 3.
+
+
+ Congratulations!
+
+ You've solved every level in Chapter 3.
+
+
If you're looking for more levels, try {game.disableRanked ?
<>browsing the
Search page :
<>playing
Ranked 🏅 levels
diff --git a/pages/[subdomain]/play/index.tsx b/pages/[subdomain]/play/index.tsx
index 292cf1a9a..1752d497a 100644
--- a/pages/[subdomain]/play/index.tsx
+++ b/pages/[subdomain]/play/index.tsx
@@ -5,7 +5,6 @@ import { AppContext } from '@root/contexts/appContext';
import { getGameFromId, getGameIdFromReq } from '@root/helpers/getGameIdFromReq';
import useSWRHelper from '@root/hooks/useSWRHelper';
import { GetServerSidePropsContext, NextApiRequest } from 'next';
-import Link from 'next/link';
import React, { useContext } from 'react';
import ChapterSelectCard from '../../../components/cards/chapterSelectCard';
import Page from '../../../components/page/page';
@@ -43,31 +42,31 @@ export default function PlayPage({ reqUser }: PlayPageProps) {
const { game } = useContext(AppContext);
const chapterUnlocked = reqUser.config?.chapterUnlocked ?? 1;
const { data: profileDataFetched } = useSWRHelper<{levelsSolvedByDifficulty: {[key: string]: number}}>('/api/user/' + reqUser?._id + '?type=levelsSolvedByDifficulty', {}, {});
-
const levelsSolvedByDifficulty = profileDataFetched?.levelsSolvedByDifficulty;
return (
-
+
{game.displayName} Official Campaign
-
+
+
Rank:
{
levelsSolvedByDifficulty ?
- <>
Rank:
+ <>
- :
+ :
}
-
-
-
-
-
- {chapterUnlocked >= 3 &&
}
+
+
+
+
+ {chapterUnlocked >= 3 && }
+
);
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 063149aca..497d7f43b 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -474,26 +474,22 @@ export default function MyApp({ Component, pageProps, userAgent, initGame }: App
{isEU && (
-
-
- We use cookies to improve your browsing experience.
- View our
privacy policy.
-
+
+ We use cookies to improve your browsing experience. View our
privacy policy.
)}