Adds Spin button to page
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
##Twitch Chat Randomizer
|
||||
|
||||
import os
|
||||
import asyncio
|
||||
import websockets
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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'));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user