From 2205d0758580f035e481ad1def5f58fa0393ac8a Mon Sep 17 00:00:00 2001 From: Kristoffer Juelsen Date: Thu, 24 Mar 2022 22:29:49 +0100 Subject: [PATCH] Collaborative session 24/03/2022 Co-authored-by: Felix Albrigtsen --- src/client/.env | 1 + src/client/package-lock.json | 292 +++++++++++++++++- src/client/package.json | 1 + src/client/src/components/appbar.js | 13 +- src/client/src/components/managebutton.js | 12 - src/client/src/components/overviewbutton.js | 13 - src/client/src/components/savebutton.js | 2 +- src/client/src/components/theme.js | 39 ++- .../src/components/tournamentBracket.css | 86 ++++++ .../src/components/tournamentBracket.js | 84 +++++ src/client/src/createtournament.js | 2 +- src/client/src/frontpage.js | 62 ++-- src/client/src/index.css | 8 +- src/client/src/index.js | 2 +- src/client/src/managetournament.js | 4 +- src/client/src/teameditor.js | 68 ++-- src/client/src/tournamentoverview.js | 161 +++++++--- src/package-lock.json | 6 + 18 files changed, 679 insertions(+), 177 deletions(-) create mode 100644 src/client/.env delete mode 100644 src/client/src/components/managebutton.js delete mode 100644 src/client/src/components/overviewbutton.js create mode 100644 src/client/src/components/tournamentBracket.css create mode 100644 src/client/src/components/tournamentBracket.js create mode 100644 src/package-lock.json diff --git a/src/client/.env b/src/client/.env new file mode 100644 index 0000000..bae2b61 --- /dev/null +++ b/src/client/.env @@ -0,0 +1 @@ +REACT_APP_BACKEND_URL="http://demiurgen.pvv.ntnu.no:3000" \ No newline at end of file diff --git a/src/client/package-lock.json b/src/client/package-lock.json index 3406c01..51876ea 100644 --- a/src/client/package-lock.json +++ b/src/client/package-lock.json @@ -15,6 +15,7 @@ "@mui/styled-engine-sc": "^5.5.2", "bootstrap": "^5.1.3", "iarn": "0.0.0", + "less": "^4.1.2", "react": "^17.0.2", "react-bootstrap": "^2.2.1", "react-custom-alert": "^0.1.2", @@ -5713,6 +5714,17 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, + "node_modules/copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dependencies": { + "is-what": "^3.14.1" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/core-js": { "version": "3.21.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz", @@ -6579,14 +6591,6 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" }, - "node_modules/dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", - "engines": { - "node": ">=10" - } - }, "node_modules/dotenv-expand": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", @@ -6673,6 +6677,18 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/errno": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "optional": true, + "dependencies": { + "prr": "~1.0.1" + }, + "bin": { + "errno": "cli.js" + } + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -8643,6 +8659,18 @@ "node": ">= 4" } }, + "node_modules/image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", + "optional": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/immer": { "version": "9.0.12", "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", @@ -9068,6 +9096,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==" + }, "node_modules/is-wsl": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", @@ -11077,6 +11110,67 @@ "language-subtag-registry": "~0.3.2" } }, + "node_modules/less": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz", + "integrity": "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==", + "dependencies": { + "copy-anything": "^2.0.1", + "parse-node-version": "^1.0.1", + "tslib": "^2.3.0" + }, + "bin": { + "lessc": "bin/lessc" + }, + "engines": { + "node": ">=6" + }, + "optionalDependencies": { + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^2.5.2", + "source-map": "~0.6.0" + } + }, + "node_modules/less/node_modules/make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "optional": true, + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/less/node_modules/semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "optional": true, + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/less/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/less/node_modules/tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -11485,6 +11579,32 @@ "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=" }, + "node_modules/needle": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz", + "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==", + "optional": true, + "dependencies": { + "debug": "^3.2.6", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" + }, + "bin": { + "needle": "bin/needle" + }, + "engines": { + "node": ">= 4.4.x" + } + }, + "node_modules/needle/node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "optional": true, + "dependencies": { + "ms": "^2.1.1" + } + }, "node_modules/negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -11900,6 +12020,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "engines": { + "node": ">= 0.10" + } + }, "node_modules/parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -11990,6 +12118,15 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "optional": true, + "engines": { + "node": ">=6" + } + }, "node_modules/pirates": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", @@ -13366,6 +13503,12 @@ "node": ">= 0.10" } }, + "node_modules/prr": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", + "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", + "optional": true + }, "node_modules/psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -13788,6 +13931,14 @@ } } }, + "node_modules/react-scripts/node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "engines": { + "node": ">=10" + } + }, "node_modules/react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -20643,6 +20794,14 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, + "copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "requires": { + "is-what": "^3.14.1" + } + }, "core-js": { "version": "3.21.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz", @@ -21276,11 +21435,6 @@ } } }, - "dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" - }, "dotenv-expand": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", @@ -21343,6 +21497,15 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==" }, + "errno": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "optional": true, + "requires": { + "prr": "~1.0.1" + } + }, "error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -22772,6 +22935,12 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==" }, + "image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=", + "optional": true + }, "immer": { "version": "9.0.12", "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz", @@ -23046,6 +23215,11 @@ "call-bind": "^1.0.2" } }, + "is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==" + }, "is-wsl": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", @@ -24511,6 +24685,52 @@ "language-subtag-registry": "~0.3.2" } }, + "less": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz", + "integrity": "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==", + "requires": { + "copy-anything": "^2.0.1", + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^2.5.2", + "parse-node-version": "^1.0.1", + "source-map": "~0.6.0", + "tslib": "^2.3.0" + }, + "dependencies": { + "make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "optional": true, + "requires": { + "pify": "^4.0.1", + "semver": "^5.6.0" + } + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "optional": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true + }, + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + } + } + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -24820,6 +25040,28 @@ "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=" }, + "needle": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz", + "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==", + "optional": true, + "requires": { + "debug": "^3.2.6", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" + }, + "dependencies": { + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "optional": true, + "requires": { + "ms": "^2.1.1" + } + } + } + }, "negotiator": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", @@ -25116,6 +25358,11 @@ "lines-and-columns": "^1.1.6" } }, + "parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==" + }, "parse5": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", @@ -25187,6 +25434,12 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" }, + "pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "optional": true + }, "pirates": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz", @@ -26068,6 +26321,12 @@ } } }, + "prr": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", + "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", + "optional": true + }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -26374,6 +26633,13 @@ "webpack-dev-server": "^4.6.0", "webpack-manifest-plugin": "^4.0.2", "workbox-webpack-plugin": "^6.4.1" + }, + "dependencies": { + "dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + } } }, "react-transition-group": { diff --git a/src/client/package.json b/src/client/package.json index ee1147a..0e94b9b 100644 --- a/src/client/package.json +++ b/src/client/package.json @@ -12,6 +12,7 @@ "@mui/styled-engine-sc": "^5.5.2", "bootstrap": "^5.1.3", "iarn": "0.0.0", + "less": "^4.1.2", "react": "^17.0.2", "react-bootstrap": "^2.2.1", "react-custom-alert": "^0.1.2", diff --git a/src/client/src/components/appbar.js b/src/client/src/components/appbar.js index 256ecd8..5ca4187 100644 --- a/src/client/src/components/appbar.js +++ b/src/client/src/components/appbar.js @@ -1,4 +1,5 @@ import * as React from "react"; +import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { AppBar, Typography, Toolbar, CssBaseline, Button, Box, IconButton } from "@mui/material" import Menu from '@mui/icons-material/Menu' import HomeImage from "./homeimage"; @@ -8,14 +9,17 @@ export default function Appbar() { <> - + + - Asura Tournaments + + Asura Tournaments + ); -} - +} \ No newline at end of file diff --git a/src/client/src/components/managebutton.js b/src/client/src/components/managebutton.js deleted file mode 100644 index 699f2ca..0000000 --- a/src/client/src/components/managebutton.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; - -import Button from "@mui/material/Button"; - -export default function ManageButton(props) { - return ( - - - - ); -} diff --git a/src/client/src/components/overviewbutton.js b/src/client/src/components/overviewbutton.js deleted file mode 100644 index 802f890..0000000 --- a/src/client/src/components/overviewbutton.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; -import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; -import Button from '@mui/material/Button' - -export default function OverviewButton(props) { - return ( - - - - ); -} diff --git a/src/client/src/components/savebutton.js b/src/client/src/components/savebutton.js index f26d771..58cd972 100644 --- a/src/client/src/components/savebutton.js +++ b/src/client/src/components/savebutton.js @@ -5,7 +5,7 @@ import Button from "@mui/material/Button"; export default function SaveButton(props) { return ( - + ); diff --git a/src/client/src/components/theme.js b/src/client/src/components/theme.js index da65314..ca324a7 100644 --- a/src/client/src/components/theme.js +++ b/src/client/src/components/theme.js @@ -9,45 +9,62 @@ const theme = createTheme({ // secondary: { // }, pewterblue: { - main: '#8fbcbb', + main: '#8fbcbb', + contrastText: '#fff', }, darkskyblue: { - main: '#88c0d0' + main: '#88c0d0', + contrastText: '#fff', }, darkpastelblue:{ - main: '#81a1c1' + main: '#81a1c1', + contrastText: '#fff', }, rackley: { - main: '#5e81ac' + main: '#3270a6', + contrastText: '#fff', }, gainsboro:{ - main: '#d8dee9' + main: '#d8dee9', + contrastText: '#fff', }, brightgrey: { - main: '#e5e9f0', - light: '#e5e9f0' + main: '#e5e9f0', + contrastText: '#fff', }, lightslategray: { - main: '#79869c' + main: '#79869c', + contrastText: '#fff', }, cadetblue: { - main: '#a0aaba' + main: '#a0aaba', + contrastText: '#fff', }, red: { - main: '#bf616a', + main: '#bf616a', + contrastText: '#fff', }, copper: { main: '#d08770', + contrastText: '#fff', }, gold: { main: '#ebcb8b', + contrastText: '#fff', }, green: { main: '#a3be8c', + contrastText: '#fff', }, grape: { - main: '#b48ead', + main: '#b76bbf', + contrastText: '#fff', + }, + background: { + default: '#f0f2f2', } + // contrastThreshold: 5, + // tonalOffset: 0.2, }, }); diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css new file mode 100644 index 0000000..65db4d0 --- /dev/null +++ b/src/client/src/components/tournamentBracket.css @@ -0,0 +1,86 @@ +/* https://codepen.io/semibran/pen/VjmPJd */ +html { + font-size: 1rem; } + + .bracket { + display: inline-block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + white-space: nowrap; + background: #f0f2f2 !important; + } + .bracket .round { + display: inline-block; + vertical-align: middle; } + .bracket .round .winners > div { + display: inline-block; + vertical-align: middle; } + .bracket .round .winners > div.matchups .matchup:last-child { + margin-bottom: 0 !important; } + .bracket .round .winners > div.matchups .matchup .participants { + border-radius: 0.25rem; + overflow: hidden; } + .bracket .round .winners > div.matchups .matchup .participants .participant { + box-sizing: border-box; + color: #858585; + border-left: 0.25rem solid #858585; + background: white; + width: 14rem; + height: 3rem; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12); } + .bracket .round .winners > div.matchups .matchup .participants .participant.winner { + color: #60c645; + border-color: #60c645; } + .bracket .round .winners > div.matchups .matchup .participants .participant.loser { + color: #dc563f; + border-color: #dc563f; } + .bracket .round .winners > div.matchups .matchup .participants .participant:not(:last-child) { + border-bottom: thin solid #f0f2f2; } + .bracket .round .winners > div.matchups .matchup .participants .participant span { + margin: 0 1.25rem; + line-height: 3; + font-size: 1rem; + font-family: "Roboto Slab"; } + .bracket .round .winners > div.connector.filled .line, .bracket .round .winners > div.connector.filled.bottom .merger:after, .bracket .round .winners > div.connector.filled.top .merger:before { + border-color: #60c645; } + .bracket .round .winners > div.connector .line, .bracket .round .winners > div.connector .merger { + box-sizing: border-box; + width: 2rem; + display: inline-block; + vertical-align: top; } + .bracket .round .winners > div.connector .line { + border-bottom: thin solid #c0c0c8; + height: 4rem; } + .bracket .round .winners > div.connector .merger { + position: relative; + height: 8rem; } + .bracket .round .winners > div.connector .merger:before, .bracket .round .winners > div.connector .merger:after { + content: ""; + display: block; + box-sizing: border-box; + width: 100%; + height: 50%; + border: 0 solid; + border-color: #c0c0c8; } + .bracket .round .winners > div.connector .merger:before { + border-right-width: thin; + border-top-width: thin; } + .bracket .round .winners > div.connector .merger:after { + border-right-width: thin; + border-bottom-width: thin; } + .bracket .round.quarterfinals .winners:not(:last-child) { + margin-bottom: 2rem; } + .bracket .round.quarterfinals .winners .matchups .matchup:not(:last-child) { + margin-bottom: 2rem; } + .bracket .round.semifinals .winners .matchups .matchup:not(:last-child) { + margin-bottom: 10rem; } + .bracket .round.semifinals .winners .connector .merger { + height: 16rem; } + .bracket .round.semifinals .winners .connector .line { + height: 8rem; } + .bracket .round.finals .winners .connector .merger { + height: 3rem; } + .bracket .round.finals .winners .connector .line { + height: 1.5rem; } \ No newline at end of file diff --git a/src/client/src/components/tournamentBracket.js b/src/client/src/components/tournamentBracket.js new file mode 100644 index 0000000..92d0711 --- /dev/null +++ b/src/client/src/components/tournamentBracket.js @@ -0,0 +1,84 @@ +import './tournamentBracket.css'; + + +// +export default function TournamentBracket(props) { + return <> +
+
+
+
+
+
Uno
+
Ocho
+
+
+
+
+
Dos
+
Siete
+
+
+
+
+
+
+
+
+
+
+
+
+
Treis
+
Seis
+
+
+
+
+
Cuatro
+
Cinco
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Uno
+
Dos
+
+
+
+
+
Seis
+
Cinco
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Uno
+
Seis
+
+
+
+
+
+ +} \ No newline at end of file diff --git a/src/client/src/createtournament.js b/src/client/src/createtournament.js index 3b0a09c..6d6351a 100644 --- a/src/client/src/createtournament.js +++ b/src/client/src/createtournament.js @@ -54,7 +54,7 @@ function submitTournament(event) { formData.append("teamLimit", tournamentMaxTeams); let body = new URLSearchParams(formData); - fetch("http://10.24.1.213:3000/api/tournament/create", { + fetch(process.env.REACT_APP_BACKEND_URL + "/api/tournament/create", { method: "POST", body: body }) diff --git a/src/client/src/frontpage.js b/src/client/src/frontpage.js index bab7fe6..cd78294 100644 --- a/src/client/src/frontpage.js +++ b/src/client/src/frontpage.js @@ -1,6 +1,5 @@ import * as React from "react"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; -import ManageButton from "./components/managebutton"; import CreateTournament from "./createtournament.js"; import TournamentOverview from "./tournamentoverview.js"; import TournamentManager from "./managetournament.js"; @@ -8,15 +7,13 @@ import TournamentAnnouncement from "./tournamentannouncement"; import TournamentMatches from "./tournamentmatches"; import TeamEditor from "./teameditor"; import Appbar from './components/appbar'; - import { Button, Container, Typography, Grid, Box } from "@mui/material"; import { Card, CardActions,CardACtionsArea, CardContent, CardHeader, CardMedia, Collapse, Paper } from "@mui/material"; import AddCircleIcon from '@mui/icons-material/AddCircle'; -import { maxWidth, palette } from "@mui/system"; function CreateButton(props) { return ( - + - - ); -} - function TournamentListItem(props) { return ( - - {props.tournament.name} - - - {props.tournament.description} - - - Start: {props.tournament.startTime.toLocaleString()} - - - End: {props.tournament.endTime.toLocaleString()} - - - Players todo / {props.tournament.teamLimit} - + {props.tournament.name} + {props.tournament.description} + Start: {props.tournament.startTime.toLocaleString()} + End: {props.tournament.endTime.toLocaleString()} + Players todo / {props.tournament.teamLimit} + - - + + + + - - + + + + @@ -97,7 +77,7 @@ function TournamentList() { let [tournamentList, setTournamentList] = React.useState([]); React.useEffect(() => { - fetch("http://10.24.1.213:3000/api/tournament/getTournaments") + fetch(process.env.REACT_APP_BACKEND_URL + "/api/tournament/getTournaments") .then(res => res.json()) .then(data => { @@ -167,9 +147,9 @@ export default function App() { } /> } /> - } /> - } /> - } /> + } /> + } /> + } /> } /> - + , document.getElementById("root") ); diff --git a/src/client/src/managetournament.js b/src/client/src/managetournament.js index 0a57bc7..bab9d7c 100644 --- a/src/client/src/managetournament.js +++ b/src/client/src/managetournament.js @@ -8,11 +8,11 @@ import { useParams } from 'react-router-dom' import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider } from '@mui/material' function ManageTournament(props) { - const { id } = useParams() + const { tournamentId } = useParams() let [tournamentInfo, setTournamentInfo] = React.useState([]); React.useEffect(() => { - fetch(`http://10.24.1.213:3000/api/tournament/${id}`) + fetch(process.env.BACKEND_URL + `/api/tournament/${tournamentId}`) .then(res => res.json()) .then(data => { diff --git a/src/client/src/teameditor.js b/src/client/src/teameditor.js index f6daae6..d8959b6 100644 --- a/src/client/src/teameditor.js +++ b/src/client/src/teameditor.js @@ -1,15 +1,7 @@ import * as React from "react"; -import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; +import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom"; import Appbar from "./components/appbar"; -import { - Button, - TextField, - MenuItem, - InputLabel, - Select, - Container, - Slider, -} from "@mui/material"; +import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider} from "@mui/material"; function TeamChanger() { return ( @@ -41,7 +33,7 @@ var teams = { "team 3": ["ola", "ole", "ost"], "team 4": ["christine", "kristine", "kristhine"], }; -function TeamList() { +function TeamList(props) { const [teamInput, setteamInput] = React.useState(""); const [membersInput, setmembersInput] = React.useState(""); React.useEffect(() => { @@ -49,6 +41,7 @@ function TeamList() { document.getElementById("membersInput").value = membersInput; }); return ( + <>
Registered teams:
    @@ -58,38 +51,41 @@ function TeamList() { onClick={() => { setteamInput(team); setmembersInput(players); - }} - > + }}> {team} ))}
-
- ); -} - -function TeamRemover() { - return ( + ,
- Remove team:{" "} - - -
+ Remove team:{" "} + + + + + {/* Link to {props.tournament.id} when teams can be fetched */} + + + ); } -function Save_Button() { - return ( - - - - ); -} +// function TeamRemover() { +// return ( +// 'lol' +// ); +// } + +// function Save_Button() { +// return ( +// 'lol' +// ); +// } export default function TeamEditor() { return ( @@ -97,8 +93,8 @@ export default function TeamEditor() { - - + {/* + */} ); } diff --git a/src/client/src/tournamentoverview.js b/src/client/src/tournamentoverview.js index dbeb6d0..e575f48 100644 --- a/src/client/src/tournamentoverview.js +++ b/src/client/src/tournamentoverview.js @@ -1,56 +1,139 @@ import * as React from "react"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; -import ManageButton from "./components/managebutton"; import Appbar from './components/appbar'; +import { useParams } from 'react-router-dom' +import { Button } from "@mui/material"; +import TournamentBracket from "./components/tournamentBracket"; -// Test data -// {"status":"OK","data": -// [ -// {"id":1, -// "tournamentId":1, -// "parentMatchId":null, -// "team1Id":null, -// "team2Id":null, -// "winnerId":null} +function TournamentTier(props) { + let roundTypes = ["finals", "semifinals", "quarterfinals", "eighthfinals"]; + let connector; + if (props.tier != 0) { + connector =
+
+
+
; + } -function RenderBrackets(params) { - let teams = 16; - let groups = Math.log2(teams); - // Number of matches, python equivalent: sum([2**groupNumber for groupNumber in range(groups)]) - let matches = [...Array(groups).keys()].map(num => Math.pow(2, num)).reduce((a, b) => a + b); - return ( - <> - {new Array(groups).map((group, i) => { - return ( -
Group {i}
- ); - })} - - ); + return
+
+ {props.matches.map((match, i) => { + return + })} +
+ {connector} +
+
} -function OverviewButtons(params) { - return ( - <> -
- - - - {/* - - */} - - ); +function Match(props) { + let team1; + let team2; + if (props.match.team1Id != null) { + team1 =
{props.match.team1Id}
; + } else { + team1 =
TBA
; + } + + if (props.match.team2Id != null) { + team2 =
{props.match.team2Id}
; + } else { + team2 =
TBA
; + } + + return
+
+ {/*
{if (props.match.team1Id) { props.match.team1Id} else { "TBA" }}
+
{props.match.team2Id}
*/} + {team1} + {team2} +
+
; +} + +function BracketViewer(props) { + const [tournament, setTournament] = React.useState(null); + const [matches, setMatches] = React.useState([]); + const [teams, setTeams] = React.useState([]); + React.useEffect(() => { + fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}`) + .then(res => res.json()) + .then(data => { + if (data.status != "OK") { + // Do your error thing + console.error(data); + return; + } + let tournament = data.data; + setTournament(tournament); + }) + .catch((err) => console.log(err.message)); + + + fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}/getMatches`) + .then(res => res.json()) + .then(data => { + if (data.status != "OK") { + // Do your error thing + console.error(data); + return; + } + let matches = data.data; + let tiers = matches.reduce((tiers, match) => { + if (tiers[match.tier] == undefined) { + tiers[match.tier] = []; + } + tiers[match.tier].push(match); + return tiers; + }, {}); + + tiers = Object.values(tiers); + tiers = tiers.reverse(); + + setMatches(tiers); + }) + .catch((err) => console.log(err.message)); + + fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}/getTeams`) + .then(res => res.json()) + .then(data=>{ + if(data.status != "OK"){ + console.error(data) + return; + } + let teams = data.data; + setTeams(teams); + }) + .catch((err) => console.log(err.message)); + + }, []); + + return
+ {matches.map(tier => { + let tierNum = tier[0].tier; + return + + })} +
; } export default function TournamentOverview(props) { // Use-effect hook here + const { tournamentId } = useParams(); + return ( <> - - - + + + + + + + + ); } diff --git a/src/package-lock.json b/src/package-lock.json new file mode 100644 index 0000000..f770275 --- /dev/null +++ b/src/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "src", + "lockfileVersion": 2, + "requires": true, + "packages": {} +}