finalized automated build for web

tools/discord-commentator/package.json

@@ -3,6 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "discord-rpc": "^3.1.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "typescript": "^3.7.5"
+  },
+  "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -10,10 +17,7 @@
     "@types/node": "^12.12.54",
     "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.8",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
-    "typescript": "^3.7.5"
+    "@types/discord-rpc": "^3.0.4"
   },
   "scripts": {
     "start": "react-scripts start",

tools/discord-commentator/src/App.tsx

@@ -1,8 +1,25 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
-
-function App() {
+import RPC from 'discord-rpc';
+function App(): JSX.Element {
+  let client: any = null;
+  const clientId = '207646673902501888';
+  const scopes = ['rpc', 'rpc.api', 'messages.read'];
+  if (client === null) {
+    client = new RPC.Client({ transport: 'websocket' });
+    if (client) {
+      client.on('ready', () => {
+        if (client) {
+          console.log('Logged in as', client.application.name);
+          console.log('Authed for user', client.user.username);
+          client.selectVoiceChannel('740735736361517137');
+        }
+      });
+      // Log in to RPC with client id
+      client.login({ clientId, scopes });
+    }
+  }
   return (
     <div className="App">
       <header className="App-header">

tools/discord-commentator/src/index.tsx

@@ -5,9 +5,11 @@ import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  (
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  ),
   document.getElementById('root')
 );