Games Component Made For Mobile

3 years ago · 991fdbabd3
parent b8e26333f2
commit 991fdbabd3
6 changed files with 8145 additions and 7751 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -20,6 +20,7 @@
        "react-dom": "^17.0.2",
        "react-dropzone": "^11.4.2",
        "react-icons": "^4.3.1",
+        "react-indiana-drag-scroll": "^2.1.0",
        "react-redux": "^7.2.6",
        "react-router-dom": "^6.2.1",
        "react-scripts": "5.0.0",
@ -5229,6 +5230,11 @@
      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
      "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
    },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
    "node_modules/clean-css": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.2.tgz",
@ -6025,6 +6031,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
    "node_modules/debug": {
      "version": "4.3.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@ -6408,6 +6419,11 @@
      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
      "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
    },
+    "node_modules/easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@ -14159,6 +14175,24 @@
        "react": "*"
      }
    },
+    "node_modules/react-indiana-drag-scroll": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz",
+      "integrity": "sha512-Tj94Dv9PkmoKqc9nxK/dzwhtE8pP7NTxmeHqkD8KN0zad1NNE+/JsvRcK4EdqE6CdA2nMESzqPMvv1AzRXdBew==",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -21027,6 +21061,11 @@
      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
      "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
    "clean-css": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.2.tgz",
@ -21600,6 +21639,11 @@
        "whatwg-url": "^8.0.0"
      }
    },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
    "debug": {
      "version": "4.3.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@ -21897,6 +21941,11 @@
      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
      "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
    },
+    "easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@ -27362,6 +27411,16 @@
      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
      "requires": {}
    },
+    "react-indiana-drag-scroll": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz",
+      "integrity": "sha512-Tj94Dv9PkmoKqc9nxK/dzwhtE8pP7NTxmeHqkD8KN0zad1NNE+/JsvRcK4EdqE6CdA2nMESzqPMvv1AzRXdBew==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.1.1"
+      }
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.4.2",
    "react-icons": "^4.3.1",
+    "react-indiana-drag-scroll": "^2.1.0",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
--- a/src/view/dashboard2/Games.js
+++ b/src/view/dashboard2/Games.js
@ -6,11 +6,11 @@ import img4 from "../../assets/img/Group 1364.svg";
 import img5 from "../../assets/img/Group 1357.svg";
 import img6 from "../../assets/img/Group 1362.svg";
 import { HiCheck } from "react-icons/hi";
+import { connect } from "react-redux";

+import ScrollContainer from 'react-indiana-drag-scroll'

-const Games = ({ gameId, chooseGame, selectedGames }) => {
-  console.log("Games run ==============================");
-  console.log(selectedGames);
+const Games = ({ gameId, chooseGame, selectedGames, isMobile }) => {
  const [data, setData] = useState([
    {
      id: 1,
@ -44,36 +44,74 @@ const Games = ({ gameId, chooseGame, selectedGames }) => {
    },
  ]);
  return (
-    <div className="Games w-full h-full pb-3 px-4 flex items-center justify-between border-b border-color1 flex-row-reverse">
-      {data.map((item, index) => (
-        <div
-          key={item.id}
-          className="Games-item h-full rounded-lg bg-white relative flex items-center justify-center flex-col hover:bg-red82OP hover:text-red52 cursor-pointer hover:border hover:border-red52"
-          style={
-            gameId === item.id
-              ? {
-                  backgroundColor: "rgba(223, 20, 82, 0.02)",
-                  aspectRatio: "0.95/1",
-                  border: "1px solid #df1452",
-                }
-              : { aspectRatio: "0.95/1" }
-          }
-          onClick={() => chooseGame(item.id)}
-        >
-          {selectedGames.includes(item.id) &&<div className="Games-item-active-circle w-4 h-4 rounded-full bg-color2 flex items-center justify-center absolute top-2 left-2">
-            <HiCheck className="text-white h-3/4" />
-          </div>}
-          <img src={item.img} alt="game-img" className="h-2/5" />
-          <div
-            className="Games-title mt-2"
-            style={gameId === item.id ? { color: "#df1452" } : null}
-          >
-            {item.title}
-          </div>
-        </div>
-      ))}
+    <>
+{
+  !isMobile ? <div className="Games w-full h-full pb-3 px-4 flex items-center justify-between border-b border-color1 flex-row-reverse">
+  {data.map((item, index) => (
+    <div
+      key={item.id}
+      className="Games-item h-full rounded-lg bg-white relative flex items-center justify-center flex-col hover:bg-red82OP hover:text-red52 cursor-pointer hover:border hover:border-red52"
+      style={
+        gameId === item.id
+          ? {
+              backgroundColor: "rgba(223, 20, 82, 0.02)",
+              aspectRatio: "0.95/1",
+              border: "1px solid #df1452",
+            }
+          : { aspectRatio: "0.95/1" }
+      }
+      onClick={() => chooseGame(item.id)}
+    >
+      {selectedGames.includes(item.id) &&<div className="Games-item-active-circle w-4 h-4 rounded-full bg-color2 flex items-center justify-center absolute top-2 left-2">
+        <HiCheck className="text-white h-3/4" />
+      </div>}
+      <img src={item.img} alt="game-img" className="h-2/5" />
+      <div
+        className="Games-title mt-2"
+        style={gameId === item.id ? { color: "#df1452" } : null}
+      >
+        {item.title}
+      </div>
    </div>
+  ))}
+</div> : 
+  <ScrollContainer className="carousel-overview">
+    {data.map((item, index) => (
+    <div
+      key={item.id}
+      className="Games-item h-full w-full p-2 rounded-lg bg-white relative flex items-center mx-2 justify-center flex-col hover:bg-red82OP hover:text-red52 cursor-pointer border border-red82OP hover:border-red52"
+      style={
+        gameId === item.id
+          ? {
+              backgroundColor: "rgba(223, 20, 82, 0.02)",
+              aspectRatio: "0.95/1",
+              border: "1px solid #df1452",
+            }
+          : { aspectRatio: "0.95/1" }
+      }
+      onClick={() => chooseGame(item.id)}
+    >
+      {selectedGames.includes(item.id) &&<div className="Games-item-active-circle w-4 h-4 rounded-full bg-color2 flex items-center justify-center absolute top-2 left-2">
+        <HiCheck className="text-white h-3/4" />
+      </div>}
+      <img src={item.img} alt="game-img" className="h-1/2" />
+      <div
+        className=" text-xs font-bold text-black40 mt-2"
+        style={gameId === item.id ? { color: "#df1452" } : null}
+      >
+        {item.title}
+      </div>
+    </div>
+  ))}
+  </ScrollContainer>
+}
+    
+    </>
  );
 };
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+});
+const mapDispatchToProps = ({});

-export default Games;
+export default connect(mapStateToProps, mapDispatchToProps)(Games);
--- a/src/view/services/index.css
+++ b/src/view/services/index.css
@ -0,0 +1,12 @@
+.carousel-overview{
+    width:100%;
+     display: flex;
+    
+
+   
+   overflow:scroll;
+    overflow-y: hidden;
+    direction: rtl;
+    height:125px;
+    padding: 15px;
+}
--- a/src/view/services/index.js
+++ b/src/view/services/index.js
@ -3,6 +3,8 @@ import { book, publicApi, userProduct } from "../../redux/actions";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import Product from "../../components/Product";
+import ScrollContainer from 'react-indiana-drag-scroll'
+

 import img1 from "../../assets/img/Group 1344.svg";
 import img2 from "../../assets/img/Group 1345.svg";
@ -15,6 +17,10 @@ import ServicePopUp from "./service";
 import Games from "../dashboard2/Games";
 import Packages from "../dashboard2/Packages";

+
+
+import './index.css'
+
 const Services = ({
  isMobile,
  books,
@ -106,7 +112,7 @@ const Services = ({
  const chooseGame = (id) => {
    setGameId(id);
  };
-
+if (!isMobile){
  return (
    <div
      className="flex items-start  justify-between"
@ -419,7 +425,23 @@ const Services = ({
        <ShoppingCart />
      </div> }
    </div>
-  );
+  );}
+  // Mobile Version
+  else{
+    return(
+    <div className="flex flex-col items-center mt-20">
+
+      <Games
+            selectedGames={selectedGames}
+            gameId={gameId}
+            chooseGame={chooseGame}
+          />
+          <div className="w-11/12 border-b border-gray-200"></div>
+          
+    </div>
+    )
+  }
+
 };

 const mapStateToProps = (state) => ({
--- a/yarn.lock
+++ b/yarn.lock