Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implements #232 & #247 #282

Merged
merged 11 commits into from
Mar 18, 2021
Merged

Implements #232 & #247 #282

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
897e4b6
:lipstick: Implements #247 Cryptobot link overflows the container
harsh242 Mar 16, 2021
9096057
:lipstick: Implements #232 Give context on how to use customizer
harsh242 Mar 16, 2021
3bcbec0
:bug: fix customizer tour overflowing welcome modal
harsh242 Mar 16, 2021
11ee26d
:bug: Build Fix
harsh242 Mar 16, 2021
2ae72e4
fix: :bug: Build fixed hopefully
harsh242 Mar 17, 2021
3eb4001
:ambulance: BUILD FIXED FINALLY :sweat:
harsh242 Mar 17, 2021
f3e2858
reset to older commit
harsh242 Mar 17, 2021
4c2b368
Merge branch 'develop' into twitter-2.1-issues
bhaskarSingh Mar 17, 2021
174fa41
:heavy_minus_sign: removed unused dependency
harsh242 Mar 18, 2021
a8ed1e1
Merge branch 'develop' into twitter-2.1-issues
bhaskarSingh Mar 18, 2021
15ef64c
Merge branch 'develop' into twitter-2.1-issues
bhaskarSingh Mar 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,17 +66,21 @@
"react-colorful": "^4.4.4",
"react-confetti": "^6.0.0",
"react-dom": "^16.12.0",
"react-device-detect":"^1.17.0",
bhaskarSingh marked this conversation as resolved.
Show resolved Hide resolved
"react-helmet": "^5.2.1",
"react-icons": "^3.9.0",
"react-live": "^2.2.2",
"react-loadable":"^5.5.0",
"react-loader-spinner": "^3.1.14",
"react-responsive": "^8.0.3",
"react-spring": "^8.0.27",
"react-three-fiber": "^5.3.18",
"react-tooltip": "^4.2.5",
"react-transition-group": "^4.4.1",
"react-typography": "^0.16.19",
"reactour":"^1.18.3",
"react-use": "^15.3.8",
"styled-components":"^4.0.0",
bhaskarSingh marked this conversation as resolved.
Show resolved Hide resolved
"scheduler": "^0.20.1",
"sharp": "^0.23.4",
"tailwindcss": "^2.0.2",
Expand Down
8 changes: 4 additions & 4 deletions src/pages/tezos/claim-transaction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,11 +426,11 @@ function Transaction({ location }) {
Share your unique cryptobot with your friends and start
trading with other on marketplace!
</h4>
<div className="text-white text-center text-lg font-mulish mt-8">
Here’s the link to your unique cryptobot:
<div className="text-white text-center text-lg font-mulish mt-8 break-all">
<p>Here’s the link to your unique cryptobot:</p>
<a
href={`https://cryptocodeschool.in/tezos/cryptobot/${botTokenId}`}
className="text-primary-400 underline"
className="text-primary-400 underline break-all"
target="_blank"
rel="noopener noreferrer"
>
Expand Down Expand Up @@ -509,7 +509,7 @@ function Transaction({ location }) {
Earn more super cool cryptobots by completing Modules or
exploring Marketplace
</h4>
<div className="grid md:grid-cols-2 grid-cols-1 space-x-4 mx-auto justify-center text-white mt-8">
<div className="grid md:grid-cols-2 grid-cols-1 space-x-4 mx-auto justify-center text-white mt-8">
<Link to="/tezos/marketplace">
<Button size="lg" type="secondary">
Explore Marketplace
Expand Down
142 changes: 131 additions & 11 deletions src/pages/tezos/customizebot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React, {
useEffect,
useContext,
} from 'react';
import Loadable from 'react-loadable';
import NavBar from '../../components/NavBar';
import Button from '../../components/Buttons';
import { ThanosWallet } from '@thanos-wallet/dapp';
Expand Down Expand Up @@ -36,6 +37,10 @@ import GLTFExporter from 'three-gltf-exporter';
import { NETWORK } from 'src/defaults';

import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';

import { BeaconContext } from 'src/context/beacon-context';
import { createUser, batchUpdateProgress } from 'src/api';
import { trackEvent } from 'src/utils/analytics';
Expand Down Expand Up @@ -139,7 +144,7 @@ const Bot = ({
const group = useRef();
const { scene } = useGLTF('/compressedv5.glb');
const [hovered, set] = useState(null);
console.log("scene", scene);
console.log('scene', scene);

const head = useGroup(scene, 'head');
const arm = useGroup(scene, 'arm');
Expand Down Expand Up @@ -341,12 +346,71 @@ const CustomEnvironment = () => {
return null;
};

//INTRO TO CUSTOMIZER TOUR
const steps = [
{
selector: '.first-step',
content: () => {
return (
<div className="space-y-1 mt-1">
<h3 className="font-extrabold">Give your Cryptobot some muscles!</h3>
<p>Choose different body parts for your cryptobot.</p>
</div>
);
},
style: {
backgroundColor: '#061B2F',
color: 'white',
},
},
{
selector: '.second-step',
content: () => {
return (
<div className="space-y-1 mt-1">
<h3 className="font-extrabold">
Give your Cryptobot a Unique Style!
</h3>
<p>
Select a body part to give it a color from the palette below or
choose a custom color.
</p>
</div>
);
},
style: {
backgroundColor: '#061B2F',
color: 'white',
},
},
{
selector: '.third-step',
content: () => {
return (
<div className="space-y-1 mt-1">
<h3 className="font-extrabold">Claim your Unique Cryptobot!</h3>
<p>After you are done customizing claim your cryptobot🤖</p>
</div>
);
},
style: {
backgroundColor: '#061B2F',
color: 'white',
},
},
];

const Tour = Loadable({
loader: () => import('reactour'),
loading: () => null,
});

const Customizer = ({ location }) => {
const [selectPart, setselectPart] = useState(1);
const [headCount, setHeadCount] = useState(0);
const [armCount, setArmCount] = useState(0);
const [bodyCount, setBodyCount] = useState(0);
const [legCount, setLegCount] = useState(0);
const [headCount, setHeadCount] = useState(getRandomNumber(0, 4));
const [armCount, setArmCount] = useState(getRandomNumber(0, 4));
const [bodyCount, setBodyCount] = useState(getRandomNumber(0, 4));
const [legCount, setLegCount] = useState(getRandomNumber(0, 4));

const beacon = useContext(BeaconContext);
const [isModalOpen, setIsModalOpen] = useState(true);
Expand Down Expand Up @@ -410,6 +474,7 @@ const Customizer = ({ location }) => {
},
});


function uploadData() {
upload3dModel(
state.items.head,
Expand All @@ -419,6 +484,24 @@ const Customizer = ({ location }) => {
);
}

const [isTourOpen, setIsTourOpen] = useState(true);

//persist tour to local storage
useEffect(() => {
if (typeof window !== 'undefined') {
let tour = localStorage.getItem('isTourOpen');
if (tour !== null) {
setIsTourOpen(JSON.parse(tour));
} else {
setIsTourOpen(true);
}
}
}, [isModalOpen]);

useEffect(() => {
localStorage.setItem('isTourOpen', JSON.stringify(isTourOpen));
}, [isTourOpen]);

const [isUser] = useAtom(isUserAtom);
const [user, setUser] = useAtom(userAtom);

Expand Down Expand Up @@ -611,9 +694,38 @@ const Customizer = ({ location }) => {
id="editor"
className="relative h-full min-h-screen grid grid-cols-8 gap-4 w-full"
>
{!isModalOpen ? (
<Tour
steps={steps}
isOpen={isTourOpen}
onRequestClose={() => setIsTourOpen(false)}
accentColor="#2563EB"
lastStepNextButton={
<div className="text-white font-mulish">Let's get started!</div>
}
className="text-white"
prevButton={
<div className="text-base-50 font-mulish text-base space-x-1">
{' '}
<ArrowBackIosIcon />
Prev
</div>
}
nextButton={
<div className="text-base-50 font-mulish text-base space-x-1">
Next
<ArrowForwardIosIcon />
</div>
}
disableKeyboardNavigation={true}
/>
) : (
''
)}

<div
id="left-menu"
className="col-start-1 col-span-2 px-4 pt-4 rounded"
className="col-start-1 col-span-2 px-4 pt-4 rounded first-step"
>
<div className="grid grid-cols-2 gap-2">
<div className="flex flex-col w-full list-none" role="tablist">
Expand Down Expand Up @@ -931,7 +1043,7 @@ const Customizer = ({ location }) => {
/>
<CustomEnvironment />
</Suspense>
<OrbitControls enableZoom={false} />
<OrbitControls enableZoom={true} />
</Canvas>
<Loading containerStyles={{ background: 'rgba(55, 65, 81)' }} />
</div>
Expand All @@ -941,7 +1053,7 @@ const Customizer = ({ location }) => {
id="right-menu"
className="col-span-2 col-start-7 bg-base-900 px-4 "
>
<div className="grid grid-cols-2 gap-4 mx-auto justify-center text-white py-4">
<div className="grid grid-cols-2 gap-4 mx-auto justify-center text-white py-4 third-step">
<Button
size="sm"
type="secondary"
Expand Down Expand Up @@ -985,12 +1097,20 @@ const Customizer = ({ location }) => {
</Button>
</div>
<hr className="my-2 bg-base-400 border-2 h-0.5" />
<div className="space-y-6 mt-4">
<div>
<div className="space-y-6 mt-4 second-step">
<div className="flex flex-row">
{' '}
<h4 className="text-xl text-white font-bold">
<h4 className="text-xl text-white font-bold flex-1">
Colors & Textures
</h4>
<button
className="text-white focus:outline-none"
onClick={() => {
setIsTourOpen(true);
}}
>
<HelpOutlineIcon /> Help
</button>
</div>
<div id="colors" className="space-y-4">
<h5 className="text-lg text-white font-bold">
Expand Down
6 changes: 3 additions & 3 deletions src/pages/tezos/transaction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,11 +412,11 @@ function Transaction({ location }) {
Share your unique cryptobot with your friends and start
trading with other on marketplace!
</h4>
<div className="text-white text-center text-lg font-mulish mt-8">
Here’s the link to your unique cryptobot:
<div className="text-white text-center text-lg font-mulish mt-8 break-all">
<p>Here’s the link to your unique cryptobot:</p>
<a
href={`https://cryptocodeschool.in/tezos/cryptobot/${bot.tokenId}`}
className="text-primary-400 underline"
className="text-primary-400 underline break-all"
target="_blank"
rel="noopener noreferrer"
>
Expand Down
Loading