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 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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 = () => {