Adds Spin button to page
This commit is contained in:
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.e6c13ad2.css",
|
||||
"main.js": "/static/js/main.f0e38a7d.js",
|
||||
"main.js": "/static/js/main.ab5d588b.js",
|
||||
"static/js/453.419a5d54.chunk.js": "/static/js/453.419a5d54.chunk.js",
|
||||
"index.html": "/index.html",
|
||||
"main.e6c13ad2.css.map": "/static/css/main.e6c13ad2.css.map",
|
||||
"main.f0e38a7d.js.map": "/static/js/main.f0e38a7d.js.map",
|
||||
"main.ab5d588b.js.map": "/static/js/main.ab5d588b.js.map",
|
||||
"453.419a5d54.chunk.js.map": "/static/js/453.419a5d54.chunk.js.map"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.e6c13ad2.css",
|
||||
"static/js/main.f0e38a7d.js"
|
||||
"static/js/main.ab5d588b.js"
|
||||
]
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.f0e38a7d.js"></script><link href="/static/css/main.e6c13ad2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.ab5d588b.js"></script><link href="/static/css/main.e6c13ad2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"static/css/main.e6c13ad2.css","mappings":"AAAA,KAKE,kCAAmC,CACnC,iCAAkC,CAJlC,mIAEY,CAHZ,QAMF,CAEA,KACE,uEAEF","sources":["index.css"],"sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n"],"names":[],"sourceRoot":""}
|
||||
{"version":3,"file":"static/css/main.e6c13ad2.css","mappings":"AAAA,KAKE,kCAAmC,CACnC,iCAAkC,CAJlC,mIAEY,CAHZ,QAMF,CAEA,KACE,uEAEF","sources":["index.css"],"sourcesContent":["body {\r\n margin: 0;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\r\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\r\n sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\r\n monospace;\r\n}\r\n"],"names":[],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
@@ -7,7 +7,7 @@ function App() {
|
||||
<header className="App-header">
|
||||
<h1>Twitch Chat Randomizer</h1>
|
||||
<WheelComponent />
|
||||
</header>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -46,12 +46,12 @@ const WheelComponent = () => {
|
||||
fetchMessages();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const startSpin = () => {
|
||||
if (data.length > 0) {
|
||||
setPrizeNumber(Math.floor(Math.random() * data.length));
|
||||
setMustSpin(true);
|
||||
}
|
||||
}, [data]);
|
||||
};
|
||||
|
||||
const handleSpinComplete = () => {
|
||||
setMustSpin(false);
|
||||
@@ -73,8 +73,13 @@ const WheelComponent = () => {
|
||||
mustStartSpinning={mustSpin}
|
||||
prizeNumber={prizeNumber}
|
||||
data={data}
|
||||
spinDuration={.5}
|
||||
disableInitialAnimation={true}
|
||||
onStopSpinning={handleSpinComplete}
|
||||
/>
|
||||
<button onClick={startSpin} disabled={mustSpin || data.length === 0}>
|
||||
Start Spin
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user