${product.name}
${product.description}
${product.volume ? `
${product.volume}
` : ""}
${starsHtml}
${originalPriceHtml}
£${product.salePrice.toFixed(2)}
${noteHtml}
`
return card
}
// Populate product sections
function populateProducts() {
// Populate favorites grid
const favoritesGrid = document.getElementById("favourites-grid")
if (favoritesGrid) {
categories.whiskey.products.forEach((product) => {
favoritesGrid.appendChild(createProductCard(product))
})
}
// Populate category carousels
const whiskeyCarousel = document.getElementById("whiskey-carousel")
const vodkaCarousel = document.getElementById("vodka-carousel")
const rumCarousel = document.getElementById("rum-carousel")
if (whiskeyCarousel) {
categories.whiskey.products.forEach((product) => {
whiskeyCarousel.appendChild(createProductCard(product))
})
}
if (vodkaCarousel) {
categories.vodka.products.forEach((product) => {
vodkaCarousel.appendChild(createProductCard(product))
})
}
if (rumCarousel) {
categories.rum.products.forEach((product) => {
rumCarousel.appendChild(createProductCard(product))
})
}
}
// Initialize carousels
function initCarousels() {
document.querySelectorAll(".product-carousel").forEach((carousel) => {
const container = carousel.querySelector(".carousel-container")
const prevBtn = carousel.querySelector(".prev")
const nextBtn = carousel.querySelector(".next")
if (container && prevBtn && nextBtn) {
prevBtn.addEventListener("click", () => {
container.scrollBy({ left: -300, behavior: "smooth" })
})
nextBtn.addEventListener("click", () => {
container.scrollBy({ left: 300, behavior: "smooth" })
})
}
})
}
// Initialize filter buttons
function initFilterButtons() {
// Hide/show filter sections
document.querySelectorAll(".hide-button").forEach((button) => {
button.addEventListener("click", () => {
const options = button.closest(".filter-group").querySelector(".filter-options")
if (options.style.display === "none") {
options.style.display = "flex"
button.textContent = "Hide"
} else {
options.style.display = "none"
button.textContent = "Show"
}
})
})
// View more buttons
document.querySelectorAll(".view-more").forEach((button) => {
button.addEventListener("click", () => {
// This would typically load more options
alert("More options would be loaded here")
})
})
// Mobile filter button
const filterButton = document.querySelector(".filter-button")
if (filterButton) {
filterButton.addEventListener("click", () => {
// This would typically show a mobile filter panel
alert("Mobile filter panel would open here")
})
}
}
// Prize wheel functionality
function initPrizeWheel() {
const modal = document.getElementById("prize-wheel-modal")
const canvas = document.getElementById("wheel-canvas")
const winBtn = document.getElementById("win-prizes-button")
const closeBtn = document.querySelector(".close-button")
const spinBtn = document.getElementById("spin-button")
const resultDiv = document.getElementById("prize-result")
const resultTitle = document.getElementById("result-title")
const resultMsg = document.getElementById("result-message")
const resultCode = document.getElementById("result-code")
const promoCode = document.getElementById("promo-code")
const spinAgainBtn = document.getElementById("spin-again-button")
const closeResultBtn = document.getElementById("close-result-button")
if (!canvas || !modal || !winBtn) return
const ctx = canvas.getContext("2d")
let spinning = false
let spins = localStorage.getItem("spins") ? Number.parseInt(localStorage.getItem("spins")) : 0
let won = localStorage.getItem("won") === "true"
let lastResult = null
const prizes = [
{ text: "10% OFF", color: "#FF7EB9", textColor: "#000" },
{ text: "FREE DELIVERY", color: "#7BFFA0", textColor: "#000" },
{ text: "£5 OFF", color: "#A177FF", textColor: "#fff" },
{ text: "TRY AGAIN", color: "#F5F5F5", textColor: "#000" },
{ text: "BUY 1 GET 1 FREE", color: "#FFCA7B", textColor: "#000" },
{ text: "15% OFF", color: "#78D6FF", textColor: "#000" },
{ text: "TRY AGAIN", color: "#F5F5F5", textColor: "#000" },
{ text: "£10 OFF", color: "#FF7B7B", textColor: "#fff" },
]
// Draw wheel
drawWheel()
// Event handlers
winBtn.addEventListener("click", () => {
modal.style.display = "flex"
updateSpinButton()
})
closeBtn.addEventListener("click", () => {
modal.style.display = "none"
})
spinBtn.addEventListener("click", spinWheel)
spinAgainBtn.addEventListener("click", () => {
resultDiv.style.display = "none"
spinBtn.style.display = "block"
if (lastResult === "TRY AGAIN" && !won && spins < 2) {
spinWheel()
}
})
closeResultBtn.addEventListener("click", () => {
modal.style.display = "none"
})
window.addEventListener("click", (e) => {
if (e.target === modal) modal.style.display = "none"
})
// Draw wheel function
function drawWheel() {
const centerX = canvas.width / 2
const centerY = canvas.height / 2
const radius = Math.min(centerX, centerY) - 10
for (let i = 0; i < prizes.length; i++) {
const angle = (i * 2 * Math.PI) / prizes.length
const nextAngle = ((i + 1) * 2 * Math.PI) / prizes.length
// Draw slice
ctx.beginPath()
ctx.moveTo(centerX, centerY)
ctx.arc(centerX, centerY, radius, angle, nextAngle)
ctx.closePath()
ctx.fillStyle = prizes[i].color
ctx.fill()
ctx.strokeStyle = "#fff"
ctx.stroke()
// Draw text
ctx.save()
ctx.translate(centerX, centerY)
ctx.rotate((angle + nextAngle) / 2)
ctx.textAlign = "right"
ctx.fillStyle = prizes[i].textColor
ctx.font = "bold 12px Arial"
ctx.fillText(prizes[i].text, radius - 20, 5)
ctx.restore()
}
// Draw center circle
ctx.beginPath()
ctx.arc(centerX, centerY, 15, 0, 2 * Math.PI)
ctx.fillStyle = "#fff"
ctx.fill()
ctx.strokeStyle = "#333"
ctx.stroke()
}
// Update spin button visibility
function updateSpinButton() {
if (spins >= 2 || won) {
spinBtn.style.display = "none"
resultDiv.style.display = "block"
if (lastResult === "TRY AGAIN") {
resultTitle.textContent = "Better luck next time!"
resultMsg.textContent = "Come back tomorrow for another chance!"
resultCode.style.display = "none"
} else if (won) {
resultTitle.textContent = "You've already won!"
resultMsg.textContent = `Your prize: ${lastResult}`
promoCode.textContent = localStorage.getItem("code") || "PRIZE123"
resultCode.style.display = "block"
}
spinAgainBtn.style.display = "none"
} else {
spinBtn.style.display = "block"
resultDiv.style.display = "none"
}
}
// Spin wheel function
function spinWheel() {
if (spinning || spins >= 2 || (won && spins >= 1)) return
spinning = true
spinBtn.disabled = true
spinBtn.textContent = "Spinning..."
spins++
localStorage.setItem("spins", spins)
// Random rotations
const rotations = 3 + Math.floor(Math.random() * 4)
// Prize index
let prizeIndex
if (spins === 2 && lastResult === "TRY AGAIN") {
const winningIndices = prizes
.map((prize, index) => (prize.text !== "TRY AGAIN" ? index : -1))
.filter((index) => index !== -1)
prizeIndex = winningIndices[Math.floor(Math.random() * winningIndices.length)]
} else {
prizeIndex = Math.floor(Math.random() * prizes.length)
}
const segmentAngle = 360 / prizes.length
const destinationAngle = 360 * rotations + prizeIndex * segmentAngle
const randomOffset = Math.random() * (segmentAngle * 0.8)
const finalRotation = destinationAngle + randomOffset
// Animate
canvas.style.transition = "transform 5s cubic-bezier(0.2, 0.8, 0.3, 1)"
canvas.style.transform = `rotate(${finalRotation}deg)`
setTimeout(() => {
spinning = false
spinBtn.disabled = false
spinBtn.textContent = "Spin to Win!"
const prize = prizes[prizeIndex].text
lastResult = prize
if (prize !== "TRY AGAIN") {
won = true
localStorage.setItem("won", "true")
// Show win
resultTitle.textContent = "Congratulations!"
resultMsg.textContent = `You won: ${prize}`
resultMsg.className = "text-violet-600"
const code = `PRIZE${Math.floor(Math.random() * 1000)}`
promoCode.textContent = code
localStorage.setItem("code", code)
resultCode.style.display = "block"
spinAgainBtn.style.display = "none"
// Confetti
createConfetti()
} else {
// Show try again
resultTitle.textContent = "Better luck next time!"
resultMsg.textContent = "Spin again or come back tomorrow!"
resultMsg.className = ""
resultCode.style.display = "none"
spinAgainBtn.style.display = spins < 2 ? "block" : "none"
}
spinBtn.style.display = "none"
resultDiv.style.display = "block"
}, 5000)
}
// Create confetti
function createConfetti() {
const colors = ["#FF7EB9", "#7BFFA0", "#A177FF", "#FFCA7B", "#78D6FF", "#FF7B7B"]
for (let i = 0; i < 50; i++) {
const confetti = document.createElement("div")
confetti.className = "confetti-piece"
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]
confetti.style.left = Math.random() * 100 + "vw"
confetti.style.animationDelay = Math.random() * 3 + "s"
confetti.style.animationDuration = Math.random() * 2 + 2 + "s"
document.body.appendChild(confetti)
setTimeout(() => {
confetti.remove()
}, 5000)
}
}
}
})