Skip to content

Commit

Permalink
edit
Browse files Browse the repository at this point in the history
  • Loading branch information
Asmaa ElBanna committed Aug 5, 2024
1 parent 5b1adab commit b948cf6
Show file tree
Hide file tree
Showing 14 changed files with 114 additions and 142 deletions.
Binary file removed images/899baf164402339.Y3JvcCw2NjI3LDUxODQsNTc0LDA.jpg
View file
Binary file not shown.
Binary file removed images/Hand_sign_finger-16-512.webp
View file
Binary file not shown.
Binary file removed images/il_570xN.3812195829_4zqo.avif
View file
Binary file not shown.
Binary file removed images/image 1783.png
View file
Binary file not shown.
0 images/image 1872.png → images/image_1872.png
View file
File renamed without changes
68 changes: 0 additions & 68 deletions images/logo.svg
View file

This file was deleted.

3 changes: 0 additions & 3 deletions images/logo2.svg
View file

This file was deleted.

Binary file removed ...yan-paper-cut-minimalist-background-for-brochure-poster-banner-image_405384.jpg
View file
Binary file not shown.
13 changes: 0 additions & 13 deletions images/washing-machine.svg
View file

This file was deleted.

0 images/zmm20d38gb-fr-1500x1500 (1) (1).png → images/zmm20d38gb-fr-1500x1500.png
View file
File renamed without changes
Binary file removed images/zwf8240sb5-1500x1500.avif
View file
Binary file not shown.
14 changes: 9 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@
<link rel="stylesheet" href="./styles.css">

</head>
<link rel="icon" href="./images/watania.png" type="image/png">

<body>
<div class="deal-wheel">
<img src="./images/watania.png" style="width: 80px; height: 80px; z-index: 2; margin-left: 41%;" alt="">
<img src="./images/watania.png" class="logo" style="width: 80px; height: 80px; z-index: 2; margin-left: 41%;" alt="">
<div class="spinner"></div>
<button class="btn-spin" style="display: none;"></button>
<div class="ticker"></div>
Expand All @@ -21,11 +23,13 @@
</div>


<div id="congratulations" class="congratulations-message">
<p id="congratulations-text"></p>
<img id="congratulations-image" src="" alt="Selected Prize Image">
<div id="congratulations" style="display: none; margin-top: -50px;">
<h2 id="congratulations-text"></h2>
<div class="" style="display: flex; align-items: center; justify-content: center;">
<img id="congratulations-image" style="width: 30%; height: 30%;" alt="Prize Image" />
</div>
</div>


<script src="./script.js"></script>
</body>
Expand Down
144 changes: 94 additions & 50 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
const prizes = [
{ text: "Microwave 10", color: "hsl(197 30% 43%)", reaction: "dancing", image: "./images/zmm20d38gb-fr-1500x1500 (1) (1).png" },
{ text: "Microwave 15", color: "hsl(173 58% 39%)", reaction: "shocked", image: "./images/zmm20d38gb-fr-1500x1500 (1) (1).png" },
{ text: "Microwave 20", color: "hsl(43 74% 66%)", reaction: "shocked", image: "./images/zmm20d38gb-fr-1500x1500 (1) (1).png" },
{ text: "Microwave 25", color: "hsl(27 87% 67%)", reaction: "shocked", image: "./images/zmm20d38gb-fr-1500x1500 (1) (1).png" },
{ text: "Microwave 30 pro", color: "hsl(12 76% 61%)", reaction: "dancing", image: "./images/zmm20d38gb-fr-1500x1500 (1) (1).png" },
{ text: "10% Off", color: "hsl(350 60% 52%)", reaction: "laughing", image: "./images/zmm20d38gb-fr-1500x1500 (1) (1).png" },
{ text: "10% Off", color: "hsl(91 43% 54%)", reaction: "laughing", image: "./images/zmm20d38gb-fr-1500x1500 (1) (1).png" },
{ text: "10% Off", color: "hsl(140 36% 74%)", reaction: "dancing", image: "./images/zmm20d38gb-fr-1500x1500 (1) (1).png" }
{ text: "Microwave 10", color: "hsl(197 30% 43%)", reaction: "dancing", image: "./images/zmm20d38gb-fr-1500x1500.png", weight: 1 },
{ text: "Microwave 15", color: "hsl(173 58% 39%)", reaction: "shocked", image: "./images/zmm20d38gb-fr-1500x1500.png", weight: 0 },
{ text: "Microwave 20", color: "hsl(43 74% 66%)", reaction: "shocked", image: "./images/zmm20d38gb-fr-1500x1500.png", weight: 0 },
{ text: "Microwave 25", color: "hsl(27 87% 67%)", reaction: "shocked", image: "./images/zmm20d38gb-fr-1500x1500.png", weight: 2 },
{ text: "Microwave 30 pro", color: "hsl(12 76% 61%)", reaction: "dancing", image: "./images/zmm20d38gb-fr-1500x1500.png", weight: 4 },
{ text: "10% Off", color: "hsl(350 60% 52%)", reaction: "laughing", image: "./images/zmm20d38gb-fr-1500x1500.png", weight: 0 },
{ text: "10% Off", color: "hsl(91 43% 54%)", reaction: "laughing", image: "./images/zmm20d38gb-fr-1500x1500.png", weight: 0 },
{ text: "10% Off", color: "hsl(140 36% 74%)", reaction: "dancing", image: "./images/zmm20d38gb-fr-1500x1500.png", weight: 0 }
];

const wheel = document.querySelector(".deal-wheel");
Expand All @@ -23,30 +23,31 @@ let tickerAnim;
let rotation = 0;
let currentSlice = 0;
let prizeNodes;
let selectedPrize;

const createPrizeNodes = () => {
prizes.forEach(({ text, color, reaction, image }, i) => {
const rotation = ((prizeSlice * i) * -1) - prizeOffset;
spinner.insertAdjacentHTML(
"beforeend",
`<li class="prize" data-reaction=${reaction} style="--rotate: ${rotation}deg">
<span class="text">${text}</span>
<img src="${image}" alt="${text}" />
</li>`
);
const rotation = ((prizeSlice * i) * -1) - prizeOffset;
spinner.insertAdjacentHTML(
"beforeend",
`<li class="prize" data-reaction="${reaction}" style="--rotate: ${rotation}deg">
<span class="text">${text}</span>
<img src="${image}" alt="${text}" />
</li>`
);
});
};

const createConicGradient = () => {
spinner.setAttribute(
"style",
`background: conic-gradient(
from -90deg,
${prizes
.map(({ color }, i) => `${color} 0 ${(100 / prizes.length) * (prizes.length - i)}%`)
.reverse()
}
);`
"style",
`background: conic-gradient(
from -90deg,
${prizes
.map(({ color }, i) => `${color} 0 ${(100 / prizes.length) * (prizes.length - i)}%`)
.reverse()
}
);`
);
};

Expand All @@ -56,12 +57,6 @@ const setupWheel = () => {
prizeNodes = wheel.querySelectorAll(".prize");
};

const spinertia = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
};

const runTickerAnimation = () => {
const values = spinnerStyles.transform.split("(")[1].split(")")[0].split(",");
const a = values[0];
Expand All @@ -74,40 +69,69 @@ const runTickerAnimation = () => {
const slice = Math.floor(angle / prizeSlice);

if (currentSlice !== slice) {
ticker.style.animation = "none";
setTimeout(() => ticker.style.animation = null, 10);
currentSlice = slice;
ticker.style.animation = "none";
setTimeout(() => ticker.style.animation = null, 10);
currentSlice = slice;
}

tickerAnim = requestAnimationFrame(runTickerAnimation);
};

const selectPrize = () => {
const selected = Math.floor(rotation / prizeSlice);
prizeNodes[selected].classList.add(selectedClass);
reaper.dataset.reaction = prizeNodes[selected].dataset.reaction;
// Calculate total weight
const totalWeight = prizes.reduce((acc, prize) => acc + prize.weight, 0);

// Generate a random number between 0 and total weight
let random = Math.random() * totalWeight;

console.log(`Random value for selection: ${random}`);

// Find the prize based on the random number and weight
const selectedPrize = prizes.find(({ weight }) => (random -= weight) < 0);

if (!selectedPrize) {
console.error('No prize selected');
return;
}

// Get the index of the selected prize
const selectedIndex = prizes.indexOf(selectedPrize);

console.log(`Selected prize: ${selectedPrize.text}, Index: ${selectedIndex}`);

return { prize: selectedPrize, index: selectedIndex };
};

const displayPrize = (selectedPrize) => {
const congratsMessage = document.getElementById("congratulations");
const congratsText = document.getElementById("congratulations-text");
const congratsImage = document.getElementById("congratulations-image");

congratsText.innerText = `Congratulations! You won ${prizes[selected].text}!`;
congratsImage.src = prizes[selected].image;
congratsMessage.style.display = 'block';
};

const resetSlider = () => {
rangeSlider.value = 100;
if (congratsMessage && congratsText && congratsImage) {
congratsText.innerText = `Congratulations! You won ${selectedPrize.text}!`;
congratsImage.src = selectedPrize.image;
congratsMessage.style.display = 'block';
}
};

trigger.addEventListener("click", () => {
if (reaper.dataset.reaction !== "resting") {
reaper.dataset.reaction = "resting";
reaper.dataset.reaction = "resting";
}

trigger.disabled = true;
rotation = Math.floor(Math.random() * 360 + spinertia(2000, 5000));
prizeNodes.forEach((prize) => prize.classList.remove(selectedClass));

// Select prize but don't display yet
const { prize, index } = selectPrize() || {};
if (!prize) return;

selectedPrize = prize;
const rotationPerSlice = 360 / prizes.length;
const randomOffset = Math.floor(Math.random() * rotationPerSlice);
const targetRotation = index * rotationPerSlice + randomOffset;

rotation = 360 * 5 + targetRotation; // Spin the wheel 5 times, then land on the target slice
wheel.classList.add(spinClass);
spinner.style.setProperty("--rotate", rotation);
ticker.style.animation = "none";
Expand All @@ -119,24 +143,40 @@ spinner.addEventListener("transitionend", () => {
trigger.disabled = false;
trigger.focus();
rotation %= 360;
selectPrize();
wheel.classList.remove(spinClass);
spinner.style.setProperty("--rotate", rotation);


// Display the prize after the wheel stops spinning
if (selectedPrize) {
const selectedIndex = prizes.findIndex(prize => prize.text === selectedPrize.text);
prizeNodes[selectedIndex].classList.add(selectedClass); // Add class to highlight selected prize
displayPrize(selectedPrize);
selectedPrize = null; // Reset selectedPrize
}

resetSlider();
});

const rangeSlider = document.querySelector(".power-indicator input[type='range']");

const startSpinFromSlider = () => {
if (reaper.dataset.reaction !== "resting") {
reaper.dataset.reaction = "resting";
reaper.dataset.reaction = "resting";
}

trigger.disabled = true;
const sliderValue = rangeSlider.value;
rotation = Math.floor(sliderValue * 360 / 100) + spinertia(2000, 5000);
prizeNodes.forEach((prize) => prize.classList.remove(selectedClass));

// Select prize but don't display yet
const { prize, index } = selectPrize() || {};
if (!prize) return;

selectedPrize = prize;
const rotationPerSlice = 360 / prizes.length;
const randomOffset = Math.floor(Math.random() * rotationPerSlice);
const targetRotation = index * rotationPerSlice + randomOffset;

rotation = 360 * 5 + targetRotation; // Spin the wheel 5 times, then land on the target slice
wheel.classList.add(spinClass);
spinner.style.setProperty("--rotate", rotation);
ticker.style.animation = "none";
Expand All @@ -150,4 +190,8 @@ const handleSliderRelease = () => {
rangeSlider.addEventListener("mouseup", handleSliderRelease);
rangeSlider.addEventListener("touchend", handleSliderRelease);

const resetSlider = () => {
rangeSlider.value = 100;
};

setupWheel();
14 changes: 11 additions & 3 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ body {
outline: none;
opacity: 0.7;
transition: opacity 0.15s ease-in-out;
border: 2px solid #000;
/* border: 2px solid #000; */
}

.power-indicator input[type="range"]::-webkit-slider-thumb {
Expand All @@ -242,7 +242,7 @@ body {
width: 40px;
height: 40px;
background: none;
background-image: url('/images/image 1872.png');
background-image: url('/images/image_1872.png');
background-size: cover;
background-position: center;
cursor: pointer;
Expand All @@ -256,12 +256,20 @@ body {
.congratulations-message {
display: none;
text-align: center;
margin-top:-20px
margin-top:-40px
}

.congratulations-message img {
max-width: 150px;
display: block;
margin-left: 20%;
margin-top:-20px
}

@media (max-width: 768px) {
.deal-wheel .logo {
width: 40px !important;
height: 40px !important;
margin-left:42% !important;
}
}

0 comments on commit b948cf6

Please sign in to comment.