Merge pull request #1 from TateB/reactupgrade

React Upgrade v0.1.0

.env

@@ -0,0 +1,4 @@
+REACT_APP_TWITCH_KEY=if7i0plsoqlzr0ye3h1d7v07nfdnl2
+REACT_APP_NIGHTBOT_KEY=674b3425e20897b50a09ab2e8d672fb0
+REACT_APP_URL=https://localhost/
+REACT_APP_WEBSOCKET=ws://localhost:6503/

.gitignore

@@ -1,3 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.prettierrc
+
 node_modules
 db.json
-certs/
+certs/
+
+*.swp

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 2,
+    "semi": false
+}

README.md

@@ -1,34 +1,42 @@
 # Valorant Twitch Tournament Overlay/Manager
+
 ## For valorant map bans, a timer, score overlays, and more
 
-Valorant stream overlay, uses VOT/LPL colours, but can be customised to whatever you want.
+Valorant stream overlay, uses VALORANT colours by default, but can be customised to whatever you want.
+PLEASE NOTE: Some features will not work if the site is not served over HTTPS (twitch/nightbot/websockets),
+similarly, you need to have the websocket signalling api found [here](https://github.com/TateB/val-tournament-api) or else OBS features will not work.
 
 ## Features
 
 ### Timer
+
 Pretty simple timer, for throwing on stream when you are at a break or starting soon.
 
 ### Map Bans
-Shows map bans in a pretty cool manner, can also show autobans, and does all from a Bo1 to a Bo5. 
+
+Shows map bans in a pretty cool manner, can also show autobans, and does all from a Bo1 to a Bo5.
 All it takes is copy pasting your veto log into the settings for it to auto configure itself (in the chance that it doesn't, you can still fix things manually).
 
-### Score overlay 
+### Score overlay
+
 A score overlay for while you are in game, uses team names and scores.
-There are 4 options for a score overlay: 
-`charselect/obs`, for in character select screen, (no actual scores) just puts team names up the top of the screen.
-`scoreoverlay/obs`, for an actual in game score overlay.
-`scoreoverlay/obs_vs`, for a "Team A VS Team B" at a starting screen
-`scoreoverlay/obs_rs`, for a multi row score overlay if you're not in game, but in a break or something like that.
+There are 4 options for a score overlay:
+`obs/scores`, for an actual in game score overlay.
+`obs/scores_characterselect`, for in character select screen, (no actual scores) just puts team names up the top of the screen.
+`obs/scores_start`, for a "Team A VS Team B" at a starting screen
+`obs/scores_break`, for a multi row score overlay if you're not in game, but in a break or something like that.
 
 ### General Settings
+
 You have the ability to choose uppercase or lowercase characters (depending on stream aesthetic), as well as choosing the VOT/LPL colour scheme.
 Upcoming is a custom colour chooser, the forms are there but it's not yet implemented so don't try to use it.
 
 ### Keep in mind this project is a WIP, and not finished yet.
-You will probably encounter bugs. Lol.
 
+You will probably encounter bugs. Lol.
 
 ### Map Bans Screenshots
+
 Four bans (Bo1):
 ![Four Bans Example](example_images/4bans.png)
 
@@ -38,45 +46,40 @@ Two bans (Bo3):
 No bans (Bo5):
 ![No Bans Example](example_images/nobans.png)
 
+### OBS Viewports
+
+All OBS viewports can be found on the main settings page by hovering over the red/green dots next to the feature.
+They require a WebSocket server to connect to, without the websockets the OBS viewports **WILL NOT RUN**.
+By default, the viewport is `http://localhost:3000/obs/feature_name.html#roomID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx`, however in production, this is shortened to
+`https://localhost/obs/feature_name#roomID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx` by using netlify build.
+
+## Technicals
+
+The entire application is build on create-react-app, and in production [available here](https://val.tatebulic.com.au/) runs via netlify, as well as the websocket server hosted on a VM.
+
 This application requires NodeJS to run
 
 How to install:
+
 ```
 npm install
 ```
-to install all the dependencies.
+
+To install all the dependencies.
 
 How to run:
+
 ```
-node index
+npm start
 ```
-This command should run everything smoothly but be sure to check the logs in case there are errors.
-
-The default port is set to 3000, but this can be changed.
-http://localhost:3000 to visit the settings page.
-
-
-### OBS Viewports
-#### Map Bans
-`http://localhost:3000/mapbans/obs` 
-Resolution: 1500x720
 
-#### Score Overlays
-`http://localhost:3000/scoreoverlay/obs`
-Main Score Overlay, Resolution: 1920x1080
-
-`http://localhost:3000/scoreoverlay/obs_vs`
-VS Team Name Overlay, Resolution: Any
-
-`http://localhost:3000/scoreoverlay/obs_rs`
-Break/Not In-Game Score Overlay, Resolution: Any
-
-`http://localhost:3000/charselect/obs`
-Character Select Team Name Overlay, Resolution: 1920x1080
-
-#### Timer Overlay
-`http://localhost:3000/timer/obs`
-Resolution: Any
+This command should run everything smoothly but be sure to check the logs in case there are errors.
 
+How to build:
 
+```
+npm build
+```
 
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.