i am making a a prank game of spin to win for my friend’s upcoming bday
however, i seem to be running on a lot of problems for my code
i used python as backend and html css js as frontend and used flask to make sure the website runs the python code
however the problem is that neither the website nor the code is running as expected
it needs to be spin multiple times to get one result
it gives result of values whose probability i have set to 0
and it frequently gives 40 and 50 as answer even tho the values with highest probability are 10 and 20
the values are 10, 20, 30, 40, 50, 60, 70, 80, and 90 by the way
i expected that when i spin the wheel, it mainly gives me 10 20 or 30 as a result
but i need to spin the wheel multiple times in order to get one result
and that result is not the one which i want, i.e. the value whose probability ive set to 0 or extremely low
from flask import Flask, render_template, jsonify
import random
app = Flask(__name__, static_folder='static')
# Function to define probabilities for the spinning wheel
def define_probabilities():
values = [10, 20, 30, 40, 50, 60, 70, 80, 90]
probabilities = [0.25, 0.25, 0.1, 0.1, 0.1, 0, 0, 0, 0] # Adjusted probabilities
# Spin the wheel
result = random.choices(values, weights=probabilities)[0]
while result not in [10, 20, 30]: # Ensure only 10, 20, or 30 as result
result = random.choices(values, weights=probabilities)[0]
return result
# Route to spin the wheel
@app.route('/spin-wheel')
def spin():
result = define_probabilities()
return jsonify(result=result)
# Route to serve the HTML file
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
this is the python code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spin to Win</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* CSS styles for the spinning wheel */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
position: relative;
}
h1 {
color: #333;
margin-top: 0;
}
.wheel-container {
margin-top: 20px;
position: relative;
}
canvas {
display: block;
margin: 0 auto;
border: 2px solid black; /* Add a border for visualization */
}
#spin-button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#spin-button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>Spin to Win Wheel</h1>
<div class="wheel-container">
<canvas id="canvas" width="400" height="400"></canvas>
<button id="spin-button">Spin</button>
</div>
<div id="result"></div>
</div>
<script>
// JavaScript code for the spinning wheel
$(document).ready(function() {
var wheel = document.getElementById('canvas');
var ctx = wheel.getContext('2d');
var radius = wheel.width / 2;
var angle = Math.PI * 2 / 9; // 9 segments
var rotation = 0;
function drawWheel(segments) {
ctx.clearRect(0, 0, wheel.width, wheel.height);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.font = 'bold 14px Arial';
ctx.textBaseline = 'middle';
for (var i = 0; i < segments.length; i++) {
var startAngle = i * angle + rotation;
var endAngle = (i + 1) * angle + rotation;
ctx.fillStyle = (i % 2 === 0) ? '#ddd' : '#555';
ctx.beginPath();
ctx.moveTo(radius, radius);
ctx.arc(radius, radius, radius - 10, startAngle, endAngle);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.save();
ctx.fillStyle = 'black';
var text = segments[i];
ctx.translate(radius + Math.cos(startAngle + angle / 2) * (radius / 2), radius + Math.sin(startAngle + angle / 2) * (radius / 2));
ctx.rotate(startAngle + angle / 2 + Math.PI / 2);
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
}
function spinWheel() {
$('#spin-button').prop('disabled', true);
var totalRotation = Math.PI * 10 + Math.random() * Math.PI; // Spin at least 5 times
var start = Date.now();
var duration = 3000; // Spin for 3 seconds
function spinAnimation() {
var elapsed = Date.now() - start;
var progress = elapsed / duration;
rotation += (totalRotation / duration) * (1 - Math.exp(-10 * progress)); // Apply easing function
drawWheel(["10", "20", "30", "40", "50", "60", "70", "80", "90"]);
if (elapsed < duration) {
setTimeout(spinAnimation, 10);
} else {
$.ajax({
url: '/spin-wheel',
type: 'GET',
success: function(data) {
var result = data.result;
$('#result').text(result);
$('#spin-button').prop('disabled', true); // Disable spin button after spinning once
},
error: function() {
console.log('Error spinning the wheel');
$('#spin-button').prop('disabled', false);
}
});
}
}
spinAnimation();
}
$('#spin-button').click(function() {
spinWheel();
});
drawWheel(["10", "20", "30", "40", "50", "60", "70", "80", "90"]);
});
</script>
</body>
</html>
this is the website code