pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Games Component Made For Mobile

Browse Source
main
Pedram Keshavarzi 3 years ago
parent b8e26333f2
commit 991fdbabd3
6 changed files with 8145 additions and 7751 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 59
      package-lock.json
  2. 1
      package.json
  3. 48
      src/view/dashboard2/Games.js
  4. 12
      src/view/services/index.css
  5. 26
      src/view/services/index.js
  6. 15696
      yarn.lock

59
package-lock.json generated
Unescape View File

@ -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",

1
package.json
Unescape View File

@ -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",

48
src/view/dashboard2/Games.js
Unescape View File

@ -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,7 +44,9 @@ 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">
<>
{
!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}
@ -72,8 +74,44 @@ const Games = ({ gameId, chooseGame, selectedGames }) => {
</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);

12
src/view/services/index.css
Unescape View File

@ -0,0 +1,12 @@
.carousel-overview{
width:100%;
display: flex;
overflow:scroll;
overflow-y: hidden;
direction: rtl;
height:125px;
padding: 15px;
}

26
src/view/services/index.js
Unescape View File

@ -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) => ({

15696
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save