Update koleso.html

koleso.html

@@ -85,104 +85,105 @@ const sectors = [
   { color: '#b0f', label: '100', probability: 15 },
   { color: '#f0b', label: '5', probability: 10 },
   { color: '#bf0', label: '500', probability: 10 }
-]
-
-const rand = (m, M) => Math.random() * (M - m) + m
-const tot = sectors.length
-const spinEl = document.querySelector('#spin')
-const ctx = document.querySelector('#wheel').getContext('2d')
-const dia = ctx.canvas.width
-const rad = dia / 2
-const PI = Math.PI
-const TAU = 2 * PI
-const arc = TAU / sectors.length
-const friction = 0.991 // 0.995=soft, 0.99=mid, 0.98=hard
-let angVel = 0 // Angular velocity
-let ang = 0 // Angle in radians
-
-const getIndex = () => Math.floor(tot - (ang / TAU) * tot) % tot
+];
+
+const rand = (m, M) => Math.random() * (M - m) + m;
+const tot = sectors.length;
+const spinEl = document.querySelector('#spin');
+const ctx = document.querySelector('#wheel').getContext('2d');
+const dia = ctx.canvas.width;
+const rad = dia / 2;
+const PI = Math.PI;
+const TAU = 2 * PI;
+const arc = TAU / sectors.length;
+const friction = 0.991; // 0.995=soft, 0.99=mid, 0.98=hard
+let angVel = 0; // Angular velocity
+let ang = 0; // Angle in radians
+
+const getIndex = () => Math.floor(tot - (ang / TAU) * tot) % tot;
 
 function drawSector(sector, i) {
-  const ang = arc * i
-  ctx.save()
+  const ang = arc * i;
+  ctx.save();
   // COLOR
-  ctx.beginPath()
-  ctx.fillStyle = sector.color
-  ctx.moveTo(rad, rad)
-  ctx.arc(rad, rad, rad, ang, ang + arc)
-  ctx.lineTo(rad, rad)
-  ctx.fill()
+  ctx.beginPath();
+  ctx.fillStyle = sector.color;
+  ctx.moveTo(rad, rad);
+  ctx.arc(rad, rad, rad, ang, ang + arc);
+  ctx.lineTo(rad, rad);
+  ctx.fill();
   // TEXT
-  ctx.translate(rad, rad)
-  ctx.rotate(ang + arc / 2)
-  ctx.textAlign = 'right'
-  ctx.fillStyle = '#fff'
-  ctx.font = 'bold 21px sans-serif' // Уменьшенный размер шрифта на 30%
-  ctx.fillText(sector.label, rad - 10, 10)
+  ctx.translate(rad, rad);
+  ctx.rotate(ang + arc / 2);
+  ctx.textAlign = 'right';
+  ctx.fillStyle = '#fff';
+  ctx.font = 'bold 21px sans-serif'; // Уменьшенный размер шрифта на 30%
+  ctx.fillText(sector.label, rad - 10, 10);
   //
-  ctx.restore()
+  ctx.restore();
 }
 
 function rotate() {
-  const sector = sectors[getIndex()]
-  ctx.canvas.style.transform = `rotate(${ang - PI / 2}rad)`
-  spinEl.textContent = !angVel ? 'SPIN' : sector.label
-  spinEl.style.background = sector.color
+  const sector = sectors[getIndex()];
+  ctx.canvas.style.transform = `rotate(${ang - PI / 2}rad)`;
+  spinEl.textContent = !angVel ? 'SPIN' : sector.label;
+  spinEl.style.background = sector.color;
 }
 
 function frame() {
-  if (!angVel) return
-  angVel *= friction // Decrement velocity by friction
+  if (!angVel) return;
+  angVel *= friction; // Decrement velocity by friction
   if (angVel < 0.002) {
-    angVel = 0 // Bring to stop
-    const sector = sectors[getIndex()]
-    localStorage.setItem('hasSpun', 'true')
-    console.log('Result:', sector.label)
+    angVel = 0; // Bring to stop
+    const sector = sectors[getIndex()];
+    localStorage.setItem('hasSpun', 'true');
+    console.log('Result:', sector.label); // Вывод значения в консоль
   }
-  ang += angVel // Update angle
-  ang %= TAU // Normalize angle
-  rotate()
+  ang += angVel; // Update angle
+  ang %= TAU; // Normalize angle
+  rotate();
 }
 
 function engine() {
-  frame()
-  requestAnimationFrame(engine)
+  frame();
+  requestAnimationFrame(engine);
 }
 
 function init() {
   if (!localStorage.getItem('hasSpun')) {
-    localStorage.setItem('hasSpun', 'false')
+    localStorage.setItem('hasSpun', 'false');
   }
 
-  sectors.forEach(drawSector)
-  rotate() // Initial rotation
-  engine() // Start engine
+  sectors.forEach(drawSector);
+  rotate(); // Initial rotation
+  engine(); // Start engine
   spinEl.addEventListener('click', () => {
     if (localStorage.getItem('hasSpun') === 'false') {
-      localStorage.setItem('hasSpun', 'true')
-      angVel = rand(0.25, 0.45)
-      spinWheel()
+      localStorage.setItem('hasSpun', 'true');
+      angVel = rand(0.25, 0.45);
+      spinWheel();
     } else {
-      console.log('You have already spun the wheel.')
+      console.log('You have already spun the wheel.');
     }
-  })
+  });
 }
 
 function spinWheel() {
-  const probabilities = sectors.map(sector => sector.probability)
-  const totalProbability = probabilities.reduce((a, b) => a + b, 0)
-  const random = Math.random() * totalProbability
-  let cumulativeProbability = 0
+  const probabilities = sectors.map(sector => sector.probability);
+  const totalProbability = probabilities.reduce((a, b) => a + b, 0);
+  const random = Math.random() * totalProbability;
+  let cumulativeProbability = 0;
   for (let i = 0; i < sectors.length; i++) {
-    cumulativeProbability += sectors[i].probability
+    cumulativeProbability += sectors[i].probability;
     if (random < cumulativeProbability) {
-      ang = (i + 0.5) * arc
-      break
+      ang = (i + 0.5) * arc;
+      break;
     }
   }
 }
 
-window.onload = init
+window.onload = init;
+
 </script>