<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.App {
background-image: url('./images//bg.webp');
background-position: center;
background-size: cover;
object-fit: contain;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.container {
width: 500px;
height: 500px;
background-image: url('./images/wheel.webp');
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
position: relative;
overflow: hidden;
transition: transform 5s;
transform-origin: center;
}
.container div {
position: absolute;
transform-origin: center;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
color: #fff;
}
.container .one {
left: 37.2%;
top: 5%;
background-image: url('./images/star1.webp');
object-fit: cover;
background-size: cover;
height: 24%;
width: 24%;
position: relative;
border-radius: 50%;
}
.container .two {
background-image: url('./images/star2.webp');
/* background-repeat: no-repeat; */
object-fit: cover;
background-size: cover;
height: 24%;
width: 24%;
position: relative;
border-radius: 50%;
left: 65%;
top:-4%;
/* transform: rotate(50deg); */
}
.container h1{
position: absolute;
font-size: 1.2rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 50;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 15px;
text-shadow: 0px 4px 0px darkred; /* Dark red text shadow */
/* height: auto; */
/* width: 60%; */
}
.container h1 span {
font-size: 1.5rem;
position: fixed;
top: 60%;
font-weight: 800;
/* text-shadow: 0px 4px 0px darkred; Dark red text shadow */
}
.container .three {
background-image: url('./images/star1.webp');
/* background-repeat: no-repeat; */
object-fit: cover;
background-size: cover;
height: 24%;
width: 24%;
position: relative;
border-radius: 50%;
left: 68%;
top:4%;
}
.container .four {
background-image: url('./images/star2.webp');
/* background-repeat: no-repeat; */
object-fit: cover;
background-size: cover;
height: 24%;
width: 24%;
position: relative;
border-radius: 50%;
left:40%;
top:-1%;
}
.container .five {
background-image: url('./images/star1.webp');
/* background-repeat: no-repeat; */
object-fit: cover;
background-size: cover;
height: 24%;
width: 24%;
position: relative;
border-radius: 50%;
left:10.5%;
top:-39.7%;
}
.container .six {
background-image: url('./images/star1.webp');
/* background-repeat: no-repeat; */
object-fit: cover;
background-size: cover;
height: 24%;
width: 24%;
position: relative;
border-radius: 50%;
left:8.5%;
top:-95.5%;
}
.arrow {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 50;
}
.arrow img {
position: absolute;
top: -40px;
left: -80px;
}
#spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 100;
}
#spin img {
width: 100%;
height: auto;
pointer-events: none;
}
@media (max-width: 540px) {
.container {
width: 350px;
height: 350px;
}
#spin {
top: 52.5%;
width: 70px;
height: 70px;
}
.container div {
font-size: 14px;
}
.arrow {
height: 50px;
width: 50px;
}
}
.birds {
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
top: 20%;
}
.birds img {
width: 20%;
}
.stars {
position: absolute;
z-index: 50;
}
.stars .bird-1 {
position: fixed;
top: 0;
left: 0;
width: 10%;
}
.stars .bird-2 {
position: fixed;
bottom: 0;
right: 0;
width: 10%;
}
.design {
position: absolute;
z-index: 50;
}
.design img {
position: fixed;
bottom: -23%;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, { useState, useRef, useEffect } from 'react';
import './App.css';
import bird1 from "./images/paret.webp";
import bird2 from "./images/paret2.webp";
import star1 from "./images/star1.webp";
import star2 from "./images/star2.webp";
import arrow from "./images/arrow.webp";
import spin from "./images/btn.png";
import PopUp from './components/PopUp';
import bg from "./images/bg3.webp";
import startSound from './audio/start.mp3';
import winSound from './audio/win.mp3';
import loseSound from "./audio/lose.mp3"
function App() {
const [clicks, setClicks] = useState(0);
const [rotation, setRotation] = useState(0);
const [showPopUp, setShowPopUp] = useState(false);
const [prices, setPrices] = useState({
price1: 5,
price2: 1568,
price3: 1000,
price4: 15,
price5: 105,
price6: 300,
});
const [winPrize, setWinPrize] = useState();
const startAudioRef = useRef(null);
const winAudioRef = useRef(null);
const loseAudioRef = useRef(null)
useEffect(() => {
const popUpShown = localStorage.getItem('popUpShown') === 'true';
const savedClicks = parseInt(localStorage.getItem('clicks'), 10) || 0;
const savedWinPrize = localStorage.getItem('winPrize');
setShowPopUp(popUpShown);
setClicks(savedClicks);
if (savedWinPrize) {
setWinPrize(savedWinPrize);
}
}, []);
const handleSpinClick = () => {
if (clicks > 0) {
return;
}
setClicks(1);
localStorage.setItem('clicks', '1');
// Assuming 0 degrees is the top of the wheel and segments are evenly distributed.
const degreesPerSegment = 360 / 6;
const offsetToCenterOfSegment = degreesPerSegment / 2;
// Calculate a random segment to stop on, then adjust to the segment's center
const chosenSegment = Math.floor(Math.random() * 6);
const newRotation = rotation + 360 * 5 + (chosenSegment * degreesPerSegment) + offsetToCenterOfSegment;
setRotation(newRotation);
startAudioRef.current.play();
setTimeout(() => {
const finalRotation = newRotation % 360;
console.log(`Final Rotation: ${finalRotation}`);
const winningSector = Math.floor((finalRotation + degreesPerSegment / 2) % 360 / degreesPerSegment);
console.log(`Winning Sector: ${winningSector}`);
const winningPrice = prices[`price${winningSector + 1}`];
console.log(`Winning Price: ${winningPrice}`);
localStorage.setItem('winPrize', winningPrice);
setWinPrize(winningPrice);
winningPrice === "Empty" ? loseAudioRef.current.play() : winAudioRef.current.play();
localStorage.setItem('popUpShown', 'true');
setShowPopUp(true);
}, 5000);
};
const handleClaimBonus = () => {
setShowPopUp(true);
setClicks(1);
localStorage.setItem('popUpShown', 'true');
localStorage.setItem('clicks', '1');
// localStorage.removeItem('winPrize');
// setWinPrize(undefined);
};
const handleCloseBtn = () => {
setShowPopUp(false);
setClicks(0);
localStorage.setItem('popUpShown', 'false');
localStorage.setItem('clicks', '0');
localStorage.removeItem('winPrize');
setWinPrize(undefined);
}
return (
<div className="App">
<div id="spin" onClick={handleSpinClick}>
<img src={spin} alt="Spin" />
</div>
<div className='birds'>
<img className='bird-1' src={bird1} alt="Bird 1" />
<img className='bird-2' src={bird2} alt="Bird 2" />
</div>
<div className='stars'>
<img className='bird-1' src={star1} alt="Bird 1" />
<img className='bird-2' src={star2} alt="Bird 2" />
</div>
<div className='design'>
<img src={bg} width={500} height={500} alt="Background" />
</div>
<span className="arrow">
<img src={arrow} alt="Arrow" />
</span>
<div className="container" style={{ transform: `rotate(${rotation}deg)` }}>
<div className="one">
<h1>FS <span>{prices.price1}</span></h1>
</div>
<div className="two">
<h1>R$<span>{prices.price2}</span></h1>
</div>
<div className="three">
<h1>R$<span>{prices.price3}</span></h1>
</div>
<div className="four">
<h1>R$<span>{prices.price4}</span></h1>
</div>
<div className="five">
<h1>R$<span>{prices.price5}</span></h1>
</div>
<div className="six">
<h1>R$<span>{prices.price6}</span></h1>
</div>
</div>
{showPopUp && clicks > 0 && (
<PopUp winPrize={winPrize} onClaimBonus={handleClaimBonus} handleCloseBtn={handleCloseBtn} />
)}
<audio ref={startAudioRef} src={startSound} preload="auto"></audio>
<audio ref={winAudioRef} src={winSound} preload="auto"></audio>
<audio ref={loseAudioRef} src={loseSound} preload="auto"></audio>
</div>
);
}
export default App;
