Merge pull request #405 from code-dot-org/ben/guide-continue-icon-click

Add "click to continue" reminder animation
code-dot-org · Jul 15, 2024 · d7cd203 · d7cd203
2 parents a37464c + 287e312
commit d7cd203
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 16 deletions.
diff --git 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(.*)$": "<rootDir>/src/$1",
       "^@public(.*)$": "<rootDir>/public/$1"
     },

diff --git a/public/images/finger-click-icon-1.svg b/public/images/finger-click-icon-1.svg
diff --git a/public/images/finger-click-icon-2.svg b/public/images/finger-click-icon-2.svg
diff --git 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);
+        }
+      }
     </style>
   </head>
   <body>

diff --git a/src/oceans/components/common/Guide.jsx b/src/oceans/components/common/Guide.jsx
@@ -1,15 +1,19 @@
-import React from 'react'
-import Radium from "radium";
-import Typist from "react-typist";
+import React from 'react';
+import Radium from 'radium';
+import Typist from 'react-typist';
 
-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 '@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';
 
 let UnwrappedGuide = class Guide extends React.Component {
   onShowing() {
@@ -48,6 +52,12 @@ let UnwrappedGuide = class Guide extends React.Component {
       setState({guideTypingTimer});
     }
 
+    const renderClickToContinueReminder =
+      state.guides === 'K5' &&
+      state.guideShowing &&
+      !currentGuide.noDimBackground &&
+      currentGuide.style !== 'Info';
+
     return (
       <div>
         {currentGuide && currentGuide.image && (
@@ -98,6 +108,20 @@ let UnwrappedGuide = class Guide extends React.Component {
                       {currentGuide.textFn(getState())}
                     </div>
                   </div>
+                  {renderClickToContinueReminder && (
+                    <div style={styles.guideClickToContinueReminderContainer}>
+                      <img
+                        src={fingerClickIcon1}
+                        alt=""
+                        style={styles.guideClickToContinueReminder1}
+                      />
+                      <img
+                        src={fingerClickIcon2}
+                        alt=""
+                        style={styles.guideClickToContinueReminder2}
+                      />
+                    </div>
+                  )}
                   {currentGuide.style === 'Info' && (
                     <Button style={styles.infoGuideButton} onClick={() => {}}>
                       {I18n.t('continue')}

diff --git a/src/oceans/styles/fade.css b/src/oceans/styles/fade.css
@@ -0,0 +1,17 @@
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
+  0%, 45% {
+    opacity: 0;
+  }
+  55%, 100% {
+    opacity: 1;
+  }
+}
diff --git 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: {
@@ -507,6 +507,24 @@ const styles = {
     padding: 20,
     opacity: 0
   },
+  guideClickToContinueReminderContainer: {
+    position: 'absolute',
+    right: '1%',
+    bottom: 0,
+    width: '5%',
+    minWidth: 25,
+    height: 15,
+    animation: '0.25s ease-in 4s 1 normal backwards running fadein'
+  },
+  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)',
     position: 'absolute',
@@ -589,4 +607,4 @@ const styles = {
   }
 };
 
-export default styles
+export default styles;
diff --git 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,