Added score percentage

Changed how per hand average cut is displayed Moved the current score Added auto re-connecting to HTTP status' web socket Changed how data resetting works
2022-02-16 18:44:01 +00:00 · 2022-02-16 18:44:01 +00:00 · 35f9811bab
commit 35f9811bab
parent 5879743c6e
6 changed files with 528 additions and 112 deletions
--- a/.gitignore
+++ b/.gitignore
@ -32,3 +32,6 @@ yarn-error.log*

 # vercel
 .vercel
+
+# IntelliJ
+.idea
--- a/components/ScoreStats.js
+++ b/components/ScoreStats.js
@ -6,9 +6,11 @@ export default class ScoreStats extends Component {
        super(params);

        this.state = {
-            score: 0,
-            dataSocket: undefined,
-            isVisible: false,
+            socket: undefined,
+            isVisible: true,
+            currentScore: 0,
+            percentage: "100.00%",
+            failed: false,
            leftHand: {
                averageCut: [15.00],
                averagePreSwing: [70.00],
@ -22,131 +24,141 @@ export default class ScoreStats extends Component {
        }
    }

-    componentDidMount() {
+    connectSocket() {
        const socket = new WebSocket('ws://localhost:6557/socket');
-        this.setState({ socket: socket });
        socket.addEventListener('error' || 'close', () => {
-            console.log("Attempting to re-connect to the HTTP Status socket.");
-            this.setState({ socket: new WebSocket('ws://localhost:6557/socket') });
+            console.log("Attempting to re-connect to the HTTP Status socket in 30 seconds.");
+            setTimeout(() => this.connectSocket(), 30_000);
        });
        socket.addEventListener('message', (message) => {
-            //console.log("Received message from HTTP Status.");
            const json = JSON.parse(message.data);
-            if (!handlers[json.event]) {
+            if (!this.handlers[json.event]) {
                console.log("Unhandled message from HTTP Status. (" + json.event + ")");
                return;
            }
-            handlers[json.event](json || []);
+            this.handlers[json.event](json || []);
        })
+        this.setState({ socket: socket });
+    }

-        const handlers = {
-            "hello": () => {
-                console.log("Hello from HTTP Status!");
+    resetData(visible) {
+        console.log("Exiting level, resetting data.")
+        this.setState({
+            "leftHand": {
+                "averageCut": [15.00],
+                "averagePreSwing": [70.00],
+                "averagePostSwing": [30.00],
            },
-            "scoreChanged": (data) => {
-                const { status } = data;
-                this.setState({ score: status.performance.score })
+            "rightHand": {
+                "averageCut": [15.00],
+                "averagePreSwing": [70.00],
+                "averagePostSwing": [30.00],
            },
-            "noteFullyCut": (data) => {
-                const { noteCut } = data;
+            currentScore: 0,
+            percentage: "100.00%",
+            isVisible: visible
+        });
+    }

-                // Left Saber
-                if (noteCut.saberType === 'SaberA') {
-                    const data = this.state.leftHand;
-                    if (data.averageCut.includes(15) && data.averageCut.length === 1) {
-                        data.averageCut = [];
-                    }
-                    if (data.averagePreSwing.includes(70) && data.averagePreSwing.length === 1) {
-                        data.averagePreSwing = [];
-                    }
-                    if (data.averagePostSwing.includes(30) && data.averagePostSwing.length === 1) {
-                        data.averagePostSwing = [];
-                    }
-                    data.averagePreSwing.push(noteCut.initialScore > 70 ? 70 : noteCut.initialScore);
-                    data.averagePostSwing.push(noteCut.finalScore - noteCut.initialScore);
-                    data.averageCut.push(noteCut.cutDistanceScore);
-                    this.setState({ leftHand: data });
+    handlers = {
+        "hello": () => {
+            console.log("Hello from HTTP Status!");
+        },
+        "scoreChanged": (data) => {
+            const { status } = data;
+            const { score, currentMaxScore } = status.performance;
+            const percent = currentMaxScore > 0 ? ((score / currentMaxScore) * 1000 / 10).toFixed(2) : 0.00;
+            this.setState({
+                    currentScore: score,
+                    percentage: this.state.failed ? percent * 2 : percent + "%"
+            })
+        },
+        "noteFullyCut": (data) => {
+            const { noteCut } = data;
+
+            // Left Saber
+            if (noteCut.saberType === 'SaberA') {
+                const data = this.state.leftHand;
+                if (data.averageCut.includes(15) && data.averageCut.length === 1) {
+                    data.averageCut = [];
                }
-
-                // Left Saber
-                if (noteCut.saberType === 'SaberB') {
-                    const data = this.state.rightHand;
-                    if (data.averageCut.includes(15) && data.averageCut.length === 1) {
-                        data.averageCut = [];
-                    }
-                    if (data.averagePreSwing.includes(70) && data.averagePreSwing.length === 1) {
-                        data.averagePreSwing = [];
-                    }
-                    if (data.averagePostSwing.includes(30) && data.averagePostSwing.length === 1) {
-                        data.averagePostSwing = [];
-                    }
-                    data.averagePreSwing.push(noteCut.initialScore > 70 ? 70 : noteCut.initialScore);
-                    data.averagePostSwing.push(noteCut.finalScore - noteCut.initialScore);
-                    data.averageCut.push(noteCut.cutDistanceScore);
-                    this.setState({ rightHand: data });
+                if (data.averagePreSwing.includes(70) && data.averagePreSwing.length === 1) {
+                    data.averagePreSwing = [];
                }
-            },
-            "menu": () => {
-                console.log("Exiting level, resetting data.")
-                this.setState({
-                    "leftHand": {
-                        "averageCut": [15.00],
-                        "averagePreSwing": [70.00],
-                        "averagePostSwing": [30.00],
-                    },
-                    "rightHand": {
-                        "averageCut": [15.00],
-                        "averagePreSwing": [70.00],
-                        "averagePostSwing": [30.00],
-                    },
-                    score: 0,
-                    isVisible: false
-                });
-            },
-            "songStart": () => {
-                console.log("Going into level, resetting data.")
-                this.setState({
-                    "leftHand": {
-                        "averageCut": [15.00],
-                        "averagePreSwing": [70.00],
-                        "averagePostSwing": [30.00],
-                    },
-                    "rightHand": {
-                        "averageCut": [15.00],
-                        "averagePreSwing": [70.00],
-                        "averagePostSwing": [30.00],
-                    },
-                    score: 0,
-                    isVisible: true
-                });
-            },
-            "noteCut": () => {},
-            "noteMissed": () => {},
-            "noteSpawned": () => {},
-            "bombMissed": () => {},
-            "beatmapEvent": () => {}
-        }
+                if (data.averagePostSwing.includes(30) && data.averagePostSwing.length === 1) {
+                    data.averagePostSwing = [];
+                }
+                data.averagePreSwing.push(noteCut.initialScore > 70 ? 70 : noteCut.initialScore);
+                data.averagePostSwing.push(noteCut.finalScore - noteCut.initialScore);
+                data.averageCut.push(noteCut.cutDistanceScore);
+                this.setState({ leftHand: data });
+            }
+
+            // Left Saber
+            if (noteCut.saberType === 'SaberB') {
+                const data = this.state.rightHand;
+                if (data.averageCut.includes(15) && data.averageCut.length === 1) {
+                    data.averageCut = [];
+                }
+                if (data.averagePreSwing.includes(70) && data.averagePreSwing.length === 1) {
+                    data.averagePreSwing = [];
+                }
+                if (data.averagePostSwing.includes(30) && data.averagePostSwing.length === 1) {
+                    data.averagePostSwing = [];
+                }
+                data.averagePreSwing.push(noteCut.initialScore > 70 ? 70 : noteCut.initialScore);
+                data.averagePostSwing.push(noteCut.finalScore - noteCut.initialScore);
+                data.averageCut.push(noteCut.cutDistanceScore);
+                this.setState({ rightHand: data });
+            }
+        },
+        "songStart": () => {
+            console.log("Going into level, resetting data.")
+            this.resetData(true);
+        },
+        "finished": () => {
+            console.log("Exiting level, resetting data.")
+            this.resetData(false);
+        },
+        "softFail": () => {
+            this.setState({ failed: true });
+        },
+        "menu": () => {},
+        "noteCut": () => {},
+        "noteMissed": () => {},
+        "noteSpawned": () => {},
+        "bombMissed": () => {},
+        "beatmapEvent": () => {}
+    }
+
+    componentDidMount() {
+        this.connectSocket();
    }

    getAverage(values) {
-        return values.reduce( ( p, c ) => p + c, 0 ) / values.length;
+        return values.reduce((p, c) => p + c, 0) / values.length;
    }

    render() {
        return <div className={'score-stats'} style={{ display: this.state.isVisible ? "block" : "none" }}>
-            <p>{this.state.score.toLocaleString()}</p>
+            <p className={'score-stats-average-cut'}>Average Cut</p>
            <div className={'score-stats-hands'}>
-                <div>
+                <div className={'score-stats-left'}>
                    <p>{this.getAverage(this.state.leftHand.averagePreSwing).toFixed(2)}</p>
                    <p>{this.getAverage(this.state.leftHand.averagePostSwing).toFixed(2)}</p>
                    <p>{this.getAverage(this.state.leftHand.averageCut).toFixed(2)}</p>
                </div>
-                <div>
+                <div className={'score-stats-right'}>
                    <p>{this.getAverage(this.state.rightHand.averagePreSwing).toFixed(2)}</p>
                    <p>{this.getAverage(this.state.rightHand.averagePostSwing).toFixed(2)}</p>
                    <p>{this.getAverage(this.state.rightHand.averageCut).toFixed(2)}</p>
                </div>
            </div>
+
+            <div className={'score-stats-info'}>
+                <p>{this.state.percentage}</p>
+                <p>{this.state.currentScore.toLocaleString()}</p>
+            </div>
        </div>
    }
 }
--- a/components/SongInfo.js
+++ b/components/SongInfo.js
@ -0,0 +1,14 @@
+import {Component} from "react";
+
+export default class SongInfo extends Component {
+
+    constructor(params) {
+        super(params);
+    }
+
+    render() {
+        return <div className={'song-info'}>
+
+        </div>
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -6,7 +6,10 @@
    "": {
      "name": "beatsaber-overlay",
      "dependencies": {
+        "@emotion/cache": "^11.7.1",
+        "@emotion/server": "^11.4.0",
        "next": "12.0.10",
+        "prop-types": "^15.8.1",
        "react": "17.0.2",
        "react-country-flag": "^3.0.2",
        "react-dom": "17.0.2"
@ -41,6 +44,57 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/server": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/server/-/server-11.4.0.tgz",
+      "integrity": "sha512-IHovdWA3V0DokzxLtUNDx4+hQI82zUXqQFcVz/om2t44O0YSc+NHB+qifnyAOoQwt3SXcBTgaSntobwUI9gnfA==",
+      "dependencies": {
+        "@emotion/utils": "^1.0.0",
+        "html-tokenize": "^2.0.0",
+        "multipipe": "^1.0.2",
+        "through": "^2.3.8"
+      },
+      "peerDependencies": {
+        "@emotion/css": "^11.0.0-rc.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/css": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
    "node_modules/@eslint/eslintrc": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.1.0.tgz",
@ -608,6 +662,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/buffer-from": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+      "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
+    },
    "node_modules/call-bind": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@ -690,6 +749,11 @@
        "url": "https://opencollective.com/core-js"
      }
    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -769,6 +833,41 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/duplexer2/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+    },
+    "node_modules/duplexer2/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/duplexer2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
    "node_modules/emoji-regex": {
      "version": "9.2.2",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@ -1519,6 +1618,21 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/html-tokenize": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz",
+      "integrity": "sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==",
+      "dependencies": {
+        "buffer-from": "~0.1.1",
+        "inherits": "~2.0.1",
+        "minimist": "~1.2.5",
+        "readable-stream": "~1.0.27-1",
+        "through2": "~0.4.1"
+      },
+      "bin": {
+        "html-tokenize": "bin/cmd.js"
+      }
+    },
    "node_modules/ignore": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@ -1566,8 +1680,7 @@
    "node_modules/inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "node_modules/internal-slot": {
      "version": "1.0.3",
@ -1774,6 +1887,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
    "node_modules/isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@ -1941,8 +2059,7 @@
    "node_modules/minimist": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
    },
    "node_modules/ms": {
      "version": "2.1.2",
@ -1950,6 +2067,15 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
      "dev": true
    },
+    "node_modules/multipipe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",
+      "integrity": "sha1-zBPv2DPJzamfIk+GhGG44aP9k50=",
+      "dependencies": {
+        "duplexer2": "^0.1.2",
+        "object-assign": "^4.1.0"
+      }
+    },
    "node_modules/nanoid": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
@ -2277,11 +2403,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
    "node_modules/prop-types": {
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "dependencies": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
@ -2356,8 +2486,18 @@
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/readable-stream": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+      "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
    },
    "node_modules/regenerator-runtime": {
      "version": "0.13.9",
@ -2467,6 +2607,11 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
    "node_modules/scheduler": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@ -2543,6 +2688,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
    "node_modules/string.prototype.matchall": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz",
@ -2640,6 +2790,11 @@
        }
      }
    },
+    "node_modules/stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
    "node_modules/supports-color": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@ -2670,6 +2825,20 @@
      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
      "dev": true
    },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
+    "node_modules/through2": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz",
+      "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=",
+      "dependencies": {
+        "readable-stream": "~1.0.17",
+        "xtend": "~2.1.1"
+      }
+    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@ -2788,6 +2957,11 @@
        "react": "^16.8.0 || ^17.0.0"
      }
    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
    "node_modules/v8-compile-cache": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@ -2840,6 +3014,22 @@
      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
      "dev": true
    },
+    "node_modules/xtend": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
+      "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
+      "dependencies": {
+        "object-keys": "~0.4.0"
+      },
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/xtend/node_modules/object-keys": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
+      "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY="
+    },
    "node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@ -2867,6 +3057,49 @@
        "regenerator-runtime": "^0.13.4"
      }
    },
+    "@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/server": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/server/-/server-11.4.0.tgz",
+      "integrity": "sha512-IHovdWA3V0DokzxLtUNDx4+hQI82zUXqQFcVz/om2t44O0YSc+NHB+qifnyAOoQwt3SXcBTgaSntobwUI9gnfA==",
+      "requires": {
+        "@emotion/utils": "^1.0.0",
+        "html-tokenize": "^2.0.0",
+        "multipipe": "^1.0.2",
+        "through": "^2.3.8"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
    "@eslint/eslintrc": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.1.0.tgz",
@ -3220,6 +3453,11 @@
        "fill-range": "^7.0.1"
      }
    },
+    "buffer-from": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+      "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
+    },
    "call-bind": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@ -3278,6 +3516,11 @@
      "integrity": "sha512-VaJUunCZLnxuDbo1rNOzwbet9E1K9joiXS5+DQMPtgxd24wfsZbJZMMfQLGYMlCUvSxLfsRUUhoOR2x28mFfeg==",
      "dev": true
    },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
    "cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -3337,6 +3580,43 @@
        "esutils": "^2.0.2"
      }
    },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+      "requires": {
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
    "emoji-regex": {
      "version": "9.2.2",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@ -3915,6 +4195,18 @@
        "has-symbols": "^1.0.2"
      }
    },
+    "html-tokenize": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz",
+      "integrity": "sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==",
+      "requires": {
+        "buffer-from": "~0.1.1",
+        "inherits": "~2.0.1",
+        "minimist": "~1.2.5",
+        "readable-stream": "~1.0.27-1",
+        "through2": "~0.4.1"
+      }
+    },
    "ignore": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@ -3950,8 +4242,7 @@
    "inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "internal-slot": {
      "version": "1.0.3",
@ -4086,6 +4377,11 @@
        "call-bind": "^1.0.2"
      }
    },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
    "isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@ -4223,8 +4519,7 @@
    "minimist": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
    },
    "ms": {
      "version": "2.1.2",
@ -4232,6 +4527,15 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
      "dev": true
    },
+    "multipipe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",
+      "integrity": "sha1-zBPv2DPJzamfIk+GhGG44aP9k50=",
+      "requires": {
+        "duplexer2": "^0.1.2",
+        "object-assign": "^4.1.0"
+      }
+    },
    "nanoid": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
@ -4451,11 +4755,15 @@
      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
      "dev": true
    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
    "prop-types": {
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "requires": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
@ -4502,8 +4810,18 @@
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "readable-stream": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+      "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
    },
    "regenerator-runtime": {
      "version": "0.13.9",
@ -4568,6 +4886,11 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
    "scheduler": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@ -4623,6 +4946,11 @@
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
    },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
    "string.prototype.matchall": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz",
@ -4686,6 +5014,11 @@
      "integrity": "sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==",
      "requires": {}
    },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
    "supports-color": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@ -4707,6 +5040,20 @@
      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
      "dev": true
    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
+    "through2": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz",
+      "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=",
+      "requires": {
+        "readable-stream": "~1.0.17",
+        "xtend": "~2.1.1"
+      }
+    },
    "to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@ -4794,6 +5141,11 @@
        "object-assign": "^4.1.1"
      }
    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
    "v8-compile-cache": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@ -4834,6 +5186,21 @@
      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
      "dev": true
    },
+    "xtend": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
+      "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
+      "requires": {
+        "object-keys": "~0.4.0"
+      },
+      "dependencies": {
+        "object-keys": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
+          "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY="
+        }
+      }
+    },
    "yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -8,7 +8,10 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@emotion/cache": "^11.7.1",
+    "@emotion/server": "^11.4.0",
    "next": "12.0.10",
+    "prop-types": "^15.8.1",
    "react": "17.0.2",
    "react-country-flag": "^3.0.2",
    "react-dom": "17.0.2"
--- a/styles/globals.css
+++ b/styles/globals.css
@ -69,11 +69,20 @@
 }

 .score-stats {
-	text-align: right;
+	text-align: center;
 	position:absolute;
 	top:0;
 	right:0;
-	margin-right: 15px;
+	margin-right: 10px;
+}
+
+.score-stats-right {
+	margin-right: 10px;
+}
+
+.score-stats-average-cut {
+	font-weight: bold;
+	font-size: x-large;
 }

 .score-stats-hands {
@ -83,4 +92,12 @@

 .score-stats-hands div {
 	padding-left: 10px;
+}
+
+.score-stats-info {
+	position: fixed;
+	bottom:0;
+	right:0;
+	margin-right: 10px;
+	text-align: right;
 }