From 3fbca58aaf0236cb35439c7c9ccd8608281878b6 Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Tue, 29 Sep 2020 15:37:13 +0200
Subject: [PATCH 01/11] Show dummy ProgressBar upon clicking Scramble

---
 .jshintrc                                      |  4 +---
 tnoodle-ui/src/main/components/EventPicker.jsx | 17 ++++++++++++++---
 tnoodle-ui/src/main/components/Main.jsx        | 17 +++++++----------
 tnoodle-ui/src/main/redux/ActionCreators.js    |  7 ++++++-
 tnoodle-ui/src/main/redux/Reducers.js          |  5 +++++
 tnoodle-ui/src/main/redux/Types.js             |  1 +
 6 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/.jshintrc b/.jshintrc
index ce7eed7d7..897804370 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -1,11 +1,9 @@
 {
     "browser": true,
-    "jquery": true,
-    "mootools": true,
-    "node": true,
     "undef": true,
     "sub": true,
     "newcap": false,
+    "esversion": 9,
     "indent": 4,
     "globals": {
         "alert": true,
diff --git a/tnoodle-ui/src/main/components/EventPicker.jsx b/tnoodle-ui/src/main/components/EventPicker.jsx
index ca53a08a3..2a9489826 100644
--- a/tnoodle-ui/src/main/components/EventPicker.jsx
+++ b/tnoodle-ui/src/main/components/EventPicker.jsx
@@ -9,11 +9,13 @@ import {
 import MbldDetail from "./MbldDetail";
 import FmcTranslationsDetail from "./FmcTranslationsDetail";
 import "./EventPicker.css";
+import { ProgressBar } from "react-bootstrap";
 
 const mapStateToProps = (store) => ({
     editingDisabled: store.editingDisabled,
     wcif: store.wcif,
     wcaFormats: store.wcaFormats,
+    generatingScrambles: store.generatingScrambles
 });
 
 const mapDispatchToProps = {
@@ -185,10 +187,18 @@ const EventPicker = connect(
             );
         };
 
-        render() {
-            let wcaEvent = this.props.wcif.events.find(
-                (event) => event.id === this.props.event.id
+        maybeShowProgressBar = (rounds) => {
+            if (!this.props.generatingScrambles || rounds.length === 0) {
+                return;
+            }
+
+            return (
+                <ProgressBar animated now={60}/>
             );
+        };
+
+        render() {
+            let wcaEvent = this.props.wcifEvent;
             let rounds = wcaEvent != null ? wcaEvent.rounds : [];
 
             return (
@@ -219,6 +229,7 @@ const EventPicker = connect(
                                 <h5 className="font-weight-bold">
                                     {this.props.event.name}
                                 </h5>
+                                {this.maybeShowProgressBar(rounds)}
                             </th>
                             <th className="lastTwoColumns" scope="col">
                                 <label>Rounds</label>
diff --git a/tnoodle-ui/src/main/components/Main.jsx b/tnoodle-ui/src/main/components/Main.jsx
index 257162750..39090c5f3 100644
--- a/tnoodle-ui/src/main/components/Main.jsx
+++ b/tnoodle-ui/src/main/components/Main.jsx
@@ -4,7 +4,7 @@ import EventPickerTable from "./EventPickerTable";
 import Interceptor from "./Interceptor";
 import VersionInfo from "./VersionInfo";
 import { fetchZip } from "../api/tnoodle.api";
-import { updateFileZipBlob } from "../redux/ActionCreators";
+import { updateFileZipBlob, updateGeneratingScrambles } from "../redux/ActionCreators";
 import { connect } from "react-redux";
 import { isUsingStaging } from "../api/wca.api";
 import "./Main.css";
@@ -17,10 +17,12 @@ const mapStateToProps = (store) => ({
     officialZip: store.officialZip,
     fileZipBlob: store.fileZipBlob,
     translations: store.translations,
+    generatingScrambles: store.generatingScrambles
 });
 
 const mapDispatchToProps = {
     updateFileZipBlob,
+    updateGeneratingScrambles
 };
 
 const Main = connect(
@@ -32,14 +34,13 @@ const Main = connect(
             super(props);
 
             this.state = {
-                generatingScrambles: false,
                 competitionNameFileZip: "",
             };
         }
         onSubmit = (evt) => {
             evt.preventDefault();
 
-            if (this.state.generatingScrambles) {
+            if (this.props.generatingScrambles) {
                 return;
             }
 
@@ -50,17 +51,13 @@ const Main = connect(
             }
         };
 
-        setGeneratingScrambles = (flag) => {
-            this.setState({ ...this.state, generatingScrambles: flag });
-        };
-
         generateZip = () => {
             // If user navigates during generation proccess, we still get the correct name
             this.setState({
                 ...this.state,
                 competitionNameFileZip: this.props.wcif.name,
-                generatingScrambles: true,
             });
+            this.props.updateGeneratingScrambles(true);
             fetchZip(
                 this.props.wcif,
                 this.props.mbld,
@@ -68,7 +65,7 @@ const Main = connect(
                 this.props.translations
             ).then((blob) => {
                 this.props.updateFileZipBlob(blob);
-                this.setGeneratingScrambles(false);
+                this.props.updateGeneratingScrambles(false);
             });
         };
 
@@ -100,7 +97,7 @@ const Main = connect(
         };
 
         scrambleButton = () => {
-            if (this.state.generatingScrambles) {
+            if (this.props.generatingScrambles) {
                 return (
                     <button
                         className="btn btn-primary button-transparent form-control"
diff --git a/tnoodle-ui/src/main/redux/ActionCreators.js b/tnoodle-ui/src/main/redux/ActionCreators.js
index 789964798..8ca720710 100644
--- a/tnoodle-ui/src/main/redux/ActionCreators.js
+++ b/tnoodle-ui/src/main/redux/ActionCreators.js
@@ -66,7 +66,12 @@ export const updateOfficialZipStatus = (flag) => ({
  */
 export const updateFileZipBlob = (fileZipBlob) => ({
     type: ActionTypes.UPDATE_FILE_ZIP_BLOB,
-    payload: { fileZipBlob: fileZipBlob },
+    payload: { fileZipBlob },
+});
+
+export const updateGeneratingScrambles = (generatingScrambles) => ({
+    type: ActionTypes.UPDATE_GENERATING_SCRAMBLES,
+    payload: { generatingScrambles },
 });
 
 /**
diff --git a/tnoodle-ui/src/main/redux/Reducers.js b/tnoodle-ui/src/main/redux/Reducers.js
index 9fbd7a07c..bafd9735f 100644
--- a/tnoodle-ui/src/main/redux/Reducers.js
+++ b/tnoodle-ui/src/main/redux/Reducers.js
@@ -11,6 +11,7 @@ const defaultStore = {
     editingDisabled: false,
     officialZip: true,
     fileZipBlob: null,
+    generatingScrambles: null,
     cachedObjects: {},
     translations: null,
     suggestedFmcTranslations: null,
@@ -122,6 +123,10 @@ export const Reducer = (store, action) => {
         return { ...store, fileZipBlob: action.payload.fileZipBlob };
     }
 
+    if (action.type === ActionTypes.UPDATE_GENERATING_SCRAMBLES) {
+        return { ...store, generatingScrambles: action.payload.generatingScrambles };
+    }
+
     if (action.type === ActionTypes.ADD_CACHED_OBJECT) {
         return {
             ...store,
diff --git a/tnoodle-ui/src/main/redux/Types.js b/tnoodle-ui/src/main/redux/Types.js
index d48f18349..b4b6b8939 100644
--- a/tnoodle-ui/src/main/redux/Types.js
+++ b/tnoodle-ui/src/main/redux/Types.js
@@ -12,6 +12,7 @@ export const ActionTypes = {
     UPDATE_EDITING_STATUS: "UPDATE_EDITING_STATUS",
     UPDATE_OFFICIAL_ZIP_STATUS: "UPDATE_OFFICIAL_ZIP_STATUS",
     UPDATE_FILE_ZIP_BLOB: "UPDATE_FILE_ZIP_BLOB",
+    UPDATE_GENERATING_SCRAMBLES: "UPDATE_GENERATING_SCRAMBLES",
     ADD_CACHED_OBJECT: "ADD_CACHED_OBJECT",
     UPDATE_TRANSLATIONS: "UPDATE_TRANSLATIONS",
     UPDATE_TRANSLATION: "UPDATE_TRANSLATION",

From 357f23714cf69228744b85da2a1dff1af971e103 Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Tue, 29 Sep 2020 15:53:29 +0200
Subject: [PATCH 02/11] Add scramble progress indicators to global store

---
 .../src/main/components/EventPicker.jsx       | 23 +++++++++++++++++--
 tnoodle-ui/src/main/components/Main.jsx       | 11 +++++++--
 tnoodle-ui/src/main/redux/ActionCreators.js   | 10 ++++++++
 tnoodle-ui/src/main/redux/Reducers.js         | 10 ++++++++
 tnoodle-ui/src/main/redux/Types.js            |  2 ++
 5 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/tnoodle-ui/src/main/components/EventPicker.jsx b/tnoodle-ui/src/main/components/EventPicker.jsx
index 2a9489826..78a3c28c8 100644
--- a/tnoodle-ui/src/main/components/EventPicker.jsx
+++ b/tnoodle-ui/src/main/components/EventPicker.jsx
@@ -15,7 +15,9 @@ const mapStateToProps = (store) => ({
     editingDisabled: store.editingDisabled,
     wcif: store.wcif,
     wcaFormats: store.wcaFormats,
-    generatingScrambles: store.generatingScrambles
+    generatingScrambles: store.generatingScrambles,
+    scramblingProgressTarget: store.scramblingProgressTarget,
+    scramblingProgressCurrent: store.scramblingProgressCurrent,
 });
 
 const mapDispatchToProps = {
@@ -192,8 +194,25 @@ const EventPicker = connect(
                 return;
             }
 
+            let eventId = this.props.event.id;
+
+            let current = this.props.scramblingProgressCurrent[eventId];
+            let target = this.props.scramblingProgressTarget[eventId];
+
+            if (current === undefined || target === undefined) {
+                return (
+                    <ProgressBar striped variant={"danger"} now={100}/>
+                );
+            }
+
+            let progress = (current / target) * 100
+
             return (
-                <ProgressBar animated now={60}/>
+                <ProgressBar animated variant={
+                    target === 1
+                        ? "success"
+                        : "info"
+                } now={progress}/>
             );
         };
 
diff --git a/tnoodle-ui/src/main/components/Main.jsx b/tnoodle-ui/src/main/components/Main.jsx
index 39090c5f3..0832ceb69 100644
--- a/tnoodle-ui/src/main/components/Main.jsx
+++ b/tnoodle-ui/src/main/components/Main.jsx
@@ -4,7 +4,12 @@ import EventPickerTable from "./EventPickerTable";
 import Interceptor from "./Interceptor";
 import VersionInfo from "./VersionInfo";
 import { fetchZip } from "../api/tnoodle.api";
-import { updateFileZipBlob, updateGeneratingScrambles } from "../redux/ActionCreators";
+import {
+    updateFileZipBlob,
+    updateGeneratingScrambles,
+    updateScramblingProgressTarget,
+    updateScramblingProgressCurrent
+} from "../redux/ActionCreators";
 import { connect } from "react-redux";
 import { isUsingStaging } from "../api/wca.api";
 import "./Main.css";
@@ -22,7 +27,9 @@ const mapStateToProps = (store) => ({
 
 const mapDispatchToProps = {
     updateFileZipBlob,
-    updateGeneratingScrambles
+    updateGeneratingScrambles,
+    updateScramblingProgressTarget,
+    updateScramblingProgressCurrent
 };
 
 const Main = connect(
diff --git a/tnoodle-ui/src/main/redux/ActionCreators.js b/tnoodle-ui/src/main/redux/ActionCreators.js
index 8ca720710..756014cec 100644
--- a/tnoodle-ui/src/main/redux/ActionCreators.js
+++ b/tnoodle-ui/src/main/redux/ActionCreators.js
@@ -74,6 +74,16 @@ export const updateGeneratingScrambles = (generatingScrambles) => ({
     payload: { generatingScrambles },
 });
 
+export const updateScramblingProgressTarget = (scramblingProgressTarget) => ({
+    type: ActionTypes.UPDATE_SCRAMBLING_PROGRESS_TARGET,
+    payload: { scramblingProgressTarget },
+});
+
+export const updateScramblingProgressCurrent = (scramblingProgressCurrent) => ({
+    type: ActionTypes.UPDATE_SCRAMBLING_PROGRESS_CURRENT,
+    payload: { scramblingProgressCurrent },
+});
+
 /**
  * @param {string} competitionId Since we cache information considering competitions, use id like WC2015.
  * @param {string} identifier WCIF or suggestedFmcLanguages
diff --git a/tnoodle-ui/src/main/redux/Reducers.js b/tnoodle-ui/src/main/redux/Reducers.js
index bafd9735f..e2548b308 100644
--- a/tnoodle-ui/src/main/redux/Reducers.js
+++ b/tnoodle-ui/src/main/redux/Reducers.js
@@ -12,6 +12,8 @@ const defaultStore = {
     officialZip: true,
     fileZipBlob: null,
     generatingScrambles: null,
+    scramblingProgressTarget: {},
+    scramblingProgressCurrent: {},
     cachedObjects: {},
     translations: null,
     suggestedFmcTranslations: null,
@@ -127,6 +129,14 @@ export const Reducer = (store, action) => {
         return { ...store, generatingScrambles: action.payload.generatingScrambles };
     }
 
+    if (action.type === ActionTypes.UPDATE_SCRAMBLING_PROGRESS_TARGET) {
+        return { ...store, scramblingProgressTarget: action.payload.scramblingProgressTarget };
+    }
+
+    if (action.type === ActionTypes.UPDATE_SCRAMBLING_PROGRESS_CURRENT) {
+        return { ...store, scramblingProgressCurrent: action.payload.scramblingProgressCurrent };
+    }
+
     if (action.type === ActionTypes.ADD_CACHED_OBJECT) {
         return {
             ...store,
diff --git a/tnoodle-ui/src/main/redux/Types.js b/tnoodle-ui/src/main/redux/Types.js
index b4b6b8939..5f1b7b353 100644
--- a/tnoodle-ui/src/main/redux/Types.js
+++ b/tnoodle-ui/src/main/redux/Types.js
@@ -13,6 +13,8 @@ export const ActionTypes = {
     UPDATE_OFFICIAL_ZIP_STATUS: "UPDATE_OFFICIAL_ZIP_STATUS",
     UPDATE_FILE_ZIP_BLOB: "UPDATE_FILE_ZIP_BLOB",
     UPDATE_GENERATING_SCRAMBLES: "UPDATE_GENERATING_SCRAMBLES",
+    UPDATE_SCRAMBLING_PROGRESS_TARGET: "UPDATE_SCRAMBLING_PROGRESS_TARGET",
+    UPDATE_SCRAMBLING_PROGRESS_CURRENT: "UPDATE_SCRAMBLING_PROGRESS_CURRENT",
     ADD_CACHED_OBJECT: "ADD_CACHED_OBJECT",
     UPDATE_TRANSLATIONS: "UPDATE_TRANSLATIONS",
     UPDATE_TRANSLATION: "UPDATE_TRANSLATION",

From bfcb15b8fc5e1783a6ebbf801f985a62541ef6ac Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Tue, 29 Sep 2020 17:08:34 +0200
Subject: [PATCH 03/11] Add websocket scramble fetching implementation

---
 tnoodle-ui/src/main/api/tnoodle.api.js      | 15 +++-
 tnoodle-ui/src/main/api/tnoodle.socket.js   | 84 +++++++++++++++++++++
 tnoodle-ui/src/main/components/Main.jsx     | 17 ++++-
 tnoodle-ui/src/main/redux/ActionCreators.js | 11 ++-
 tnoodle-ui/src/main/redux/Reducers.js       | 14 +++-
 tnoodle-ui/src/main/redux/Types.js          |  3 +-
 6 files changed, 133 insertions(+), 11 deletions(-)
 create mode 100644 tnoodle-ui/src/main/api/tnoodle.socket.js

diff --git a/tnoodle-ui/src/main/api/tnoodle.api.js b/tnoodle-ui/src/main/api/tnoodle.api.js
index 87cad7c4a..f4ef4fb26 100644
--- a/tnoodle-ui/src/main/api/tnoodle.api.js
+++ b/tnoodle-ui/src/main/api/tnoodle.api.js
@@ -9,7 +9,7 @@ let bestMbldAttemptEndpoint = "/frontend/mbld/best";
 let wcaEventsEndpoint = "/frontend/data/events";
 let formatsEndpoint = "/frontend/data/formats";
 
-export const fetchZip = (wcif, mbld, password, translations) => {
+export const fetchZip = (scrambleClient, wcif, mbld, password, translations) => {
     let payload = {
         wcif,
         multiCubes: { requestedScrambles: mbld },
@@ -20,11 +20,20 @@ export const fetchZip = (wcif, mbld, password, translations) => {
         payload.zipPassword = password;
     }
 
-    return postToTnoodle(zipEndpoint, payload)
-        .then((response) => response.blob())
+    let targetMarker = wcif.id;
+
+    return scrambleClient.loadScrambles(zipEndpoint, payload, targetMarker)
+        .then((result) => convertToBlob(result))
         .catch((error) => console.error(error));
 };
 
+const convertToBlob = async (result) => {
+    let {contentType, payload} = result;
+    let res = await fetch(`data:${contentType};base64,${payload}`);
+
+    return await res.blob();
+};
+
 export const fetchWcaEvents = () => {
     return fetch(baseUrl + wcaEventsEndpoint)
         .then((response) => response.json())
diff --git a/tnoodle-ui/src/main/api/tnoodle.socket.js b/tnoodle-ui/src/main/api/tnoodle.socket.js
new file mode 100644
index 000000000..0e75d9364
--- /dev/null
+++ b/tnoodle-ui/src/main/api/tnoodle.socket.js
@@ -0,0 +1,84 @@
+export class ScrambleClient {
+    constructor(onHandshake, onProgress) {
+        this.onHandshake = onHandshake;
+        this.onProgress = onProgress;
+
+        this.state = SCRAMBLING_STATES.IDLE;
+
+        this.contentType = null;
+        this.resultPayload = null;
+    }
+
+    loadScrambles(endpoint, payload, targetMarker) {
+        let that = this;
+
+        return new Promise(function (resolve, reject) {
+            let ws = new WebSocket(BASE_URL + endpoint);
+
+            ws.onopen = () => {
+                that.state = SCRAMBLING_STATES.INITIATE;
+                ws.send(JSON.stringify(payload));
+            };
+
+            ws.onerror = (err) => {
+                reject(err);
+            };
+
+            ws.onclose = (cls) => {
+                if (that.state === SCRAMBLING_STATES.DONE && cls.wasClean) {
+                    let resultObject = {
+                        contentType: that.contentType,
+                        payload: that.resultPayload
+                    };
+
+                    resolve(resultObject);
+                } else {
+                    reject(cls);
+                }
+            };
+
+            ws.onmessage = (msg) => {
+                if (that.state === SCRAMBLING_STATES.INITIATE) {
+                    that.state = SCRAMBLING_STATES.SCRAMBLING;
+
+                    let rawPayload = msg.data.toString();
+                    let targetPayload = JSON.parse(rawPayload);
+
+                    that.onHandshake(targetPayload);
+                }
+
+                if (that.state === SCRAMBLING_STATES.SCRAMBLING) {
+                    if (msg.data === targetMarker) {
+                        that.state = SCRAMBLING_STATES.COMPUTED_TYPE;
+                    }
+
+                    that.onProgress(msg.data);
+                }
+
+                if (that.state === SCRAMBLING_STATES.COMPUTED_TYPE) {
+                    that.state = SCRAMBLING_STATES.COMPUTED_DATA;
+
+                    that.contentType = msg.data;
+                }
+
+                if (that.state === SCRAMBLING_STATES.COMPUTED_DATA) {
+                    that.state = SCRAMBLING_STATES.DONE;
+
+                    that.resultPayload = msg.data;
+                }
+            };
+        });
+    }
+}
+
+//const BASE_URL = window.location.origin.replace(/^https?:\/\//,'ws://');
+const BASE_URL = "ws://localhost:2014/";
+
+const SCRAMBLING_STATES = {
+    IDLE: "IDLE",
+    INITIATE: "INITIATE",
+    SCRAMBLING: "SCRAMBLING",
+    COMPUTED_TYPE: "COMPUTED",
+    COMPUTED_DATA: "COMPUTED",
+    DONE: "DONE"
+};
diff --git a/tnoodle-ui/src/main/components/Main.jsx b/tnoodle-ui/src/main/components/Main.jsx
index 0832ceb69..2b88af263 100644
--- a/tnoodle-ui/src/main/components/Main.jsx
+++ b/tnoodle-ui/src/main/components/Main.jsx
@@ -4,11 +4,13 @@ import EventPickerTable from "./EventPickerTable";
 import Interceptor from "./Interceptor";
 import VersionInfo from "./VersionInfo";
 import { fetchZip } from "../api/tnoodle.api";
+import { ScrambleClient } from "../api/tnoodle.socket";
 import {
     updateFileZipBlob,
     updateGeneratingScrambles,
     updateScramblingProgressTarget,
-    updateScramblingProgressCurrent
+    updateScramblingProgressCurrentEvent,
+    resetScramblingProgressCurrent
 } from "../redux/ActionCreators";
 import { connect } from "react-redux";
 import { isUsingStaging } from "../api/wca.api";
@@ -29,7 +31,8 @@ const mapDispatchToProps = {
     updateFileZipBlob,
     updateGeneratingScrambles,
     updateScramblingProgressTarget,
-    updateScramblingProgressCurrent
+    updateScramblingProgressCurrentEvent,
+    resetScramblingProgressCurrent
 };
 
 const Main = connect(
@@ -58,6 +61,14 @@ const Main = connect(
             }
         };
 
+        onScrambleSocketHandshake = (target) => {
+            this.props.updateScramblingProgressTarget(target);
+        };
+
+        onScrambleSocketProgress = (eventId) => {
+            this.props.updateScramblingProgressCurrentEvent(eventId);
+        };
+
         generateZip = () => {
             // If user navigates during generation proccess, we still get the correct name
             this.setState({
@@ -65,7 +76,9 @@ const Main = connect(
                 competitionNameFileZip: this.props.wcif.name,
             });
             this.props.updateGeneratingScrambles(true);
+            let scrambleClient = new ScrambleClient(this.onScrambleSocketHandshake, this.onScrambleSocketProgress);
             fetchZip(
+                scrambleClient,
                 this.props.wcif,
                 this.props.mbld,
                 this.props.password,
diff --git a/tnoodle-ui/src/main/redux/ActionCreators.js b/tnoodle-ui/src/main/redux/ActionCreators.js
index 756014cec..f61630f53 100644
--- a/tnoodle-ui/src/main/redux/ActionCreators.js
+++ b/tnoodle-ui/src/main/redux/ActionCreators.js
@@ -79,9 +79,14 @@ export const updateScramblingProgressTarget = (scramblingProgressTarget) => ({
     payload: { scramblingProgressTarget },
 });
 
-export const updateScramblingProgressCurrent = (scramblingProgressCurrent) => ({
-    type: ActionTypes.UPDATE_SCRAMBLING_PROGRESS_CURRENT,
-    payload: { scramblingProgressCurrent },
+export const updateScramblingProgressCurrentEvent = (eventId) => ({
+    type: ActionTypes.UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT,
+    payload: { eventId },
+});
+
+export const resetScramblingProgressCurrent = () => ({
+    type: ActionTypes.RESET_SCRAMBLING_PROGRESS_CURRENT,
+    payload: {},
 });
 
 /**
diff --git a/tnoodle-ui/src/main/redux/Reducers.js b/tnoodle-ui/src/main/redux/Reducers.js
index e2548b308..5830942d8 100644
--- a/tnoodle-ui/src/main/redux/Reducers.js
+++ b/tnoodle-ui/src/main/redux/Reducers.js
@@ -133,8 +133,18 @@ export const Reducer = (store, action) => {
         return { ...store, scramblingProgressTarget: action.payload.scramblingProgressTarget };
     }
 
-    if (action.type === ActionTypes.UPDATE_SCRAMBLING_PROGRESS_CURRENT) {
-        return { ...store, scramblingProgressCurrent: action.payload.scramblingProgressCurrent };
+    if (action.type === ActionTypes.UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT) {
+        return {
+            ...store,
+            scramblingProgressCurrent: {
+                ...store.scramblingProgressCurrent,
+                [action.payload.eventId]: (store.scramblingProgressCurrent[action.payload.eventId] || 0) + 1
+            }
+        };
+    }
+
+    if (action.type === ActionTypes.RESET_SCRAMBLING_PROGRESS_CURRENT) {
+        return { ...store, scramblingProgressCurrent: {} };
     }
 
     if (action.type === ActionTypes.ADD_CACHED_OBJECT) {
diff --git a/tnoodle-ui/src/main/redux/Types.js b/tnoodle-ui/src/main/redux/Types.js
index 5f1b7b353..7fa393405 100644
--- a/tnoodle-ui/src/main/redux/Types.js
+++ b/tnoodle-ui/src/main/redux/Types.js
@@ -14,7 +14,8 @@ export const ActionTypes = {
     UPDATE_FILE_ZIP_BLOB: "UPDATE_FILE_ZIP_BLOB",
     UPDATE_GENERATING_SCRAMBLES: "UPDATE_GENERATING_SCRAMBLES",
     UPDATE_SCRAMBLING_PROGRESS_TARGET: "UPDATE_SCRAMBLING_PROGRESS_TARGET",
-    UPDATE_SCRAMBLING_PROGRESS_CURRENT: "UPDATE_SCRAMBLING_PROGRESS_CURRENT",
+    UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT: "UPDATE_SCRAMBLING_PROGRESS_CURRENT_EVENT",
+    RESET_SCRAMBLING_PROGRESS_CURRENT: "RESET_SCRAMBLING_PROGRESS_CURRENT",
     ADD_CACHED_OBJECT: "ADD_CACHED_OBJECT",
     UPDATE_TRANSLATIONS: "UPDATE_TRANSLATIONS",
     UPDATE_TRANSLATION: "UPDATE_TRANSLATION",

From 047d6d7af7798ae131087a22adac34229c859247 Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Tue, 29 Sep 2020 17:32:53 +0200
Subject: [PATCH 04/11] Fix progress bar quirks

---
 tnoodle-ui/src/main/api/tnoodle.socket.js     | 20 ++++++---------
 .../src/main/components/EventPicker.jsx       | 25 +++++++++++++++----
 tnoodle-ui/src/main/components/Main.jsx       | 11 ++------
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/tnoodle-ui/src/main/api/tnoodle.socket.js b/tnoodle-ui/src/main/api/tnoodle.socket.js
index 0e75d9364..77ef24d84 100644
--- a/tnoodle-ui/src/main/api/tnoodle.socket.js
+++ b/tnoodle-ui/src/main/api/tnoodle.socket.js
@@ -45,23 +45,17 @@ export class ScrambleClient {
                     let targetPayload = JSON.parse(rawPayload);
 
                     that.onHandshake(targetPayload);
-                }
-
-                if (that.state === SCRAMBLING_STATES.SCRAMBLING) {
+                } else if (that.state === SCRAMBLING_STATES.SCRAMBLING) {
                     if (msg.data === targetMarker) {
                         that.state = SCRAMBLING_STATES.COMPUTED_TYPE;
+                    } else {
+                        that.onProgress(msg.data);
                     }
-
-                    that.onProgress(msg.data);
-                }
-
-                if (that.state === SCRAMBLING_STATES.COMPUTED_TYPE) {
+                } else if (that.state === SCRAMBLING_STATES.COMPUTED_TYPE) {
                     that.state = SCRAMBLING_STATES.COMPUTED_DATA;
 
                     that.contentType = msg.data;
-                }
-
-                if (that.state === SCRAMBLING_STATES.COMPUTED_DATA) {
+                } else if (that.state === SCRAMBLING_STATES.COMPUTED_DATA) {
                     that.state = SCRAMBLING_STATES.DONE;
 
                     that.resultPayload = msg.data;
@@ -78,7 +72,7 @@ const SCRAMBLING_STATES = {
     IDLE: "IDLE",
     INITIATE: "INITIATE",
     SCRAMBLING: "SCRAMBLING",
-    COMPUTED_TYPE: "COMPUTED",
-    COMPUTED_DATA: "COMPUTED",
+    COMPUTED_TYPE: "COMPUTED_TYPE",
+    COMPUTED_DATA: "COMPUTED_DATA",
     DONE: "DONE"
 };
diff --git a/tnoodle-ui/src/main/components/EventPicker.jsx b/tnoodle-ui/src/main/components/EventPicker.jsx
index 78a3c28c8..d40a9db9a 100644
--- a/tnoodle-ui/src/main/components/EventPicker.jsx
+++ b/tnoodle-ui/src/main/components/EventPicker.jsx
@@ -18,6 +18,7 @@ const mapStateToProps = (store) => ({
     generatingScrambles: store.generatingScrambles,
     scramblingProgressTarget: store.scramblingProgressTarget,
     scramblingProgressCurrent: store.scramblingProgressCurrent,
+    fileZipBlob: store.fileZipBlob
 });
 
 const mapDispatchToProps = {
@@ -190,18 +191,32 @@ const EventPicker = connect(
         };
 
         maybeShowProgressBar = (rounds) => {
-            if (!this.props.generatingScrambles || rounds.length === 0) {
+            if (rounds.length === 0) {
+                return;
+            }
+
+            if (this.props.fileZipBlob != null) {
+                return (
+                    <ProgressBar striped variant={"success"} now={100}/>
+                );
+            }
+
+            if (!this.props.generatingScrambles) {
                 return;
             }
 
             let eventId = this.props.event.id;
 
-            let current = this.props.scramblingProgressCurrent[eventId];
+            let current = this.props.scramblingProgressCurrent[eventId] || 0;
             let target = this.props.scramblingProgressTarget[eventId];
 
-            if (current === undefined || target === undefined) {
+            if (target === undefined) {
+                return;
+            }
+
+            if (current === 0) {
                 return (
-                    <ProgressBar striped variant={"danger"} now={100}/>
+                    <ProgressBar animated now={1}/>
                 );
             }
 
@@ -209,7 +224,7 @@ const EventPicker = connect(
 
             return (
                 <ProgressBar animated variant={
-                    target === 1
+                    progress === 100
                         ? "success"
                         : "info"
                 } now={progress}/>
diff --git a/tnoodle-ui/src/main/components/Main.jsx b/tnoodle-ui/src/main/components/Main.jsx
index 2b88af263..027af6561 100644
--- a/tnoodle-ui/src/main/components/Main.jsx
+++ b/tnoodle-ui/src/main/components/Main.jsx
@@ -61,14 +61,6 @@ const Main = connect(
             }
         };
 
-        onScrambleSocketHandshake = (target) => {
-            this.props.updateScramblingProgressTarget(target);
-        };
-
-        onScrambleSocketProgress = (eventId) => {
-            this.props.updateScramblingProgressCurrentEvent(eventId);
-        };
-
         generateZip = () => {
             // If user navigates during generation proccess, we still get the correct name
             this.setState({
@@ -76,7 +68,7 @@ const Main = connect(
                 competitionNameFileZip: this.props.wcif.name,
             });
             this.props.updateGeneratingScrambles(true);
-            let scrambleClient = new ScrambleClient(this.onScrambleSocketHandshake, this.onScrambleSocketProgress);
+            let scrambleClient = new ScrambleClient(this.props.updateScramblingProgressTarget, this.props.updateScramblingProgressCurrentEvent);
             fetchZip(
                 scrambleClient,
                 this.props.wcif,
@@ -86,6 +78,7 @@ const Main = connect(
             ).then((blob) => {
                 this.props.updateFileZipBlob(blob);
                 this.props.updateGeneratingScrambles(false);
+                this.props.resetScramblingProgressCurrent();
             });
         };
 

From e4ada4b8d7a2409b09fb935b883329d48103b510 Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Tue, 29 Sep 2020 18:22:16 +0200
Subject: [PATCH 05/11] Progress bar convenience features

---
 tnoodle-ui/src/main/api/tnoodle.socket.js     |  3 +-
 .../src/main/components/EventPicker.jsx       | 35 +++++++------------
 tnoodle-ui/src/main/components/Main.jsx       |  2 +-
 3 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/tnoodle-ui/src/main/api/tnoodle.socket.js b/tnoodle-ui/src/main/api/tnoodle.socket.js
index 77ef24d84..29a777e20 100644
--- a/tnoodle-ui/src/main/api/tnoodle.socket.js
+++ b/tnoodle-ui/src/main/api/tnoodle.socket.js
@@ -65,8 +65,7 @@ export class ScrambleClient {
     }
 }
 
-//const BASE_URL = window.location.origin.replace(/^https?:\/\//,'ws://');
-const BASE_URL = "ws://localhost:2014/";
+const BASE_URL = window.location.origin.replace(/^https?:\/\//,'ws://');
 
 const SCRAMBLING_STATES = {
     IDLE: "IDLE",
diff --git a/tnoodle-ui/src/main/components/EventPicker.jsx b/tnoodle-ui/src/main/components/EventPicker.jsx
index d40a9db9a..025b6ae5d 100644
--- a/tnoodle-ui/src/main/components/EventPicker.jsx
+++ b/tnoodle-ui/src/main/components/EventPicker.jsx
@@ -191,43 +191,32 @@ const EventPicker = connect(
         };
 
         maybeShowProgressBar = (rounds) => {
-            if (rounds.length === 0) {
-                return;
-            }
-
-            if (this.props.fileZipBlob != null) {
-                return (
-                    <ProgressBar striped variant={"success"} now={100}/>
-                );
-            }
-
-            if (!this.props.generatingScrambles) {
-                return;
-            }
-
             let eventId = this.props.event.id;
 
             let current = this.props.scramblingProgressCurrent[eventId] || 0;
             let target = this.props.scramblingProgressTarget[eventId];
 
-            if (target === undefined) {
+            if (rounds.length === 0 || !this.props.generatingScrambles || target === undefined) {
                 return;
             }
 
-            if (current === 0) {
-                return (
-                    <ProgressBar animated now={1}/>
-                );
-            }
-
             let progress = (current / target) * 100
+            let miniThreshold = 2;
+
+            if (progress === 0) {
+                progress = miniThreshold;
+            }
 
             return (
-                <ProgressBar animated variant={
+                <ProgressBar animated fade variant={
                     progress === 100
                         ? "success"
                         : "info"
-                } now={progress}/>
+                } now={progress} label={
+                    progress === 100 || progress < miniThreshold
+                        ? ""
+                        : `${current} / ${target}`
+                }/>
             );
         };
 
diff --git a/tnoodle-ui/src/main/components/Main.jsx b/tnoodle-ui/src/main/components/Main.jsx
index 027af6561..c01b0e772 100644
--- a/tnoodle-ui/src/main/components/Main.jsx
+++ b/tnoodle-ui/src/main/components/Main.jsx
@@ -67,7 +67,6 @@ const Main = connect(
                 ...this.state,
                 competitionNameFileZip: this.props.wcif.name,
             });
-            this.props.updateGeneratingScrambles(true);
             let scrambleClient = new ScrambleClient(this.props.updateScramblingProgressTarget, this.props.updateScramblingProgressCurrentEvent);
             fetchZip(
                 scrambleClient,
@@ -80,6 +79,7 @@ const Main = connect(
                 this.props.updateGeneratingScrambles(false);
                 this.props.resetScramblingProgressCurrent();
             });
+            this.props.updateGeneratingScrambles(true);
         };
 
         downloadZip = () => {

From db0254c5809136fa073d6153dc6cf4601f82785c Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Tue, 29 Sep 2020 19:15:13 +0200
Subject: [PATCH 06/11] Remove frontend proxying because we have CORS now

---
 tnoodle-ui/package.json                   |  1 -
 tnoodle-ui/src/main/api/tnoodle.api.js    | 20 ++++++++++----------
 tnoodle-ui/src/main/api/tnoodle.socket.js |  7 ++++++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/tnoodle-ui/package.json b/tnoodle-ui/package.json
index 51047ba4c..5448f56d3 100644
--- a/tnoodle-ui/package.json
+++ b/tnoodle-ui/package.json
@@ -3,7 +3,6 @@
     "version": "0.1.0",
     "private": true,
     "homepage": "http://localhost:2014/scramble",
-    "proxy": "http://localhost:2014",
     "dependencies": {
         "bootstrap": "^4.4.1",
         "fetch-intercept": "^2.3.1",
diff --git a/tnoodle-ui/src/main/api/tnoodle.api.js b/tnoodle-ui/src/main/api/tnoodle.api.js
index f4ef4fb26..858171d10 100644
--- a/tnoodle-ui/src/main/api/tnoodle.api.js
+++ b/tnoodle-ui/src/main/api/tnoodle.api.js
@@ -1,5 +1,7 @@
-let baseUrl = window.location.origin;
-// let baseUrl = "http://localhost:2014";
+let backendUrl = new URL(window.location.origin);
+backendUrl.port = 2014;
+
+export const tNoodleBackend = backendUrl.toString();
 
 let zipEndpoint = "/wcif/zip";
 let versionEndpoint = "/version";
@@ -20,9 +22,7 @@ export const fetchZip = (scrambleClient, wcif, mbld, password, translations) =>
         payload.zipPassword = password;
     }
 
-    let targetMarker = wcif.id;
-
-    return scrambleClient.loadScrambles(zipEndpoint, payload, targetMarker)
+    return scrambleClient.loadScrambles(zipEndpoint, payload, wcif.id)
         .then((result) => convertToBlob(result))
         .catch((error) => console.error(error));
 };
@@ -35,13 +35,13 @@ const convertToBlob = async (result) => {
 };
 
 export const fetchWcaEvents = () => {
-    return fetch(baseUrl + wcaEventsEndpoint)
+    return fetch(tNoodleBackend + wcaEventsEndpoint)
         .then((response) => response.json())
         .catch((error) => console.error(error));
 };
 
 export const fetchFormats = () => {
-    return fetch(baseUrl + formatsEndpoint)
+    return fetch(tNoodleBackend + formatsEndpoint)
         .then((response) => response.json())
         .catch((error) => console.error(error));
 };
@@ -59,13 +59,13 @@ export const fetchBestMbldAttempt = (wcif) => {
 };
 
 export const fetchRunningVersion = () => {
-    return fetch(baseUrl + versionEndpoint)
+    return fetch(tNoodleBackend + versionEndpoint)
         .then((response) => response.json())
         .catch((error) => console.error(error));
 };
 
 export const fetchAvailableFmcTranslations = () => {
-    return fetch(baseUrl + fmcTranslationsEndpoint)
+    return fetch(tNoodleBackend + fmcTranslationsEndpoint)
         .then((response) => response.json())
         .catch((error) => console.error(error));
 };
@@ -86,7 +86,7 @@ const fmcTranslationsHelper = (translations) => {
 };
 
 const postToTnoodle = (endpoint, payload) =>
-    fetch(baseUrl + endpoint, {
+    fetch(tNoodleBackend + endpoint, {
         method: "POST",
         headers: {
             Accept: "application/json",
diff --git a/tnoodle-ui/src/main/api/tnoodle.socket.js b/tnoodle-ui/src/main/api/tnoodle.socket.js
index 29a777e20..4fa7b124d 100644
--- a/tnoodle-ui/src/main/api/tnoodle.socket.js
+++ b/tnoodle-ui/src/main/api/tnoodle.socket.js
@@ -1,3 +1,5 @@
+import { tNoodleBackend } from "./tnoodle.api";
+
 export class ScrambleClient {
     constructor(onHandshake, onProgress) {
         this.onHandshake = onHandshake;
@@ -65,7 +67,10 @@ export class ScrambleClient {
     }
 }
 
-const BASE_URL = window.location.origin.replace(/^https?:\/\//,'ws://');
+let wsTNoodleBackend = new URL(tNoodleBackend);
+wsTNoodleBackend.protocol = "ws:";
+
+const BASE_URL = wsTNoodleBackend.toString();
 
 const SCRAMBLING_STATES = {
     IDLE: "IDLE",

From 14391abff23d0a7fd118304b20b0c81c6b04b6af Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Thu, 1 Oct 2020 10:55:43 +0200
Subject: [PATCH 07/11] Remove cached this-that scopes

---
 tnoodle-ui/src/main/api/tnoodle.socket.js     | 36 +++++++++----------
 .../src/main/components/Interceptor.jsx       | 13 ++++---
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/tnoodle-ui/src/main/api/tnoodle.socket.js b/tnoodle-ui/src/main/api/tnoodle.socket.js
index 4fa7b124d..da7fae0a1 100644
--- a/tnoodle-ui/src/main/api/tnoodle.socket.js
+++ b/tnoodle-ui/src/main/api/tnoodle.socket.js
@@ -12,13 +12,11 @@ export class ScrambleClient {
     }
 
     loadScrambles(endpoint, payload, targetMarker) {
-        let that = this;
-
-        return new Promise(function (resolve, reject) {
+        return new Promise((resolve, reject) => {
             let ws = new WebSocket(BASE_URL + endpoint);
 
             ws.onopen = () => {
-                that.state = SCRAMBLING_STATES.INITIATE;
+                this.state = SCRAMBLING_STATES.INITIATE;
                 ws.send(JSON.stringify(payload));
             };
 
@@ -27,10 +25,10 @@ export class ScrambleClient {
             };
 
             ws.onclose = (cls) => {
-                if (that.state === SCRAMBLING_STATES.DONE && cls.wasClean) {
+                if (this.state === SCRAMBLING_STATES.DONE && cls.wasClean) {
                     let resultObject = {
-                        contentType: that.contentType,
-                        payload: that.resultPayload
+                        contentType: this.contentType,
+                        payload: this.resultPayload
                     };
 
                     resolve(resultObject);
@@ -40,27 +38,27 @@ export class ScrambleClient {
             };
 
             ws.onmessage = (msg) => {
-                if (that.state === SCRAMBLING_STATES.INITIATE) {
-                    that.state = SCRAMBLING_STATES.SCRAMBLING;
+                if (this.state === SCRAMBLING_STATES.INITIATE) {
+                    this.state = SCRAMBLING_STATES.SCRAMBLING;
 
                     let rawPayload = msg.data.toString();
                     let targetPayload = JSON.parse(rawPayload);
 
-                    that.onHandshake(targetPayload);
-                } else if (that.state === SCRAMBLING_STATES.SCRAMBLING) {
+                    this.onHandshake(targetPayload);
+                } else if (this.state === SCRAMBLING_STATES.SCRAMBLING) {
                     if (msg.data === targetMarker) {
-                        that.state = SCRAMBLING_STATES.COMPUTED_TYPE;
+                        this.state = SCRAMBLING_STATES.COMPUTED_TYPE;
                     } else {
-                        that.onProgress(msg.data);
+                        this.onProgress(msg.data);
                     }
-                } else if (that.state === SCRAMBLING_STATES.COMPUTED_TYPE) {
-                    that.state = SCRAMBLING_STATES.COMPUTED_DATA;
+                } else if (this.state === SCRAMBLING_STATES.COMPUTED_TYPE) {
+                    this.state = SCRAMBLING_STATES.COMPUTED_DATA;
 
-                    that.contentType = msg.data;
-                } else if (that.state === SCRAMBLING_STATES.COMPUTED_DATA) {
-                    that.state = SCRAMBLING_STATES.DONE;
+                    this.contentType = msg.data;
+                } else if (this.state === SCRAMBLING_STATES.COMPUTED_DATA) {
+                    this.state = SCRAMBLING_STATES.DONE;
 
-                    that.resultPayload = msg.data;
+                    this.resultPayload = msg.data;
                 }
             };
         });
diff --git a/tnoodle-ui/src/main/components/Interceptor.jsx b/tnoodle-ui/src/main/components/Interceptor.jsx
index 2504696c5..b4ec8ed0f 100644
--- a/tnoodle-ui/src/main/components/Interceptor.jsx
+++ b/tnoodle-ui/src/main/components/Interceptor.jsx
@@ -8,24 +8,23 @@ class Interceptor extends Component {
     constructor() {
         super();
 
-        const that = this;
-
         // http interceptor
         fetchIntercept.register({
-            request: function (...request) {
+            request: (...request) => {
                 // TODO set loading
                 return request;
             },
 
-            response: function (response) {
+            response: (response) => {
                 if (!response.ok) {
-                    that.handleHttpError(response);
+                    this.handleHttpError(response);
                 }
+
                 return response;
             },
 
-            responseError: function (error) {
-                that.handleHttpError(error);
+            responseError: (error) => {
+                this.handleHttpError(error);
                 return Promise.reject(error);
             },
         });

From c966ecd0039f7bdead7c5859d73e230e0caeb806 Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Thu, 1 Oct 2020 12:13:21 +0200
Subject: [PATCH 08/11] Add proper development proxy

---
 tnoodle-ui/package.json                   |  3 ++-
 tnoodle-ui/src/main/api/tnoodle.api.js    |  4 +--
 tnoodle-ui/src/main/api/tnoodle.socket.js |  2 +-
 tnoodle-ui/src/setupProxy.js              | 14 ++++++++++
 tnoodle-ui/yarn.lock                      | 32 ++++++++++++++++++++---
 5 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 tnoodle-ui/src/setupProxy.js

diff --git a/tnoodle-ui/package.json b/tnoodle-ui/package.json
index 5448f56d3..a159ea878 100644
--- a/tnoodle-ui/package.json
+++ b/tnoodle-ui/package.json
@@ -42,7 +42,8 @@
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.0.4",
         "@testing-library/user-event": "^12.1.4",
-        "coveralls": "^3.1.0"
+        "coveralls": "^3.1.0",
+        "http-proxy-middleware": "^1.0.5"
     },
     "jest": {
         "collectCoverageFrom": [
diff --git a/tnoodle-ui/src/main/api/tnoodle.api.js b/tnoodle-ui/src/main/api/tnoodle.api.js
index 858171d10..79d90918a 100644
--- a/tnoodle-ui/src/main/api/tnoodle.api.js
+++ b/tnoodle-ui/src/main/api/tnoodle.api.js
@@ -1,7 +1,5 @@
 let backendUrl = new URL(window.location.origin);
-backendUrl.port = 2014;
-
-export const tNoodleBackend = backendUrl.toString();
+export const tNoodleBackend = backendUrl.toString().replace(/\/$/g, '');
 
 let zipEndpoint = "/wcif/zip";
 let versionEndpoint = "/version";
diff --git a/tnoodle-ui/src/main/api/tnoodle.socket.js b/tnoodle-ui/src/main/api/tnoodle.socket.js
index da7fae0a1..303eb4528 100644
--- a/tnoodle-ui/src/main/api/tnoodle.socket.js
+++ b/tnoodle-ui/src/main/api/tnoodle.socket.js
@@ -68,7 +68,7 @@ export class ScrambleClient {
 let wsTNoodleBackend = new URL(tNoodleBackend);
 wsTNoodleBackend.protocol = "ws:";
 
-const BASE_URL = wsTNoodleBackend.toString();
+const BASE_URL = wsTNoodleBackend.toString().replace(/\/$/g, '');
 
 const SCRAMBLING_STATES = {
     IDLE: "IDLE",
diff --git a/tnoodle-ui/src/setupProxy.js b/tnoodle-ui/src/setupProxy.js
new file mode 100644
index 000000000..ee7fc4374
--- /dev/null
+++ b/tnoodle-ui/src/setupProxy.js
@@ -0,0 +1,14 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+    app.use(
+        ['/frontend', '/version', '/wcif'],
+        createProxyMiddleware({
+            target: 'http://localhost:2014',
+            secure: false,
+            changeOrigin: true,
+            ws: true,
+            xfwd: true,
+        })
+    );
+};
diff --git a/tnoodle-ui/yarn.lock b/tnoodle-ui/yarn.lock
index 65b245dc2..595b1f5b2 100644
--- a/tnoodle-ui/yarn.lock
+++ b/tnoodle-ui/yarn.lock
@@ -1604,6 +1604,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/http-proxy@^1.17.4":
+  version "1.17.4"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.4.tgz#e7c92e3dbe3e13aa799440ff42e6d3a17a9d045b"
+  integrity sha512-IrSHl2u6AWXduUaDLqYpt45tLVCtYv7o4Z0s1KghBCDgIIS9oW5K1H8mZG/A2CfeLdEa7rTd1ACOiHBc1EMT2Q==
+  dependencies:
+    "@types/node" "*"
+
 "@types/invariant@^2.2.33":
   version "2.2.34"
   resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.34.tgz#05e4f79f465c2007884374d4795452f995720bbe"
@@ -2630,7 +2637,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@~3.0.2:
+braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -5477,7 +5484,18 @@ http-proxy-middleware@0.19.1:
     lodash "^4.17.11"
     micromatch "^3.1.10"
 
-http-proxy@^1.17.0:
+http-proxy-middleware@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-1.0.5.tgz#4c6e25d95a411e3d750bc79ccf66290675176dc2"
+  integrity sha512-CKzML7u4RdGob8wuKI//H8Ein6wNTEQR7yjVEzPbhBLGdOfkfvgTnp2HLnniKBDP9QW4eG10/724iTWLBeER3g==
+  dependencies:
+    "@types/http-proxy" "^1.17.4"
+    http-proxy "^1.18.1"
+    is-glob "^4.0.1"
+    lodash "^4.17.19"
+    micromatch "^4.0.2"
+
+http-proxy@^1.17.0, http-proxy@^1.18.1:
   version "1.18.1"
   resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
   integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
@@ -7130,6 +7148,14 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -8057,7 +8083,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picomatch@^2.0.4, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==

From 3cc098f3e9d614ffc206f6ee7c6b1183e724564a Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Thu, 1 Oct 2020 12:26:51 +0200
Subject: [PATCH 09/11] Fix broken wcif zip fetching mock

---
 .travis.yml                     | 1 +
 tnoodle-ui/src/test/App.test.js | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 9905eb699..1c5e12a00 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,6 +12,7 @@ jobs:
           node_js: 10
           script:
               - cd tnoodle-ui
+              - echo $coveralls_repo_token
               - npm install
               - npm test -- --coverage
           after_script:
diff --git a/tnoodle-ui/src/test/App.test.js b/tnoodle-ui/src/test/App.test.js
index 9aa31cae1..92b179e38 100644
--- a/tnoodle-ui/src/test/App.test.js
+++ b/tnoodle-ui/src/test/App.test.js
@@ -46,10 +46,11 @@ beforeEach(() => {
     );
 
     jest.spyOn(tnoodleApi, "fetchZip").mockImplementation((...payload) => {
-        wcif = payload[0];
-        mbld = payload[1];
-        password = payload[2];
-        translations = payload[3];
+        // payload[0] is the socket client, ignore it
+        wcif = payload[1];
+        mbld = payload[2];
+        password = payload[3];
+        translations = payload[4];
 
         return Promise.resolve(new Blob([]));
     });

From 20295ff0d4ee091007edb263ba1211bf030170b8 Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Thu, 1 Oct 2020 12:40:43 +0200
Subject: [PATCH 10/11] Avoid duplicated test execution

---
 .travis.yml                 | 10 +---------
 tnoodle-ui/build.gradle.kts |  2 +-
 tnoodle-ui/package.json     |  5 +++--
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 1c5e12a00..3bdb8f39d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -7,13 +7,5 @@ jobs:
               - ./gradlew assemble
               - ./gradlew check
               - ./gradlew buildOfficial
-
-        - language: node_js
-          node_js: 10
-          script:
-              - cd tnoodle-ui
-              - echo $coveralls_repo_token
-              - npm install
-              - npm test -- --coverage
           after_script:
-              - COVERALLS_REPO_TOKEN=$coveralls_repo_token npm run coveralls
+              - COVERALLS_REPO_TOKEN=$coveralls_repo_token ./gradlew yarn_coveralls
diff --git a/tnoodle-ui/build.gradle.kts b/tnoodle-ui/build.gradle.kts
index e86d1a1ee..c1794f246 100644
--- a/tnoodle-ui/build.gradle.kts
+++ b/tnoodle-ui/build.gradle.kts
@@ -39,7 +39,7 @@ tasks.getByName("check") {
 }
 
 tasks.getByName("yarn_test") {
-    dependsOn("yarn_build")
+    dependsOn("yarn_install")
 }
 
 tasks.create<Zip>("packageReactFrontend") {
diff --git a/tnoodle-ui/package.json b/tnoodle-ui/package.json
index a159ea878..4a6b957e7 100644
--- a/tnoodle-ui/package.json
+++ b/tnoodle-ui/package.json
@@ -22,9 +22,9 @@
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
-        "test": "react-scripts test --watchAll --watchAll=false",
+        "test": "react-scripts test --watchAll --watchAll=false --coverage",
         "eject": "react-scripts eject",
-        "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls"
+        "coveralls": "cat ./coverage/lcov.info | coveralls"
     },
     "browserslist": {
         "production": [
@@ -50,6 +50,7 @@
             "src/**/*.{js,jsx}",
             "!src/index.js",
             "!src/serviceWorker.js",
+            "!src/setupProxy.js",
             "!src/main/api/**.js",
             "!**/Interceptor.jsx"
         ]

From 03d88516bb33cfcd095b7dd68cc7b045a7f288d6 Mon Sep 17 00:00:00 2001
From: Gregor Billing <suushiemaniac@gmail.com>
Date: Thu, 1 Oct 2020 13:00:27 +0200
Subject: [PATCH 11/11] Add tests for EventPicker progress bar

---
 .../src/main/components/EventPicker.jsx       |  2 +-
 tnoodle-ui/src/test/EventPicker.test.js       | 61 ++++++++++++++++++-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/tnoodle-ui/src/main/components/EventPicker.jsx b/tnoodle-ui/src/main/components/EventPicker.jsx
index 025b6ae5d..e377c6f99 100644
--- a/tnoodle-ui/src/main/components/EventPicker.jsx
+++ b/tnoodle-ui/src/main/components/EventPicker.jsx
@@ -208,7 +208,7 @@ const EventPicker = connect(
             }
 
             return (
-                <ProgressBar animated fade variant={
+                <ProgressBar animated variant={
                     progress === 100
                         ? "success"
                         : "info"
diff --git a/tnoodle-ui/src/test/EventPicker.test.js b/tnoodle-ui/src/test/EventPicker.test.js
index c8584cdac..a2bdb2efa 100644
--- a/tnoodle-ui/src/test/EventPicker.test.js
+++ b/tnoodle-ui/src/test/EventPicker.test.js
@@ -14,7 +14,12 @@ import { events } from "./mock/tnoodle.api.mock";
 
 import { defaultWcif } from "../main/constants/default.wcif";
 
-import { updateEditingStatus } from "../main/redux/ActionCreators";
+import {
+    updateEditingStatus,
+    updateScramblingProgressTarget,
+    updateScramblingProgressCurrentEvent,
+    updateGeneratingScrambles
+} from "../main/redux/ActionCreators";
 
 let container = null;
 beforeEach(() => {
@@ -138,3 +143,57 @@ it("Editing disabled", () => {
     // Copies must be editable anyways
     expect(copies.disabled).toBe(false);
 });
+
+it("Progress Bar showing/hiding", () => {
+    const store = createStore(Reducer);
+
+    const event = events[0];
+    const wcifEvent = defaultWcif.events[0]; // This is one round of 333
+
+    // Enforce that fields are not disabled
+    store.dispatch(updateEditingStatus(true));
+
+    // Render component
+    act(() => {
+        render(
+            <Provider store={store}>
+                <EventPicker event={event} wcifEvent={wcifEvent} />
+            </Provider>,
+            container
+        );
+    });
+
+    const progressBefore = Array.from(container.querySelectorAll("div.progress"));
+
+    expect(progressBefore.length).toBe(0);
+
+    store.dispatch(updateScramblingProgressTarget({[event.id]:3}));
+    store.dispatch(updateGeneratingScrambles(true));
+
+    const progressDuringEarly = Array.from(container.querySelectorAll("div.progress>div"));
+
+    expect(progressDuringEarly.length).toBe(1);
+
+    store.dispatch(updateScramblingProgressCurrentEvent(event.id));
+    store.dispatch(updateScramblingProgressCurrentEvent(event.id));
+
+    const progressDuringLate = Array.from(container.querySelectorAll("div.progress>div"));
+
+    expect(progressDuringLate.length).toBe(1);
+    const lateProgress = parseFloat(progressDuringLate[0].getAttribute('aria-valuenow'))
+    expect(Math.trunc(lateProgress)).toBe(66);
+
+    store.dispatch(updateScramblingProgressCurrentEvent(event.id));
+
+    const progressAfter = Array.from(container.querySelectorAll("div.progress>div"));
+
+    expect(progressAfter.length).toBe(1);
+    const completeProgress = parseInt(progressAfter[0].getAttribute('aria-valuenow'))
+    expect(completeProgress).toBe(100);
+
+    store.dispatch(updateGeneratingScrambles(false));
+
+    const progressGone = Array.from(container.querySelectorAll("div.progress"));
+
+    expect(progressGone.length).toBe(0);
+});