adds cool spinny wheel that doesn't stop for some reason lol

This commit is contained in:
Meleeman01 2024-11-29 19:05:50 -06:00
parent 0f953121c8
commit 8b2bcc9af4
2 changed files with 147 additions and 1 deletions

BIN
arrow-down-bold.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -15,8 +15,134 @@
<button id="spin-wheel" style="display: none;">Spin Wheel</button>
<input id="guess-letter" placeholder="Guess a letter" style="display: none;">
<button id="guess-button" style="display: none;">Guess</button>
<div style="display:relative;">
<span style="position: absolute; top: 0; left:50%">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-down-bold</title><path d="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" /></svg>
</span>
<canvas id="wheelCanvas" width="500" height="500"></canvas>
</div>
<script>
//wheel==========================================================================
const wheel = [
'lose a turn', 800, 350, 450, 700, 300, 600, 5000,
300, 600, 300, 500, 800, 550, 400, 300, 900, 500, 'spin again',
900, 'Bankrupt', 600, 400, 300
];
const wheelRadiansData = [
{'0':{'lose a turn':4.6}},
{'1':{'800':9.2}}
];
const canvas = document.getElementById('wheelCanvas');
const ctx = canvas.getContext('2d');
const radius = canvas.width / 2;
let rotation = 0;
let spinning = false;
let spinSpeed = 0;
let img = new Image();
img.src = "arrow-down-bold.png";
img.onload = function() {
ctx.drawImage(img, 200, -50, 100,100);
}
// Draw the wheel
function drawWheel(drawResult = false) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(radius, radius);
ctx.rotate(rotation);
const anglePerSegment = (2 * Math.PI) / wheel.length;
wheel.forEach((value, i) => {
const startAngle = i * anglePerSegment;
const endAngle = startAngle + anglePerSegment;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, radius, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = i % 2 === 0 ? '#ffdd99' : '#ffeecc';
ctx.fill();
ctx.stroke();
// Add text
ctx.save();
ctx.translate(
Math.cos(startAngle + anglePerSegment / 2) * radius * 0.7,
Math.sin(startAngle + anglePerSegment / 2) * radius * 0.7
);
ctx.rotate(startAngle + anglePerSegment / 2 + Math.PI / 2 - 1.5);
ctx.textAlign = 'center';
ctx.fillStyle = '#000';
ctx.font = '12px Arial';
ctx.fillText(String(i+","+value), 0, 0);
ctx.restore();
});
ctx.restore();
ctx.drawImage(img, 200, -50, 100,100);
}
// Start spinning
function startSpin(targetIndex) {
console.log('targetIndex: ',targetIndex);
if (spinning) return;
spinning = true;
const totalSpins = Math.floor(Math.random() * 3) + 3; // 3-6 full spins
const anglePerSegment = (2 * Math.PI) / wheel.length;
const targetAngle = targetIndex * anglePerSegment;
console.log(anglePerSegment);
// Align the target segment to 12 o'clock
const topAlignmentOffset = Math.PI / 2; // Adjust to position the result at the top
const finalTargetAngle = totalSpins * 2 * Math.PI + targetAngle - topAlignmentOffset;
let currentRotation = rotation; // Start from the current rotation
spinSpeed = 0.25; // Initial speed
function animate() {
if (Math.abs(currentRotation - finalTargetAngle) < 0.01 && spinSpeed < 0.001) {
spinning = false;
rotation = finalTargetAngle % (2 * Math.PI); // Final alignment
drawWheel();
console.log(`Landed on: ${wheel[targetIndex]}`);
return;
}
currentRotation += spinSpeed;
spinSpeed *= 0.99; // Gradual slowdown
//console.log(spinSpeed);
// console.log(finalTargetAngle,rotation);
if (spinSpeed < .01){
spinSpeed = .01;
}
rotation = currentRotation ;
drawWheel();
requestAnimationFrame(animate);
}
animate();
}
// Simulate WebSocket server response
// function simulateServerResponse() {
// const targetIndex = Math.floor(Math.random() * wheel.length); // Random result
// startSpin(targetIndex);
// }
// Initial draw
drawWheel();
// Trigger spin after 2 seconds
//setTimeout(simulateServerResponse, 2000);
const socket = new WebSocket("ws://localhost:8080");
document.getElementById("create-room").onclick = () => {
@ -73,7 +199,25 @@
}
if (message.type === "spin_result") {
console.log('spin result recieved');
document.getElementById("status").innerText = `Spin result: ${message.spinResult} points (${message.player})`;
//find target index
let targetIndexArr = wheel.entries();
let filterResultsArr = [];
for(let x of targetIndexArr){
if (x[1] == message.spinResult) {
filterResultsArr.push(x);
}
}
console.log(filterResultsArr[0][0]);
//if there is multiple entries where the spin exists pick a random index.
if(filterResultsArr.length > 1) {
startSpin(filterResultsArr[Math.floor(Math.random() * filterResultsArr.length)][0]);
}
else{
startSpin(filterResultsArr[0]);
}
}
if (message.type === "guess_result") {
@ -90,5 +234,7 @@
}
};
</script>
</body>
</html>