V3 updates (#13)

* Cleanup analytics

* Update v3

* Additional changes

* Fix the config finally

* Final touches

* Prettier and final changes

README.md

@@ -1,5 +1,15 @@
 # COH 2 Stats Twitch Extension
 
+Install at https://dashboard.twitch.tv/extensions/6x9q2nzzv9wewklo7gt7hz2vypdgg7 together with COH2 Desktop app https://coh2stats.com/desktop-app
+
+## Development
+
+1. Open in the Twitch Rig
+2. Run yarn host
+
+Be careful that views can be user specific - check twitch.extension.config.json
+and be sure the views are configured for your account.
+
 ### List of whitelisted domains:
 
 _This allowlist cannot be edited after submitting your Extension for review. In addition to this, if you intend to edit your allowlist, you must resubmit your Extension for review. Please make sure that your allowlist is accurate prior to submitting for review. For more information, please refer to our documentation._
@@ -8,25 +18,6 @@ _This allowlist cannot be edited after submitting your Extension for review. In
 https://firebaselogging-pa.googleapis.com, https://firestore.googleapis.com, https://firebase.googleapis.com
 ```
 
-## Submission Channel
-https://www.twitch.tv/johannesmerkt
-
-## Submission Text
-CHANGELOG 0.0.2:
-- changed extension images to use new logo
-- fixed incorrect input into settings window preventing the further use of settings window
-
-We are available for live review 11AM - 3PM PT
-
-We have created an app for the game Company of Heroes 2, that displays additional ranking information about players in the current played game. You can find out more on the app here: https://coh2stats.com/desktop-app
-
-We decided to create this overlay extension to make these stats available to viewers watching a streamer play a game of Company of Heroes 2. Viewers can expand the overlay to see information about players like ranking, faction, name ... as well as a prediction section which takes previous games that have been captured by us into account to create a prediction based on player ranking, team composition and map. The app will have to run in the background to update the stats on the twitch extension every time a new game starts.
-
-How it works: The streamer has to be using the COH2 Player Stats App and enable + configure the twitch extension settings inside the app.  Inside the app, the streamer will create a password protected API point on our server, where only his app will automatically upload the current stats from the game. The provided UUID for this API point can be copied from the app's settings and pasted into the twitch extension settings. With this UUID set, the extension can get request the stats from the API and display it to the viewers.
-
-We are using the libraries react, firebase, antd, @mantine/hooks and @ant-design/icons
-The source code for this build can be found here: https://github.com/cohstats/twitch-overlay-extension
-
 # DEFAULT INFO
 
 # Twitch Extension React Boilerplate

package.json

@@ -54,6 +54,7 @@
     "style-loader": "^0.21.0",
     "typescript": "^4.6.2",
     "webpack": "^4.41.3",
+    "npm-run-all": "^4.1.5",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0"
   },
@@ -65,9 +66,9 @@
     "firebase": "^9.6.8",
     "javascript-time-ago": "^2.3.13",
     "jsonwebtoken": "^8.5.1",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
     "react-country-flag": "^3.0.2",
-    "react-dom": "^16.12.0"
+    "react-dom": "^17.0.2"
   },
   "babel": {
     "presets": [

src/Config.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import ConfigPage from "./components/ConfigPage";
 import { firebaseInit /*, events*/ } from "./firebase";
-//import "./analytics2";
+import ConfigPage from "./components/ConfigPage/config-page";
 
 // We need to initialize our Firebase
 // This has to happen once on the main file of each render process

src/VideoOverlay.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import VideoOverlayPage from "./components/VideoOverlayPage";
-//import "./analytics2";
+import VideoOverlayPage from "./components/VideoOverlayPage/video-overlay-page";
+import { firebaseInit } from "./firebase";
+
+// We need to initialize our Firebase
+// This has to happen once on the main file of each render process
+firebaseInit();
 
 ReactDOM.render(<VideoOverlayPage />, document.getElementById("root"));