116 lines
3.9 KiB
JavaScript
116 lines
3.9 KiB
JavaScript
import React, { useRef, useEffect, useState } from 'react'
|
|
import styled from '@emotion/styled';
|
|
import { Box, Button, Container, Grid, Input, TextField } from '@mui/material';
|
|
import { useTheme } from '@emotion/react';
|
|
import { Wheel } from 'spin-wheel/src/wheel';
|
|
import WinningDialog from '@components/WinningDialog';
|
|
|
|
|
|
const CustomDiv = styled.div`
|
|
background-color: ${(props) => props.theme.palette.primary.main};
|
|
height: 900px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`;
|
|
|
|
|
|
const WheelSpinPage = () => {
|
|
|
|
const [openSpinResult, setOpenSpinResult] = useState(false);
|
|
const [winningIndex, setWinningIndex] = useState(0);
|
|
const [emailValue, setEmailValue] = useState("");
|
|
|
|
const wheelRef = useRef();
|
|
|
|
const handleTextChange = (event) => {
|
|
setEmailValue(event.target.value);
|
|
}
|
|
|
|
const submitHandler = () => {
|
|
setEmailValue("");
|
|
wheelRef.current.spin(1000);
|
|
}
|
|
|
|
const handleRest = (event) => {
|
|
console.log(event.currentIndex);
|
|
setWinningIndex(event.currentIndex);
|
|
setOpenSpinResult(true);
|
|
}
|
|
|
|
const theme = useTheme();
|
|
|
|
const containerRef = useRef();
|
|
|
|
|
|
const wheelItems = {
|
|
items: [
|
|
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main },
|
|
{ label: '4 KSats', backgroundColor: '#f7931a' },
|
|
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main },
|
|
{ label: '19 KSats', backgroundColor: '#f7931a'},
|
|
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main},
|
|
{ label: '4 KSats', backgroundColor: '#f7931a'},
|
|
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main},
|
|
{ label: '4 KSats', backgroundColor: '#f7931a'},
|
|
{ label: '19 KSats', backgroundColor: theme.palette.secondary.main},
|
|
{ label: '4 KSats', backgroundColor: '#f7931a'},
|
|
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main},
|
|
{ label: '4 KSats', backgroundColor: '#f7931a'}
|
|
]
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
// Create a new Wheel using the container and props
|
|
// Make sure the containerRef.current is not null before creating the Wheel
|
|
if (containerRef.current) {
|
|
wheelRef.current = new Wheel(containerRef.current, wheelItems);
|
|
wheelRef.current.pointerAngle = 0;
|
|
wheelRef.current.overlayImage = '/assets/images/example-3-overlay.svg';
|
|
wheelRef.current.isInteractive = false;
|
|
wheelRef.current.rotationSpeedMax = 1000;
|
|
wheelRef.current.itemLabelFontSizeMax = 20;
|
|
wheelRef.current.rotationResistance = -100;
|
|
|
|
wheelRef.current.onRest = handleRest;
|
|
}
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<CustomDiv>
|
|
<Container>
|
|
<WinningDialog open={openSpinResult} close={setOpenSpinResult} prizeAmount={wheelItems.items[winningIndex].label} />
|
|
<Grid container justifyContent="center" alignItems="center" spacing={3}>
|
|
<Grid item md={6}>
|
|
<Grid container direction="column">
|
|
<Grid item>
|
|
<h1>Join our mailing list to spin the wheel for a chance to win BTC!</h1>
|
|
</Grid>
|
|
<Grid item>
|
|
<Grid container spacing={1} alignItems="center">
|
|
<Grid item>
|
|
<TextField label="Email" variant='filled' size='small' value={emailValue} onChange={handleTextChange}/>
|
|
</Grid>
|
|
<Grid item>
|
|
<Button variant="contained" color="secondary" onClick={submitHandler}>Submit and Spin!</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item md={6}>
|
|
<Grid container justifyContent="center">
|
|
<div className='wheel-container' style={{height: 500, width: 500}} ref={containerRef}></div>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</CustomDiv>
|
|
)
|
|
}
|
|
|
|
export default WheelSpinPage |