Adds Spin button to page

This commit is contained in:
2024-06-09 13:57:09 -04:00
parent 6485396900
commit 8ac072d84b
10 changed files with 39 additions and 12 deletions
+2
View File
@@ -1,3 +1,5 @@
##Twitch Chat Randomizer
import os
import asyncio
import websockets
+3 -3
View File
@@ -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
View File
@@ -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
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -7,7 +7,7 @@ function App() {
<header className="App-header">
<h1>Twitch Chat Randomizer</h1>
<WheelComponent />
</header>
</header>
</div>
);
}
+7 -2
View File
@@ -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>
);
};
+20
View File
@@ -2,6 +2,7 @@ const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const path = require('path');
const WebSocket = require('ws');
const app = express();
app.use(cors());
@@ -11,17 +12,36 @@ const port = process.env.PORT || 5000;
let messagesDict = {};
// Serve static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));
// API endpoint to get the messages dictionary
app.get('/api/selected', (req, res) => {
res.json(messagesDict);
});
// WebSocket server setup
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Client connected');
ws.on('close', () => console.log('Client disconnected'));
});
// Endpoint to set the messages dictionary
app.post('/api/selected', (req, res) => {
messagesDict = req.body;
res.status(200).send();
// Send updates to all connected WebSocket clients
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(messagesDict));
}
});
});
// Serve React app
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});