From 8b2bcc9af4c112901b39a577f72817f99fb48625 Mon Sep 17 00:00:00 2001
From: Meleeman01 <meleeman01@live.com>
Date: Fri, 29 Nov 2024 19:05:50 -0600
Subject: [PATCH] adds cool spinny wheel that doesn't stop for some reason lol

---
 arrow-down-bold.png | Bin 0 -> 2901 bytes
 index.html          | 148 +++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 arrow-down-bold.png

diff --git a/arrow-down-bold.png b/arrow-down-bold.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa57321fb28e7fd7a2e5a52d8c60bcb1495469ae
GIT binary patch
literal 2901
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index df16c94..f006e60 100644
--- a/index.html
+++ b/index.html
@@ -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>