From cb697b1261616f7e1abccc2a3fd38866ba678db5 Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Thu, 27 Jun 2024 10:55:51 -0700 Subject: [PATCH 01/14] Add bounce animation to bottom --- src/oceans/components/common/Guide.jsx | 12 ++++++++++++ src/oceans/styles/bounce.css | 15 +++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 src/oceans/styles/bounce.css diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index a35243a0..a72351ed 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -1,6 +1,10 @@ import React from 'react' import Radium from "radium"; import Typist from "react-typist"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faArrowCircleDown} from "@fortawesome/free-solid-svg-icons"; + +import "@ml/oceans/styles/bounce.css"; import {getState, setState} from "@ml/oceans/state"; import guide from "@ml/oceans/models/guide"; @@ -86,6 +90,11 @@ let UnwrappedGuide = class Guide extends React.Component { > {currentGuide.textFn(getState())} + {!getState().guideTypingTimer && ( +
+ +
+ )}
{currentGuide.textFn(getState())} +
+ +
{currentGuide.style === 'Info' && ( diff --git a/src/oceans/styles/bounce.css b/src/oceans/styles/bounce.css new file mode 100644 index 00000000..5e79903a --- /dev/null +++ b/src/oceans/styles/bounce.css @@ -0,0 +1,15 @@ +.bounce { + animation: bounce 2s infinite; +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-8px); + } + 60% { + transform: translateY(-4px); + } +} From 701fd4c7cf36fdfbe96cef33b0eeb763e62ac9e8 Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Thu, 27 Jun 2024 11:08:52 -0700 Subject: [PATCH 02/14] No icon in info guide, make space for bounce animation --- src/oceans/components/common/Guide.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index a72351ed..bf2d87d6 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -90,8 +90,8 @@ let UnwrappedGuide = class Guide extends React.Component { > {currentGuide.textFn(getState())} - {!getState().guideTypingTimer && ( -
+ {!getState().guideTypingTimer && currentGuide.style !== 'Info' && ( +
)} @@ -105,9 +105,11 @@ let UnwrappedGuide = class Guide extends React.Component { >
{currentGuide.textFn(getState())} -
- -
+ {currentGuide.style !== 'Info' && ( +
+ +
+ )}
{currentGuide.style === 'Info' && ( From c29366701365d3121761a2db2ae45cd0ec32c4ee Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Tue, 9 Jul 2024 13:48:03 -0700 Subject: [PATCH 03/14] Show icon 2 seconds after guide finishes typing --- src/oceans/components/common/Guide.jsx | 14 ++++++++++++-- src/oceans/state.js | 4 +++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index bf2d87d6..044c39d4 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -19,12 +19,22 @@ let UnwrappedGuide = class Guide extends React.Component { onShowing() { clearInterval(getState().guideTypingTimer); setState({guideShowing: true, guideTypingTimer: null}); + + if (!guide.getCurrentGuide().noDimBackground) { + const timerId = setTimeout(() => setState({showClickToContinue: true}), 2000); + setState({clickToContinueTimerId: timerId}); + } } dismissGuideClick() { const dismissed = guide.dismissCurrentGuide(); if (dismissed) { soundLibrary.playSound('other'); + setState({showClickToContinue: false}); + if (getState().clickToContinueTimerId) { + clearTimeout(getState().clickToContinueTimerId); + setState({clickToContinueTimerId: null}); + } } } @@ -90,7 +100,7 @@ let UnwrappedGuide = class Guide extends React.Component { > {currentGuide.textFn(getState())} - {!getState().guideTypingTimer && currentGuide.style !== 'Info' && ( + {getState().showClickToContinue && currentGuide.style !== 'Info' && !currentGuide.noDimBackground && (
@@ -105,7 +115,7 @@ let UnwrappedGuide = class Guide extends React.Component { >
{currentGuide.textFn(getState())} - {currentGuide.style !== 'Info' && ( + {getState().showClickToContinue && currentGuide.style !== 'Info' && !currentGuide.noDimBackground && (
diff --git a/src/oceans/state.js b/src/oceans/state.js index f68248fb..204fcfa6 100644 --- a/src/oceans/state.js +++ b/src/oceans/state.js @@ -38,7 +38,9 @@ const initialState = { guideDismissals: [], guideShowing: false, showConfirmationDialog: false, - confirmationDialogOnYes: null + confirmationDialogOnYes: null, + showClickToContinue: false, + clickToContinueTimerId: null, }; let state = {...initialState}; From b5912ee6ac4b0d878eb085a24adffef87eb7cc5f Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Tue, 9 Jul 2024 15:14:38 -0700 Subject: [PATCH 04/14] Add svg click animation with fade --- public/images/finger-click-icon-1.svg | 3 +++ public/images/finger-click-icon-2.svg | 7 +++++++ src/oceans/components/common/Guide.jsx | 21 +++++++++++++++++---- src/oceans/state.js | 2 ++ src/oceans/styles/bounce.css | 12 ++++++++++++ webpack.config.js | 2 +- 6 files changed, 42 insertions(+), 5 deletions(-) create mode 100644 public/images/finger-click-icon-1.svg create mode 100644 public/images/finger-click-icon-2.svg diff --git a/public/images/finger-click-icon-1.svg b/public/images/finger-click-icon-1.svg new file mode 100644 index 00000000..cada4a4f --- /dev/null +++ b/public/images/finger-click-icon-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/finger-click-icon-2.svg b/public/images/finger-click-icon-2.svg new file mode 100644 index 00000000..5daa8460 --- /dev/null +++ b/public/images/finger-click-icon-2.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index 044c39d4..9edbbbb8 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -14,6 +14,8 @@ import colors from "@ml/oceans/styles/colors"; import I18n from "@ml/oceans/i18n"; import {Button} from "@ml/oceans/components/common"; import arrowDownImage from "@public/images/arrow-down.png"; +import fingerClickIcon1 from "@public/images/finger-click-icon-1.svg"; +import fingerClickIcon2 from "@public/images/finger-click-icon-2.svg"; let UnwrappedGuide = class Guide extends React.Component { onShowing() { @@ -21,8 +23,13 @@ let UnwrappedGuide = class Guide extends React.Component { setState({guideShowing: true, guideTypingTimer: null}); if (!guide.getCurrentGuide().noDimBackground) { - const timerId = setTimeout(() => setState({showClickToContinue: true}), 2000); + const timerId = setTimeout(() => { + setState({showClickToContinue: true}); + const intervalId = setInterval(() => setState({clickToContinueIconFrame1: !getState().clickToContinueIconFrame1}), 400); + setState({clickToContinueAnimationIntervalId: intervalId}); + }, 2000); setState({clickToContinueTimerId: timerId}); + } } @@ -35,6 +42,10 @@ let UnwrappedGuide = class Guide extends React.Component { clearTimeout(getState().clickToContinueTimerId); setState({clickToContinueTimerId: null}); } + if (getState().clickToContinueAnimationIntervalId) { + clearTimeout(getState().clickToContinueAnimationIntervalId); + setState({clickToContinueAnimationIntervalId: null}); + } } } @@ -101,8 +112,9 @@ let UnwrappedGuide = class Guide extends React.Component { {currentGuide.textFn(getState())} {getState().showClickToContinue && currentGuide.style !== 'Info' && !currentGuide.noDimBackground && ( -
- +
+ +
)}
@@ -117,7 +129,8 @@ let UnwrappedGuide = class Guide extends React.Component { {currentGuide.textFn(getState())} {getState().showClickToContinue && currentGuide.style !== 'Info' && !currentGuide.noDimBackground && (
- + +
)}
diff --git a/src/oceans/state.js b/src/oceans/state.js index 204fcfa6..a7f9b39c 100644 --- a/src/oceans/state.js +++ b/src/oceans/state.js @@ -41,6 +41,8 @@ const initialState = { confirmationDialogOnYes: null, showClickToContinue: false, clickToContinueTimerId: null, + clickToContinueAnimationIntervalId: null, + clickToContinueIconFrame1: true, }; let state = {...initialState}; diff --git a/src/oceans/styles/bounce.css b/src/oceans/styles/bounce.css index 5e79903a..845f6f9b 100644 --- a/src/oceans/styles/bounce.css +++ b/src/oceans/styles/bounce.css @@ -13,3 +13,15 @@ transform: translateY(-4px); } } + +.fade { + animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards; + opacity: 0; +} + +@keyframes show { + 100% { + opacity: 1; + transform: none; + } +} diff --git a/webpack.config.js b/webpack.config.js index b7f74d82..d0ea5893 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -39,7 +39,7 @@ const commonConfig = { ] }, { - test: /\.(png|gif)$/, + test: /\.(png|gif|svg)$/, loader: 'url-loader', options: { limit: 8192, From 34ba4e14ae0f92f3b77047b9d8f2d3017aa38dcf Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Tue, 9 Jul 2024 15:39:55 -0700 Subject: [PATCH 05/14] Clean up --- src/oceans/components/common/Guide.jsx | 54 ++++++++++++++++---------- src/oceans/styles/bounce.css | 27 ------------- src/oceans/styles/fade.css | 11 ++++++ src/oceans/styles/index.js | 9 +++++ 4 files changed, 53 insertions(+), 48 deletions(-) delete mode 100644 src/oceans/styles/bounce.css create mode 100644 src/oceans/styles/fade.css diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index 9edbbbb8..fe301663 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -1,10 +1,8 @@ import React from 'react' import Radium from "radium"; import Typist from "react-typist"; -import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; -import {faArrowCircleDown} from "@fortawesome/free-solid-svg-icons"; -import "@ml/oceans/styles/bounce.css"; +import "@ml/oceans/styles/fade.css"; import {getState, setState} from "@ml/oceans/state"; import guide from "@ml/oceans/models/guide"; @@ -29,7 +27,6 @@ let UnwrappedGuide = class Guide extends React.Component { setState({clickToContinueAnimationIntervalId: intervalId}); }, 2000); setState({clickToContinueTimerId: timerId}); - } } @@ -37,18 +34,40 @@ let UnwrappedGuide = class Guide extends React.Component { const dismissed = guide.dismissCurrentGuide(); if (dismissed) { soundLibrary.playSound('other'); + setState({showClickToContinue: false}); - if (getState().clickToContinueTimerId) { - clearTimeout(getState().clickToContinueTimerId); + const { + clickToContinueTimerId, + clickToContinueAnimationIntervalId + } = getState(); + if (clickToContinueTimerId) { + clearTimeout(clickToContinueTimerId); setState({clickToContinueTimerId: null}); } - if (getState().clickToContinueAnimationIntervalId) { - clearTimeout(getState().clickToContinueAnimationIntervalId); + if (clickToContinueAnimationIntervalId) { + clearTimeout(clickToContinueAnimationIntervalId); setState({clickToContinueAnimationIntervalId: null}); } } } + renderClickToContinueReminder(currentGuide) { + return ( + getState().showClickToContinue && currentGuide.style !== 'Info' && !currentGuide.noDimBackground && ( +
+ {'A + +
+ )) + } + render() { const state = getState(); const currentGuide = guide.getCurrentGuide(); @@ -111,12 +130,7 @@ let UnwrappedGuide = class Guide extends React.Component { > {currentGuide.textFn(getState())} - {getState().showClickToContinue && currentGuide.style !== 'Info' && !currentGuide.noDimBackground && ( -
- - -
- )} + {this.renderClickToContinueReminder(currentGuide)}
{currentGuide.textFn(getState())} - {getState().showClickToContinue && currentGuide.style !== 'Info' && !currentGuide.noDimBackground && ( -
- - -
- )} + {this.renderClickToContinueReminder(currentGuide)}
{currentGuide.style === 'Info' && ( - )} diff --git a/src/oceans/styles/bounce.css b/src/oceans/styles/bounce.css deleted file mode 100644 index 845f6f9b..00000000 --- a/src/oceans/styles/bounce.css +++ /dev/null @@ -1,27 +0,0 @@ -.bounce { - animation: bounce 2s infinite; -} - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - 40% { - transform: translateY(-8px); - } - 60% { - transform: translateY(-4px); - } -} - -.fade { - animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards; - opacity: 0; -} - -@keyframes show { - 100% { - opacity: 1; - transform: none; - } -} diff --git a/src/oceans/styles/fade.css b/src/oceans/styles/fade.css new file mode 100644 index 00000000..31f330fa --- /dev/null +++ b/src/oceans/styles/fade.css @@ -0,0 +1,11 @@ +.fade { + animation: show 600ms 100ms ease-in forwards; + opacity: 0; +} + +@keyframes show { + 100% { + opacity: 1; + transform: none; + } +} diff --git a/src/oceans/styles/index.js b/src/oceans/styles/index.js index b78135fb..1bcea317 100644 --- a/src/oceans/styles/index.js +++ b/src/oceans/styles/index.js @@ -507,6 +507,15 @@ const styles = { padding: 20, opacity: 0 }, + guideClickToContinueReminderContainer: { + display: 'flex', + justifyContent: 'flex-end', + height: 30, + alignItems: 'end' + }, + guideHideClickToContinueAnimationFrame: { + display: 'none' + }, guideBackground: { backgroundColor: 'rgba(0,0,0,0.3)', position: 'absolute', From e86d74fb816d781bc1cdf97d2c720efb0c5dee61 Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Tue, 9 Jul 2024 16:09:48 -0700 Subject: [PATCH 06/14] Add space for animation before it appears --- src/oceans/components/common/Guide.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index fe301663..6b9846a1 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -45,7 +45,7 @@ let UnwrappedGuide = class Guide extends React.Component { setState({clickToContinueTimerId: null}); } if (clickToContinueAnimationIntervalId) { - clearTimeout(clickToContinueAnimationIntervalId); + clearInterval(clickToContinueAnimationIntervalId); setState({clickToContinueAnimationIntervalId: null}); } } @@ -53,7 +53,6 @@ let UnwrappedGuide = class Guide extends React.Component { renderClickToContinueReminder(currentGuide) { return ( - getState().showClickToContinue && currentGuide.style !== 'Info' && !currentGuide.noDimBackground && (
- )) + ) } render() { @@ -130,7 +129,10 @@ let UnwrappedGuide = class Guide extends React.Component { > {currentGuide.textFn(getState())} - {this.renderClickToContinueReminder(currentGuide)} + {getState().showClickToContinue + && currentGuide.style !== 'Info' + && !currentGuide.noDimBackground + && this.renderClickToContinueReminder(currentGuide)}
{currentGuide.style === 'Info' && ( From 1990c9ded6069f3355929b8d487ce92d5e3a3c19 Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Tue, 9 Jul 2024 16:54:02 -0700 Subject: [PATCH 07/14] Only for K5 --- src/oceans/components/common/Guide.jsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index 6b9846a1..1dfebadf 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from 'react'; import Radium from "radium"; import Typist from "react-typist"; @@ -20,6 +20,7 @@ let UnwrappedGuide = class Guide extends React.Component { clearInterval(getState().guideTypingTimer); setState({guideShowing: true, guideTypingTimer: null}); + // filter out all this other behavior too if not in K5 mode? if (!guide.getCurrentGuide().noDimBackground) { const timerId = setTimeout(() => { setState({showClickToContinue: true}); @@ -53,6 +54,9 @@ let UnwrappedGuide = class Guide extends React.Component { renderClickToContinueReminder(currentGuide) { return ( + getState().guides === 'K5' && + currentGuide.style !== 'Info' && + !currentGuide.noDimBackground && (
- ) + )) } render() { @@ -130,8 +134,6 @@ let UnwrappedGuide = class Guide extends React.Component { {currentGuide.textFn(getState())} {getState().showClickToContinue - && currentGuide.style !== 'Info' - && !currentGuide.noDimBackground && this.renderClickToContinueReminder(currentGuide)}
{currentGuide.style === 'Info' && ( From 9ce6d9a641312581dc8cefd97ec2661fa5e6c144 Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Wed, 10 Jul 2024 12:33:19 -0700 Subject: [PATCH 08/14] Pull out hide logic --- src/oceans/components/common/Guide.jsx | 81 ++++++++++++++------------ 1 file changed, 45 insertions(+), 36 deletions(-) diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index 1dfebadf..d509da01 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -15,18 +15,28 @@ import arrowDownImage from "@public/images/arrow-down.png"; import fingerClickIcon1 from "@public/images/finger-click-icon-1.svg"; import fingerClickIcon2 from "@public/images/finger-click-icon-2.svg"; +// Visible only for our K5 progression for now. +// Also hide for guides that don't require you to click anywhere to continue ("noDimBackground") +// and in our "Did you know?" guides ("Info" style). +const includeClickToContinue = () => { + return ( + getState().guides === 'K5' + && !guide.getCurrentGuide().noDimBackground + && guide.getCurrentGuide().style !== 'Info' + ); +} + let UnwrappedGuide = class Guide extends React.Component { onShowing() { clearInterval(getState().guideTypingTimer); setState({guideShowing: true, guideTypingTimer: null}); - // filter out all this other behavior too if not in K5 mode? - if (!guide.getCurrentGuide().noDimBackground) { + if (includeClickToContinue()) { const timerId = setTimeout(() => { setState({showClickToContinue: true}); const intervalId = setInterval(() => setState({clickToContinueIconFrame1: !getState().clickToContinueIconFrame1}), 400); setState({clickToContinueAnimationIntervalId: intervalId}); - }, 2000); + }, 4000); setState({clickToContinueTimerId: timerId}); } } @@ -36,39 +46,38 @@ let UnwrappedGuide = class Guide extends React.Component { if (dismissed) { soundLibrary.playSound('other'); - setState({showClickToContinue: false}); - const { - clickToContinueTimerId, - clickToContinueAnimationIntervalId - } = getState(); - if (clickToContinueTimerId) { - clearTimeout(clickToContinueTimerId); - setState({clickToContinueTimerId: null}); - } - if (clickToContinueAnimationIntervalId) { - clearInterval(clickToContinueAnimationIntervalId); - setState({clickToContinueAnimationIntervalId: null}); + if (includeClickToContinue()) { + setState({showClickToContinue: false}); + const { + clickToContinueTimerId, + clickToContinueAnimationIntervalId + } = getState(); + if (clickToContinueTimerId) { + clearTimeout(clickToContinueTimerId); + setState({clickToContinueTimerId: null}); + } + if (clickToContinueAnimationIntervalId) { + clearInterval(clickToContinueAnimationIntervalId); + setState({clickToContinueAnimationIntervalId: null}); + } } } } - renderClickToContinueReminder(currentGuide) { + renderClickToContinueReminder() { return ( - getState().guides === 'K5' && - currentGuide.style !== 'Info' && - !currentGuide.noDimBackground && ( -
- {'A - -
- )) +
+ {'A + +
+ ) } render() { @@ -87,12 +96,13 @@ let UnwrappedGuide = class Guide extends React.Component { } } - // Start playing the typing sounds. + // If we're just starting to animate a new guide, + // start playing the typing sounds and make sure the click to continue icon isn't showing. if (!state.guideShowing && !state.guideTypingTimer && currentGuide) { const guideTypingTimer = setInterval(() => { soundLibrary.playSound('no', 0.5); }, 1000 / 10); - setState({guideTypingTimer}); + setState({guideTypingTimer, showClickToContinue: false}); } return ( @@ -133,8 +143,7 @@ let UnwrappedGuide = class Guide extends React.Component { > {currentGuide.textFn(getState())} - {getState().showClickToContinue - && this.renderClickToContinueReminder(currentGuide)} + {includeClickToContinue() && getState().showClickToContinue && this.renderClickToContinueReminder()}
{currentGuide.textFn(getState())} - {this.renderClickToContinueReminder(currentGuide)} + {includeClickToContinue() && getState().showClickToContinue && this.renderClickToContinueReminder()}
{currentGuide.style === 'Info' && ( From 27e28b5e6a5dbbcd8d91913564414643dd1065c5 Mon Sep 17 00:00:00 2001 From: breville Date: Wed, 10 Jul 2024 22:41:05 +0000 Subject: [PATCH 09/14] Potential updates to guide reminder --- public/index.html | 10 ++- src/oceans/components/common/Guide.jsx | 103 ++++++++++--------------- src/oceans/state.js | 6 +- src/oceans/styles/fade.css | 18 +++-- src/oceans/styles/index.js | 26 +++++-- 5 files changed, 79 insertions(+), 84 deletions(-) diff --git a/public/index.html b/public/index.html index d21759b6..f70748fe 100644 --- a/public/index.html +++ b/public/index.html @@ -48,7 +48,7 @@ button { padding: 1.5% 3%; } - + #pondTextMarkdown p { margin: 0 } @@ -106,6 +106,14 @@ font-size: calc(18px * 1024 / 930); } } + @media screen and (min-width: 1422px) and (min-height: 830px) { + #container { + max-width: 1280px; + } + #container-react { + font-size: calc(18px * 1280 / 930); + } + } diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index 1dfebadf..1392171c 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -1,76 +1,35 @@ import React from 'react'; -import Radium from "radium"; -import Typist from "react-typist"; +import Radium from 'radium'; +import Typist from 'react-typist'; -import "@ml/oceans/styles/fade.css"; +import '@ml/oceans/styles/fade.css'; -import {getState, setState} from "@ml/oceans/state"; -import guide from "@ml/oceans/models/guide"; -import soundLibrary from "@ml/oceans/models/soundLibrary"; -import styles from "@ml/oceans/styles"; -import colors from "@ml/oceans/styles/colors"; -import I18n from "@ml/oceans/i18n"; -import {Button} from "@ml/oceans/components/common"; -import arrowDownImage from "@public/images/arrow-down.png"; -import fingerClickIcon1 from "@public/images/finger-click-icon-1.svg"; -import fingerClickIcon2 from "@public/images/finger-click-icon-2.svg"; +import {getState, setState} from '@ml/oceans/state'; +import guide from '@ml/oceans/models/guide'; +import soundLibrary from '@ml/oceans/models/soundLibrary'; +import styles from '@ml/oceans/styles'; +import colors from '@ml/oceans/styles/colors'; +import I18n from '@ml/oceans/i18n'; +import {Button} from '@ml/oceans/components/common'; +import arrowDownImage from '@public/images/arrow-down.png'; +import fingerClickIcon1 from '@public/images/finger-click-icon-1.svg'; +import fingerClickIcon2 from '@public/images/finger-click-icon-2.svg'; let UnwrappedGuide = class Guide extends React.Component { onShowing() { - clearInterval(getState().guideTypingTimer); - setState({guideShowing: true, guideTypingTimer: null}); + const state = getState(); - // filter out all this other behavior too if not in K5 mode? - if (!guide.getCurrentGuide().noDimBackground) { - const timerId = setTimeout(() => { - setState({showClickToContinue: true}); - const intervalId = setInterval(() => setState({clickToContinueIconFrame1: !getState().clickToContinueIconFrame1}), 400); - setState({clickToContinueAnimationIntervalId: intervalId}); - }, 2000); - setState({clickToContinueTimerId: timerId}); - } + clearInterval(state.guideTypingTimer); + setState({guideShowing: true, guideTypingTimer: null}); } dismissGuideClick() { const dismissed = guide.dismissCurrentGuide(); if (dismissed) { soundLibrary.playSound('other'); - - setState({showClickToContinue: false}); - const { - clickToContinueTimerId, - clickToContinueAnimationIntervalId - } = getState(); - if (clickToContinueTimerId) { - clearTimeout(clickToContinueTimerId); - setState({clickToContinueTimerId: null}); - } - if (clickToContinueAnimationIntervalId) { - clearInterval(clickToContinueAnimationIntervalId); - setState({clickToContinueAnimationIntervalId: null}); - } } } - renderClickToContinueReminder(currentGuide) { - return ( - getState().guides === 'K5' && - currentGuide.style !== 'Info' && - !currentGuide.noDimBackground && ( -
- {'A - -
- )) - } - render() { const state = getState(); const currentGuide = guide.getCurrentGuide(); @@ -95,6 +54,11 @@ let UnwrappedGuide = class Guide extends React.Component { setState({guideTypingTimer}); } + const renderClickToContinueReminder = + state.guides === 'K5' && + state.guideShowing && + !guide.getCurrentGuide().noDimBackground; + return (
{currentGuide && currentGuide.image && ( @@ -133,8 +97,6 @@ let UnwrappedGuide = class Guide extends React.Component { > {currentGuide.textFn(getState())} - {getState().showClickToContinue - && this.renderClickToContinueReminder(currentGuide)}
{currentGuide.textFn(getState())} - {this.renderClickToContinueReminder(currentGuide)}
- {currentGuide.style === 'Info' && ( - )} diff --git a/src/oceans/state.js b/src/oceans/state.js index a7f9b39c..f68248fb 100644 --- a/src/oceans/state.js +++ b/src/oceans/state.js @@ -38,11 +38,7 @@ const initialState = { guideDismissals: [], guideShowing: false, showConfirmationDialog: false, - confirmationDialogOnYes: null, - showClickToContinue: false, - clickToContinueTimerId: null, - clickToContinueAnimationIntervalId: null, - clickToContinueIconFrame1: true, + confirmationDialogOnYes: null }; let state = {...initialState}; diff --git a/src/oceans/styles/fade.css b/src/oceans/styles/fade.css index 31f330fa..ee3f8139 100644 --- a/src/oceans/styles/fade.css +++ b/src/oceans/styles/fade.css @@ -1,11 +1,17 @@ -.fade { - animation: show 600ms 100ms ease-in forwards; - opacity: 0; +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } -@keyframes show { - 100% { +@keyframes blink { + 0%, 45% { + opacity: 0; + } + 55%, 100% { opacity: 1; - transform: none; } } diff --git a/src/oceans/styles/index.js b/src/oceans/styles/index.js index 1bcea317..159cda65 100644 --- a/src/oceans/styles/index.js +++ b/src/oceans/styles/index.js @@ -1,4 +1,4 @@ -import colors from "@ml/oceans/styles/colors"; +import colors from '@ml/oceans/styles/colors'; const styles = { body: { @@ -508,13 +508,23 @@ const styles = { opacity: 0 }, guideClickToContinueReminderContainer: { - display: 'flex', - justifyContent: 'flex-end', - height: 30, - alignItems: 'end' + position: 'absolute', + right: '1%', + bottom: 0, + width: 25, + width: '5%', + minWidth: 25, + height: 15, + animation: '0.25s ease-in 3s 1 normal backwards running fadein' }, - guideHideClickToContinueAnimationFrame: { - display: 'none' + guideClickToContinueReminder1: { + width: '100%', + position: 'absolute' + }, + guideClickToContinueReminder2: { + animation: '1s linear 0.5s infinite normal none running blink', + width: '100%', + position: 'absolute' }, guideBackground: { backgroundColor: 'rgba(0,0,0,0.3)', @@ -598,4 +608,4 @@ const styles = { } }; -export default styles +export default styles; From 75ca618a4466241c06edafe15796002cd6b01063 Mon Sep 17 00:00:00 2001 From: breville Date: Wed, 10 Jul 2024 22:45:40 +0000 Subject: [PATCH 10/14] Restore code --- src/oceans/components/common/Guide.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index 1392171c..95bd2a98 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -17,9 +17,7 @@ import fingerClickIcon2 from '@public/images/finger-click-icon-2.svg'; let UnwrappedGuide = class Guide extends React.Component { onShowing() { - const state = getState(); - - clearInterval(state.guideTypingTimer); + clearInterval(getState().guideTypingTimer); setState({guideShowing: true, guideTypingTimer: null}); } @@ -28,7 +26,7 @@ let UnwrappedGuide = class Guide extends React.Component { if (dismissed) { soundLibrary.playSound('other'); } - } + }x render() { const state = getState(); From c1d7d5718ba13d5e23860e4e195bba76c492e53d Mon Sep 17 00:00:00 2001 From: breville Date: Thu, 11 Jul 2024 03:46:39 +0000 Subject: [PATCH 11/14] Fix typo --- src/oceans/components/common/Guide.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index 95bd2a98..6d615ca5 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -26,7 +26,7 @@ let UnwrappedGuide = class Guide extends React.Component { if (dismissed) { soundLibrary.playSound('other'); } - }x + } render() { const state = getState(); From 4e201a66d9ad59f4a08e11b7feea967329c15a17 Mon Sep 17 00:00:00 2001 From: breville Date: Thu, 11 Jul 2024 04:00:36 +0000 Subject: [PATCH 12/14] Remove duplicate field --- src/oceans/styles/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/oceans/styles/index.js b/src/oceans/styles/index.js index 9c9ea022..194e62da 100644 --- a/src/oceans/styles/index.js +++ b/src/oceans/styles/index.js @@ -511,7 +511,6 @@ const styles = { position: 'absolute', right: '1%', bottom: 0, - width: 25, width: '5%', minWidth: 25, height: 15, From 12948de3d5b7ac0088a57514d84f44c5a3e419e6 Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Thu, 11 Jul 2024 09:03:34 -0700 Subject: [PATCH 13/14] Stub css and svg in tests --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 75096ee5..814c1c4c 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "jsx" ], "moduleNameMapper": { - ".+\\.(bin|jpg|jpeg|png|mp3|ogg|wav|gif)$": "identity-obj-proxy", + ".+\\.(bin|jpg|jpeg|png|mp3|ogg|wav|gif|svg|css)$": "identity-obj-proxy", "^@ml(.*)$": "/src/$1", "^@public(.*)$": "/public/$1" }, From 42fa5499e6cf75a0f0aa6d298ba4371b93e4e035 Mon Sep 17 00:00:00 2001 From: Ben Brooks Date: Thu, 11 Jul 2024 09:40:53 -0700 Subject: [PATCH 14/14] Clean up --- src/oceans/components/common/Guide.jsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx index 4ae6e026..8ffebfe1 100644 --- a/src/oceans/components/common/Guide.jsx +++ b/src/oceans/components/common/Guide.jsx @@ -55,8 +55,8 @@ let UnwrappedGuide = class Guide extends React.Component { const renderClickToContinueReminder = state.guides === 'K5' && state.guideShowing && - !guide.getCurrentGuide().noDimBackground && - guide.getCurrentGuide().style !== 'Info'; + !currentGuide.noDimBackground && + currentGuide.style !== 'Info'; return (
@@ -109,10 +109,7 @@ let UnwrappedGuide = class Guide extends React.Component {
{renderClickToContinueReminder && ( -
+