Add starburst on change to 2.0

Author: davepagurek

client/modules/IDE/components/Header/Toolbar.jsx

@@ -20,7 +20,6 @@ import PlayIcon from '../../../../images/play.svg';
 import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
-import VersionPicker from '../VersionPicker';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -98,9 +97,6 @@ const Toolbar = (props) => {
           {t('Toolbar.Auto-refresh')}
         </label>
       </div>
-      <div className="toolbar__version-picker">
-        <VersionPicker />
-      </div>
       <div className="toolbar__project-name-container">
         <ProjectName />
         {(() => {

client/modules/IDE/components/Preferences/index.jsx

@@ -24,6 +24,7 @@ import VersionPicker from '../VersionPicker';
 import { updateFileContent } from '../../actions/files';
 import { CmControllerContext } from '../../pages/IDEView';
 import Button from '../../../../common/Button';
+import Stars from '../Stars';
 
 export default function Preferences() {
   const { t } = useTranslation();
@@ -47,6 +48,18 @@ export default function Preferences() {
   const [state, setState] = useState({ fontSize });
   const { versionInfo, indexID } = useP5Version();
   const cmRef = useContext(CmControllerContext);
+  const [showStars, setShowStars] = useState(null);
+  const timerRef = useRef(null);
+  const pickerRef = useRef(null);
+  const onChangeVersion = (version) => {
+    const shouldShowStars = version.startsWith('2.');
+    const box = pickerRef.current?.getBoundingClientRect();
+    if (shouldShowStars) {
+      setShowStars({ left: box?.left || 0, top: box?.top || 0 });
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setShowStars(null), 3000);
+    }
+  };
 
   function onFontInputChange(event) {
     const INTEGER_REGEX = /^[0-9\b]+$/;
@@ -484,7 +497,11 @@ export default function Preferences() {
               {t('Preferences.LibraryVersion')}
             </h4>
             <div>
-              <VersionPicker />
+              {showStars && <Stars top={showStars.top} left={showStars.left} />}
+              <VersionPicker
+                ref={pickerRef}
+                onChangeVersion={onChangeVersion}
+              />
               {versionInfo && indexID ? (
                 <p className="preference__paragraph">
                   {t('Preferences.LibraryVersionInfo')}

client/modules/IDE/components/Stars.jsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import AsteriskIcon from '../../../images/p5-asterisk.svg';
+
+const Stars = ({ top, left }) => {
+  const stars = useMemo(() => {
+    const styles = [];
+
+    for (let i = 0; i < 20; i += 1) {
+      const x = Math.round(Math.random() * 200 - 100);
+      const y = Math.round(Math.random() * 200 - 100);
+      const s = 3 + Math.random() * 2;
+      const rotation = Math.random() * Math.PI * 2;
+      const style = {
+        transform: `translate(${x}px, ${y}px) scale(${s.toFixed(
+          4
+        )}) rotate(${rotation.toFixed(4)}rad)`
+      };
+      const key = i;
+      styles.push({ style, key });
+    }
+
+    return styles;
+  }, []);
+
+  return (
+    <div
+      className="stars"
+      style={{
+        top,
+        left
+      }}
+    >
+      {stars.map(({ style, key }) => (
+        <AsteriskIcon
+          key={key}
+          className="stars__star"
+          style={style}
+          focusable="false"
+        />
+      ))}
+    </div>
+  );
+};
+
+Stars.propTypes = {
+  top: PropTypes.number.isRequired,
+  left: PropTypes.number.isRequired
+};
+
+export default Stars;

client/modules/IDE/components/VersionPicker.jsx

@@ -1,26 +1,30 @@
 import React, { useCallback, useContext } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 
 import { useP5Version, p5Versions } from '../hooks/useP5Version';
 import MenuItem from '../../../components/Dropdown/MenuItem';
 import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
 import { updateFileContent } from '../actions/files';
 import { CmControllerContext } from '../pages/IDEView';
 
-const VersionPicker = () => {
+const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
   const { indexID, versionInfo } = useP5Version();
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const cmRef = useContext(CmControllerContext);
   const dispatchReplaceVersion = useCallback(
     (version) => {
       if (!indexID || !versionInfo) return;
+      if (onChangeVersion) {
+        onChangeVersion(version);
+      }
       const src = versionInfo.replaceVersion(version);
       dispatch(updateFileContent(indexID, src));
       cmRef.current?.updateFileContent(indexID, src);
     },
-    [indexID, versionInfo, cmRef]
+    [indexID, versionInfo, cmRef, onChangeVersion]
   );
 
   if (!versionInfo) {
@@ -31,7 +35,11 @@ const VersionPicker = () => {
 
   return (
     <DropdownMenu
-      anchor={<span className="versionPicker">{versionInfo.version}</span>}
+      anchor={
+        <span className="versionPicker" ref={ref}>
+          {versionInfo.version}
+        </span>
+      }
       align="left"
     >
       {p5Versions.map((version) => (
@@ -41,8 +49,13 @@ const VersionPicker = () => {
       ))}
     </DropdownMenu>
   );
-};
+});
 
-VersionPicker.propTypes = {};
+VersionPicker.propTypes = {
+  onChangeVersion: PropTypes.func
+};
+VersionPicker.defaultProps = {
+  onChangeVersion: undefined
+};
 
 export default VersionPicker;

client/styles/components/_stars.scss

@@ -0,0 +1,28 @@
+@keyframes starburst {
+  from {
+    transform: translate(0, 0) scale(0) rotate(0);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.stars {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9000;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.stars__star {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 50% 50%;
+  animation: starburst 1.5s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}

client/styles/main.scss

@@ -53,6 +53,7 @@
 @import 'components/collection-create';
 @import 'components/quick-add';
 @import 'components/skip-link';
+@import 'components/stars';
 
 @import 'layout/dashboard';
 @import 'layout/ide';