Hugging Face's logo

Spaces:
Ninjasharp
/
spin
Sleeping

App Files Community
Ninjasharp commited on
Commit
caf0509
·
verified ·
1 Parent(s): c35e85f

Upload app.py

Browse files
Files changed (1) hide show
  1. app.py +178 -162
app.py CHANGED
@@ -1,167 +1,183 @@
1
  import streamlit as st
2
 
3
- # HTML code for spin wheel, based on your provided code
4
- html_code = """
5
- <!DOCTYPE html>
6
- <html lang="en">
7
- <head>
8
- <meta charset="UTF-8">
9
- <title>Spin the Wheel</title>
10
- <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
11
- <style>
12
- text {
13
- font-family: Helvetica, Arial, sans-serif;
14
- font-size: 19px;
15
- pointer-events: none;
16
- }
17
- #chart {
18
- position: absolute;
19
- width: 500px;
20
- height: 500px;
21
- top: 0;
22
- left: 0;
23
- }
24
- #question {
25
- position: absolute;
26
- width: 400px;
27
- height: 500px;
28
- top: 0;
29
- left: 520px;
30
- }
31
- #question h1 {
32
- font-size: 50px;
33
- font-weight: bold;
34
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
35
- position: absolute;
36
- padding: 0;
37
- margin: 0;
38
- top: 50%;
39
- transform: translate(0,-50%);
40
- }
41
- </style>
42
- </head>
43
- <body>
44
- <div id="chart"></div>
45
- <div id="question"><h1></h1></div>
46
-
47
- <script>
48
- var padding = {top:20, right:40, bottom:0, left:0},
49
- w = 360 - padding.left - padding.right,
50
- h = 360 - padding.top - padding.bottom,
51
- r = Math.min(w, h) / 2,
52
- rotation = 0,
53
- oldrotation = 0,
54
- picked = 100000,
55
- oldpick = [],
56
- color = d3.scale.category20();
57
-
58
- var data = [
59
- {"label": "prize", "value": 1, "question": "1 Tickets"},
60
- {"label": "prize", "value": 2, "question": "2 Tickets"},
61
- {"label": "prize", "value": 3, "question": "3 Tickets"},
62
- {"label": "prize", "value": 4, "question": "4 Tickets"},
63
- {"label": "prize", "value": 5, "question": "5 Tickets"},
64
- {"label": "prize", "value": 6, "question": "6 Tickets"},
65
- {"label": "prize", "value": 7, "question": "7 Tickets"},
66
- {"label": "prize", "value": 8, "question": "8 Tickets"},
67
- {"label": "prize", "value": 9, "question": "9 Tickets"},
68
- {"label": "prize", "value": 10, "question": "10 Tickets"}
69
- ];
70
-
71
- var svg = d3.select('#chart')
72
- .append("svg")
73
- .data([data])
74
- .attr("width", w + padding.left + padding.right)
75
- .attr("height", h + padding.top + padding.bottom);
76
-
77
- var container = svg.append("g")
78
- .attr("class", "chartholder")
79
- .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
80
-
81
- var vis = container.append("g");
82
-
83
- var pie = d3.layout.pie().sort(null).value(function(d){ return 1; });
84
-
85
- var arc = d3.svg.arc().outerRadius(r);
86
-
87
- var arcs = vis.selectAll("g.slice")
88
- .data(pie)
89
- .enter()
90
- .append("g")
91
- .attr("class", "slice");
92
-
93
- arcs.append("path")
94
- .attr("fill", function(d, i){ return color(i); })
95
- .attr("d", function(d){ return arc(d); });
96
-
97
- arcs.append("text").attr("transform", function(d){
98
- d.innerRadius = 0;
99
- d.outerRadius = r;
100
- d.angle = (d.startAngle + d.endAngle) / 2;
101
- return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 10) + ")";
102
- })
103
- .attr("text-anchor", "end")
104
- .text(function(d, i){ return data[i].label; });
105
-
106
- container.on("click", spin);
107
-
108
- function spin(d){
109
- container.on("click", null);
110
- if (oldpick.length == data.length){
 
 
 
111
  container.on("click", null);
112
- return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113
  }
114
- var ps = 360 / data.length,
115
- pieslice = Math.round(1440 / data.length),
116
- rng = Math.floor((Math.random() * 1440) + 360);
117
- rotation = (Math.round(rng / ps) * ps);
118
- picked = Math.round(data.length - (rotation % 360) / ps);
119
- picked = picked >= data.length ? (picked % data.length) : picked;
120
- if (oldpick.indexOf(picked) !== -1){
121
- d3.select(this).call(spin);
122
- return;
123
- } else {
124
- oldpick.push(picked);
 
 
 
 
 
 
 
 
 
 
 
 
125
  }
126
- rotation += 90 - Math.round(ps / 2);
127
- vis.transition()
128
- .duration(3000)
129
- .attrTween("transform", rotTween)
130
- .each("end", function(){
131
- d3.select(".slice:nth-child(" + (picked + 1) + ") path").attr("fill", "#777");
132
- d3.select("#question h1").text(data[picked].question);
133
- oldrotation = rotation;
134
- container.on("click", spin);
135
- });
136
- }
137
-
138
- svg.append("g")
139
- .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h / 2) + padding.top) + ")")
140
- .append("path")
141
- .attr("d", "M-" + (r * .15) + ",0L0," + (r * .05) + "L0,-" + (r * .05) + "Z")
142
- .style({"fill": "black"});
143
-
144
- container.append("circle")
145
- .attr("cx", 0)
146
- .attr("cy", 0)
147
- .attr("r", 60)
148
- .style({"fill": "white", "cursor": "pointer"});
149
-
150
- container.append("text")
151
- .attr("x", 0)
152
- .attr("y", 15)
153
- .attr("text-anchor", "middle")
154
- .text("SPIN")
155
- .style({"font-weight": "bold", "font-size": "40px"});
156
-
157
- function rotTween(to){
158
- var i = d3.interpolate(oldrotation % 360, rotation);
159
- return function(t){ return "rotate(" + i(t) + ")"; };
160
- }
161
- </script>
162
- </body>
163
- </html>
164
- """
165
-
166
- # Embed the HTML code into the Streamlit app using st.components.v1.html
167
- st.components.v1.html(html_code, height=600, width=800)
 
1
  import streamlit as st
2
 
3
+ def create_spin_wheel_app():
4
+ # Set page config
5
+ st.set_page_config(
6
+ page_title="Spin the Wheel!",
7
+ page_icon="🎯",
8
+ layout="wide"
9
+ )
10
+
11
+ # Add title and description
12
+ st.title("🎯 Spin the Wheel!")
13
+ st.write("Click the wheel to spin and win tickets!")
14
+
15
+ # HTML and JavaScript code for the spinning wheel
16
+ html_code = """
17
+ <!DOCTYPE html>
18
+ <html lang="en">
19
+ <head>
20
+ <meta charset="UTF-8">
21
+ <title>Spin the Wheel</title>
22
+ <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
23
+ <style>
24
+ text {
25
+ font-family: Helvetica, Arial, sans-serif;
26
+ font-size: 19px;
27
+ pointer-events: none;
28
+ }
29
+ #chart {
30
+ position: relative;
31
+ width: 500px;
32
+ height: 500px;
33
+ margin: 0 auto;
34
+ }
35
+ #question {
36
+ text-align: center;
37
+ margin-top: 20px;
38
+ }
39
+ #question h1 {
40
+ font-size: 32px;
41
+ font-weight: bold;
42
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
43
+ margin: 0;
44
+ padding: 10px;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body>
49
+ <div id="chart"></div>
50
+ <div id="question"><h1></h1></div>
51
+
52
+ <script>
53
+ var padding = {top:20, right:40, bottom:0, left:0},
54
+ w = 360 - padding.left - padding.right,
55
+ h = 360 - padding.top - padding.bottom,
56
+ r = Math.min(w, h) / 2,
57
+ rotation = 0,
58
+ oldrotation = 0,
59
+ picked = 100000,
60
+ oldpick = [],
61
+ color = d3.scale.category20();
62
+
63
+ var data = [
64
+ {"label": "🎟️", "value": 1, "question": "1 Ticket"},
65
+ {"label": "🎟️", "value": 2, "question": "2 Tickets"},
66
+ {"label": "🎟️", "value": 3, "question": "3 Tickets"},
67
+ {"label": "🎟️", "value": 4, "question": "4 Tickets"},
68
+ {"label": "🎟️", "value": 5, "question": "5 Tickets"},
69
+ {"label": "🎟️", "value": 6, "question": "6 Tickets"},
70
+ {"label": "🎟️", "value": 7, "question": "7 Tickets"},
71
+ {"label": "🎟️", "value": 8, "question": "8 Tickets"},
72
+ {"label": "🎟️", "value": 9, "question": "9 Tickets"},
73
+ {"label": "🎟️", "value": 10, "question": "10 Tickets"}
74
+ ];
75
+
76
+ var svg = d3.select('#chart')
77
+ .append("svg")
78
+ .data([data])
79
+ .attr("width", w + padding.left + padding.right)
80
+ .attr("height", h + padding.top + padding.bottom);
81
+
82
+ var container = svg.append("g")
83
+ .attr("class", "chartholder")
84
+ .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
85
+
86
+ var vis = container.append("g");
87
+
88
+ var pie = d3.layout.pie().sort(null).value(function(d){ return 1; });
89
+
90
+ var arc = d3.svg.arc().outerRadius(r);
91
+
92
+ var arcs = vis.selectAll("g.slice")
93
+ .data(pie)
94
+ .enter()
95
+ .append("g")
96
+ .attr("class", "slice");
97
+
98
+ arcs.append("path")
99
+ .attr("fill", function(d, i){ return color(i); })
100
+ .attr("d", function(d){ return arc(d); });
101
+
102
+ arcs.append("text").attr("transform", function(d){
103
+ d.innerRadius = 0;
104
+ d.outerRadius = r;
105
+ d.angle = (d.startAngle + d.endAngle) / 2;
106
+ return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 10) + ")";
107
+ })
108
+ .attr("text-anchor", "end")
109
+ .text(function(d, i){ return data[i].label; });
110
+
111
+ container.on("click", spin);
112
+
113
+ function spin(d){
114
  container.on("click", null);
115
+ if(oldpick.length == data.length){
116
+ oldpick = [];
117
+ }
118
+ var ps = 360/data.length,
119
+ pieslice = Math.round(1440/data.length),
120
+ rng = Math.floor((Math.random() * 1440) + 360);
121
+ rotation = (Math.round(rng / ps) * ps);
122
+ picked = Math.round(data.length - (rotation % 360)/ps);
123
+ picked = picked >= data.length ? (picked % data.length) : picked;
124
+ if(oldpick.indexOf(picked) !== -1){
125
+ d3.select(this).call(spin);
126
+ return;
127
+ } else {
128
+ oldpick.push(picked);
129
+ }
130
+ rotation += 90 - Math.round(ps/2);
131
+ vis.transition()
132
+ .duration(3000)
133
+ .attrTween("transform", rotTween)
134
+ .each("end", function(){
135
+ d3.select("#question h1")
136
+ .text(data[picked].question);
137
+ oldrotation = rotation;
138
+ container.on("click", spin);
139
+ });
140
  }
141
+
142
+ svg.append("g")
143
+ .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
144
+ .append("path")
145
+ .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
146
+ .style({"fill":"black"});
147
+
148
+ container.append("circle")
149
+ .attr("cx", 0)
150
+ .attr("cy", 0)
151
+ .attr("r", 60)
152
+ .style({"fill":"white","cursor":"pointer"});
153
+
154
+ container.append("text")
155
+ .attr("x", 0)
156
+ .attr("y", 15)
157
+ .attr("text-anchor", "middle")
158
+ .text("SPIN")
159
+ .style({"font-weight":"bold", "font-size":"30px"});
160
+
161
+ function rotTween(to) {
162
+ var i = d3.interpolate(oldrotation % 360, rotation);
163
+ return function(t) { return "rotate(" + i(t) + ")"; };
164
  }
165
+ </script>
166
+ </body>
167
+ </html>
168
+ """
169
+
170
+ # Embed the HTML code using st.components.v1.html
171
+ st.components.v1.html(html_code, height=600)
172
+
173
+ # Add instructions
174
+ with st.expander("How to Play"):
175
+ st.write("""
176
+ 1. Click the 'SPIN' button in the center of the wheel
177
+ 2. Wait for the wheel to stop spinning
178
+ 3. See how many tickets you've won!
179
+ 4. The wheel can be spun multiple times
180
+ """)
181
+
182
+ if __name__ == "__main__":
183
+ create_spin_wheel_app()