Merge branch 'alpha'

# Conflicts: # docs/master/CHANGELOG.md
mini-mirana · May 8, 2022 · d3e9ed0 · d3e9ed0
2 parents a11190b + 10bde83
commit d3e9ed0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/src/components/Loader/index.jsx b/src/components/Loader/index.jsx
@@ -95,7 +95,11 @@ export function Loader({
               <AnimatorGeneralProvider animator={{ duration: { enter: 2500, exit: 100 } }}>
                 <Animator animator={{ animation: true, manager: 'stagger' }}>
                   <ArwesText className='ml-[1%] text-center'>
-                    Tap anywhere to start <br /> Pro tip: pinch to move through channel
+                    Tap anywhere to start <br />{' '}
+                    <span className='text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 uppercase last:mr-0 mr-1'>
+                      PRO TIP
+                    </span>{' '}
+                    Pinch or pan to move through channel
                   </ArwesText>
                 </Animator>
               </AnimatorGeneralProvider>

diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -22,6 +22,7 @@ export default class MyDocument extends Document {
           <link rel='apple-touch-icon' sizes='180x180' href='/icons/apple-touch-icon.png' />
           <link rel='icon' type='image/png' sizes='32x32' href='/icons/favicon-32x32.png' />
           <link rel='icon' type='image/png' sizes='16x16' href='/icons/favicon-16x16.png' />
+          <script src='https://hammerjs.github.io/dist/hammer.js' />
           <link rel='manifest' href='/manifest.json' />
           <link rel='icon' href='/favicon.ico' />
         </Head>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -282,20 +282,16 @@ export default function Home() {
         rotation: [cam.current.rotation.x, cam.current.rotation.y, r]
       }))
     } else {
-      if (!('ontouchstart' in window)) {
-        scrollOutSound.current.play()
-      } else {
-        scrollInSound.current.play()
-      }
+      scrollOutSound.current.play()
       set.start(() => ({
         pos: [0, 0, from + 2],
         rotation: [cam.current.rotation.x, cam.current.rotation.y, r]
       }))
     }
   }
   useEffect(() => {
-    scrollInSound.current = new Audio('/sound/spaceship-passing.mp3')
-    scrollOutSound.current = new Audio('/sound/sfx.wav')
+    scrollInSound.current = new Audio('/sound/object.mp3')
+    scrollOutSound.current = new Audio('/sound/toggle.mp3')
 
     // Your code here
     if (!('ontouchstart' in window)) {
@@ -305,19 +301,16 @@ export default function Home() {
     }
 
     if ('ontouchstart' in window) {
-      window.addEventListener(
-        'touchmove',
-        async (ev) => {
-          ev.preventDefault()
-          const Hammer = (await import('hammerjs')).default
-          const hammertime = new Hammer(canvasRef.current)
-          hammertime.get('pinch').set({ enable: true })
-          hammertime.on('pinch', (e) => {
-            handleScroll(e.scale, 1)
-          })
-        },
-        false
-      )
+      // eslint-disable-next-line no-undef
+      const hammertime = new Hammer(canvasRef.current)
+      hammertime.get('pinch').set({ enable: true })
+      hammertime.get('pan').set({ threshold: 8 })
+      hammertime.on('pinchin panup doubletap', () => {
+        handleScroll(2, 1)
+      })
+      hammertime.on('pinchout pandown', () => {
+        handleScroll(1, 2)
+      })
     }
   }, [])