diff --git a/components/home/tutorialPathology.tsx b/components/home/tutorialPathology.tsx index 327aa4b21..cbad6ac38 100644 --- a/components/home/tutorialPathology.tsx +++ b/components/home/tutorialPathology.tsx @@ -21,6 +21,7 @@ import Controls from '../level/controls'; import Game from '../level/game'; import Page from '../page/page'; import DismissToast from '../toasts/dismissToast'; +import DemoSwipe from './demoSwipe'; interface Tooltip { canClose?: boolean; @@ -263,11 +264,26 @@ export default function TutorialPathology() { }, { gameGrid: true, - header:
Try moving around using the arrow keys (or swipe with mobile).
, + header:
+
+
Try moving around using the arrow keys (or swipe with mobile).
+
, + isNextButtonDisabled: true, key: 'tutorial-player-intro', level: getLevel(GRID_WITH_PLAYER), - onMove: () => setIsNextButtonDisabled(false), + onMove: () => { + // set tooltip text to Good! + const tooltipEl = document.getElementById('tooltip'); + + if (tooltipEl) { + tooltipEl.innerHTML = 'Good!'; + // add fade out class + tooltipEl.classList.add('fadeOut'); + } + + setIsNextButtonDisabled(false); + }, tooltip: { canClose: true, target: '#player', title:
{ /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(typeof window !== 'undefined' ? navigator.userAgent : '') === false ? ( @@ -398,7 +414,9 @@ export default function TutorialPathology() { /> ) : ( -
Swipe up, down, left, or right to move your player
+
+
Swipe up, down, left, or right to move your player
+
)}
},