Update koleso.html

koleso.html

@@ -78,13 +78,13 @@ body {
 <script>
 
 const sectors = [
-  { color: '#f82', label: 'VIP' },
-  { color: '#0bf', label: '10' },
-  { color: '#fb0', label: '200' },
-  { color: '#0fb', label: '50' },
-  { color: '#b0f', label: '100' },
-  { color: '#f0b', label: '5' },
-  { color: '#bf0', label: '500' }
+  { color: '#f82', label: 'Stack', probability: 1 },
+  { color: '#0bf', label: '10', probability: 20 },
+  { color: '#fb0', label: '200', probability: 16 },
+  { color: '#0fb', label: '50', probability: 26 },
+  { color: '#b0f', label: '100', probability: 16 },
+  { color: '#f0b', label: '5', probability: 16 },
+  { color: '#bf0', label: '500', probability: 15 }
 ]
 
 const rand = (m, M) => Math.random() * (M - m) + m
@@ -127,7 +127,7 @@ function drawSector(sector, i) {
 function rotate() {
   const sector = sectors[getIndex()]
   ctx.canvas.style.transform = `rotate(${ang - PI / 2}rad)`
-  spinEl.textContent = !angVel ? 'ПУСК' : sector.label
+  spinEl.textContent = !angVel ? 'SPIN' : sector.label
   spinEl.style.background = sector.color
 }
 
@@ -157,12 +157,27 @@ function init() {
   spinEl.addEventListener('click', () => {
     if (!angVel && !hasSpun) {
       angVel = rand(0.25, 0.45)
+      spinWheel()
     } else if (hasSpun) {
       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
+  for (let i = 0; i < sectors.length; i++) {
+    cumulativeProbability += sectors[i].probability
+    if (random < cumulativeProbability) {
+      ang = (i + 0.5) * arc
+      break
+    }
+  }
+}
+
 init()
 </script>