Update koleso.html

koleso.html

@@ -78,13 +78,13 @@ body {
 <script>
 
 const sectors = [
-  { color: '#f82', label: 'Stack' },
-  { 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: 10 },
+  { color: '#0bf', label: '10', probability: 20 },
+  { color: '#fb0', label: '200', probability: 15 },
+  { color: '#0fb', label: '50', probability: 20 },
+  { 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
@@ -99,7 +99,6 @@ 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
-let hasSpun = localStorage.getItem('hasSpun') === 'true'
 
 const getIndex = () => Math.floor(tot - (ang / TAU) * tot) % tot
 
@@ -118,7 +117,7 @@ function drawSector(sector, i) {
   ctx.rotate(ang + arc / 2)
   ctx.textAlign = 'right'
   ctx.fillStyle = '#fff'
-  ctx.font = 'bold 30px sans-serif'
+  ctx.font = 'bold 21px sans-serif' // Уменьшенный размер шрифта на 30%
   ctx.fillText(sector.label, rad - 10, 10)
   //
   ctx.restore()
@@ -151,19 +150,39 @@ function engine() {
 }
 
 function init() {
+  if (!localStorage.getItem('hasSpun')) {
+    localStorage.setItem('hasSpun', 'false')
+  }
+
   sectors.forEach(drawSector)
   rotate() // Initial rotation
   engine() // Start engine
   spinEl.addEventListener('click', () => {
-    if (!angVel && !hasSpun) {
+    if (localStorage.getItem('hasSpun') === 'false') {
+      localStorage.setItem('hasSpun', 'true')
       angVel = rand(0.25, 0.45)
-    } else if (hasSpun) {
+      spinWheel()
+    } else {
       console.log('You have already spun the wheel.')
     }
   })
 }
 
-init()
+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
+    }
+  }
+}
+
+window.onload = init
 </script>