add dragging game

.eslintrc

@@ -17,6 +17,7 @@
     "semi": "error"
   },
   "globals": {
+    "Image": true,
     "window": true,
     "document": true,
     "localStorage": true,

package.json

@@ -9,15 +9,21 @@
     "@testing-library/react": "^10.0.4",
     "@testing-library/user-event": "^10.2.3",
     "antd": "^4.2.2",
+    "lodash-es": "^4.17.15",
+    "lodash-move": "^1.1.1",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.1",
     "react-spinners": "^0.8.3",
+    "react-spring": "^8.0.27",
     "react-timeago": "^4.4.0",
     "react-toast-notifications": "^2.4.0",
+    "react-use-gesture": "^7.0.15",
+    "scroll-lock": "^2.1.4",
+    "styled-components": "^5.1.1",
     "uifx": "^2.0.7"
   },
   "scripts": {

src/app/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import NavBar from 'components/NavBar';
@@ -14,6 +14,7 @@ import Numbers from 'routes/Numbers';
 import Words from 'routes/Languages/Words';
 import Colors from 'routes/Cognitive/Colors';
 import TilesDrag from 'routes/TilesDrag';
+import SortsDrag from 'routes/SortsDrag';
 
 import {
   TESTIMONIAL,
@@ -25,24 +26,28 @@ import {
   COLORS,
   WORDS,
   JUST_TILES,
+  SORTS,
 } from 'constants/routes';
 
 const App = () => {
   return (
-    <Router>
-      <NavBar />
-      <Switch>
-        <Route exact path={ONBOARDING} component={Onboarding} />
-        <Route exact path={TESTIMONIAL} component={Testimonial} />
-        <Route exact path={FAQ} component={Faq} />
-        <Route exact path={ASSOCIATE} component={Associate} />
-        <Route exact path={OCCUPATIONS} component={Occupations} />
-        <Route exact path={NUMBERS} component={Numbers} />
-        <Route exact path={WORDS} component={Words} />
-        <Route exact path={COLORS} component={Colors} />
-        <Route exact path={JUST_TILES} component={TilesDrag} />
-      </Switch>
-    </Router>
+    <Suspense fallback="">
+      <Router>
+        <NavBar />
+        <Switch>
+          <Route exact path={ONBOARDING} component={Onboarding} />
+          <Route exact path={TESTIMONIAL} component={Testimonial} />
+          <Route exact path={FAQ} component={Faq} />
+          <Route exact path={ASSOCIATE} component={Associate} />
+          <Route exact path={OCCUPATIONS} component={Occupations} />
+          <Route exact path={NUMBERS} component={Numbers} />
+          <Route exact path={WORDS} component={Words} />
+          <Route exact path={COLORS} component={Colors} />
+          <Route exact path={JUST_TILES} component={TilesDrag} />
+          <Route exact path={SORTS} component={SortsDrag} />
+        </Switch>
+      </Router>
+    </Suspense>
   );
 };
 

src/constants/routes.js

@@ -12,6 +12,7 @@ export const OCCUPATIONS = '/language/occupations';
 export const NUMBERS = '/numbers';
 export const WORDS = '/language/words';
 export const JUST_TILES = '/tiles';
+export const SORTS = '/sorts';
 
 export const publicRoutes = [
   {
@@ -49,4 +50,8 @@ export const gameRoutes = [
     path: JUST_TILES,
     name: 'Tiles',
   },
+  {
+    path: SORTS,
+    name: 'Sorts',
+  },
 ];

src/routes/SortsDrag/DraggableList.jsx

@@ -0,0 +1,94 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useRef } from 'react';
+
+import clamp from 'lodash-es/clamp';
+import { isEqual } from 'lodash-es';
+import swap from 'lodash-move';
+import { useDrag } from 'react-use-gesture';
+import { useSprings, animated, interpolate } from 'react-spring';
+
+import { Content } from './styles';
+
+let temp = 100;
+
+// if(window.screen.height <= 768) {
+//  temp = 80;
+// }
+
+if (window.screen.height <= 640 || window.screen.width <= 412) {
+  temp = 70;
+}
+
+if (window.screen.height <= 480) {
+  temp = 60;
+}
+if (window.screen.height <= 412) {
+  temp = 40;
+}
+
+// Returns fitting styles for dragged/idle items
+const fn = (order, down, originalIndex, curIndex, y) => (index) =>
+  down && index === originalIndex
+    ? {
+        y: curIndex * temp + y,
+        scale: 1.1,
+        zIndex: '1',
+        shadow: 15,
+        immediate: (n) => n === 'y' || n === 'zIndex',
+      }
+    : {
+        y: order.indexOf(index) * temp,
+        scale: 1,
+        zIndex: '0',
+        shadow: 1,
+        immediate: false,
+      };
+
+export default ({ items, setCompleted, img }) => {
+  const order = useRef(items.map((_, index) => index)); // Store indicies as a local ref, this represents the item order
+  const [springs, setSprings] = useSprings(items.length, fn(order.current)); // Create springs, each corresponds to an item, controlling its transform, scale, etc.
+  const bind = useDrag((vars) => {
+    const {
+      args: [originalIndex],
+      down,
+      movement: [, y],
+    } = vars;
+    const curIndex = order.current.indexOf(originalIndex);
+    const curRow = clamp(
+      Math.round((curIndex * temp + y) / temp),
+      0,
+      items.length - 1
+    );
+    const newOrder = swap(order.current, curIndex, curRow);
+    setSprings(fn(newOrder, down, originalIndex, curIndex, y)); // Feed springs new style data, they'll animate the view without causing a single render
+    if (!down) order.current = newOrder;
+
+    if (vars.event.type === 'mouseup' || vars.event.type === 'touchend') {
+      if (isEqual(newOrder, [4, 1, 0, 3, 2])) {
+        setCompleted(true);
+      }
+    }
+  });
+  return (
+    <Content img={img} height={temp}>
+      {springs.map(({ zIndex, shadow, y, scale }, i) => (
+        <animated.div
+          {...bind(i)}
+          key={i}
+          style={{
+            zIndex,
+            boxShadow: shadow.interpolate(
+              (s) => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`
+            ),
+            transform: interpolate(
+              [y, scale],
+              (yIndex, s) => `translate3d(0,${yIndex}px,0) scale(${s})`
+            ),
+          }}
+          //          children={items[i]}
+        />
+      ))}
+    </Content>
+  );
+};

src/routes/SortsDrag/ImagesContext.jsx

@@ -0,0 +1,58 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import styled from 'styled-components';
+import { Loader } from './styles';
+
+const Background = styled.div`
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ImagesContext = createContext({
+  images: {},
+});
+
+export const useImagesContext = () => useContext(ImagesContext);
+
+export const ImagesProvider = (props) => {
+  const [images, setImages] = useState({});
+  const [imagesReadyCnt, setImagesReadyCnt] = useState(0);
+  const { r, children } = props;
+
+  // import and preload images
+  useEffect(() => {
+    const importedImages = {};
+    let i = 0;
+    r.keys().forEach((item) => {
+      const importedImg = r(item);
+      importedImages[
+        item.replace('./', '').replace('items/', '')
+      ] = importedImg;
+      const img = new Image();
+      img.onload = () => {
+        i += 1;
+        setImagesReadyCnt(i);
+      };
+      img.src = importedImg;
+    });
+    setImages(importedImages);
+  }, [r]);
+
+  if (Object.keys(images).length !== imagesReadyCnt || imagesReadyCnt < 1) {
+    return (
+      <Background>
+        <Loader />
+      </Background>
+    );
+  }
+
+  return (
+    <ImagesContext.Provider value={{ images }}>
+      {children}
+    </ImagesContext.Provider>
+  );
+};
+
+export const ImagesConsumer = ImagesContext.Consumer;

src/routes/SortsDrag/Puzzle.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useState, useEffect } from 'react';
+import { disablePageScroll, enablePageScroll } from 'scroll-lock';
+
+import { Game , GameContainer, WinContainer } from './styles';
+
+import DraggableList from './DraggableList';
+import { useImagesContext } from './ImagesContext';
+
+export default () => {
+  const { images } = useImagesContext();
+  const [currentImage, setCurrentImage] = useState(null);
+  const [completed, setCompleted] = useState(false);
+
+  useEffect(() => {
+    disablePageScroll();
+    return () => {
+      enablePageScroll();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (Object.keys(images).length > 0) {
+      setCurrentImage(images['1.png']);
+    }
+  }, [images]);
+
+  let content = (
+    <DraggableList
+      items={'1 2 3 4 5'.split(' ')}
+      setCompleted={setCompleted}
+      img={currentImage}
+    />
+  );
+
+  if (completed) {
+    content = (
+      <WinContainer>
+        <img src={currentImage} alt="puzzle" />
+      </WinContainer>
+    );
+  }
+
+  const select = (event) => {
+    const image = event.target.closest('img');
+    if (image) {
+      setCurrentImage(image.src);
+      setCompleted(false);
+    }
+  };
+
+  return (
+    <Game
+      bg={images['bg.png']}
+      size="400px"
+      filter="1"
+      style={{ paddingTop: '5%' }}
+    >
+      <GameContainer>
+        <div className="options" onClick={select}>
+          <img src={images['1.png']} alt="puzzle1" />
+          <img src={images['2.png']} alt="puzzle2" />
+          <img src={images['3.png']} alt="puzzle3" />
+          <img src={images['4.png']} alt="puzzle4" />
+        </div>
+        <div className="inner">{content}</div>
+      </GameContainer>
+    </Game>
+  );
+};

src/routes/SortsDrag/SortsDragTemplate.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ImagesProvider } from './ImagesContext';
+
+const Puzzle = React.lazy(() => {
+  return import('./Puzzle');
+});
+
+const SortsDragTemplate = () => {
+  return (
+    <ImagesProvider
+      r={require.context(
+        '../../assets/images/SortsDrag',
+        false,
+        /\.(png|jpe?g|svg)$/
+      )}
+    >
+      <Puzzle />
+    </ImagesProvider>
+  );
+};
+
+export default SortsDragTemplate;

src/routes/SortsDrag/index.js

@@ -0,0 +1 @@
+export { default } from './SortsDragTemplate';