<!DOCTYPE html>

<head>

<title>April Special — Hammermaster Give Gas Away</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

body {

margin: 0;

padding: 40px 10px 20px; /* Increased top padding so nothing gets cut off */

font-family: 'Comic Neue', cursive;

background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

color: #fff;

text-align: center;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

overflow: hidden;

touch-action: manipulation;

}

h1 {

font-size: clamp(2.2rem, 8vw, 3.5rem);

margin: 10px 0 8px;

text-shadow: 4px 4px 0 rgba(0,0,0,0.3);

color: #ffd700;

line-height: 1.1;

}

.subtitle {

font-size: clamp(1.2rem, 4.5vw, 1.6rem);

margin-bottom: 20px;

color: #fff;

text-shadow: 0 2px 4px rgba(0,0,0,0.4);

}

.wheel-container {

position: relative;

width: min(560px, 92vw);

height: min(560px, 92vw);

max-width: 560px;

max-height: 560px;

margin: 15px auto 25px;

}

canvas {

width: 100%;

height: 100%;

border-radius: 50%;

box-shadow: 0 25px 50px rgba(0,0,0,0.5),

inset 0 0 70px rgba(255,255,255,0.6),

0 0 50px rgba(255,215,0,0.4);

border: 18px solid #222;

}

.pointer {

position: absolute;

top: -8px; /* Moved down so it doesn't get cut off */

left: 50%;

transform: translateX(-50%);

font-size: clamp(65px, 14vw, 95px);

z-index: 30;

filter: drop-shadow(0 10px 10px rgba(0,0,0,0.6));

animation: pointerBob 0.7s infinite alternate ease-in-out;

}

@keyframes pointerBob {

from { transform: translateX(-50%) rotate(-12deg); }

to { transform: translateX(-50%) rotate(12deg); }

}

button {

margin-top: 20px;

padding: 20px 65px;

font-size: clamp(1.7rem, 6vw, 2.2rem);

font-family: 'Comic Neue', cursive;

background: #ffd700;

color: #1e3c72;

border: none;

border-radius: 50px;

box-shadow: 0 16px 0 #b8860b;

cursor: pointer;

min-width: 260px;

font-weight: bold;

}

button:active:not(:disabled) {

transform: translateY(6px);

box-shadow: 0 9px 0 #b8860b;

}

button:disabled {

background: #777;

box-shadow: none;

}

#result {

margin-top: 35px;

min-height: 160px;

font-size: clamp(1.9rem, 5.5vw, 2.5rem);

line-height: 1.3;

color: #ffd700;

text-shadow: 0 2px 4px rgba(0,0,0,0.5);

}

</style>

</head>

<body>

<h1>April Special — Hammermaster Give Gas Away</h1>

<p class="subtitle">Spin the wheel for gas money to get home! 💰🛣️</p>

</div>

<button id="spinBtn">SPIN THE WHEEL!</button>

const names = [

"Krueger 💑",

"NHammermaster 💑",

"Wilson 💑",

"Gamboa 💑",

"KHammermaster 🪖",

"Crowder 💑"

];

const winnerIndex = 0;

const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5"];

let canvas = document.getElementById("wheel");

let ctx = canvas.getContext("2d");

let spinBtn = document.getElementById("spinBtn");

let resultDiv = document.getElementById("result");

let wheelContainer = document.getElementById("wheelContainer");

let baseSize = 560;

let radius = 270;

let rotation = 0;

let spinning = false;

// Real mechanical carnival wheel clicking sound

let tickSound = new Audio("https://orangefreesounds.com/wp-content/uploads/2025/01/Spinning-prize-wheel-sound-effect.mp3");

tickSound.preload = "auto";

tickSound.volume = 0.85;

let tickInterval = null;

let currentTickRate = 45;

function resizeCanvas() {

const size = Math.min(window.innerWidth * 0.92, 560);

wheelContainer.style.width = wheelContainer.style.height = size + "px";

canvas.width = canvas.height = baseSize;

radius = baseSize / 2 - 30;

}

function startTicking() {

if (tickInterval) clearInterval(tickInterval);

currentTickRate = 45;

tickInterval = setInterval(() => {

if (!spinning) return;

tickSound.currentTime = 0;

tickSound.play().catch(() => {});

currentTickRate = Math.min(currentTickRate + 9, 240);

clearInterval(tickInterval);

tickInterval = setInterval(() => {

if (!spinning) return;

tickSound.currentTime = 0;

tickSound.play().catch(() => {});

}, currentTickRate);

}

function stopTicking() {

if (tickInterval) {

clearInterval(tickInterval);

tickInterval = null;

}

function playWinSound() {

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

const notes = [880, 1100, 1320];

let time = audioCtx.currentTime;

notes.forEach((freq, i) => {

const osc = audioCtx.createOscillator();

const gain = audioCtx.createGain();

osc.frequency.value = freq;

osc.type = 'sine';

gain.gain.value = 0.25;

osc.connect(gain).connect(audioCtx.destination);

osc.start(time + i * 0.08);

gain.gain.linearRampToValueAtTime(0, time + i * 0.08 + 0.4);

osc.stop(time + i * 0.08 + 0.45);

});

}

function drawWheel() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.save();

ctx.translate(baseSize/2, baseSize/2);

ctx.rotate(rotation * Math.PI / 180);

const arcAngle = 360 / names.length;

for (let i = 0; i < names.length; i++) {

const startAngle = (i * arcAngle) * Math.PI / 180;

const endAngle = ((i + 1) * arcAngle) * Math.PI / 180;

ctx.fillStyle = colors[i % colors.length];

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.arc(0, 0, radius, startAngle, endAngle);

ctx.fill();

ctx.strokeStyle = "#222";

ctx.lineWidth = 6;

ctx.stroke();

ctx.save();

ctx.rotate(((i + 0.5) * arcAngle) * Math.PI / 180);

ctx.fillStyle = "#222";

ctx.font = "bold 26px 'Comic Neue'";

ctx.textAlign = "center";

ctx.textBaseline = "middle";

ctx.fillText(names[i], radius * 0.68, 0);

ctx.restore();

}

ctx.beginPath();

ctx.arc(0, 0, radius + 10, 0, Math.PI * 2);

ctx.lineWidth = 24;

ctx.strokeStyle = "#333";

ctx.stroke();

ctx.beginPath();

ctx.arc(0, 0, 55, 0, Math.PI * 2);

ctx.fillStyle = "#f8f8f8";

ctx.fill();

ctx.lineWidth = 15;

ctx.strokeStyle = "#222";

ctx.stroke();

ctx.beginPath();

ctx.arc(0, 0, 24, 0, Math.PI * 2);

ctx.fillStyle = "#e91e63";

ctx.fill();

ctx.restore();

}

function spin() {

if (spinning) return;

spinning = true;

wheelContainer.classList.add("spinning");

spinBtn.textContent = "SPINNING...";

spinBtn.disabled = true;

resultDiv.innerHTML = "";

startTicking(); // Clicking now starts immediately

const pointerAngle = -90;

const arcAngle = 360 / names.length;

const middleAngle = winnerIndex * arcAngle + (arcAngle / 2);

let targetRotation = pointerAngle - middleAngle;

targetRotation = ((targetRotation % 360) + 360) % 360;

const fullSpins = 360 * 12;

let delta = targetRotation - (rotation % 360);

if (delta < 0) delta += 360;

const totalToAdd = fullSpins + delta;

const startRotation = rotation;

const duration = 6800;

let startTime = null;

function animate(timestamp) {

if (!startTime) startTime = timestamp;

let progress = Math.min((timestamp - startTime) / duration, 1);

let eased = 1 - Math.pow(1 - progress, 5);

eased = eased * (1 - 0.09 * (1 - progress));

rotation = startRotation + totalToAdd * eased;

drawWheel();

if (progress < 1) {

requestAnimationFrame(animate);

} else {

rotation = startRotation + totalToAdd;

drawWheel();

stopTicking();

spinning = false;

wheelContainer.classList.remove("spinning");

spinBtn.textContent = "SPIN AGAIN!";

spinBtn.disabled = false;

const winnerName = names[winnerIndex];

resultDiv.innerHTML = `

<div>

🎉 <strong>${winnerName}</strong> WINS!!! 🎉<br>

<span style="font-size:2.8rem;">a big bag of gas money 💰</span><br>

to get home<br>

Safe travels! 🛣️

</div>

playWinSound();

createConfetti();

}

requestAnimationFrame(animate);

}

function createConfetti() {

const emojis = ["💰", "🛣️", "🎉", "✨", "⛽", "💵"];

for (let i = 0; i < 240; i++) {

setTimeout(() => {

const c = document.createElement("div");

c.style.position = "fixed";

c.style.left = Math.random() * 100 + "vw";

c.style.top = "-40px";

c.style.fontSize = (22 + Math.random() * 28) + "px";

c.style.zIndex = "9999";

c.style.opacity = Math.random() * 0.7 + 0.65;

c.textContent = emojis[Math.floor(Math.random() * emojis.length)];

document.body.appendChild(c);

const duration = 3000 + Math.random() * 2500;

c.animate([

{ transform: `translateY(0) rotate(0deg)`, opacity: 1 },

{ transform: `translateY(${window.innerHeight + 200}px) rotate(${900 + Math.random() * 2200}deg)`, opacity: 0 }

], {

duration: duration,

easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"

});

setTimeout(() => c.remove(), duration + 200);

}, i * 2.2);

}

window.onload = function() {

resizeCanvas();

drawWheel();

spinBtn.addEventListener("click", spin);

window.addEventListener("resize", () => {

resizeCanvas();

drawWheel();

});

};

</script>

</body>

</html>